Задание 4. Создание документа, содержащего списки и таблицы

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

Таблица состоит из трех основных частей:

1. названия таблицы;

2. заголовков столбцов;

3. ячеек таблицы.

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

<LI></LI>-теги для формирования списков;

<UL></UL>-теги для создания нумерованных списков;

<DL>,<DT>,<DD>- теги для создания ассоциативных списков из одного или нескольких элементов-терминов, сопровождаемого одним или более элементами.

Создадим файл «Увлечения.HTML» следующего содержания:

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY>

<H2> Увлечения</H2>

<UL><LI> Танцы

<LI>Рисование

<LI> Чтение

<LI> Путешествия

</UL>

<DL> <DT> Танцы

<DD> Я очень люблю танцевать и занимаюсь этим профессионально. Танцую в народном коллективе «Латинский квартал». Имею достижения республиканского и международного уровня.

<DT> Путешествия

<DD> Люблю путешествовать с родителями. Мы всегда выбираем интересные маршруты и готовимся к поездке целый год. В этом году мы были на чемпионате мира по футболу в Российской федерации и посетили шесть городов из одиннадцати.

<DT> Чтение

<DD> В свободное от учебы время читаю художественные произведения. Увлекаюсь произведениями, в которых в художественном изложении представлены реальные исторические события.

</DL>

</BODY>

</HTML>

Создадим файл «Оценки.HTML», в котором будут отображаться таблицы c данными:

<HTML>

<HEAD>

<TITLE> Оценки </TITLE>

</HEAD>

<BODY>

<H2> Мои оценки </H2>

<TABLE>

<TR><TD>Предмет</TD>

<TD> Оценка</TD></TR>

<TR><TD>Физическая культура</TD>

<TD> 5</TD></TR>

<TR><TD> Математика </TD>

<TD> 5</TD></TR>

<TR><TD>Физика</TD>

<TD> 5</TD></TR>

<TR><TD>Биология </TD>

<TD> 5</TD></TR>

</TABLE>

</BODY>

</HTML>

Задание 5. Задание цвета фона и текста, установка гарнитуры и цвета шрифта.

При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге <BODY>.

Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок (последние два примера будут рассмотрены позже).

Тег <FONT> предоставляет возможности управления гарнитурой, цветом и размером текста. Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для отображения текста шрифтом Times New Roman необходимо записать:

Для изменения цвета шрифта можно использовать в теге<FONT> атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.

Приведем несколько примеров записей цвета, которые можно использовать для изменения цвета текста либо цвета страницы.

Тег	Комментарий
<FONT SIZE=””>…</FONT>	Устанавливает размер текста в пределах от 1 (наименьший) до 7 (наибольший). Замечание: если не определять размер текста, то браузер отобразит его размером: <FONT SIZE=”3”>…<FONT>
<FONT FASE =””>…</FONT>	Устанавливает шрифты различного начертания (гарнитура)
<FONT COLOR=””>…</FONT>	Устанавливает цвет текста

Цвет	RRGGBB	Цвет	RRGGBB	Цвет	RRGGBB
Черный Black	000000	Лазурный Cerulean	007BA7	Тёмно-коричневый Dark brown	654321
Карминово-красный Carmine	960018	Васильковый Cornflower blue	6495ED	Тёмно-зелёный Dark green	013220
Морковный Carrot	ED9121	Тёмно-синий цвет Dark blue	00008B	Тёмно-розовый Dark pink	E75480
Серый Gray	A0A0A0	Белый White	FFFFFF	Зеленый Green	00FF00
Баклажановый Eggplant	990066	Розовый Pink	FFC0CB	Сливовый Plum	660066
Красный Red	FF0000	Отборный жёлтый Selective yellow	FFBA00	Яблочно-зелёный Apple Green	8DB600
Фуксия Fuchsia	FF00FF	Индиго Indigo	4B0082	Зелёная мята (мятный) Mint Green	98FF98