- •Введение в язык html
- •1. Понятие о html
- •2. Понятие о гипертексте
- •3. Понятие о html-файле
- •4. Понятие о тегах языка html
- •5. Структурные теги
- •6. Создание шаблона html-документа и первой Web-страницы
- •Тема 2: Основная часть Web-страницы План
- •1. Использование заголовков
- •2. Символы разрыва абзаца и разрыва строк
- •4. Форматирование текста с помощью стилей
- •5. Добавление линий и комментариев
- •Тема 3: Создание таблиц План
- •1. Начальный этап создания кода таблиц
- •2. Создание строк и столбцов таблицы
- •3. Выбор типа таблицы
- •4. Выравнивание данных в ячейках таблицы по горизонтали и вертикали
- •5. Окрашивание таблиц и рамок
- •Тема 4: Создание списков План
- •1. Списки как инструмент структурирования. Типы списков
- •2. Нумерованные списки
- •3. Маркированные списки
- •4. Списки определений
- •5. Вложение и комбинирование списков
- •Тема 5: Использование фреймов План
- •1. Идея использований фреймов
- •2. Создание фреймов
- •3. Загрузка страниц в фреймы
- •4. Настройка фреймов
- •Тема 6: Гипертекстовые ссылки План
- •1. Типы гиперссылок
- •2. Понятие об url и их использование
- •3. Создание гиперссылок на другие Web-страницы
- •4. Создание внутренних ссылок в документе
- •5. Создание ссылок на ресурсы мультимедиа и на адреса электронной почты
- •6. Загрузка страниц в различные фреймы
- •Тема 7: Графика в Web План
- •2. Выравнивания текста относительно изображения
- •3. Плавающие изображения. Поля вокруг изображений
- •4. Определение ширины и высоты изображения
- •5. Обтекание изображений текстом
- •Тема 8: Использование графики, цвета и текста План
- •1. Добавление на Web-страницы цветных фоновых изображений
- •2. Добавление на Web-страницы графических фоновых изображений
- •3. Изменение цвета текста и гиперссылок
- •4. Добавление кнопок перемещения
- •Тема 9: Мультимедиа План
- •1. Понятие о гипермедиа-ссылках
- •2. Создание гипермедиа-ссылок
- •4. Создание бегущей строки
- •5. Воспроизведение видеофайлов в окне Internet Explorer
- •Тема 10: Средства создания html-файлов План
- •1. Стандартные html-редакторы
- •1. Стандартные html-редакторы
- •Определения
- •Проверочная работа
- •Проверочная работа
5. Окрашивание таблиц и рамок
К таблице можно добавить фон, цвет которого отличается от цвета остальной части Web-страницы. Можно также окрасить строки или отдельные ячейки, чтобы выделить их на фоне остальной таблицы.
Для этого используется атрибут BGCOLOR дескриптора <TABLE>.
Значением атрибута BGCOLOR может быть как шестнадцатеричное число (в формате #rrggbb), так и текст.
<TR BGCOLOR=yellow>
С помощью дескриптора <TABLE> и атрибутов BORDERCOLOR и BORDERLIGHT можно изменить цвет рамки таблицы. Атрибут BORDER должен быть помещен в дескриптор <TABLE>. Чтобы изменить цвет рамки внутри таблицы, нужно использовать атрибуты BORDERCOLOR и BORDERLIGHT в дескрипторе <TR> или <TD>.
Значение атрибута BORDERCOLOR влияет на верхнюю часть рамки трехмерной таблицы, а величина BORDERLIGHT – на нижнюю (т.е. на тень). С помощью этих атрибутов можно модифицировать стандартные атрибуты представления рамок трехмерных таблиц.
Практическое задание
Создайте HTML-код следующей таблицы
|
Фамилия |
дни недели |
||||
|
понедельник |
вторник |
среда |
четверг |
пятница |
|
|
Иванов |
6 |
0 |
0 |
0 |
0 |
|
Петров |
0 |
6 |
0 |
0 |
0 |
|
Сидоров |
0 |
0 |
6 |
0 |
0 |
|
Сергеев |
0 |
0 |
0 |
6 |
0 |
|
Васильев |
0 |
0 |
0 |
0 |
6 |
<HTML>
<HEAD>
<TITLE>Создание таблицы</TITLE>
</HEAD>
<BODY BGCOLOR=#AAAAAA>
<TABLE BORDER="2" COL="6" WIDTH="70%" BGCOLOR=#ffffff>
<TR ALIGN=CENTER>
<TH ROWSPAN=2>Фамилия</TH>
<TH COLSPAN=5>дни недели</TH>
</TR>
<TR ALIGN=CENTER>
<TH>понедельник</TH>
<TH>вторник</TH>
<TH>среда</TH>
<TH>четверг</TH>
<TH>пятница</TH>
</TR>
<TR>
<TD>Иванов</TD>
<TD BGCOLOR=red>6</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
</TR>
<TR>
<TD>Петров</TD>
<TD>0</TD>
<TD BGCOLOR=red>6</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
</TR>
<TR>
<TD>Сидоров</TD>
<TD>0</TD>
<TD>0</TD>
<TD BGCOLOR=red>6</TD>
<TD>0</TD>
<TD>0</TD>
</TR>
<TR>
<TD>Сергеев</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD BGCOLOR=red>6</TD>
<TD>0</TD>
</TR>
<TR>
<TD>Васильев</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD BGCOLOR=red>6</TD>
</TR>
</BODY>
</HTML>
Тема 4: Создание списков План
1. Списки как инструмент структурирования. Типы списков
2. Нумерованные списки
3. Маркированные списки
4. Списки определений
5. Вложение и комбинирование списков
1. Списки как инструмент структурирования. Типы списков
Списки – это очень мощное средство структурирования документа. С их помощью можно обеспечить четкую и ясную подачу материала. В HTML предусмотрены возможности создания привлекательных и в то же время функциональных списков.
В HTML предусмотрены возможности создания различных типов списков. Причем каждый из них может использоваться как самостоятельно, так и в сочетании с другими типами списков.
Таблица – Типы списков HTML и соответствующие им дескрипторы
|
Дескриптор |
Тип списка |
|
<OL> |
Упорядоченный (нумерованный) список |
|
<UL> |
Неупорядоченный список (маркированный) |
|
<DL> |
Список определений |
|
<MENU> |
Список элементов меню (используется редко) |
|
<DIR> |
Список элементов каталогов (используется редко) |