Учебник по HTML

На сайт Информатика в школе • К оглавлению учебника

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

Терминология

Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать из определенным образом. Любая Web-страница представляет собой наор элементов. Одна из основных идей гипертекста возможность вложения элементов.

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

Пример: элемент, содержащий некоторый текст, ограничен начальным тегом (маркером) <P> и конечным тегом (маркером) </p>. Т.е. текст помещен между тегами как в контейнер. Здесь же можно увидеть, как осуществляется возможность вложения элементов. Тег <Font> вложен внутрь тега <P>, поэтому конечный тег </font> стоит перед </p>. В данном примере тег <P> указывает на то, что текст является отдельным абзацем, а тег <Font> задает формат шрифта, в нашем случае зеленый цвет шрифта.

<P> <font color="green">Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.</font> </p>

В результате тагого форматирования на экране компьютера мы увидим текст зеленого цвета в отдельном абзаце:

Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.

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

<P align="center"> Этот текст будет выровнен по центру экрана </p>

В данном примере атрибут align (выравнивание) расположен внутри тега <P>, следовательно он задает выравнивание этого абзаца. Значение атрибута равно "center", т.е. выравнивание абзаца будет по центру экрана. На экране мы увидим:

Этот текст будет выровнен по центру экрана.

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

Ниже приведена структура типичного Web-документа.

<HTML>	Этот тег указывает на начало HTML-документа
<HEAD>	Этот тег указывает на начало области заголовка Web-страницы. Служит для формирования обей структуры документа.
<TITLE>Структура Web-страницы</title>	Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна броузера.
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">	Этот тег несет служебную информацию и не отображается в экране броузера. В данном случае идет речь о кодировке Web-странички. Вам достаточно лишь каждый раз вставлять этот тег в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку windows-1251, наиболее распространенную на сегодняшний день.
<META name="Author" content="Ivanov Ivan">	Имя автора Web-страницы.
<META name="Keywords" content="WWW, HTML, docoment, страничка, структура">	Набор ключевых слов для поиска. Раньше этими словами пользовались поисковые машины, для отбора сайтов по тематике запроса. Сегодня эти слова поисковыми машинами практически не используются, однако полезно вставить этот тег на свою страничку и указать в нем ключевые слова, отражающие содержание вашего сайта.
</head>	Конец области заголовка Web-страницы.
<BODY bgcolor="blue">	Начало собственно содержимого Web-страницы. Тег <BODY включает в себя атрибут bgcolor, который задает цвет вашей страницы. В данном случае голубой. Если не использовать этот атрибут, то по умолчанию, цвет страницы будет белым.
<H2> Здесь расположен заголовок вашей странички </h2>	<H2> </h2> Элемент заголовка
<P> Здесь расположен текст первого абзаца вашей странички</p>	<P> </p> Элемент абзаца.
<P> Здесь расположен текст второго абзаца вашей странички</p>	<P> </p> Элемент абзаца.
</body>	Конец содержимого Web-страницы.
</html>	Конец HTML-документа.

Правила синтаксиса

1. Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице.

<HTML>

<HEAD>

</head>

<BODY>

..................

</body>

</html>

2. Всегда использовать конечные теги (не забывать </p>, </h1>, </table> и др.).

3. Не нарушать правила вложения тегов.

Правильно: <H1>Заголовок крупный <H2> Заголовок поменьше </h2> </h1>

Не правильно:<H1>Заголовок крупный <H2> Заголовок поменьше </h1> </h2>

4. Любая полезная информация должна находится между начальным и конечным тегами, указывающими ее формат.

5. Все атрибуты располагаются в начальном теге.

6. Принято начальные теги писать ЗАГЛАВНЫМИ буквами (<H1>), а конечные строчными буквами (</h1>).

Задания для выполнения:

1. Откройте текстовый редактор "Блокнот".

2. Наберите в нем структуру HTML-документа, которая представлена вам в таблице этого урока (левый столбец таблицы).

3. Сохраните файл в своей папке, присвоив ему имя page1.htm

4. Зайдите в свою папку и откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне броузера.

5. Закройте броузер.

6. Вернитесь к сохраненному файлу в "Блокноте".

7. Внесите в него следующие изменения: пусть это будет ваша первая страничка. Укажите в ней ваши фамилию, имя, школу, класс, увлечения. Используйте для этого форматирование заголовков и абзацев.

8. В строке <TITLE> укажите: "Домашняя страничка (ваше имя и фамилия).

9. Сохраните файл как page2.htm.

10. Просмотрите результат в броузере, при необходимости отредактируйте файл при помощи "Блокнота".