5.2 Основные теги
Понятие тегов, их виды, правила записи
Документ, который написан на языке HTML представляет собой простой текст, в который вставлены теги (флаги разметки). Теги указывают как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в других файлах и т.д. С помощью тегов формируются связи с другими ресурсами Интернет.
Теги – это определенные последовательности символов, заключенные между знаками < (меньше) и > (больше). Прописные и строчные буквы в написании тегов значения не имеют.
Теги бывают парные (например, <TITLE> и </TITLE>) и непарные (например, <BR>), открывающие и закрывающие. Отличительным признаком закрывающего тега является символ /.
Структура документа HTML
Документ HTML всегда должен начинаться с тега <HTML> и заканчиваться соответствующим закрывающимся тегом </HTML>. Внутри документа выделяются два основных раздела:
-
раздел заголовков;
-
тело документа.
Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и </HEAD>. В частности, раздел заголовков должен содержать название web-страницы, которое при просмотре в браузере появится в заголовке окна документа. Название web-страницы располагается между тегами <TITLE> и </TITLE>.
Например,
<TITLE> Моя страничка </TITLE>
Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>.
Пример. Простейший документ HTML, содержащий все теги, определяющие структуру, может выглядеть следующим образом:
<HTML>
<HEAD><TITLE>Заголовок документа</TITLE></HEAD>
<BODY>
Содержание документа
</BODY>
</HTML>
В приведенном выше HTML-документе использованы следующие теги:
1) <html> ... </html>
Тег <html> должна открывать HTML-документ. Аналогично, тег </html> должна завершать HTML-документ.
2) <head> ... </head>
Эта пара тегов указывает на начало и конец заголовка документа. Помимо наименования документа (тег <title>), в этот раздел может включаться различнаяслужебная информация.
3) <title> ... </title>
Все, что находится между тегами <title> и </title>, воспринимается браузером как название документа и показывается в левом верхнем углу страницы.
4) <body> ... </body>
Эта пара тегов указывает на начало и конец тела HTML-документа, за пределами которого теги не действуют.
5) <H1> ... </H1> — <H6> ... </H6>
Теги вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней по размеру. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
Заключив текст между этими тегами, вы получите заголовок определенного размера, например:
<H1>Заголовок</H1>
<H2>Заголовок</H2>
<H3>Заголовок</H3>
<H4>Заголовок</H4>
<H5>Заголовок</H5>
<H6>Заголовок</H6>
6) <P> ... </P>
Такая пара тегов описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
7) <BR>
Эта тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Очень удобно при публикации стихов
8) <HR>
Тег <HR> строит горизонтальную прямую линию.
9) <META content="charset=windows-1251">
Этот тег задает браузеру информацию о кодировке, в которой написан текст HTML-документа. В данном случае задана стандартная кодировка Windows.
6 Контрольные вопросы
6.1 Для каких целей создаются документы HTML?
6.2 Что такое теги?
6.3 Какую структуру должен иметь документ HTML?
6.4 Как перейти на новую строку в пределах абзаца?
6.5. Перечислите использованные в работе тэги и их назначение.
Практическое занятие №21"Основы форматирования HTML-страниц"
Тема "Создание сайта"
1 Цель работы
Ознакомиться с методами форматирования HTML-документа и научиться разрабатывать документы, предназначенные для публикации в Internet
2 Задачи работы
Научиться форматировать абзацы HTML-документа.
3 Порядок выполнения работы
3.1. На диске d:\Мои документы создать/открыть свою папку с номером группы и фамилией, в которой будет создаваться отчет по практической работе.
3.2. Загрузить обозреватель (браузер) Internet Explorer, дважды щелкнув по ярлыку
3.3. Откройте в блокноте файл Docum1.htm
3.4. Отформатируйте строки четверостишия разным шрифтом по стилю (логический и физический), размеру и цвету.
3.5. Создайте цветной фон документа.
3.6. Создайте нумерованный список (5-10 строк, например, список фамилий или предметов).
3.7. Создайте ненумерованный список (5-10 строк, например, список фамилий или предметов).
3.8. Отформатируйте списки разными шрифтами и разным цветом. Примените разные способы выравнивания (влево, по центру и вправо).
3.9. Создайте коллекцию из 10 горизонтальных линий, разных по длине, цвету и толщине.
3.7. В текстовом процессоре Word оформить отчет по практической работе.