Структура html-документа
Файлы HTML – текстовые, имеют расширение *.htm или *.html.
Кроме обычного текста HTML-файл содержит лишь один тип управляющих конструкций, называемых тегами (tags). Иногда тег называют дескриптором.
Все теги, для того, чтобы отделить их от содержимого страницы, заключены в угловые скобки < >. Обычно теги парные: начальный и конечный теги. Конечный тег выглядит так же, как и начальный, но со слешем </>. Парный тег называют еще контейнерный, Некоторые теги не имеют обязательного парного тега, такой тег также называют непарный или одиночный.
Весь HTML-документ заключен между парным тегом <html> и </html>. Это обязательный тег.
Между тегами <head> и </head> содержится заголовочная часть. В нее входит конструкция <title> и </title>. Это название при загрузке документа появляется в строке заголовка броузера. Заголовок должен быть лаконичным, информативным и занимать одну строку. Заголовок документа – необязательный элемент, но мы рекомендуем всегда включать его в документ, т.к. элемент <title> используется поисковыми машинами при индексации WEB-страниц.
В элементе <head> также могут содержаться и другие теги, которые обеспечивают связи между различными документами и метод пересылки специальных сообщений определенному броузеру или другой программе.
Все тело страницы с графикой, текстом и гиперссылками на другие ресурсы Internet (т.е. содержательная часть) находится между тегами <body> и </body>.
Таким образом, структура HTML-документа выглядит следующим образом:
Запись <meta http-equiv=Content-Type content="text/html; charset=windows-1251"> означает кодировку кириллицы.
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<title>Название документа</title>
</head>
<body>
Содержимое страницы
</body>
</html>
При написании кода следует соблюдать ступенчатую структуру, т.е., если в тег А вкладывается тег В, то тег В обычно начинается с новой строки и отодвигается от края документа на определенное расстояние, обычно клавишей Tab. В таком виде код сайта легче читается и позволяет свободней ориентироваться в коде.
Задание 1
На диске D в папке Рабочая создайте папку под именем WEB_Ваша фамилия.
Создайте в ней папку Lab_1.
Откройте программу Блокнот командой Пуск→ Программы→ Стандартные → Блокнот.
Наберите текст, изображенный в листинге 1.
Сохраните документ в папке Lab_1 под именем fist.html
Закройте Блокнот.
Используя программу Проводник, зайдите в свою папку и запустите файл fist.html двойным щелчком. В окне броузера Internet Explorer WEB-страница должна иметь вид, как показано на рис. 1.
Листинг 1
Рис. 1. Вид страницы, html-код которой описан в листинге 1
Структура html-элемента Атрибуты
Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега.
Например, текст, помещенный внутри тегов <h1 align=”center”>Текст</h1>, будет выглядеть, как центрированный заголовок.
Пример:
На рис. 2 приведен вид этой HTML-страницы в броузере.
Рис.2. Пример использования атрибута align
Атрибут align указывает выравнивание элемента, в данном случае текста заголовка. Возможные значения данного атрибута представлены в таблице 1.
Таблица 1
align=”right” |
Выравнивает элемент по правому краю |
align=”left” |
Выравнивает элемент по левому краю |
align=”center” |
Выравнивает элемент по центру |
align=”justify” |
Выравнивает элемент по ширине |
В большинстве случаев атрибуты являются необязательными, но в их отсутствие интерпретатор HTML должен использовать значения по умолчанию, заданные в стандарте языка. Кавычки вокруг значения атрибута обязательны в тех случаях, когда значение это содержит какие-либо символы, кроме букв, цифр, точки или дефиса, но с точки зрения совместимости с XML, лучше пользоваться кавычками всегда.
Все атрибуты тегов Вы можете более подробно рассмотреть в справочнике на компакт-диске.
Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается.
Таким образом, структура HTML-элемента выглядит следующим образом (рис. 3).
Рис. 3. Структура HTML-элемента