Программирование HTML-документов

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

В HTML-документе все служебные команды (теги) заключены между угловыми скобками < и >. Большинство команд имеют как открывающий <…>, так и закрывающий </…> теги. А конструкция вида <…> … </…>, состоящая из открывающего и закрывающего тегов, называется контейнером.

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


	Для более полного представления о веб-разработке ознакомьтесь с лайфхаками нашего информационного партнёра Мазаяки!


<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>Здравствуйте! Это моя первая самостоятельная страничка!</P>
</BODY>
</HTML>

В приведённом примере продемонстрирована структура простейшей HTML-страницы. Как уже было упомянуто ранее, HTML-документ начинается со служебного слова <HTML>. Данный тег символизирует начало документа и указывает браузеру на то, что перед ним именно HTML-документ. В конце документа указывается закрывающий тег </HTML>. Между двумя этими тегами располагаются заголовок и тело документа.

Форматирование веб-страниц

По аналогии со строением человека, заголовок <HEAD> структурно расположен строго выше тела <BODY>. В примере (см. Листинг 1) заголовок содержит контейнер <TITLE>…</TITLE>, который служит для определения названия веб-страницы. И в случае если вы решите задать документу название «Мой собственный проект», необходимо в заголовке разместить следующую конструкцию: <TITLE>Мой собственный проект</TITLE>.

Для отображения текстового содержимого на веб-странице можно воспользоваться контейнером <P>…</P>, который используется для разделения текста на абзацы. И если название и другие свойства документа указываются в заголовке <HEAD>, то все содержимое (контент) размещается непосредственно в теле документа между тегами <BODY> и </BODY>.

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

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

Удостовериться в этом достаточно просто. Нужно лишь открыть текстовый редактор и скопировать в него HTML-код из примера (см. Листинг 2). Пользователи операционной системы Windows в качестве редактора текста могут использовать встроенную в ОС программу Блокнот. Пользователи иных ОС могут воспользоваться аналогом Блокнота, инсталлированном в операционную систему. Кроме того, существуют специальные программные средства для веб-разработки.


<HTML>

<HEAD>

<TITLE>Заголовок веб-страницы</TITLE>

</HEAD>

<BODY>

<P>Здравствуйте! Это моя первая самостоятельная страничка!</P>

</BODY>

</HTML>

После запуска текстового редактора и размещения в нём программного кода следует сохранить файл с указанием расширения .html (например, index.html). Осуществить это можно при помощи команды «Сохранить как…» (Save as…). И если затем открыть в браузере сохраненный файл, должна будет отобразиться ваша собственная веб-страница (см. Иллюстрации).

Иллюстрации

Иллюстрированные примеры

Иллюстрированный пример собственного программного HTML-кода

Регистр

В рамках форматирования веб-страниц отдельное внимание следует уделить регистру (т.е. представлению текста строчными либо заглавными символами). Служебные теги не чувствительны к регистру. И в зависимости от личных предпочтений можно писать, к примеру, <BODY>, <body> или даже <Body>. Но весь текст, заключённый между тегами, будет отображаться в браузере с учетом регистра. И если текстовый контент будет написан прописными (заглавными) буквами, он точно также должен быть отображён и в браузере.

Также для управления регистром можно воспользоваться специальными настройками, изменяющими свойства текста. Так, например, для тегов можно указать определённые атрибуты или параметры. И если для абзаца <P> при описании стилей оформления задействовать специальный параметр text-transform с присвоенным значением capitalize, весь текст абзаца будет трансформирован таким образом, что каждое новое слово будет начинаться с заглавной буквы. Тем не менее, в случае если текст будет набран ЗАГЛАВНЫМИ символами, он все же не должен подвергнуться изменению.