Файл: ОСНОВЫ ЯЗЫКА ПРОГРАММИРОВАНИЯ HTML.pdf

Сделать презентацию

Скачать файл (0,40Мб)

Заказать решение

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 04.04.2023

Просмотров: 164

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Введение

1.Основные сведения о языке программирования

2. Описание создания сайта

3. Алгоритм практической работы

Заключение

Список используемой литературы

PORT. Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.

PATHNAME. Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по-разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe

В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). При описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слеши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).

#ANCHOR. Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство браузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна браузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тега NAME, как это будет описано далее.

2.2.Структура ссылок в HTML-документе.

Пока что мы рассмотрели только внешний вид URL. Для того, чтобы браузер отобразил ссылку на URL, необходимо отметить URL специальными тегами в HTML-документе. Синтаксис HTML, позволяющий это сделать - следующий:

<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>

Тег <A HREF="URL»> открывает описание ссылки, а тег </A> - закрывает его. Любой текст, находящийся между данными двумя тегами, подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).

Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создайте маркер раздела. Синтаксис данного маркера следующий:

<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке </A>

2. Создайте ссылку на данный маркер:

<A HREF="#named_anchor"> Текст </A>

Символы "#ex1" сообщает вашему браузеру, что необходимо найти в данном HTML-документе маркер с именем "ex1". Когда пользователь щелкнет мышью на строке "Раздел 1", браузер перейдет сразу к разделу 1.

2.3 Графика внутри документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега <IMG...ISMAP>. Использование данного тега позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый — это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тега:

Опишем элементы синтаксиса тега:

URL - обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает веб-браузеру, где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.
ALT="text"- данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство веб-браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тег ALT рекомендуется, если ваши пользователи используют веб-браузер, не поддерживающий графический режим, например Lynx.
HEIGTH=n1 - данный необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые веб-браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.
WIDTH=n2: - параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселях.
ALIGN -данный параметр используется, чтобы сообщить веб-браузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство веб-браузеров располагает изображение в левой части экрана, а текст справа от него.
ISMAP- этот параметр сообщает браузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML.

Пример использования данного тега:

С версии HTML 2.0 у тега <IMG> появились дополнительные параметры:

Новые параметры:

BORDER - данный параметр позволяет автору определить ширину рамки вокруг рисунка.
VSPACE -позволяет установить размер в пикселях пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
HSPACE - то же самое, что и VSPACE, но только по горизонтали.

Большинство браузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.

Описание фонового рисунка включается в тег BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">.

Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тег <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

BGCOLOR - цвет фона документа

TEXT - цвет простого текста документа

LINK - цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">. Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Используя тег <HR>, вы можете разделить текст горизонтальной чертой. Формат тега:

Параметры тега:

SIZE - толщина линии в пикселях.
WIDTH - ширина линии в пикселях или процентах от ширины окна веб-браузера.
ALIGN - Расположение на экране (слева | по центру | справа).
NOSHADE - по умолчанию линия представлена в 3D виде с тенью. Данный параметр позволяет представить линию просто однотонной темной полоской.

2.4.Добавление стилей в документ

HTML позволяет использовать различные стили шрифтов для выделения текстовой информации в ваших документах. Вот короткий список стилей, поддерживаемых большинством браузеров:

bold (жирный)
italic (наклонный)
mono spaced (type writer - с использованием фиксированных шрифтов)

Вы можете комбинировать различные виды стилей, например жирный и наклонный.

Стиль	Элемент или тег	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

Таблица №1: Основные стили текста

Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:

Курица - это птица

Курица – это птица

Дополнительные стили:

big (большой)
small (маленький)
sub (подстрочник)
sup (надстрочник)

Стиль	Элемент или тег	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст _{подстрочник}
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст ^{надстрочник}

Таблица №2: Дополнительные стили текста

Размер шрифта может быть изменен при помощи тега: . Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тега: <BASEFONT SIZE=n>

Например: и зм ен ен и е

Цвет шрифта может быть изменен при помощи тега:

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

Красный Зеленый Синий.

3. Алгоритм практической работы

3.1.Создание Веб-сайта на практике.

Для визуализации и понимания, как язык HTML работает на практике – был создан веб-сайт, содержащий под главу 2.4. данной курсовой работы.

При написании веб-сайта мною использовались:

Среда разработки Visual Studio Code 1.37.1
Расширение HTML CSS Support для выделения тегов.
Расширение HTML Snippets для быстроты написания кода.
Расширение Live Server для тестирования веб-сайта.
Веб-браузер Safari
Представленная ранее информация в данной работе.

Код HTML-документа будет доступен в приложении 1.

Изображения (снимки экрана) открытого в веб-браузере веб-сайта будут доступны в приложении 2.

Заключение

Язык программирования HTML, а точнее язык гипертекстовой разметки является основой для всех современных веб-сайтов. Данный язык постоянно развивается, появляются новый возможности.

Данный язык очень гибкий, что позволяет веб-мастеру полностью настраивать вид веб-страницы.

Для создания простого веб-сайта, имеющего задачу донести информацию до пользователя, достаточно знать строение HTML-документа и основные теги.

Основываясь на информации, изложенной в этой работе – любой человек сможет создать свой веб-сайт, имея под рукой компьютер и текстовый редактор.

Список используемой литературы

HTMLBOOK [Электронный ресурс] /. — Электрон. текстовые дан. — 2019. — Режим доступа: http://htmlbook.ru, свободный
Введение в HTML [Электронный ресурс] /. — Электрон. текстовые дан. — MDN contributors, 2019. — Режим доступа: https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML, свободный
HTML5BOOK [Электронный ресурс] / Елена Назарова. — Электрон. текстовые дан. — 2019. — Режим доступа: https://html5book.ru/html-html5/, свободный
Справочник HTML [Электронный ресурс] / Влад Мержевич. — Электрон. текстовые дан. — 2018. — Режим доступа: https://webref.ru/html, свободный
HTML Tutorial [Электронный ресурс] /. — Электрон. текстовые дан. — W3Schools, 2019. — Режим доступа: https://www.w3schools.com/html/, свободный
HTML5 для веб-дизайнеров /Кит Джереми. — 3-е изд. — A Book Apart, 2017. — 110с.
HTML5, CSS3 и Web 2.0 /Владимир Дронов. — 1-е изд. — Москва: bhy, 2016. — 602с.
HTML 5. Путеводитель по технологии /Сухов Кирилл Константинович; Мовчан Д. А. — Обн. изд. — Москва: ДМК-Пресс, 2013. — 352с.

Приложение 1

<!DOCTYPE html>

<html>