belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
HTML >>>

1.4. Структура html-документа

Рассмотрим исходный текст веб-страницы более подробно. В нашем случае присутствует 11 тегов: <!DOCTYPE html>, <html>, <head>, <!-- Задаем кодировку текста. -->, <meta charset="utf-8">, <title>, </title>, </head>, <body>, </body>, </html>.

Тег <!DOCTYPE html> относится к одиночным тегам. Он пишется в первой строчке кода и формирует пустой элемент разметки, который сообщает браузеру о типе текущего документа. Дело в том, что версий HTML несколько. Поэтому, чтобы браузер мог правильно отобразить документ, необходимо указывать используемую в документе версию языка HTML. Старыми версиями мы пользоваться не будем, а для всех версий HTML, начиная с 5.0, было решено опустить всю лишнюю информацию и в качестве атрибута просто указывать html.

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

Текст комментариев на странице не отображается, но их использование переоценить практически невозможно. Ведь любой программист на собственном опыте знает, что по прошествии определенного времени разобраться даже в собственном коде становится все сложнее. Комментарии же позволяют:

В любом случае, комментарии ускоряют как разработку кода, так и его отладку в дальнейшем.

Использование одних комментариев внутри других недопустимо. Это может привести к неправильному отображению текста документа или даже полной неработоспособности кода. Кроме того, при использовании комментариев внутри элемента 'title' (о нем позже) они будут считаться обычным текстом и будут выведены в заголовке окна браузера.

Неправильное использование комментариев показано в примере 1.4.

<!DOCTYPE html>
<html>
	<head>
		<!-- Задаем <!--кодировку--> текста. -->
		<meta charset="utf-8">	
		<title>Неправильное использование комментариев</title>
	</head>

	<body>
		Всем привет от HTML!
	</body>
</html>

Пример 1.4. Неправильное использование тегов комментариев

Теги <html>, <head> и <body> являются представителями парных тегов, т.к. они всегда используются в паре с соответствующими закрывающими тегами </html>, </head> и </body>. Это самые известные теги языка HTML. Они используются при разметке любого html-документа.

Первая пара тегов <html> и </html> формирует контейнер 'html', который вмещает все остальное содержимое веб-страницы. Поэтому, открывающий тег <html> пишется сразу же после тега определения типа документа <!DOCTYPE html>, затем записываются все остальные элементы документа, и уже в самом конце ставится закрывающий тег </html>, свидетельствующий об окончании html-документа (см. пример 1.1).

Вторая пара <head> и </head> формирует элемент разметки, называемый заголовком документа (от англ. head). Он располагается после открывающего тега <html> и предназначен для хранения служебных тегов с метаданными, которые сообщают браузеру информацию, необходимую для работы с данными страницы.

Одним из таких служебных тегов является тег <meta charset="utf-8">. Здесь идентификатор charset представляет собой атрибут тега, а строка "utf-8" – значение данного атрибута. Благодаря этому атрибуту, браузер понимает, что при отображении текста необходимо использовать кодировку utf-8, указанную в качестве его значения. Более подробно тег <meta> мы рассмотрим в дальнейшем. Отметим лишь, что он относится к одиночным тегам и, следовательно, используется без закрывающего тега, формируя пустой элемент разметки.

Также в заголовке документа присутствует еще один служебный элемент, сформированный парным тегом <title>. Элемент предназначен для определения заголовка страницы, который записывается в виде обычного текста между открывающим и закрывающим тегами элемента и отображается браузерами не на самой странице, а в качестве подписей вкладок страниц над адресной строкой или возле нее (см. пример 1.2).

Ну, и наконец, третья пара тегов <body> и </body> формирует элемент разметки, называемый телом документа (от англ. body). Тело документа располагают сразу же после заголовка документа. В него помещают всю информацию, которую необходимо вывести на экран, а также теги, отвечающие за форматирование этой информации. В нашем примере 1.1 в теле документа расположен обычный текст, который мы и видим на экране.

Контрольные вопросы и задания

  1. Перечислите основные элементы разметки в той последовательности,
    в которой они следуют в документе.

Словарь новых английских слов

hypertext [ˈhʌɪpətɛkst] – гипертекст.
mark [mɑ:k] – отмечать, маркировать, метка.
language [ˈlaŋɡwɪdʒ] – язык.
wide [waɪd] – широкий.
web [web] – паутина, сетка.
width [wɪtθ] – ширина.
height [haɪt] – высота.
head [hed] – заголовок, голова.
body [ˈbɔdɪ] – тело.
footer [ˌfutə] – нижний колонтитул, 'подвал'.
article [ˈɑːtɪk(ə)l] – статья.
navigation [,nævi'gei∫ən] – навигация, передвижение.
charset [ˈtʃɑ:set] – кодировка.
inline [inˈlaɪn] – строчный.
block [blɔk] – блок, блочный.
background [ˈbakɡraʊnd] – фон, задний план.
title ['taitl] – заглавие, название, надпись.
edit ['edit] – редактировать, правка, редактирование.
content [kənˈtɛnt] – содержимое, содержание.
check [tʃɛk] – проверять, проверка, галочка, птичка.
sheet [ʃiːt] – лист, страница, таблица.
span [spæn] – интервал.
window [ˈwɪndəʊ] – окно.
code [kəʊd] – код.
example [ɪɡˈzæmpl] – пример, образец.
aside [ə'said] – в стороне, отдельно, кроме.
color [ˈkʌlər] – цвет, краска.
blue [blu:] – синий, голубой.
yellow ['jeləu] – желтый.
red [red] – красный.
green [gri:n] – зеленый.
grey [grei] – серый.
black [blæk] – черный.
white [wait] – белый.
orange ['ɔrindʒ] – оранжевый.
violet ['vaiəlit] – фиолетовый.
hidden ['hidn] – скрытый, скрывать, прятать.
access [ˈækses] – доступ.
key [ki:] – ключ, клавиша, идентификатор.
translate [transˈleɪt] – переводить.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх