II. Приемы форматирования таблицы HTML-документа
Практическая работа № 15.
Тема: Создание и форматирование таблиц в Web-документе.
Цель: Научиться создавать и форматировать таблицы в Web-документе, применять в оформлении таблиц элементы списка, оформление стилем и графикой.
Последовательность выполнения работы:
I. Создание простейшей таблицы в HTML-документе.
1. Запустите текстовый редактор «Блокнот» (Пуск à Программы à Стандартные à Блокнот).
2. Наберите следующий текст:
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>РАБОТА</td>
<td>УЧЕБА</td>
<td>ОТДЫХ</td>
</tr>
<tr>
<td>МАСТЕРСКАЯ</td>
<td>КОЛЛЕДЖ</td>
<td>ДИСКОТЕКА</td>
</tr>
<tr>
<td>САЛОН</td>
<td>УНИВЕРСИТЕТ</td>
<td>НОЧНОЙ КЛУБ</td>
</tr>
</table>
</BODY>
</HTML>
3. Сохраните файл с именем TABLE.html на диск D:\ в папку Учебная.
4. Откройте файл TABLE.html, запустив его двойным щелчком. Он откроется в браузере Internet Explorer.
5. Посмотрите, как выглядит созданная вами простейшая таблица 3х3 без форматирования.
II. Приемы форматирования таблицы HTML-документа.
6. Вновь откройте HTML-код документа TABLE.
Весь последующий текст будет набираться в тегах <BODY> и </BODY>.
7. Обозначьте толщину и цвет границ таблицы в теге <table>:
<table border=”5”; bordercolor="#640ACA";>
8. Обозначьте цвет для каждой строки в отдельности и выравнивание текста в строках в теге <tr>:
для первой строки: <tr bgcolor="#FFFB98"; align="center"; valign="center";>
для второй строки: <tr bgcolor="#800000"; align="center"; valign="center";>
для третьей строки: <tr bgcolor="#C898FF"; align="center"; valign="center";>
9. Сохраните код, затем перейдите в браузер и обновите документ. Что изменилось?
10. Обозначьте ширину и высоту таблицы в % от всего листа, добавив их в тег <table>:
<table border="5"; bordercolor="#640ACA"; width=100%; height="75%";>
11. Сохраните код, затем перейдите в браузер и обновите документ. Как теперь выглядит таблица?
12. Измените цвет шрифта в столбцах РАБОТА, УЧЕБА, ОТДЫХ. Для этого необходимо каждой ячейке столбца присвоить цвет шрифта в тегах <td>. Код будет выглядеть так:
<tr bgcolor="#FFFB98"; align="center"; valign="center";>
<td><font color=" white">РАБОТА</font></td>
<td><font color=" yellow">УЧЕБА</font></td>
<td><font color="red">ОТДЫХ</font></td>
</tr>
<tr bgcolor="#98FFEF"; align="center"; valign="center";>
<td><font color=" white">МАСТЕРСКАЯ</font></td>
<td><font color=" yellow">КОЛЛЕДЖ</font></td>
<td><font color="red">ДИСКОТЕКА</font></td>
</tr>
<tr bgcolor="#C898FF"; align="center"; valign="center";>
<td><font color=" white">САЛОН</font></td>
<td><font color=" yellow">УНИВЕРСИТЕТ</font></td>
<td><font color="red">НОЧНОЙ КЛУБ</font></td>
</tr>
13. Просмотрите результат форматирования в браузере.
14. Создайте заголовок таблицы, определив его место, атрибуты, и поместив его после тега <table……….>:
<caption align="top" valing="center"><font color="blue"><h3>TABL_№_1</h3></font></caption>
15. Посмотрите результат в браузере.
16. Попробуйте изменить положение заголовка, изменяя атрибуты тегов align и valign (они могут принимать значение: align=center, right, left; valign=top, bottom, center).
17. Сохраните наиболее понравившийся вам результат.
III. Применение изображений в виде фона в ячейках, строках, таблицах.
18. Откройте файл TABLE.html, вызовите контекстное меню и выберите команду Просмотр HTML-кода.
19. Поместите изображения в виде фона в ячейки первой строки. Для этого измените код первой строки следующим образом:
<tr bgcolor="#FFFB98"; align="center"; valign="center";>
<td background="img/23.jpg" title="ТАК Я РАБОТАЮ"><font color="white">РАБОТА</font></td>
<td background="img/234.jpg" title="ТАК Я УЧУСЬ"><font color="yellow">УЧЕБА</font></td>
<td background="img/2345.jpg" title="ТАК Я ОТДЫХАЮ"><font color="red">ОТДЫХ</font></td>
</tr>
20. Посмотрите в браузере полученный результат. Задержите указатель мыши на какой-либо картинке в браузере, и вы увидите всплывающее сообщение.
21. Каким требованиям должны удовлетворять изображения, чтобы быть использованными в виде фона в ячейках и строках? В какой тег необходимо добавить background="img/2.jpg", чтобы одинаковый фон был во всей строке?
22. Поместите изображение в виде фона таблицы. Для этого в тег <table> необходимо добавить тег фонового изображения background и удалить тег фонового цвета bgcolor. Также необходимо удалить теги фонового цвета из всех строк. Код должен выглядеть так:
<table border="5"; width=100%; height="75%"; background="img/2.jpg";>
23. Сохраните код, затем перейдите в браузер и обновите документ. Вместо цвета таблицы мы поставили фоновое изображение. Фоновый рисунок достаточно темный, поэтому необходимо следить за цветом шрифта, чтобы текст на фоне изображения хорошо читался.
24. Выполнив задание, покажите его преподавателю.
25. Примените в оформлении личного Web-документа вновь изученные теги.