Что такое HTML. Структура HTML-документа

 

HTML. Что это такое

Путь создания сайта начинается с изучения языка HTML. HTML (HyperText Mark-up Language) - язык гипертекстовой разметки - и больше нам знать пока не нужно. То что вы видите при просмотре любой интернет-страницы - это интерпритация вашим браузером HTML-кода. Чтобы посмотреть как выглядит HTML-код, кликните на интернет-странице правой кнопкой мыши и в выпавшем меню выберите "Просмотр HTML-кода" (или примерно так, в зависимости от вашего браузера).

HTML-код состоит из HTML-тегов.

Тег

Тег - элемент HTML-языка, который сообщает браузеру как отображать тот или иной объект, элемент интернет-страницы (веб-документа).

Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">". Обычно имеются два тэга – открывающий (напр.:<body>) и закрывающий (</body>). Различие между ними в том, что в закрывающем имеется слэш "/". Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.

Атрибут

Атрибут тега - это дополнительные параметры для отображения содержимого тега. Атрибут всегда распологается внутри открывающего тега. После знака равенства прописывается значение атрибута, заключенное в двойные кавычки.

Например:

<p align="center">Абзац текста, выровненный по центру.</p>

Это означает, что текст между тегами <p> и </p> будет представлен в виде абзаца (или параграфа), выравнивание будет задано по центру.

А браузер этот код представит так:

Абзац текста, выровненный по центру.

Основные HTML-теги вы можете посмотреть на этой странице.

Структура HTML-документа

Любой HTML-документ начинатся со строки, сообщающей браузеру о версии языка HTML, которой соответствует текущий HTML-документ. Так как на этом сайте рассказывается о языке HTML 4.01, то первая строка HTML-документа версии 4.01 выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

Между тегами <html> и </html> должны присутствовать еще два обязательных элемента: голова ( теги <head> и </head>) и тело документа (теги <body> и </body>).

Основной элемент головы документа - двойной тег <title>...</title>. В этом теге прописывается заголовок или название HTML-документа. В голове также находится вся техническая информация: различные мета-теги, таблицы стилей подключенные к этой странице, скрипты и т.п. Посетителю сайта содержимое головы не видно.

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

Таким образом, структура HTML-документа выглядит следующим (пардОн) образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>Название HTML-документа</title>

</head>

<body>

Здесь помещается все то, что вы хотите показать посетителям.
Текст, картинки и все, все, все...
. . . . .

</body>

</html>

Строка <!DOCTYPE…> сообщает о версии языка. Не запоминайте ее, просто скопируйте и вставляйте в начало каждой HTML-страницы. Далее открывается тег <html>. Затем открываем голову, в которой прописываем заголовок и закрываем голову. Открываем тело <body> и пишем основной контент. Закрываем тело </body>, закрываем </html>. Это конец документа.

Это тот минимум тегов, без которого не обходится ни один HTML-документ.

Вставка комментариев

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

Например:

<html>
. . .

<!-- Начинаем работу с телом документа -->

<body>

<!-- Всталяем таблицу с перечнем городов-Героев -->

. . .

</body>

<!-- Все. Закончили работу с телом-->

</html>

Не ленитесь вставлять комментарии. Это сэкономит вам кучу времени. Через пару месяцев вам уже будет не просто разобраться в собственном коде. И комментарии здорово помогают.

Внутри тега <title> комментарии (и любые другие теги) трактуются браузером как текст и будут видны в заголовке окна. Проще говоря, тег <!-- --> внутри тега <title> не действует.

Если вы уже ознакомились с основными HTML-тегами, то можно переходить к созданию

Дорогой посетитель. Сохрани для себя эту статью
и поделись ссылкой с друзьями