Ii. приемы форматирования таблицы html-документа.

Практическая работа № 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. Поместите изображение в виде фона таблицы. Для этого в тег

необходимо добавить тег фонового изображения background и удалить тег фонового цвета bgcolor. Также необходимо удалить теги фонового цвета из всех строк. Код должен выглядеть так:

23. Сохраните код, затем перейдите в браузер и обновите документ. Вместо цвета таблицы мы поставили фоновое изображение. Фоновый рисунок достаточно темный, поэтому необходимо следить за цветом шрифта, чтобы текст на фоне изображения хорошо читался.

24. Выполнив задание, покажите его преподавателю.

25. Примените в оформлении личного Web-документа вновь изученные теги.

Таблицы html. Как создать и настроить ячейки


Похожие статьи.

Понравилась статья? Поделиться с друзьями: