§29.
Структура HTML-документа
29.1. Структура HTML-документа
Документ HTML представляет собой
обычный текстовый файл, который содержит конструкции языка HTML.
Поэтому этот документ можно создавать в
обычных текстовых редакторах, например программе Блокнот, а затем сохранять созданные файлы с
расширением .htm или .html.
Суть языка HTML - в разметке текста с помощью
управляющих символов - тегов, которые располагаются в угловых скобках.
Большинство тегов парные, т.е. имеют открывающий
элемент <> и закрывающий элемент </>.
Между ними и находятся коды, которые распознает
браузер.
HTML-документ всегда должен начинаться отрывающим
тегом <html> и заканчиваться закрывающим </html>.
Внутри расположены: блок заголовка <head> </head> и тело <body> </body>, в котором размещаются тексты,
рисунки, аудио и видеофрагменты.
Основные теги, необходимые для создания HTML-
документа простой структуры, представлены в таблице:
В блоке заголовка размещается
тег <title> текст </title>.
Текст,
указанный в этом теге отображается в заголовке окна браузера.
В HTML-документе можно разместить комментарии, которые
браузером не отображаются: <! Комментарии>.
Пример 1. Создать простой HTML-документ в Блокноте.
Сохранить созданный файл prim1.htm. Открыть
созданный документ в браузере.
Структура такого документа представляется
следующим образом:
<html> <!Открытие HTML
документа>
<head>
<title> Заголовок </title>
</head>
<body> <!Содержание (тело)
документа>
Текст первой странички
</body>
</html>
Результат отображения HTML-документа в браузере
представлен на рис. 4.1.
Рис. 4.1.
*В
HTML-документе мета-теги содержат информацию для браузера и поисковых систем и всегда
размещаются между тегами <head> </head>.
Большинство
мета-тегов являются необязательными.
Приведем самые полезные мета теги.
Пример 2.
<meta
http-equiv="content-type" content="text/html; charset=Кодировка">
При указании этого мета тега браузер будет правильно отображать текст
страницы:
<meta
http-equiv="content-type" content="text/html;
charset=Windows-1251">
Пример 3.
<meta name="author"
content="имя автора">
Этот мета тег указывает имя автора сайта.
<meta name="author" content="Алесь Симончик">
Пример 4.
<meta name="date" content="месяц, число, год и время через пробел">
При использовании этого мета тега определяется дата
создания сайта.
<meta name="data"
content="October 27 1998 16:01 Am">
29.2. Оформление
HTML-документа
Теги языка HTML могут содержать атрибуты, которые являются параметрами или свойствами элементов
разметки документа.
Правило записи атрибутов в теге
следующее:
<тег атрибут1=значение атрибут2=значение …>
Тег <body> определяет
внешний вид всей веб-станицы, в то время как отдельные ее элементы, например
заголовки, таблицы могут иметь свое особенное оформление.
Выбор цвета страницы, фонового рисунка и цвета
текста на ней является весьма важным,
так как от этого зависит визуальное восприятие всего сайта.
Цвет страницы задается атрибутом bgcolor, а цвет текста - text. Значением атрибутов является цвет, который задается своим
названием на английском языке или его шестнадцатеричным кодом.
Пример 5. В этом примере задан синий цвет страницы двумя
способами:
<body bgcolor="blue"> <!название цвета>
или
<body bgcolor="#0000FF”> <!шестнадцатеричный код цвета>
При формировании веб-страниц указываются
уровни заголовков, которые обозначаются h1, h2,...h6. Для описания уровней
используются соответствующие теги, например, для третьего уровня — <hЗ> и </h3>.
Заголовок уровня 1 самый крупный, а уровня 6 — самый маленький. Для
выравнивания текста на странице обычно указывается одно из трех значений
атрибута align:
align = center — выравнивание
заголовка по центру;
align = left — выравнивание заголовка по
левому краю;
align = right — выравнивание заголовка по правому краю.
Пример 6. Создадим HTML-документ с желтым цветом фона
и зеленым цветом текста. Выведем тексты заголовков уровня h1, h2, h3, выровняв их соответственно по центру, по левому
и правому краю документа.
Результат отображения HTML-документа в браузере
представлен на рис. 4.2.
Рис. 4.2.
* В сети Интернет существуют сайты, содержащие готовые
фоновые рисунки(обои), например сайт «Азбука дизайнера» - http://www.dsgn.al.ru/fons.htm.
Эти фоновые рисунки можно использовать
для создания веб-страниц.
В качестве фонового рисунка (обоев) можно
использовать одно большое изображение или его фрагмент.
Фоновый рисунок (обои) задается так:
<body background=" * . * ">, где *.* - имя графического файла
с расширением *.jpg, *.gif,
или *.png.
Графический файл может
быть расположен в одной папке с документом, иначе нужно указать к нему путь.
Подобное
указание путей применяется и для других объектов: ссылок, рисунков.
1. Какие основные
теги описывают HTML-документ?
3. Для чего
используются атрибуты в тегах?
4. Как
задать фон и цвет текста на веб-странице с помощью атрибутов?
5. Как
выводятся заголовки в языке HTML?
6*. Для
чего используются мета теги?
Упражнения
1. Просмотрите текст HTML-документа:
а) Какой цвет фона и текста будет на
веб-странице?
б) При выводе заголовков
на веб-странице размер их уменьшается или увеличивается?
2*. Создайте на языке HTML веб-страницу, структура которой
показана на рисунке 4.3. Фоновый рисунок(обои) для веб-страницы и цвет текста
подберите самостоятельно. Воспользуйтесь
файлами, содержащими готовые фоны.
Рис. 4.3
§30*.
Форматирование текста на языке HTML
Для создания нового абзаца используется тег <p>, а для перехода на новую строчку без создания абзаца - тег <br>.
Эти теги закрывать не обязательно, если в них не
используются атрибуты.
Текст абзаца на странице выравнивается любыми
способами с помощью атрибута align аналогично выравниванию
заголовков.
Для
определения типа, размера и цвета символа используется тег <font> < /font
>. Свойства символа определяются с помощью атрибутов:
§ face= “название шрифта”
§ color =” цвет символа”
§
size = размер шрифта.
Размер символа задает атрибут size. По
умолчанию этот размер равен 3.
Поместив текст между тегами <font size = n> </font>, где n - цифровое значение, можно
придать ему нужный размер:
<font size="1"> Пример 1 </font>
<font size="2"> Пример 2 </font>
<font size="3"> Пример 3 </font>
<font size="4"> Пример 4 </font>
<font size="5"> Пример 5 </font>
<font size="6"> Пример 6 </font>
Размер шрифта может задаваться в
относительном виде по отношению к базовому размеру, например, size = +
число или size = — число. Так,
для базового размера, равного двум, относительный размер может находиться в пределах от – 1 до + 5.
Пример
2. Выведем текст с использованием тега <font >.
<p><font
face=”Arial”
color=red> Шрифт Arial красного цвета
<font
size=+3> вдруг стал большим.
</font>
<p><font size=-3> Внезапно текст уменьшился. </font>
<p><font face=”Tahoma” color=green>Текст превратился в Tahoma зеленого цвета </font>
Результат выполнения
представлен на рисунке 4.4
Рис. 4.4.
За
начертание текста отвечает целая группа тегов, значения которых приведем в
таблице:
|
Тег
|
Назначение
|
Результат
использования
|
|
<b > < /b >
|
Полужирный
шрифт
|
Полужирный шрифт
|
|
<i > < /i >
|
Курсивных
шрифт
|
Курсивных шрифт
|
|
<u > < /и >
|
Подчеркнутый
шрифт
|
Подчеркнутый
шрифт
|
|
<sub > < /sub >
|
Верхний
индекс
|
Верхний
индекс
|
|
<sup > < /sup >
|
Нижний
индекс
|
Нижний
индекс
|
При формировании текста на странице он может
быть представлен в виде бегущей строки с помощью тега <marquee> </marquee>. Для определения
движения текста слева направо или справа налево используется атрибут
direction.
Пример 3. Для организации движения
текста слева направо шаблон записи будет выглядеть следующим образом:
< Marquee direction = left, right > текст < /marquee >
