Урок 4
Тема: Использование таблиц
Цель:
знать
- теги
для размещения таблиц на веб-страницах
уметь
- создавать веб-страницы с использованием таблиц;
Создайте веб-страницу, посвященную Дню
Победы, с именем Фамилия(Мау).htm, содержащую изображения и
аудиоролик:
1) Заголовок окна веб-страницы:
День Победы.
2) Цвет
фона веб-страницы — Skyblue.
3) Заголовок
первого уровня, выравнивание по центру, цвет красный — строка с текстом: С Днем
Победы!
4) Изображения
из файлов сагd1.jpg, сагd2.gif ; ширина каждого
изображения 40 %.
5) Абзац
с текстом: Нажмите кнопку, чтобы прослушать песню «День Победы» - выравнивание по центру.
6) Звук из файла victory day.mp3, отобразить на веб-странице с элементами управления
2. Изучение нового материала
Таблицы используются для оформления таблично заданной информации, а также
служат инструментом для табличной верстки. Использование таблиц с невидимой
границей - известный способ верстки, применяемый на множестве
сайтов.
Такая
таблица фактически представляет собой модульную сетку, в которой удобно
размещать отдельные элементы веб-страницы.
Таблица состоит из строк, строки состоят из ячеек. Для работы с таблицами
используются теги:
<table>
...<table> - создание таблицы
<tr>...
</tr> - создание строк таблицы
<td>
...</td> - создание ячеек таблицы
Атрибуты:
align - определяет
выравнивание по горизонтали информации (таблицы| информации в строке|
информации в ячейке)
- left - по левому краю;
- center - по центру;
- right - по правому краю;
- justify - по ширине.
valign - определяет выравнивание
по вертикали:
- top - по верхней границе;
- middle - по середине;
- bottom - по нижней границе.
background - имя графического
файла с фоновым изображением для таблицы| строки| ячейки (формат gif
или jpg)
bgcolor - цвет фона для таблицы
|строки | ячейки
border - толщина рамки
таблицы (по умолчанию толщина =0, т.е. рамки нет)
bordercolor - цвет рамки
таблицы|ячейки
- width - ширина таблицы|ячейки в пикселях или процентах
- height - высота таблицы|ячейки в пикселях или процентах
Например:
Задание1. Создать таблицу из 2 строк и 3 столбцов. Таблица имеет ширину 50%, синюю рамку толщиной 3 пикселя, желтый цвет фона.
<head>
<title> Таблица </title>
<body>
<table width=50% border=3 bordercolor=blue bgcolor=yellow>
<tr>
<td> Ячейка 1-1</td> |
<td> Ячейка 1-2</td> | Описание первой строки
<td> Ячейка 1-3</td> | из трех ячеек
<td> Ячейка 1-3</td> | из трех ячеек
</tr>
<tr>
<td> Ячейка 2-1</td> |
<td> Ячейка 2-2</td> | Описание второй строки
<td> Ячейка 2-3</td> | из трех ячеек
</tr><td> Ячейка 2-3</td> | из трех ячеек
</table>
</body>
</html>
3. Закрепление изученного
Задание 2. Создайте веб-страницу с именем table.htm,
содержащую таблицу с формулами площадей фигур.
Оформление таблицы:
- таблица из 4 строк и 2 столбцов; выравнивание по горизонтали по центру, ширина 50%;
- фон таблицы - изображение из файла kletka.gif (скачать);
- рамка - сплошная линия темно-синего цвета, толщиной 3 пикселя.
Оформление текста:
- заголовок Формулы площадей - заголовок первого уровня, цвет синий, выравнивание по центру;
- заголовки столбцов таблицы - заголовок 2 уровня, цвет текста красный;
- текст в ячейках - размер шрифта 6, полужирное начертание, выравнивание по центру.
4. Домашнее
задание: составить
конспект урока