Практическая работа № 15.
Тема: Создание и форматирование таблиц в Web-документе.
Цель: Научиться создавать и форматировать таблицы в Web-документе, применять в оформлении таблиц элементы списка, оформление стилем и графикой.
Последовательность выполнения работы:
I. Создание простейшей таблицы в HTML-документе.
1. Запустите текстовый редактор «Блокнот» (Пуск a Программы a Стандартные a Блокнот).
2. Наберите следующий текст:
TABLE
3. Сохраните файл с именем TABLE.html на диск D:\ в папку Учебная.
4. Откройте файл TABLE.html, запустив его двойным щелчком. Он откроется в браузере Internet Explorer.
5. Посмотрите, как выглядит созданная вами простейшая таблица 3х3 без форматирования.
II. Приемы форматирования таблицы HTML-документа.
6. Вновь откройте HTML-код документа TABLE.
Весь последующий текст будет набираться в тегах и .
7. Обозначьте толщину и цвет границ таблицы в теге
8. Обозначьте цвет для каждой строки в отдельности и выравнивание текста в строках в теге
для первой строки:
для второй строки:
для третьей строки:
9. Сохраните код, затем перейдите в браузер и обновите документ. Что изменилось?
10. Обозначьте ширину и высоту таблицы в % от всего листа, добавив их в тег
11. Сохраните код, затем перейдите в браузер и обновите документ. Как теперь выглядит таблица?
12. Измените цвет шрифта в столбцах РАБОТА, УЧЕБА, ОТДЫХ. Для этого необходимо каждой ячейке столбца присвоить цвет шрифта в тегах
13. Просмотрите результат форматирования в браузере.
14. Создайте заголовок таблицы, определив его место, атрибуты, и поместив его после тега :
TABL_№_1
15. Посмотрите результат в браузере.
16. Попробуйте изменить положение заголовка, изменяя атрибуты тегов align и valign (они могут принимать значение: align=center, right, left; valign=top, bottom, center).
17. Сохраните наиболее понравившийся вам результат.
III. Применение изображений в виде фона в ячейках, строках, таблицах.
18. Откройте файл TABLE.html, вызовите контекстное меню и выберите команду Просмотр HTML-кода.
19. Поместите изображения в виде фона в ячейки первой строки. Для этого измените код первой строки следующим образом:
20. Посмотрите в браузере полученный результат. Задержите указатель мыши на какой-либо картинке в браузере, и вы увидите всплывающее сообщение.
21. Каким требованиям должны удовлетворять изображения, чтобы быть использованными в виде фона в ячейках и строках? В какой тег необходимо добавить background=img/2.jpg, чтобы одинаковый фон был во всей строке?
22. Поместите изображение в виде фона таблицы. Для этого в тег
23. Сохраните код, затем перейдите в браузер и обновите документ. Вместо цвета таблицы мы поставили фоновое изображение. Фоновый рисунок достаточно темный, поэтому необходимо следить за цветом шрифта, чтобы текст на фоне изображения хорошо читался.
24. Выполнив задание, покажите его преподавателю.
25. Примените в оформлении личного Web-документа вновь изученные теги.