Основные теги вставки рисунков, закладок и гиперссылок
Вставка изображений | |||||
Вставка графического файла | <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=”#$$$$$$”> | ||||
Лабораторная работа № 8. Создание и форматирование таблиц
Цель работы:
· Научиться использовать таблицы для оформления 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> | Текст в ячейке выравнивается по центру, устанавливается жирный шрифт |