Файл: Основы программирования на языке HTML ( Сущность и содержание веб-программирования ).pdf

Введение

Для создания web-страниц, из которых состоит сайт, используется описательный язык HTML (HyperText Markup Language – язык разметки гипертекста).

Для автоматизированной разработки web-документов существуют специальные редакторы (такие как Front Page, Dreamweaver и другие), которые позволяют создавать странички из готовых элементов. При работе с ними не приходится сталкиваться с исходным HTML-кодом – он остается скрытым за удобной графической оболочкой. Разработчик просто передвигает блоки текста, вставляет картинки и таблицы, выбирает фон и цвет отдельных элементов, а редактор переводит все это на язык HTML. Однако прежде чем работать в среде визуальных редакторов, необходимо познакомиться с самим языком HTML и написать несколько страниц самостоятельно. Будем использовать конструкции последней версии языка HTML 4.0, которые поддерживаются большинством браузеров.

Прежде всего, необходим текстовый редактор, позволяющий сохранять файлы в кодах ASCII. Самым простым подходящим для этого редактором является Блокнот, который встроен в операционную систему Windows. Сохранить файл HTML-документа обязательно следует с расширением htm или html.

Объект исследования – язык HTML.

Предмет исследования – программирование на языке HTML.

Цель курсовой работы – описать особенности программирования на языке HTML.

Задачи курсовой работы:

1. Изложить определение веб-программирования.

2. Описать структуру HTML-языка.

3. Структурировать порядок создания HTML-документа.

4. Описать внешний вид HTML-документа.

1. Сущность и содержание веб-программирования

1.1 Определение веб-программирования

История развития Веб-программирование возникло сравнительно недавно и быстро развивается, поэтому имеет неустановившуюся терминологию. В нем используется много синонимов, некоторые термины противоречат друг другу. Приведем определения основных понятий, которые будут использоваться в данном практикуме.

Веб-программирование – область программирования, служащая для разработки сайтов.

Сайт – совокупность веб-страниц, объединенных общей темой и хранящихся на одном веб- сервере.

---

Веб-страница – документ, хранящийся на веб-сервере или создаваемый по запросу пользователя и имеющий уникальный адрес. Во всемирной паутине адрес называют URL (Uniform Resource Locator – унифицированный указатель ресурсов). URL главной страницы сайта называют адресом сайта. Веб-страница имеет следующие синонимы: страница, HTML-страница, гипертекстовый документ, HTML-документ, веб-документ^[1].

Веб-страницы делятся на статические и динамические, активные и пассивные.

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

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

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

Активная страница содержит в себе скрипт, выполняемый на стороне браузера в ответ на действия пользователя.

Итак, страница одновременно может быть^[2]:

• динамической и активной,

• динамической и пассивной,

• статической и активной,

• статической и пассивной.

Разделение страниц на статические и динамические позволяет существенно повысить производительность веб-серверов. Время выполнения запроса на выдачу статической страницы в сред- нем намного меньше, чем на выдачу динамической, так как для формирования последней требуется выполнить скрипт. Значительная часть времени выполнения скрипта приходится на запросы к базе данных. Веб-сервер, способный организовать создание динамических страниц, имеет сложную структуру и работает относительно медленно. Поэтому созданы более простые и быстрые легкие веб-серверы, предназначенные для обработки только статических страниц.

HTML – язык разметки текста, и многие специалисты не относят его к языкам программирования, т.е. рассматриваемый текст не программа. С другой стороны, PHP – язык высокого уровня, а приведенный текст – программа на PHP. Проблема возникшего противоречия в очень узком интуитивном представлении о программе.

---

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

Например, можно указать тип данных, которые должны вводиться в поле. Если пользователь попробует ввести что-то не то, у него не получится. Сами же поля стали более дружелюбными: пользователь может выбрать дату, время и даже цвет, может указать число из интервала, корректный адрес электронной почты или ссылку на сайте.

Появился встроенный плеер — теперь не нужно подключать Adobe Flash Player или другие плагины. Визуальная часть перетаскивания элементов теперь реализуется на HTML и CSS, если добавить атрибут draggable.

Для создания полноценной страницы все еще нужно подключить таблицу стилей CSS и язык скриптов JavaScript. В CSS прописываются отступы, выравнивания, позиционирование, прозрачность, границы, тени и многое другое. Можно даже указать стили для разных состояний элемента — например, поменять фон кнопки при наведении^[3].

Работа с действиями пользователей пока в основном реализуется на JS. Атрибут draggable хоть и создает видимость перетаскивания, но на самом деле событие должно обрабатываться на JavaScript. HTML позволяет обмениваться данными с другими страницами, но чтобы их обработать, пригодится PHP.

Пока HTML стремится к тому, чтобы ускорить разработку и снизить нагрузку на браузер, но без других языков ему пока не обойтись, как и им без него^[4].

1.2 Структура HTML-языка

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

Теги бывают парными и одиночными. Парные теги образуют контейнер (блок), который ограничивает область действия команды. Они имеют одно и то же имя, но в закрывающем стоит знак /. Например, если мы хотим указать, что часть текста должна быть заголовком первого уровня, то этот текст ограничивается соответствующими открывающим и закрывающим тегами^[5]:

<H1> Заголовок страницы </H1>

Имеются одиночные теги, для которых конец команды ставить не обязательно, например тег <P>, отделяющий друг от друга абзацы.

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

---

<P align=”left”>

Порядок следования атрибутов не важен. Они действуют от открывающего тега, в котором заданы, до закрывающего или только внутри тега, если тег не имеет парного. Несколько атрибутов подряд записываются через пробелы. Многие атрибуты не являются обязательными. Когда для тега не указан такой параметр, браузер будет подставлять некоторое стандартное его значение.

Нужны ли кавычки при записи значений атрибутов? По стандарту HTML значение атрибута может быть записано без кавычек, если запись содержит только буквы, цифры, дефис и точки. Например, следующие две команды эквивалентны:

<P align=”center”>

<P align=center>

Кавычки рекомендуется записывать, если указываются имена файлов, адреса страниц в Интернете:

<A href=”./02/02.htm”>

Если значение атрибута записывается несколькими словами (содержит пробелы) – кавычки обязательны:

<IMG src=”pictur.gif” alt=”название картинки”>

Допускается перенос строк внутри тега между его параметрами. В следующем примере  один и тот же фрагмент кода записан по-разному.

<IMG src="/images/title2.gif" width="438" height="118"

alt="Вид заголовка в браузере Internet Explorer">

<IMG src="/images/title2.gif"
alt="Вид заголовка в браузере Internet Explorer"
width="438"
height="118">

В тегах могут применяться только символы латинского алфавита, а в значениях атрибутов – любые символы. При наборе тегов можно использовать как прописные, так и строчные буквы. Это означает, что, например, <HEAD> будет восприниматься браузером так же, как <Head> или <head>.

Если какой-либо тег или его атрибут был написан неверно, то браузер пропустит подобный тег и будет воспроизводить текст так, словно тега и не было.

Для вставки в текст специальных символов и символов, которые нельзя ввести с клавиатуры, в языке HTML используется управляющий символ & – коммерческое «и» (амперсант). Спецсимволы начинаются всегда с амперсанта и заканчиваются точкой с запятой. Например, для вывода самого символа амперсант надо записать последовательность знаков &amp;, для вывода угловых скобок используются последовательности &lt; и &gt;, символ с кодовым номером 182 может быть задан последовательностью &#182;.

HTML-документ имеет определенную структуру. Он обязательно начинается тегом <HTML> и заканчивается </HTML>, состоит из заголовочной части, в которой находится служебная информация для браузера по работе с документом и собственно тело документа – содержание сайта, которое мы и видим в окне браузера. Эти части ограничиваются соответствующими парными тегами – <HEAD> (от англ. голова) и <BODY> (от англ. тело).

---

Базовая структура любого HTML-документа:

<HTML> <HEAD> <TITLE> Заголовок страницы </TITLE> </HEAD> <BODY> Текст и графика, видимые на web-странице </BODY> </HTML>

Начало HTML-документа Начало заголовочной части Этот текст появляется в окне браузера Конец заголовочной части Содержимое сайта Конец HTML-документа

В разделе заголовка, ограниченном тегами <TITLE> и </TITLE>, определяется название документа, которое должно описывать его содержимое и обычно содержит 5-6 слов. Это название отображается браузерами в строке заголовка окна программы, а также анализируется поисковыми системами. Раздел заголовка не может содержать в себе другие теги^[6].

Изучая язык HTML очень полезно просматривать и анализировать код web-страниц, созданных опытными мастерами. Это помогает быстрее освоить структуру языка.

HTML-документ может содержать комментарии, дающие пояснения человеку, читающему код. Комментарий записывается при помощи специального блока <!-- -->, например:

<!-- Главная страница -->

Текст, заключенный в теге комментария, не отображается на экране. Комментарии желательно использовать в редких случаях, когда это необходимо, например, для объяснения кода. Следует помнить, что они являются частью файла и передаются по сети вместе с документом.

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

Нельзя ориентироваться на определенные размеры окна документа. Браузер использует то окно, которое предоставил ему пользователь. Значит, одна и та же разметка может отображать программу на экран немного по-разному на разных компьютерах и даже на одном компьютере при разных его настройках.

Окно браузера может выглядеть так, как показано на рис. 1 или рис. 2:

Рисунок 1 - Окно браузера

Рисунок 2 - Окно браузера

То есть строки текста укорачивается или удлиняется в зависимости от размеров окна. Абзац выводится так, чтобы текст поместился в окне. При этом браузер не обращает внимания на то, как распределен абзац по строкам в HTML-документе. Поэтому любое количество идущих подряд пробелов на web-странице отображается как один. Это же правило относится к символам табуляции и переносу текста. Не ставьте дополнительных пробелов и знаков переноса в словах, поскольку это лишь увеличит скорость загрузки и отображения документа, но никак не изменит его вид в браузере^[7].

---