 |
Основные теги вставки рисунков, закладок и гиперссылок
|
|
|
|
| Вставка изображений | ||||
| Вставка графического файла | <IMG SRC=”файл” WIDTH=”ширина” HEIGHT=”высота” > | Пример: <IMG SRC=”grafica.gif” WIDTH=”550” HEIGHT=”240” ALIGN=” right” ALT=”Графический файл”> | ||
| Выравнивание картинки относительно текста | <IMG SRC=”файл” ALIGN=”left|right|top|bottom”> | |||
| Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок | <IMG SRC=”файл” ALT=”текст”> | |||
| Вставка ссылок | ||||
| Ссылки на другую страницу | <A HREF=” страница”> текст </A> | <A HREF=”str2.htm”> Ссылка1</A> | ||
| Ссылка на закладку в другом документе | <A HREF=” страница # имя закладки”> текст</A> | <A HREF=” index.htm #met1”> На главную страницу </A>” | ||
| Ссылка на закладку в том же документе | <A HREF=”#имя закладки ”> текст </A> | <A HREF=” #metka1”> Ссылка2</A> | ||
| Определить закладку | <A NAME=”имя закладки”>текст</A> | <A NAME=”metka1”></A> | ||
| Цвет фона, текста и ссылок | ||||
| Фоновая картинка | <BODY BACKGROUND=”файл рисунка”> | <BODY BACKGROUND =”grafica.gif” TEXT=”black” (черный) LINK=”#FF0000” (красный) VLINK=”#FFFF00” (желтый) ALINK=”#FFFFFF” (белый) </BODY> | ||
| Цвет фона | <BODY BGCOLOR=”#$$$$$$”> | |||
| Цвет текста | <BODY TEXT=”#$$$$$$”> | |||
| Цвет ссылки | <BODY LINK=”#$$$$$$”> | |||
| Цвет пройденной ссылки | <BODY VLINK=”#$$$$$$”> | |||
| Цвет активной ссылки | <BODY ALINK=”#$$$$$$”> | |||
Лабораторная работа № 3. Создание и форматирование таблиц
Цель работы:
· Научиться использовать таблицы для оформления WEB-страниц
1. Создать таблицу по приведенному образцу, сохранить документ под именем tabl_name.htm. Сверху над таблицей разместить заголовок Таблица №1
При отображении таблицы в броузере должны удовлетворяться следующие условия:
· таблица должна быть выравнена по центру и быть правильной (симметричной) формы;
|
|
|
· в центральной ячейке поместить символ * (звездочка), остальные ячейки должны быть пустыми.
Примечание. Для отображения пустых ячеек в них нужно поместить символьный примитив пробела
2. В этом же документе создать копию таблицы №1, ввести заголовок Таблица №2 и модифицировать ее:
· В центральной ячейке разместить рисунок Arrows3.wmf
· «Раскрасить» все остальные ячейки в различные цвета.
3. Создать еще одну копию таблицы – Таблица №3 и отредактировать теги таблицы так, чтобы она соответствовала приведенному ниже образцу.
Примечание. Для объединения ячеек в тегах <TD> необходимо использовать параметры colspan= и rowspan=
4. Создать новый HTML-документ - rasp_name.htm с расписанием занятий.
· Документ должен начинаться заголовком
Расписание занятий гр. NNN на весенний семестр 2005 г.
· Первая строка таблицы должна быть оформлена как заголовки полей (с использованием тегов <TH>).
· Таблица по ширине должна занимать полный размер окна. Ширину отдельных столбцов задать в относительных единицах (в %), с тем, чтобы при изменении ширины окна пропорции таблицы сохранялись.
| День недели | Время | Предмет | Преподаватель | Аудитория |
| Понедельник | 8:30-10:05 | Математика (лек) | доц. Иванов А.А. | |
| 10:15-11:50 | Математика (пр) | преп. Петрова И.А. | ||
| 12:30-14:05 | Физика (лаб) | доц. Сидоров О.И. | ||
| Вторник | 8:30-10:05 | История (лек) | проф. Громова О.А. | |
| 10:15-11:50 | История (сем) | преп. Попов М.А. | ||
| 12:30-14:05 | Физика (лаб) | доц. Сидоров О.И. | ||
| ... | ... | ... | ... | ... |
· Просмотреть созданный документ в броузере при различных размерах окна и различных настройках размера шрифта.
5. Сохранить файл с расписанием под именем rasp_menu_name.htm и модифицировать его.
6. После заголовка создать таблицу, состоящую их одной строки меню с названиями дней недели.
7. В таблице с расписанием установить закладки на названия дней недели.
|
|
|
8. В таблице меню создать гиперссылки на соответствующие дни недели.
9. Выполнить цветовое оформление каждой ячейки меню.
10. Проверить правильность выполнения переходов по гиперссылкам.
11. Создать группу web-страниц, объединенных меню:
· На рабочем диске создать папку My_raspisanie для размещения файлов расписания.
· Поместить расписание на каждый день недели и таблицу с меню в отдельные файлы. Имена файлов: menu.htm – для главной страницы, названия дней недели – для остальных. Все документы разместить в папке My_raspisanie.
· Отредактировать гиперссылки меню так, чтобы по ним выполнялись переходы на соответствующий документ.
· В конце каждого файла с расписанием на день организовать гиперссылку для возврата в главный документ с меню.
· Оформить фон каждого дня недели собственным цветом, совпадающим с цветом ячейки таблицы меню.
12. Предъявить результат преподавателю.
Теги оформления таблиц
| Определить таблицу | <TABLE></TABLE> | Пример
<TABLE border=”1” align =«CENTER» width=«50%» >
<TR>
<TH >Товар</TH>
<TH>Цена</TH>
</TR>
<TR>
<TD>Радиотелефон</TD>
<TD>2000 </TD>
</TR>
</TABLE>
| ||||
| Окантовка таблицы | <TABLE BORDER =”?” </TABLE> | |||||
| Строка таблицы | <TR> </TR> | |||||
| Выравнивание | <TR ALIGN=left | right | center | middle | bottom > | |||||
| Ячейка таблицы | <TD></TD> | |||||
| Выравнивание по горизонтали | <TD ALIGN=LEFT | RIGHT | CENTER> | |||||
| Выравнивание по вертикали | <TD VALIGN = TOP|MIDDLE| BOTTOM> | |||||
| Установка ширины ячейки (в пикселях или %) | <TD WIDTH=«?»> | |||||
| Заливка цветом ячейки | <TD BGCOLOR = «# цвет»> </TD> | <TD BGCOLOR = «#FF0000»> </TD> красный цвет | ||||
| Заголовок столбца или строки | <TH>текст </TH> | Текст в ячейке выравнивается по центру, устанавливается жирный шрифт |
|
|
|
