Описание страницы (сайта) содержится в документе HTML, который представляет собой обычный текстовый файл. Документы HTML содержат программные коды, называемые тэгами. Тэги представляют собой последовательности символов, заключённые в угловые скобки (например, <P>).
Обычно тэги записываются прописными буквами. Все ключевые слова тэгов, являющиеся аббревиатурами слов английского языка, записываются буквами латинского алфавита. Например, слово IMG – это сокращение слова Image (изображение).
Тэг <HTML>
Документ HTML должен начинаться тэгом <HTML> и заканчиваться тэгом </HTML>. Некоторые тэги используются только парами, как, например, тэги <HTML>и</HTML>. При этом первый из них называется открывающим, а второй – закрывающим.
Есть тэги, используемы по одному. Примером такого тэга является тэг абзаца - <P>. Тэги могут содержать параметры, называемые атрибутами, которые, в свою очередь, могут иметь значения – аргументы.
Итак, если мы решили написать HTML-программу, то должны включить в неё два тэга:
<HTML>
…(здесь будут другие тэги программы)
</HTML>
Тэги <HEAD> и <BODY>
Документы HTML состоят из двух основных частей: заголовка и тела. Каждая из этих частей ограничивается соответствующей парой тэгов. Так, заголовок ограничивается парой тэгов <HEAD> и </HEAD>,а тело – тэгами <BODY> и </BODY>.В результате структура документа HTML выглядит следующим образом:
<HTML>
<HEAD>
…(здесь будет заголовок)
</HEAD>
<BODY>
…(здесь будут тэги тела программы)
</BODY>
</HTML>
Тэг <TITLE>
Заметим, что писать каждый тэг с новой строки или делать отступы совсем не обязательно, однако это улучшает читаемость программы.
Между тэгами <HEAD> и </HEAD>,обрамляющими заголовок документа, напишем ещё два тэга: <TITLE> и </TITLE>. С помощью этих тэгов обрамляется текст, который помещается в заголовок окна браузера. Пусть текст заголовка будет, например, таким: «Личная страница Малыша и Карлсона». Тогда программа примет следующий вид:
<HTML>
<HEAD><TITLE>Личная страница Малыша и Карлсона</TITLE></HEAD>
<BODY>
…(здесь будут тэги тела программы)
</BODY>
</HTML>
В теле нашей программы, т.е. между тэгами <BODY> и </BODY>напишем какой-нибудь текст, чтобы программа выглядела следующим образом:
<HTML>
<HEAD> <TITLE>Личная страница Малыша и Карлсона</TITLE></HEAD>
<BODY>
Приветствуем всех у нас на крыше!
</BODY>
</HTML>
Сохраним текст нашей программы в файле с расширением htm или html. Например, дадим имя файлу Карлсон.htm. В Блокноте наша программа будет выглядеть так:
Рис. 1. Пример HTML-кода в окне редактора Блокнот
А в браузере Internet Explorer он будет выглядеть так:
Рис. 2. Пример HTML-кода в окне Internet Explorer
Такие средства, как FrontPage или Word при создании вставляют в заголовок тэги <META> с различными атрибутами. Эти тэги используются для организации поиска вашей страницы на поисковых серверах.
При написании HTML-документов, особенно если в них содержится много тэгов, возникает необходимость вставки комментариев – поясняющих текстов, которые не должны быть видны при загрузке документа в браузере. Комментарии нужны разработчику документа. Для этой цели служит тэг <!>. Всё, что заключено между символами <!и>,считается комментарием и браузер не отображает эту информацию.
Тэг <CENTER>
Отметим ещё тэг <CENTER>, который позволяет располагать элементы по центру, какой бы ни была ширина окна браузера. Точнее, все элементы, заключённые между тэгами <CENTER> и </CENTER>, будут находиться в центре окна по его ширине, если только для них не указано специальное расположение. Если пользователь изменит размеры окна браузера, произойдёт новое выравнивание.
Рис. 3. Пример выравнивания текста с помощью тэга <CENTER>
Рис. 4. Просмотр в Internet Explorer
Заметим, что тэг <CENTER> можно применять не только к тексту, но и к графике, таблицам и другим элементам.
ТЕКСТЫ
Простой и наиболее распространённый способ представления информации на странице, хотя далеко не единственный – это текст. Вы можете создать текст, не уделяя особого внимания тому, как он будет выглядеть в окне браузера. Браузер отобразит его, используя свои настройки. Однако даже самый непритязательный пользователь хотел бы, что бы заголовки как-то отличались от основного текста размером и шрифтом, чтобы можно было выделить абзацы, пропустить строку и т.п. Всё это называется форматированием текста.
При оформлении текста используются специальные тэги. Рассмотрим некоторые из них.
Абзац
Тэг <BR> предписывает переход на новую строку. Тэг <P> является тэгом абзаца. Он переводит курсор на новую строку и ещё одну строку пропускает. Если не использовать эти тэги, то разбиение текста на строки будет определяться шириной окна браузера, так что вид текста может оказаться совсем не таким, как мы его себе представляем.