Структура HTML-документа
Основные понятия
Комментарий и контейнерные теги
Раздел заголовка head
Теги title и meta
Теги base и link
Контейнеры body, div и span
Расположение элементов
Специальные атрибуты
Основные понятия
HTML-документ хранится на диске компьютера в виде обычного текстового файла с расширением htm или html. Для редактирования этого файла достаточно открыть его в текстовом редакторе, например, Блокноте Windows. Также HTML-документ можно создать и редактировать в специальных редакторах визуальной разработки Web-сайтов, таких как Macromedia Dreamweaver или Microsoft FrontPage.
Готовый HTML-файл можно открыть в браузере (например, Internet Explorer), в котором его содержимое интерпретируется и отображается в виде Web-страницы.
HTML-документ имеет довольно простую структуру, основными элементами которой являются теги языка HTML.
Теги представляют собой некоторые предопределенные ключевые слова, заключенные в угловые скобки < и >. HTML-документ начинается с тега <HTML> и заканчивается тегом </HTML>, которые обозначают начало и конец HTML-документа соответственно. Между этими тегами могут находиться другие теги и обычный текст. Простейший HTML-документ имеет, например, такой вид:
<html>
Привет
</html>
Если его сохранить в файле с расширением htm или html и затем открыть файл в браузере, то отобразится только текст, т.е. Привет.
Большинство тегов позволяют включать параметры (атрибуты), задающие их некоторую спецификацию. Атрибуты могут задаваться просто именем или в виде:
имя_атрибута=значение.
Значение атрибута называют аргументом. Например, для вставки в HTML-документ изображения из графического файла, используется атрибут
src=”адрес графического файла”
Например, <img src=”picture.jpg”>. Здесь значением атрибута src является имя графического файла формата JPEG.
Тег может иметь один или несколько атрибутов или не иметь их совсем. Некоторые теги имеют обязательные атрибуты, которые нужно указывать, и необязательные атрибуты, которые задаются по мере необходимости. Например, в теге <img> обязательный атрибут src нужен для указания имени графического файла. Необязательными являются атрибуты width и height, определяющие ширину и высоту изображения в окне браузера. Если их не указывать, то изображение будет иметь свои размеры.
Атрибуты в теге можно записывать в произвольном порядке. Например, тег
<img src=”picture.jpg” width=100 height=200> и тег
<img width=100 height=200 src=”picture.jpg”> эквивалентны.
Ключевые слова, имена тегов и их атрибутов, могут быть записаны прописными или строчными буквами. Например, записи
<IMG SRC=”picture.jpg”> и
<img src=”picture.jpg”> эквивалентны.
Между открывающейся угловой скобкой < и именем тега не должно быть пробелов, иначе вся запись будет воспринята и отображена браузером как обычный текст. Однако между другими элементами в записи тега можно вставить любое число пробелов.
Теги, которые не может интерпретировать браузер (в том числе с неверно записанными именами), игнорируются им.
Комментарий и контейнерные теги
Для обозначения комментария используются знаки <! и >. Все, что находится между этими знаками, не отображается браузером, например, в следующем HTML-коде:
<html>
<! Комментарий>
<! img src=”picture.jpg”>
</html>
Таким образом, тег комментария можно использовать для пояснений в HTML-документе, а также для временного отключения тегов без их удаления из документа.
Содержимое HTML-документа можно записать в одну или несколько строк, например:
<html>
<img src=”picture.jpg”
width=100 height=200>
</html>
или
<html> <img src=”picture.jpg” width=100 height=200> </html>.
Парные теги, в которых открывающему тегу <тег> соответствует закрывающий тег </тег>, называют контейнерными тегами или просто контейнерами. Например, тег <html> является контейнером. Между открывающим и закрывающим одноименными тегами можно разместить другие теги.
Некоторые теги не являются контейнерами, то есть не имеют закрывающих тегов, например, тег <img>.
Для организации основных разделов HTML-документа используют следующие контейнерные теги:
<head> - раздел заголовка;
<body> - основной раздел (тело документа);
<style> - содержит таблицу стилей;
<script> - содержит сценарий (скрипт).
Эти теги не являются обязательными и используются по мере необходимости.
Тег <head> следует сразу за тегом <html> и может содержать другие теги, кроме <body>. Теги <head> и <body> указываются в документе не более одного раза и не могут содержать один другого.
Теги <style> и <script> могут встречаться в HTML-документе любое число раз, но не могут содержать другие теги. Внутри тега <style> записываются правила каскадных таблиц стилей (CSS), а тег <script> содержит код сценария (скрипта), написанного на языке JavaScript или VBScript. Обычно, но не всегда, их включают в раздел заголовка <head>.