- •Основы html
- •Введение
- •Основные понятия
- •Лабораторная работа №1
- •Форматирование текста
- •Задание к лабораторной работе №1
- •1. Создание html- документа.
- •2.Просмотр html-документа.
- •3.Редактирование html-документа.
- •Лабораторная работа №2
- •Заголовок таблицы
- •Лабораторная работа №3
- •Задание к лабораторной работе №3
- •Лабораторная работа №4 Тема: использование фреймов
- •Задание к лабораторной работе № 4
- •Лабораторная работа №5 Тема: карты изображений
- •Лабораторная работа №6 Тема: использование элементов форм при создании Web-страницы
- •Общие атрибуты форм
- •Элементы форм
- •Атрибуты, определяющие свойства элемента input
- •Пример формы (форма4)
- •Дополнительная литература
Задание к лабораторной работе № 4
Открыть текстовый редактор БЛОКНОТ и создать файл FRAME.htm, задающий деление экрана на 3 фрейма по вашему усмотрению. В элементах FRAME указать значение атрибута SRC равным соответственно FR1.htm, FR2.htm, FR3.htm.
Например:
<HTML>
<HEAD>
<TITLE> Пример фреймов </TITLE>
</HEAD>
<FRAMESET rows=25%,*>
<FRAME src="FR1.htm" noresize scrolling="no">
<FRAMESET cols="22%,78%">
<FRAME src="FR2.htm">
<FRAME name="info" src="FR3.htm" scrolling="yes" marginwidth="10" marginheight="75">
</frameset>
</frameset>
</HTML>
Сохранить файл, просмотреть результат.
Скопировать файлы fr1.htm, fr2.htm, fr3.htm из папки Лаб.работы HTML диска С в свою папку.
Просмотреть результат выполнения файла FRAME.htm.
В текстовом редакторе БЛОКНОТ открыть файл УГЛТУ.htm. Скопировать начало документа до текста " В 1922 году факультет….". Дополнить документ тегами </BODY>, </HTML>. Сохранить скопированный фрагмент под именем страница1.htm.
В файле страница1.htm текст, начинающийся словами "В октябре 1920 года….", оформить как бегущую строку (см. лабораторну работу №1).
В текстовом редакторе БЛОКНОТ создать файл, который будет загружаться в левый фрейм, под именем страница2.htm:
<html>
<head><title> левый фрейм </title></head>
<body bgcolor=olive>
<B> Информация по факультетам:
<UL type="square">
<LI> <a target="info" href="ЛМФ.htm">ЛМФ </a>
<LI> <a target="info" href="ФЭУ.htm">ФЭУ </a>
<LI> <a target="info" href="ХТФ.htm">ХТФ </a>
<LI> <a target="info" href="ЛИФ.htm">ЛИФ </a>
<LI> <a target="info" href="ЛХФ.htm">ЛХФ </a>
</UL>
<a target="info" href="страница3.htm"> на главную страницу</a>
</body>
</HTML>
Файл имеет структуру меню и содержит ссылки, позволяющие загружать в правый файл информацию по факультетам или главную страницу сайта. Для этого используется атрибут target, указывающий имя правого фрейма (info), которое должно быть определено в элементе FRAME атрибутом name. Отредактируйте файл FRAME.htm, заменив FR1.htm на страница1.htm, FR2.htm на страница2.htm, FR3.htm на страница3.htm,
Чтобы главная страница не дублировала информацию, помещенную в файле страница1.htm, отредактируйте файл УГЛТУ.htm, удалив из него элементы, входящие в страницу1. Сохраните документ под именем страница3.htm.
В файлы факультет.htm и кафедра.htm для возврата на главную страницу изменить ссылку:
<A HREF = "страница3.htm> Возврат на главную страницу</A>.
В результате выполнения в верхний фрейм будет загружена эмблема с "бегущей строкой", в левый фрейм - меню для перехода к страницам факультетов, в правый - первоначально загружается главная страница сайта, а затем по ссылке либо страница факультета, либо страница кафедры.
Лабораторная работа №5 Тема: карты изображений
Элемент IMG, рассмотренный в лабораторной работе №2, позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (map). Карты изображений позволяют разделить изображения на области, содержащие ссылки на различные документы. Карты создаются при помощи следующих элементов :
<MAP> </MAP> - задает общее определение карты. Если реакцию на щелчок на карте обрабатывает программа, расположенная на сервере, в элемент включается атрибут ismap (иногда его записывают так: ismap=" ismap "). Однако задание значения атрибута не обязательно. В том случае, когда карта обрабатывается броузером, используется атрибут usemap = "#Имя",
определяющий имя карты. Это имя ставится в соответствие со значением соответствующих атрибутов элементов AREA и MAP, которые определяют конфигурацию карты.
Атрибуты элемента MAP:
Name = "#Имя" - задает имя карты.
Для каждой области карты должен быть создан свой элемент AREA. Он не имеет конечного тега и должен включать в себя атрибут, определяющий ссылку:
HREF="Адрес".
Кроме того могут быть указны следующие атрибуты:
Alt= "Текст подсказки" - используется для задания текста, не является обязательным. Он необходим для работы текстовых броузеров, но может быть использован как комментарий.
Shape = "circle" coords=x,y r задает форму области на карте в виде круга, где r - радиус круга, x,y - координаты центра, отсчитываемые от левого края (х) и верхнего края (у).
Shape = "rect" coords=x1,y1,x2,y2 - задает форму области на карте в виде прямоугольника, где x1,y1 - координаты левого верхнего угла, x2,y2 - координаты правого нижнего угла.
Shape = "poly" coords=x1,y1,x2,y2,x3,y3….. определяет область карты в виде многоугольника произвольной конфигурации. Х,У - определяют координаты каждого из углов.
Nohref - запрещает переход по ссылке для определенной карты (используется без значений).
Каждому элементу AREA должен соответствовать элемент IMG, описывающий файл с конфигурацией карты.
Пример Web-страницы с картами:
<html>
<head>
<title>Карты </title>
</head>
<body bgcolor="gray" text="green" link="red" vlink="black">
<center> <h2> ПРИМЕРЫ КАРТ </h2></center>
<hr>
<h3> карта 1 (круг)</h3>
<map name="karta1">
<area alt="круг" shape="circle" coords="94,104,77" href="страница1.htm">
</map>
<img src="круг.gif" usemap="#karta1" alt="карта 1">
<hr color="red" size="4">
<h3> карта 2 (прямоугольник)</h3>
<map name="karta2">
<area alt="прямоугольник" shape="rect" coords="24,32,219,145" href="страница2.htm">
</map>
<img src="прямоуг.gif" usemap="#karta2" alt="карта 2">
<hr color="red" size="4">
<map name="karta3">
<area alt = "многоугольник" shape = "poly" coords="41,34,181,35,151,75,178,110,43,112" href="страница3.htm">
</map>
<img src="мног.gif" usemap="#karta3" alt="карта 3">
<hr color="red" size=4>
</body>
</html>
Задание к лабораторной работе № 5
В графическом редакторе Paint создать три файла с изображениями карт в виде круга, прямоугольника, многоугольника произвольной конфигурации. Сохранить с расширением .gif.
Используя пример Web-страницы с картами, подготовить файл, создающий три вида карт. В качестве загружаемых страниц использовать файлы УГЛТУ, факультет, кафедра, в которых обеспечить возврат в основной файл с картами.
Сохранить подготовленный файл, просмотреть результат.
Подготовить вариант горизонтальной загрузки страниц с использованием карт. Для этого воспользоваться элементом TABLE, рамки таблицы при этом можно не указывать.