Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент называется меткой (по-английски — tag, читается "тэг"). Тег HTML состоит из следующих друг за другом в определенном порядке элементов:
v левой угловой скобки < (такого же, как "меньше чем" символа)
v необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом в этом контексте Вы можете читать символ /, как конец имени тега, например TITLE или PRE
v необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER
v правой угловой скобки > (такой же, как символа "больше чем").
Примеры: <H1 ALIGN=LEFT> </H1>
Обязательные теги. Вся информация о форматировании документа сосредоточена в тегах:
<html>...</html>.Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head> ... </head>.Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации.
<title>...</title>.Все, что находится между метками <title> и </title>, толкуется броузером как название документа, которое отображается в заголовке окна и печатается в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<body> ... </body>.Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
Цвета. Цвет указывается в цифровом обозначении в шестнадцатеричной записи, например, "#FF0000", которая контролирует, каким образом цвет формируется из основных цветов - красного, зеленого и голубого - в так называемое sRGB цветовое пространство, при этом обозначение должно быть взято в кавычки.
Цветовые имена и sRGB значения
Black (Черный) = "#000000"
Green (Зеленый) = "#008000"
Silver (Серебро)= "#C0C0C0"
Lime (Известь) = "#00FF00"
Gray (Серый) = "#808080"
Olive (Оливковый) = "#808000"
White (Белый) = "#FFFFFF"
Yellow (Желтый)= "#FFFF00"
Maroon (Темно-бордовый) = "#800000"
Navy (Темно-синий) = "#000080"
Red (Красный) = "#FF0000"
Blue (Синий) = "#0000FF"
Purple (Фиолетовый) = "#800080"
Teal (Чирок) = "#008080"
Fuchsia (Фуксия) = "#FF00FF"
Aqua (Аква) = "#00FFFF"
Пример простейшей странички:
<HTML>
<HEAD>
<TITLE> … </TITLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>
Задания:
1. На диске z: создать папку с именем HTML.
2. Открыть текстовый редактор "Блокнот".
3. В окне блокнота, используя Пример простейшей странички, создать документ, печатающий в качестве названия документа "Моя первая страничка" (тег TITLE), а в окне броузера выводящий «HTML» (тег BODY).
4. Сохранить документ под именем main.html (от слова «главный»), обязательно с расширением html в папке HTML.
5. Запустить любой из броузеров, установленный в системе, например, Internet Explorer (Пуск – Программы - Internet Explorer).
6. Используя меню Файл – Открыть, открыть в окне броузера свой файл.
7. Перейти в окно редактора Блокнот и добавить надпись «Я изучаю», так чтобы получилась надпись – «Я изучаю HTML».
8. Сохраните изменения.
9. Перейти в окно броузера. Сейчас, что бы просмотреть внесенные изменения, необходимо нажать кнопку "Обновить".
10. Атрибуты команды BODY, начала документа.
10.1. Изменение цвета фона документа – атрибут BGCOLOR="#$$$$$$" или BGCOLOR=”имя цвета” (значения смотри выше).
Задание: Установить черный цвет фона (BGCOLOR="#000000" или BGCOLOR=”Black”). Просмотреть изменения.
Задание: Изменить цвет фона на серый. Показать преподавателю.
10.2. Установка фоновой картинки – атрибут BACKGROUND="имя файла". Замечание: файл фонового рисунка должен быть в формат .gif или .jpg.
Задание: скопировать любой файл с расширением gif в папку HTML и установить его в качестве фоновой картинки.
10.3. Изменение цвета текста – атрибут TEXT="#$$$$$$".