ИЗУЧЕНИЕ HTML
Структура документа HTML
Документ HTML всегда начинается с тега <HTML> и заканчивается закрывающим тегом </HTML>. Внутри документа есть два основных раздела: раздел заголовков и тело документа.
Раздел заголовков содержит информацию описывающую документ в целом, и ограничивается тегами <HEAD> и </HEAD>. В частности раздел заголовков должен
содержать общий заголовок документа, ограниченный парным тегом <TITLE>. Тело документа ограничивается парным тегом <BODY>.
!!! Перед тем как начать работать создайте папку под своей фамилией для того, чтобы сохранять в нее все созданные вами файлы.
Упражнение 1. Создание простейшей Web-страницы
1.Запустите текстовый редактор Блокнот (Пуск Программы Стандартные Блокнот).
2.Введите следующий документ:
<HTML>
<HEAD>
<TITLE>ЗАГОЛОВОК ДОКУМЕНТА</TITLE> </HEAD>
<BODY>
СОДЕРЖАНИЕ
ДОКУМЕНТА
</BODY>
</HTML>
3.Сохраните документ под именем structure.htm1.
4.Запустите программу Internet Explorer (Пуск Программы Internet Explorer).
5.Выполните команду Файл Открыть. Щелкните на кнопке Обзор и откройте файл structure.htm.
6.Посмотрите, как отображается этот файл — простейший документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента
BODY?
7.Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Проверьте, что происходит при уменьшении ширины окна.
1 При сохранении документа в строке Тип файла выберите Все файлы. Не забывайте сохранять документы.
1
Функциональные блочные элементы
Элементы языка, из которых состоит документ, делятся на блочные и текстовые. Блочные элементы относятся к частям документа уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и более мелких частей текста.
В большинстве документов основными функциональными элементами являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <H1> до <H6> и при отображении на экране
компьютера отличаются размером шрифта.
Обычные абзацы задаются с помощью парного тега <P> (закрывающий тег </P>
не является обязательным). Язык HTML не содержит средств для создания «красной строки». Вместо нее используется пустая строка. Для перехода на новую строку используется одиночный тег <BR>.
В качестве ограничителя абзацев может использоваться горизонтальная линейка, задаваемая непарным тегом <HR>. Параметры линейки задаются соответствующими атрибутами тега, например: <HR ALIGN=”RIGHT” SIZE = “10” WIDTH = ”50%”> (тег задает горизонтальную линейку шириной в 10 пикселей, занимающую половину ширины окна и расположенную справа).
Упражнение 2.
1.Откройте документ structure.htm в программе Блокнот и сохраните его под именем paragraph.htm.
2.Замените текст, находящийся между тегами <BODY> и </BODY> на текст –
ФОРМАТИРОВАНИЕ АБЗАЦЕВ.
3.Введите текст: «ЗАГОЛОВОК ПЕРВОГО УРОВНЯ», заключив его между тегами
<H1> и </H1>.
4.Введите текст: «ЗАГОЛОВОК ВТОРОГО УРОВНЯ», заключив его между тегами
<H2> и </H2>.
5.Введите фразу: «ОТДЕЛЬНЫЙ АБЗАЦ ТЕКСТА», начав ее с тега <P>. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.
6.Для визуального разделения абзацев введите непарный тег горизонтальной линейки
<HR>.
7.
8.
Введите фразу: «ЕЩЕ ОДИН АБЗАЦ ТЕКСТА», начав ее с тега <P>. Откройте файл paragraph.htm в обозревателе Internet Explorer
8.Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.
2
Форматирование текста
Парный тег <FONT> позволяет управлять параметрами шрифта. Он должен содержать хотя бы один из трех атрибутов: COLOR=, FACE=, SIZE=.
Атрибут COLOR= задает цвет текста, например, COLOR=“GREEN” или в цифровой форме COLOR= “#00FF00”, где каждая пара байт определяет соответственно красную, зеленую и синюю составляющие.
Атрибут FACE= задает гарнитуру шрифта.
Атрибут SIZE= определяет размер шрифта в относительных единицах (от 1 до 7).
Параметры шрифта, используемые в документе по умолчанию, задают с помощью непарного тега <BASEFONT>, который помещают один раз внутри элемента BODY. Он
использует те же атрибуты, что и тег <FONT>.
Для описания функциональных особенностей текста могут быть использованы следующие парные теги: <EM> – выделение и <STRONG> – сильное выделение
(аналоги курсивного и полужирного выделения); <CODE> – исходный текст программ, <VAR> – программные переменные и др.
Упражнение 3
1.Откройте документ structure.htm в программе Блокнот и сохраните его под именем format.htm.
2.Удалите текст, находящийся между тегами <BODY> и </BODY>.
3.Введите непарный тег <BASEFONT SIZE="5" COLOR="BROWN">. Он задает
атрибуты текста, устанавливаемые по умолчанию (увеличенный шрифт и коричневый цвет).
4.Введите произвольный абзац текста (например, «НАЧАЛЬНАЯ УСТАНОВКА РАЗМЕРА ШРИФТА И ЦВЕТА»), который будет выводиться шрифтом, заданным по умолчанию.
5.Следующую строку начните с тега абзаца <P>.
6.Введите тег <FONT FACE="ARIAL" COLOR="GREEN">. Введите очередной абзац текста (например, «изменение гарнитуры и цвета шрифта»), закончив его тегами </FONT> и <BR>.
7.В следующих абзацах используйте парные теги: <SUB> (нижний индекс) и <SUP>
(верхний индекс). Для проверки первой и второй пары тегов введите формулы: H2O и E=m*C2.
8.В следующих абзацах используйте парные теги: <EM>, <STRONG>, <CODE>, <VAR>.
3
В качестве текста между каждой парой тегов записывайте комментарий типа: EM – ВЫДЕЛЕНИЕ КУРСИВОМ, STRONG – ПОЛУЖИРНОЕ ВЫДЕЛЕНИЕ и т.д.
9.В конце каждой строки не забывайте помещать тег <BR>.
10.Откройте файл format.htm в обозревателе Internet Explorer.
11.Посмотрите, как использованные элементы HTML влияют на способ отображения текста.
Создание списков
Язык HTML поддерживает пять видов списков: списки меню, списки каталогов, нумерованные и маркированные списки, списки определений. Первые два типа списков считаются устаревшими и не рекомендуются к применению.
Рассмотрим создание нумерованных и маркированных списков. Они оформляются одинаково с помощью парных тегов: <OL> для нумерованного списка и <UL> для
маркированного. Элементы списков начинаются с парного тега <LI>. Открывающие
теги могут содержать атрибуты, определяющие способ и последовательность нумерации или вид маркера. Возможно вложение списков друг в друга.
Упражнение 4
1.Откройте документ structure.htm в программе Блокнот и сохраните его под именем list.htm
2.Удалите текст, находящийся между тегами <BODY> и </BODY>.
3.Вставьте в документ тег <OL TYPE=”1”>, который начинает упорядоченный (нумерованный) список.
4.Введите текст: НУМЕРОВАННЫЙ СПИСОК, начав его с тега заголовка списка <LH>
5.Вставьте в документ элементы списка (например, яблоки, груши, сливы), предваряя каждый из них тегом <LI>.
6.Завершите список при помощи тега </OL>.
7.Сохраните и откройте файл list.htm в программе Internet Explorer.
8.Изучите, как упорядоченный список отображается в программе Internet Explorer.
9.Вернитесь в программу Блокнот и вставьте в документ тег <UL TYPE=”SQUARE”>, который начинает неупорядоченный (маркированный) список.
4