1) Создайте новую HTML-страницу.
2) Создайте новую Web-страницу. Разместите на странице таблицу.
Ширина таблицы = 90%, высота = 600 пикселей.
Высота рядов = 200 пикселей.
Ширина колонок = 30%
Выполните форматирование текста в таблице, как показано в примере
В таблице могут использоваться следующие способы выравнивания:
| По горизонтали: - слева; По вертикали: - вверху. | По горизонтали: - слева; По вертикали: - по центру. (этот способ используется по умолчанию) | По горизонтали: - слева; По вертикали: - внизу. |
| По горизонтали: - по центру; По вертикали: - вверху. | По горизонтали: - по центру; По вертикали: - по центру. | По горизонтали: - по центру; По вертикали: - внизу. |
| По горизонтали: - справа; По вертикали: - вверху. | По горизонтали: - справа; По вертикали: - по центру. | По горизонтали: - справа; По вертикали: - внизу. |
3) Сохраните страницу в личной папке в файл table1.html
Размещение таблиц на html-странице. Форматирование ячеек таблицы
1) Создайте новую HTML-страницу.
2) Создайте новую Web-страницу. Разместите на странице таблицу.
Выровняйте таблицу по центру страницы.
Цвет заднего фона таблицы = "#E2E2E2".
Ширина таблицы = 500 пикселей.
Расстояние между границей ячейки и ее содержимым = 15 пикселей.
Толщина границы = 5 пикселей, цвет границы = "#008000
Цвет второго ряда таблицы = #FFFFCA"
Цвет ячейки 3 = "#FFCACA", цвет ячейки 5 = "#ECFFEC" (см. пример).
Форматирование заднего фона таблиц, рядов и ячеек:
3) Сохраните страницу в личной папке в файл table2.html
Размещение таблиц на html-странице. Объединение ячеек таблицы
1) Создайте новую HTML-страницу.
2) Создайте новую Web-страницу.
Разместите на странице таблицу из 5 рядов и 5 колонок.
Выполните объединение ячеек таблицы, как показано в примере
Объединение ячеек таблицы:
3) Сохраните страницу в личной папке в файл table3.html
Контрольные вопросы
3.1 С помощью каких атрибутов тега «table» объединяются ячейки?
3.2 Как задается расстояние между границей ячейки и ее содержимым?
3.3 Какие атрибуты тега «table» вы применяли в данной практической работе? Что они обозначают?
Содержание отчета
4.1 Наименование работы
4.2 Цель работы
4.3 Задание
4.4 Выводы по работе
4.5 Ответы на контрольные вопросы
Список литературы
5.1 Дунаев В.В. Сам себе Web-дизайнер. – СПб.: БХВ – Петербург; Арлит, 2002
5.2 Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб: Символ-Плюс, 2004.
5.3 Клонингер К. Свежие стили Web-дизайна: как сделать из вашего сайта «конфетку»: Пер с англ. – М.: ДМК Пресс, 2005
Практическое занятие 5
«Дополнительные элементы языка HTML для форматирования web-страниц»
1. Цель работы: Научиться применять тег «Горизонтальные линии (тег <HR>)», "Escape-поcледовательности" и «Физические и логические стили».
Задание
2.1 Создайте новую HTML-страницу, состоящую из 7-ми частей.
2.2. Отделите каждую часть горизонтальной линией (тег <HR>) с разными параметрами, как показано в примере
Коллекция горизонтальных линий
Часть первая
Часть вторая
Часть третья
Часть четвёртая
Часть пятая
Часть шестая
Часть седьмая
2.3 Сохраните страницу в личной папке в файл rows.html
2.4. Создайте новую HTML-страницу.
2.5. Разместите на странице таблицу.
2.6 Отформатируйте страницу с использованием таблиц и Escape–последовательностей как указано в примере
Escape-поcледовательности
Для создания Web-страниц, содержащих специальные символы, можно использовать Escape-последовательности.
| Изображение | Название | HTML-код |
| " | - двойные кавычки: | " |
| & | - амперсант: | & |
| < | - знак меньше: | < |
| > | - знак больше | > |
| - неразрывный пробел | ||
| § | - параграф | § |
| © | - копирайт | © |
| «» | - кавычки | «» |
| - крышка | ||
| ® | - регистрация | ® |
| ± | - плюс и минус | ± |
| км² м³ | - степень | ² ³ |
| € | - Евро | € |
| ¶ | - знак абзаца | ¶ |
| € | - Евро | € |
| € | - Евро | € |
| ¤ | - «бомба» | ¤ |
| TM | - торговая марка | <SUP><FONT SIZE="-1">TM</FONT></SUP> |
2.7 Сохраните страницу в личной папке в файл escape.html
двойные кавычки: "
амперсант: &
знак меньше: <
знак больше: >
неразрывный пробел:
параграф: §
копирайт: ©
кавычки: « »
крышка: ¬
регистрация: ®
плюс и минус: ±
степень: ² ³
Евро: €
знак абзаца: ¶
Евро: €
Бомба: ¤
2.8 Создайте новую HTML-страницу.
2.9 Отформатируйте с помощью тегов логического и физического форматирования, как показано в примере
