Методические указания для лабораторных работ. HTML

МИНИСТЕРСТВО АГРАРНОЙ ПОЛИТИКИ УКРАИНЫ

ТАВРИЧЕСКИЙ ГОСУДАРСТВЕННЫЙ АГРОТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

Факультет “Инженерии икомпьютерных технологийКафедра Прикладной математики икомпьютерных технологий

WEB-ТЕХНОЛОГИИ И WEB-ДИЗАЙНЧАСТЬ I

HTML

Методические указаниядля выполнения лабораторных работ

студентами дневной формы обучения специальности7.080402 Информационные технологи проектирования

Мелитополь 2009

N

Разработала: ассистент Быковская Н. В.

Рецензент: _____________________

Рассмотрено и одобрено на заседании кафедры ПМ и КТ от“_____” ___________________2009 г. Протокол № ________

Рассмотрено и рекомендовано в печать на методическом совете факультета“Инженерии и компьютерных технологий” “__” ________ 2009г. Протокол № ____

СОДЕРЖАНИЕ

Введение ........................................................................................................ 41 Лабораторная работа №1......................................................................... 5

1.1 Теоретические сведения ....................................................................... 51.1.1 Денвер-3. Установка программного продукта. ............................. 51.1.2 Создание собственного домена на локальном компьютере ......... 51.1.3 Интерфейс программы “HTML Pad 2007” ..................................... 71.1.4 Структура HTML-документа .......................................................... 81.1.5 Теги уровня документа ................................................................... 91.1.6 Основные теги форматирования текста ....................................... 101.1.7 Специальные символы и комментарии ........................................ 12

1.2 Практическая часть ............................................................................. 131.3 Контрольные вопросы ........................................................................ 16

2 Лабораторная работа №2....................................................................... 172.1 Теоретические сведения ..................................................................... 17

2.1.1 Изображения.................................................................................. 172.1.2 Списки ........................................................................................... 182.1.3 Ссылки ........................................................................................... 20



3.1.1 Таблицы. Общие сведения ............................................................ 223.1.2 Операции над ячейками таблицы ................................................. 23



4.1.1 Формы. Общие сведения .............................................................. 274.1.1 Элементы управления формы ...................................................... 28



5.1.1 Фреймы .......................................................................................... 335.1.2 Карты изображений ...................................................................... 35


Список литературы...................................................................................... 38Приложение А. Сводная схема тегов языка HTML .................................. 39

4

ВВЕДЕНИЕ

Методические указания для выполнению лабораторных работстудентами специальности “Информационные технологиипроектирования” представляют собой систематизированный курс подисциплине “WEB-технологии и WEB-дизайн”. Первая частьметодический указаний посвящена изучению основ верстки web-документов средствами языка HTML. Базовым программным обеспечениедля данного раздела курса являются: Денвер-3 и HTMLPad 2008. Денвер-3представляет собой набор дистрибутивов и программную оболочку,используемые Web-разработчиками для отладки сайтов без необходимостивыхода в Интернет, а HTMLPad 2008 –многофункциональный редакторHTML с подсветкой синтаксиса и предварительным просмотромдокумента. Оба программных продукта содержат справочную систему поосновным темам курса, что позволяет усовершенствовать навыки поискаинформации.

Материал методических указаний данного курса разделен на 18лабораторных работ. Первая часть методических указаний, охватываеттакие вопросы как: установка программных продуктов, структура web-сервера, структура html-документа, основные теги форматирования текста,абзацев, изображений, гиперссылок, списков, таблиц, форм, фреймов, картизображений и т.д.

Методические указания могут быть использованы как пособие длястудентов факультета “Инженерии и компьютерных технологии”, которыеизучают дисциплину “ WEB-технологии и WEB-дизайн”, а так же какпособие для компьютерных курсов ориентированных на создание сайтов.Данные методические указания можно использовать для самостоятельногоизучения предложенных программ, овладения навыками создания сайтов-визиток, или web-презентаций курсовых и дипломных проектов.

Требования к аппаратному и программному обеспечению:Для выполнения заданий лабораторных работ необходимо иметь

компьютер, который имеет оперативную память не менее 256 Мб ижесткий диск, со свободным объемом не менее 1 Гб. Операционнаясистема – Windows XP или более поздние версии, включая полнуюсовместимость программного обеспечения с Windows Vista.

5

1 ЛАБОРАТОРНАЯ РАБОТА №1

Тема: Web-сервер Денвер. Введение в HTML.Цель: 1) Научиться устанавливать Денвер, создавать собственные

домены и поддомены в программе Денвер-3.2) Освоить основные принципы работы с программой

“HTMLPad 2008”;3) Научиться применять теги HTML для структурирования

страницы и форматирования текста.Время: 2 ч.

1.1 Теоретические сведения

1.1.1 Денвер-3. Установка программного продукта.

Сервер на базе Денвер-3 предназначен для создания собственныхдоменов на локальном компьютере, а также позволяет создавать сайты итестировать их работоспособность, не имея доступа в Интернет.

Для установки программного продукта Денвер-3 необходимоскачать дистрибутив с сайта http://denwer.ru и запустить установочныйфайл. Во время установки необходимо выбрать следующие опции:

1. установку осуществить в папку C:\WebServer, а не в привычнуюпапку C:\Program Files;

2. выбрать вариант запуска вручную, а не как службу.После установки Денвера его следует запустить вручную и

проверить работоспособность. Для этого в браузере необходимо набратьадрес тестовой страницы http://localhost/denwer/. В случае успешнойустановки на экране появится страничка «Ура заработало!».

1.1.2 Создание собственного домена на локальномкомпьютере

После установки программы все необходимые для ееработоспособности файлы располагаются в папке C:\WebServers.Благодаря этому папку можно переносить с компьютера на компьютер, ненарушая работоспособности сервера.

Для создания собственного домена в рамках локальногокомпьютера достаточно добавить новую папку с именем домена в каталогC:\WebServers\home. Например myserver.ru (см. рисунок 1.1).

Файлы, которые должны находиться на этом сервере необходимопоместить в папку C:\WebServers\home\myserver.ru\www. При созданиисобственного домена следует учитывать нежелательность использования вимени домена букв кириллицы и специальных символов.

6

Рисунок 1.1 – Расположение доменов на ДенвереДля проверки работоспособности нового домена следует:а) перегрузить Денвер-3 (сделать это можно с помощью ярлыка

Restart servers в меню Пуск или с помощью запускного файлаC:\WebServers\Denwer\Restart.exe);

б) открыть в браузере страницу с адресом нового домена (напримерmyserver.ru). При этом в случае успешного запуска сервера на экранеотобразится список файлов или содержимое файла с именем index. Набольшинстве сайтов при указании пути к домену или к папке отображаетсяфайл index.html или index.php или содержимое каталога, в случае еслииндексный файл отсутствует.

Вариант когда новый поддомен не отображается в браузере:1. выполнить команду ping на новый домен (ping myserver.ru). Если

ответ получен значит Денвер с новыми настройками успешнозапущен. Если ответа нет, то возможно а) Денвер не былперезапущен с момента добавления нового домена; б) имя папкиотличается от имени пингуемого домена; в) внутри домена несоздана папка www.

2. если команда ping проходит, то возможно в браузере выпользуетесь прокси-сервером для доступа в интернет (см.рисунок 1.2). Например в браузере Internet Explorer необходимодобавить ваш домен в список исключений. Для этогонеобходимо зайти в Сервис Þ Свойства обозревателя ÞПодключения Þ Настройка сети Þ Дополнительно… в полеИсключения указать адрес вашего нового домена.

3. еще раз проверьте что имя домена содержит только латинскиебуквы и цифры, а так же не содержит пробелов.

7

Рисунок 1.2 – Добавление исключений для прокси-сервера

1.1.3 Интерфейс программы “HTML Pad 2007”

После установки сервера и создания собственного домена можноприступать к созданию сайта. Сайты можно условно разделить настатические (будут доступны пользователю в том виде и с тойинформацией которой они были созданы) и динамические (наполнение ивнешний вид страниц может зависеть от ряда условий: учетной записипользователя, времени и т.д.).

Статические сайты представляют собой набор html-старинц, адинамические набор php-страниц. Статический сайт должен содержатьhtml-странички и картинки расположенные в одной папке. Создавать такиестранички можно либо в блокноте, либо в специализированныхпрограммах. Одной из которых является HTMLPad 2008. По сравнению сблокнотом в программе имеется подсветка синтаксиса, автоматическоедополнение когда, панель свойств, предварительный просмотр и т.д.

8

На рисунке 1.3 отображены основные элементы интерфейса окнапрограммы “HTMLPad 2008”. Работа с файлами (их создание, сохранение,открытие) аналогична большинству приложений Windows, с тем лишьотличием, что при создании нового документа, необходимо выбирать изсписка именно HTML Page.

Рисунок 1.3 – Интерфейс программы “ HTML Pad 2008”После создания новой страницы основные теги можно добавлять

вручную, или через пункты меню Insert (Вставить) и Format(Форматирование), или с помощью кнопок на панелях инструментовHTML, HTML Formatting и HTML Forms.

Переключаться между режимом редактирования и режимомпредварительного просмотра можно и использованием вкладокпереключения режимов просмотра (см. рисунок 1.3).

1.1.4 Структура HTML-документа

Составление страниц для сайта базируется на языке HTML (от англ.Hypertext Markup Language – язык разметки гипертекста). Все страницысайта имеют расширение .htm или .html.

Основной структурной единицей языка является тег с егоатрибутами. Тег представляет собой заключенные в треугольные скобкиинструкции языка, которые сообщают, какими свойствами долженобладать тот или иной фрагмент текста на странице. Большинство теговявляются парными: содержат как открывающийся, так и закрывающийсятег (см. рисунок 1.4):

Инспекторатрибутов тега

Предварительныйпросмотр

Исходный коддокумента

Вкладки режимовпросмотра

9

Рисунок 1.4 – Структура тегаСледует отметить что написание значений атрибутов следует

писать в двойных кавычках.Описание документа строится на основании тегов. Весь документ

должен быть заключен в главный тег <html> (см. рисунок 1.5).

<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/> <title> Заголовок документа </title> <link href="style.css" rel="stylesheet" type="text/css"/></head>

<body> <p><b>Если</b> кто-то собирается в отпуск...</p></body>

</html>

Рисунок 1.5 – Структура html-документаВсе теги можно условно разделить на группы по их

функциональному назначению: теги уровня документа, тегиформатирирования, теги структурных элементов и т.д.

1.1.5 Теги уровня документа

<html>...</html> парный тег-контейнер, который заключает всебе все содержимое веб-страницы. Открывающий и закрывающий теги<html> в документе обязательны, для того что бы указать границыдокумента.

<head>...</head> тег предназначен для хранения элементов,которые используются для хранения служебной информациипредназначенной для браузеров и поисковых систем. Содержимое тега неотображается на странице, за исключением тега <title>.

<title>...</title> содержит текст заголовка, которыйотображается в строке заголовка окна браузера.

<body>...</body> предназначен для хранения содержимоговеб-страницы (контента), отображаемого в окне браузера(форматированный текст, изображения, таблицы и т.д.). Тег <body>может содержать множество атрибутов, которые влияют на отображениявсего документа вцелом.

<p align=“center”>Текст первого абзаца </p>

Открывающийсятег абзаца

Закрывающийсятег абзаца

АтрибутЗначение

атрибута

10

Таблица 1.1 – Основные атрибуты тега <body>

Название атрибута Назначение атрибутаalink цвет активной ссылки (цвет задается

шестнадцатеричным числом или константой,например красные: red или #ff0000)

background фоновый рисунок на веб-страницеbgcolor цвет фона веб-страницыtopmargin (leftmargin,bottommargin)

отступ от верхнего (левого, нижнего) краяокна браузера до контента

link цвет ссылок на веб-странице.text цвет текста в документеvlink цвет посещенных ссылок

Например следующий фрагмент html-кода задает для всегодокумента цвет текста зеленый, цвет ссылок черный, цвет фонажелтый. Листинг 1.1.Листинг 1.1 – Пример использования атрибутов тега <body>

1.1.6 Основные теги форматирования текста

Таблица 1.2 – Теги форматирования текста

Название тега Назначение тега, атрибуты<b>...</b>или<strong>…</strong>

устанавливает жирное начертание шрифта

<i>...</i> устанавливает курсивное начертание шрифта<u>...</u> устанавливает подчеркнутое начертание шрифта<strike>...</strike> устанавливает зачеркнутое начертание шрифта< cite>...</cite> помечает текст как цитату, обычно отображается

курсивом

11

<code>...</code> предназначен для отображения текста, которыйпредставляет собой программный код, обычноотображается моноширинным шрифтом

<del>...</del> используется для выделения текста, который былудален в новой версии документа

< ins>...</ ins> используется для выделения текста, который былдобавлен в новую версию документа

<dfn>...</ dfn> применяется для выделения терминов при ихпервом появлении в тексте

<sup>...</sup> отображает шрифт в виде верхнего индекса<sub>...</sub> отображает шрифт в виде нижнего индекса<pre>...</pre> определяет блок текста, в котором сохраняется

количество пробелов между словами, заданноена этапе создания документа

< nobr>...</nobr> уведомляет браузер отображать текст в однустроку без переноса

<h1>...</h1>…<h6>...</h6>

устанавливает заголовки различного уровнязначимости от самого крупного h1 до самогомелкого h6

<font>...</font> предназначен для установки характеристикшрифта, которые задаются в атрибуте тега.Тег имеет следующие атрибуты:color=… задает цвет шрифта (вшестнадцатеричной форме, например, #ff0000)face=… задает гарнитуру шрифта (Arial, Tahoma)size=… задает размер шрифта в условныхединицах (целое число от 1 до 7 или изменениячисла +1 или -2) самый крупный шрифт 7.

<p>...</p> определяет границы абзаца. Тег имеет атрибутalign, который отвечает за выравнивание текстаи может принимать значения: left, right,center, justify.

<br> устанавливает принудительный перенос строк< hr> рисует горизонтальную линию. Параметры

горизонтальной линии можно задать сиспользованием атрибутов тега:align=… определяет выравнивание линииcolor=… цвет линииnoshade=…рисует линию без трехмерныхэффектовsize=…толщина линии в пикселяхwidth=…ширина линии в пикселях.

При установке разметки текста теги можно писать вручную, илипользоваться панелями инструментов HTML, HTML Formatting, HTML

12

Tables и HTML Forms. Например, для установки жирного начертаниятекста следует:

1. выделить фрагмент текста, который следует сделать жирным;2. нажать на панели инструментов HTML Formatting кнопку с

указанием жирного начертания;3. в результате необходимые теги будут добавлены в документ;4. если есть необходимость задать атрибуты тега, то сделать это

можно с помощью палитры Inspector. Выделить тег, которомуследует изменить атрибуты и установить их значение.

1.1.7 Специальные символы и комментарии

Ряд символов в языке используется в служебных целях (знакибольше и меньше), а ряд символов невозможно набрать на клавиатуре(неразрывный пробел, копирайт). Для отображения таких символовиспользуют специальные коды, которые пишут во время верстки html-страниц (см. Таблицу 1.3):Таблица 1.3 – Спецсимволы языка HTML

Имя Код Вид Описание

" " " двойная кавычка

& & & амперсанд

< < < знак 'меньше'

> > > знак 'больше'

неразрывный пробел

§ § § параграф

© © © знак copyright

® ® ® знак зарегистрированнойторговой марки

° ° ° градус

± ± ± плюс-минус

™ ™ ™ торговая марка

° ° ° градус

13

Такие символы можно добавлять как в виде имени, так и в видекода. В программе HTMLPad для этого можно использовать командуInsert Þ Character Þ Special Character…

Для комментариев или временного исключения текста из html-страницы используют пары символов: <!-- Текст комментария ->.

1.2 Практическая часть1. Запустите веб-сервер: Пуск Þ Денвер Þ Start (или

C:\WebServers\denwer\run.exe). Когда он запустится в системном трееу вас появится значок в виде малинового пера.

2. Проверьте работу Денвера выполнив в командной строке pingtest1.ru. Если ответ происходит от адреса 127.0.0.1 значит Денверзапущен и успешно работает на локальном компьютере.

3. Откройте в браузере адрес test1.ru. Если происходит запрос пароля,то отключите в настройках прокси сервер для адреса test1.ru. ДляInternet Explorer необходимо выполнить следующие действия:Сервис Þ Свойства обозревателя Þ Подключения Þ Настройкасети Þ Дополнительно. В поле Не использовать прокси сервер дляадресов начинающихся с: добавить к имеющимся записям (черезточку с запятой) адрес test1.ru.

4. Обновите страницу с адресом test1.ru.5. Для создания собственных доменов, на локальном компьютере

создайте в каталоге c:\WebServers\home папку с именем доменаhelp.ua (для 451 группы и help.ru для 452 группы), на котором выбудите проводить тестирование сайта. Сам сайт находится в архивеприлагаемом к лабораторной работе. А архив к лабораторнымработам на сайте study.pmkt.com.ua в разделе Учебные курсы ÞДисциплины.

6. В папке help.ua (или help.ru) создайте папку www в которуюскопируйте содержимое папки htmlbook (взятой из архива клабораторной работе).

7. Проверьте что бы файл index.html содержался в папке www, а не вовложенных папках.

8. Используя меню Пуск перезапустите Денвер (для того что бы вновьсозданный домен “поднялся”). Проверьте работоспособность сайтачерез команду ping, а затем посмотрите в браузере. Обратитевнимание, что на экране отображаются файлы из папкиc:\WebServers\home\help.ua\www , но путь к файлам указан как длясервера с указанием доменного имени, а не как для файлов с диска С.

9. Создайте свой домен, в имени которого будет присутствовать вашафамилия и группа. В папке www вашего домена (каталога) создайтефайл index.html (именно с этого файла всегда начинается загрузкасодержимого домена, если конечно, не указано что-то другое явно).

10.Откройте файл index.html с помощью программы HTML Pad 2008.

14

11.Запишите в него следующие строки:<html> <head> <title> Заголовок окна </title> </head>

<body> Осваиваваем web-технологии :) </body></html>

12.Сохраните файл. Перезапустите Денвер(= веб-сервер). Проверьте вбраузере результат, набрав в адресной строке имя вашего сервера иззадания 8. В случае возникновения проблем с загрузкой сервераобратитесь к теоретическим сведениям.

13.Обратите внимание на структуру окна в программе HTML Pad 2008.В правой части окна находится Инспектор атрибутов тегов (еслиокна Inspector нет на экране, то отобразить его можно командойView Þ Inspector). Это окно содержит дополнительные атрибутытегов (имя тега всегда заключается между треугольной паройскобочек).

14.Установите курсов внутри тега <body> и просмотрите какиеатрибуты есть у этого тега. Измените атрибуты text (белый) и bgcolor(синий). Сохраните изменения. Посмотрите результат на вкладкеPreview и в браузере. Таким образом, добавляя теги и изменяя ихатрибуты можно создать документ любой сложности.

15.Все файлы и изображения, которые будут появляться на вашей веб-страничке, должны располагаться внутри папки <имя домена>/wwwи иметь адреса начиная с корня сайта, а не с корня диска С: или D:Поэтому выберите фоновое изображение, скопируйте его в папкуwww и измените фон страницы (атрибут background в теге body).Сохраните и просмотрите результаты работы в браузере.

16.Используя информацию текстового файла из архива к лабораторнойработе отформатируйте содержимое страницы таким образом, что быона была похожа на рисунок 1.6 (подробное описание начинается спункта 17). При форматировании используйте теги из теоретическихсведений и из приложения А, а также подробное описание тегов издомена html.ua(.ru);

17.Создайте новый документ с именем lab1.htm и сохраните его в корнесвоего домена.

18.Между открывающимся и закрывающимся тегом <body> добавьтетекст из файла. Сохраните его и посмотрите в браузере чтополучилось.

19.Измените фон страницы и цвет текста согласно рисунку.20.Разбейте текст на абзацы используя тег <p>.

То, что будет отображатьсявнутри окна браузера

Заголовок окна браузера

15

Рисунок 1.6 – Образец для выполнения лабораторной работы21.Обратите внимание на то, что бы у вас не было красных (не

закрытых) тегов.22.Установите абзацам выравнивание. Для этого установите курсов во

внутрь открывающегося тега абзаца (в тег <p>). Перейдите напанель Inspector и в атрибуте aling выберите нужное значение.Если значение выравнивания по ширине не выбирается из списка, тоустановите его вручную: align=“justify”.

23.Установите словам жирное, подчеркнутое и курсивное начертание.24.Во втором абзаце используйте верхний индекс.25.Использую специализированные теги выделите цитату и

программный код. Используйте дополнительный тег <pre> длясохранения числа пробелов между словами в программном коде.

26.Используя тег <font> выделите названия поисковых систем.27.Измените цвет яндекса на желтый.

16

28.Добавьте в документ два линии, первую длиной в 400 пикселей, авысотой в 5 пикселей. А вторую и третью шириной 50%.

29.Используя теги <h1>..<h6> выделите заголовки.30.Используя коды специальных символов отобразите на странице знак

меньше. И подпишите выполненное задание как указано нарисунке 1.6.

31.Создайте новый файл lab1.1.html и отформатируйте текст такимобразом, что бы он отображался в браузере как на рисунке code.pngиз архива к лабораторной работе.

32.Проверьте что все файлы у вас доступны через сервер сиспользование доменного имени.

33.Покажите выполненную работу.

1.3 Контрольные вопросы1. Как добавить в Денвер свой домен?2. Как проверить работоспособность нового домена?3. Какую программу можно использовать для создания html-страниц?4. Для чего предназначена палитра Inspector в программе

HTMLPad 2008?5. Что такое тег?6. Какие существуют теги уровня документа?7. Какими тегами можно выделить текст жирным, курсивом,

подчеркиванием?8. Какие атрибуты используются тегом <body>?9. Какими тегами можно отметить верхний и нижний индексы?10.Какой тег позволяет изменить одновременно шрифт, цвет текста и

размер текста?11.В чем отличие тегов <br> и <p>?12.С помощью чего можно управлять выравниванием абзаца?13.Как добавить в документ горизонтальную линию?14.Что такое специальные символы и как их можно добавить в

документ?15.Между какими символами заключаются комментарии?

17


Тема: Изображения. Списки. СсылкиЦель: 1) Научиться добавлять изображения в документ и управлять

атрибутами тега <img>;2) Научиться создавать нумерованные, маркированные и

многоуровневые списки;3) Научиться создавать внутренние и внешние ссылки.

Время: 2 ч.


2.1.1 Изображения

Вставка картинок в html-документ осуществляется сиспользованием тега <img>. Тег можно записать вручную и затем спомощью автодополнения кода или с помощью панели Inspecrot указатьего атрибуты. Можно также воспользоваться кнопкой Image на панелиинструментов HTML программы HTMLPad 2008.

Тег <img> имеет следующие атрибуты (см. таблицу 2.1):

Таблица 2.1 – Атрибуты тега <img>

Атрибут Назначение

srcуказывает на путь к графическому файлу. Пути могу бытьотносительными: photo.jpg, ../img/photo2.gif илиабсолютными: http://mysite.com/pic/photo3.jpg

lowsrc путь к графическому файлу худшего качества (и меньшегоразмера), который грузится перед полноразмерной картинкой

alt иtitle

альтернативный текст для изображения, используется вкачестве всплывающей подсказки или поисковыми системами

border толщина рамки вокруг изображения. Цвет рамки определяетсятекущим цветом текста

hspace горизонтальный отступ от изображения до текстаvspace вертикальный отступ от изображения до текста

heightвысота изображения, если не задана, то отображаетсяоригинальный размер изображения, если указана доизображение масштабируется

widthширина изображения, если при указании шириныодновременно с высотой не сохраняются пропорции, тоизображение искажается

align определяет как рисунок будет выравниваться и обтекатьсятекстом (см. рисунок 2.1)

18

Рисунок 2.1 – Примеры выравниванияизображения относительно текста

2.1.2 Списки

В языке HTML различают следующие виды списков:а) маркированные списки;б) нумерованные списки;в) списки определений.Для создания маркированных списков применяют тэги <ul> и

<li>. Тэгом <ul> отмечается начало и окончание всего списка. Тэгом<li> обозначают начало и конец отдельного элемента списка.

По умолчанию элементы списка маркируются черным кружочком.При помощи атрибута type можно изменить стиль маркирования. Примериспользования списка приведен в Листинге 2.1:Листинг 2.1 – Пример маркированного списка

Аналогично маркированным спискам, используя теги <ol> и <li>можно создавать нумерованные списки. Для создания вариативностинумерации используют атрибут type для выбора стиля нумерации иstart для указания символа, с которого следует начать нумерацию

19

списка. Для тега <li> атрибут value позволяет задать номер текущемуэлементу списка.Листинг 2.2 – Пример использования нумерованного

Список определений представляет собой текст, состоящий из двухвзаимосвязанных наборов – списка с терминами и списка определенийтерминов. Вначале указывается первый термин, ниже него идет егоопределение, затем следующий термин с определением и т.д.

Структура списка определений следующая:Термин 1

Определение термина 1Термин 2

Определение термина 2Сам список задается с помощью тега <dl>, термин – тегом <dt>, а

его определение – с помощью тега <dd>. Вложение тегов для созданиясписка определений продемонстрировано в листинге 2.3:Листинг 2.3 – Пример использования списка определений

20

2.1.3 Ссылки

Ссылка или Гиперсвязь (Link, Hyperlink) – фрагмент текста илиграфики на HTML-странице ссылающийся на другую позицию в том жедокументе или на объект в другом документе (возможно дажерасположенном на другом сервере).

Для создания ссылок в языке HTML используют тег <a> (anchor –якорь). Атрибуты, которые используются в ссылка приведены втаблице 2.2.Таблица 2.2 – Атрибуты тега <а>


href

задает адрес документа, на который следует перейти.Является обязательным атрибутом для тега <a>. Можетсодержать как относительный, так и абсолютный адресстраницы. А также протоколы отличные от http, например ftp,mailto, ed2 и т.д.

name устанавливает имя якоря, для определения позиционированияссылки внутри документа.

target

устанавливает имя окна или фрейма, в котором будетзагружен документ. Возможны также вариантыиспользования: _self для открытия ссылки в том же окне и_blank для открытия ссылки в новом окне.

title добавляет всплывающую подсказку к тексту ссылки

Листинг 2.4 – Пример использования ссылок

2.2 Практическая часть1. Запустите веб-сервер Денвер.2. Создайте в своем домене файл lab2.htm.

21

3. Используя данные из архива к лабораторной работе вставьте вдокумент изображения с учетом: ширины, высоты, выравнивания,всплывающих подсказок и т.д.

4. Создайте список определений согласно рисунку. Используйте дляэтого теги <dl>, <dd> и <dt>.

5. Создайте маркированный список используйте тег <ul>. Изменитевнешний вид маркера на квадратик.

6. Создайте нумерованный список. Осуществите нумерацию римскимицифрами и измените начало нумерации с числа XV.

7. Создайте список с многоуровневой нумерацией.8. Обозначьте начало каждого раздела сегодняшней лабораторной как

именованный якорь: <a name=”image”>, <a name=”spisok”>.9. В начале странички добавьте список ссылок на все разделы

лабораторной работы. Помните, что при ссылке на именованныйякорь следует использовать знак # перед именем якоря.

10.Добавьте внизу странички ссылку на загрузку установочного файлаДенвера.

11.Добавьте внизу документа ссылку на свою страничку в контакте,которая будет открываться в новом окне.

12.Второе изображение в документе сделайте ссылкой на поисковуюсистему Google

13.Создайте новый файл index.html, в котором разработайте список,содержащий ссылки на задания двух лабораторных работ.

14.Создайте новый файл my.html и запишите в нем: нумерованныйсписок из известных вам языков программирования, маркированныйсписок из известных вам цветовых палитр.

15.Добавьте ссылку на файл my.html в файл index.html.16.Покажите выполненную работу преподавателю.

2.3 Контрольные вопросы1. Какой тег служит для вставки изображения в html-документ?2. Где в теге <img> указывается путь к графическому файлу?3. Как задать выравнивание картинки относительно текста?4. Какие списки существуют в HTML?5. Какой тег участвует в создании как маркированного так и

нумерованного списков?6. Как изменить порядок нумерации в нумерованном списке?7. Как изменить вид маркера в маркированном списке?8. Что такое списки определений?9. Как задать якорь для ссылок в приделах одного документа?10.За что отвечает атрибут target у тега <a>?

22


Тема: Таблицы.Цель: 1) Научиться создавать таблицы заданного размера;

2) Научиться объединять ячейки по горизонтали и вертикали;3) Научить создавать фиксированные и динамические таблицы;4) Научиться управлять расстоянием между ячейками и рамкой

таблицы.Время: 2 ч.


3.1.1 Таблицы. Общие сведения

Таблицы в HTML организуются как набор столбцов и строк.Ячейки таблицы могут содержать любые HTML-элементы, такие, какзаголовки, списки, абзацы, фигуры, графику, а также элементы форм.Таблицы с невидимой границей долгое время использовались для версткивеб-страниц, позволяя разделять документ на модульные блоки. Подобныйспособ применения таблиц нашел воплощение на многих сайтах, пока емуна смену не пришел более современный способ верстки с помощью слоев.

Для создания таблиц пользуются тегом <table>, которыйопределяет начало и конец таблицы. Основные атрибуты тега <table>приведены в таблице 3.1.Таблица 3.1 – Атрибуты тега <table>


аlign определяет выравнивание таблицы относительно всегодокумента

width ширина таблицы в процентах или в пикселях

heightвысота таблицы. Часто не поддерживается браузерами.В случае если размер текста превышает размер таблицы– таблица растягивается на высоту текста.

background задет фоновый рисунок для всей таблицыbgcolor задает цвет фона таблицы

border ширина рамки вокруг таблицы, может быть значительнотолще чем ширина рамки между ячейками

cellspacing расстояние между ячейкамиcellpaddiing отступ от рамки до содержимого ячейки

При построении таблица разделяется на строки (тег <tr>), которыев свою очередь делятся на ячейки (тег <td>). Пример таблицы приведен влистинге 3.1.

23

Листинг 3.1 – Реализации таблицы на две строки и три столбца

В предоставленной на листинге таблице, с помощью атрибутовустановлены фиксированная ширина, рамка, шириной в два пикселя и цветрамки. При наполнении ячеек, если между парой тегов <td> … </td>нет графических символов или специального символа неразрывный пробел– граница ячейки на странице не прорисовывается.

Вместо текста внутри ячейки может быть любой элемент: список,изображение, другая таблица и т.д.

Тег <tr> служит контейнером для создания строки таблицы.Каждая ячейка в пределах такой строки может задаваться с помощью тега<th> или <td>. Тег <tr> может содержать следующие атрибуты:align, valign, bgcolor, bordercolor. Возможные атрибуты длятегов <td> и <th>: align, background, bgcolor, bordercolor,colspan, height, nowrap, rowspan, valign, width.

3.1.2 Операции над ячейками таблицы

Для объединения ячеек таблицы используют атрибуты colspan – дляуказания числа объединяемых ячеек по горизонтали и rowspan – дляуказания числа объединяемых ячеек по вертикали. Пример объединенияячеек таблицы приведены в листингах 3.2 и 3.3.Листинг 3.2 – Объединение ячеек по вертикали

перваястрока

втораястрока

24

Листинг 3.3 – Объединение ячеек по горизонтали

Пример создания таблицы для создания сайта, будет рассмотрен впрактической работе

3.2 Практическая часть1. Запустите веб-сервер Денвер.2. Создайте файл lab3.htm и сохраните его в своей папке на веб-

сервере.3. Создайте в файле lab3.htm таблицу размером 3х3 для игры в

«Крестики-нолики». Для создания таблицы используют тег<table>. Для таблицы необходимо создать рамку в дляотображения границ и пустые ячейки заполнить символомнеразрывного пробела.

4. Дополнить файл таблицей собъединенными ячейками и болеежирной рамкой для всей таблицы,текст выровнять по середине ячейки(вертикально и горизонтально).

5. Создать таблицу, установить ейследующие параметры: располо-жение на экране – по центру, ширина70% от ширины экрана. Цветвертикальной общей ячейки –голубой, общей горизонтальнойячейки – желтый. Цвет всей оставшейся части таблицы – зеленый.Выравнивание текста в ячейках – по правому краю.

6. Создать в отдельном файле таблицу для шаблона сайта, котораябудет отвечать следующим требованиям (см. рисунок 3.1).

25

Рисунок 3.1 – Шаблон сайта– шапка таблицы должна состоять из двух ячеек;– размер левой верхней ячейки задать в зависимости от размера

рисунка-фона (следует задать ширину и высоту ячейки исходя изразмера изображения);

– фоном этой ячейки сделать изображение (атрибут background длятега ячейки <td>);

– Правая верхняя ячейка должна занимать все оставшееся место в окнебраузера и иметь цвет фона #.... (узнать цвет фона можно используюкнопку select в окне выбора цвета фона);

– для того что бы убрать расстояние между ячейками используйтеатрибуты cellpadding и cellspacing тега <body>;

– в верхней правой ячейке измените цвет текста и его выравнивание(согласно рисунку) и запишите в ней свою фамилию. Длявыравнивания текста необходимо использовать атрибуты aling иvalign;

– центральную (контентную) часть сделать высотой в 350 пикселей изадать цвет фона #fff3e5;

– в центральной ячейке объединить две ячейки так, что бы получиласьодна общая, установить выравнивание текста по ширине и поверхнему краю ячейки;

– задать подвал таблицы высотой в 30пикселей, текст выровнять по правому краю.Включить в подпись символ Ó.

7. В отдельном файле создать таблицуразмером 3х3, (пунктиром указаны границыячеек).

8. Задать ширину и высоту таблицы и ячеектак, что бы ширина таблицы уменьшалась иувеличивалась при изменении размеров окна браузера, а высота былаустановлена равной высоте браузера. Если ячейка пустая, то она не

26

будет отображена на экране, а если в ячейке находится пробел, то еевысота может быть больше необходимой, для уменьшения высотыячейки следует использовать вместо неразрывного пробелапрозрачную картинку размером в 1 пиксель (картинка есть в архивек лабораторной работе).

9. Добавьте в файл index.htm ссылку выполненные задания излабораторной работы №3.

10.Покажите выполненную работу преподавателю

3.3 Контрольные вопросы1. Какой тег служит для вставки таблицы в html-документ?2. Какие атрибуты тега <table> позволяют изменить фон таблицы и

ширину границы таблицы?3. Задается ли ширина границы таблицы одна для все таблицы или

задается отдельно для внешней границы и внутренних ячеек?4. Какой тег отвечает за начало строки?5. Какой тег отвечает за начало ячейки?6. Как изменить выравнивание текста в ячейке?7. Может ли быть в одной строке ячейки с различным вертикальным

выравниванием?8. Если для таблицы установить цвет фона и фоновое изображение

одновременно, что будет отображаться на экране?9. Как можно объединить ячейки по горизонтали?10.Как можно в таблице объединить ячейки по вертикали?

27


Тема: ФормыЦель: 1) Научиться создавать формы и указывать обработчиков форм;

2) Научиться создавать элементы управления формы;3) Закрепить навыки, полученные при создании таблиц.

Время: 2 ч.


4.1.1 Формы. Общие сведения

Формы предназначены для организации взаимодействия спользователем. Они позволяют вводить текст, осуществлять выбор изпредложенных значений при помощи списков или кнопок, организовыватьинтерактивный обмен информацией между Web-страницей и сервером.

Как правило, форма работает совместно с установленным насервере сценарным приложением, обрабатывающим введеннуюинформацию. Механизм обработки форм представлен на рисунке 4.1.

Рисунок 4.1 – Обработка данных формы сервером

Наиболее широко формы применяются для поиска, регистрации,заполнения анкет, тестов и т.д. Форма определяется с помощью тегов<form></form>, между которыми располагаются поля ввода, кнопки, атакже все необходимые элементы оформления формы. Для указанияпараметров в теге <form> используются атрибуты (см. таблицу 4.1).Таблица 4.1 – Атрибуты тега <form>


action адрес программы или документа, которые обрабатываютданные формы

methodметод передачи данных по протоколу http. Возможныеварианты значений метода: GET – способ передачи, когдаданные, введенные в форму добавляются в строку запроса

Сервер Сеть Домашнийкомпьютер

веб серверPHP 3. вызов

скрипта пообработкеформы

2. запрос страницы понажатию на кнопку

браузер

1. ввод данняхв форму

4. передачарезультата

5. передача данныхклиенту

6. выход данных наэкран (в браузере)

28

name имя формы. Используется для обращения к форме спомощью javscript.

target имя окна или фрейма, куда обработчик будет загружатьвозвращаемый результат

enctypeтип информации формы. Различается в случаеиспользования символьно-цифровой информации и в случаеиспользования файлов

4.1.1 Элементы управления формы

Сама форма служит только обязательным контейнером дляразмещения элементов управления. Внешний вид элементов управлениязависит от установленных значений атрибутов.

Поле ввода.Однострочное поле ввода и используется, когда необходимо, чтобы

пользователь ввел в форму данные в произвольной форме ноограниченные по объему. Для получения поля ввода используют тег<input type=”text”>.

Тег <input> является одним из разносторонних элементов формыи позволяет создавать разные элементы интерфейса и обеспечитьвзаимодействие с пользователем. Главным образом <input>предназначен для создания текстовых полей, различных кнопок,переключателей и флажков.

Основной параметр тега <input>, определяющий вид элемента –type. Он позволяет задавать следующие элементы формы: текстовое поле(text), поле с паролем (password), переключатель (radio), флажок(checkbox), скрытое поле (hidden), кнопка (button), кнопка дляотправки формы (submit), кнопка для очистки формы (reset), поле дляотправки файла (file) и кнопка с изображением (image). Для каждогоэлемента существует свой список параметров, которые определяют его види характеристики.

Кроме атрибута type тег имеет следующие атрибуты (см.таблица 4.2):Таблица 4.2 – Атрибуты тега <type>


align определяет выравнивание, в случае если type=“image”

alt определяет альтернативный текст для кнопки сизображением (type=“image”)

checked предварительно активированный переключатель илифлажек

disabled блокирует доступ и изменение элемента (поле недоступное)

29

maxlength максимальное количество символов, разрешенных в тексте

nameимя поля, предназначено для того, что бы отличать одинэлемент управления от другого. Имя может быть указано повсем правилам именования переменных

readonly разрешает только чтение с текстового элемента управленияsize ширина текстового поля в символах

value значение элемента. Значение переменной указанной ватрибуте name

Переключатель.Переключатели определяют поля выбора одного значения из

нескольких доступных, для каждой позиции переключателя создается свойтег <input type=“radio”>. Группируются переключатели припомощи одинакового имени, задаваемого атрибутом name.

Флажки.Флажки используются, когда необходимо, чтобы пользователь

выбрал один или несколько вариантов из ограниченного числа вариантоввыбора. Флажки в форме не зависят друг от друга, их можно установитьили сбросить в любой комбинации. Для каждого флажка необходимозадать свое уникальное имя при помощи атрибута name. Создаютсяфлажки тегом <input type=“checkbox”>. Для установки флажка призагрузке страницы необходимо указать атрибут checked=“checked”.

Командные кнопки.Командная кнопка отправки (type=“submit”) используются для

выполнения пересылки данных формы на сервер. Командная кнопкасброса (type=“reset”) возвращает форму к исходному состоянию(очищает форму).

Поле выбора файла.Поле выбора файла (type=“file”) создает поле для выбора

файла, который будет загружен на сервер вместе с информацией формы.Рядом с полем ввода отображается командная кнопка “Обзор…”,открывающая стандартное диалоговое окно выбора файла. Если формаподразумевает загрузку файлов на сервер, то в атрибутах формы должныбыть установлены следующие атрибуты method=“post” иenctype=“multipart/form-data”.

Списки выбора.Списки выбора бывают двух типов:

раскрывающиеся списки (выпадающие меню) исписки с множественным выбором. Независимо оттипов списков описываются они одинаково с помощью пары тегов<select></select>. Отдельные элементы списка задаются с

30

использованием тега <option>. Тип списка определяется при помощиатрибута multiple тега <select>.

Пример использования формы приведен в листинге 4.1:Листинг 4.3 – Использование формы и элементов управления

4.2 Практическая часть1. Запустите веб-сервер Денвер.2. Создать форму для заполнения анкеты (см. архив к лабораторной

работе). Обратите внимание что страница с анкетой сверстана в видетаблицы с невидимой рамкой (см. рисунок 4.2).

31

Рисунок 4.2 – Форма заполнения анкеты3. Сохраните анкету в файле anketa.htm на своем домене. Обратите

внимание, что вся форма должна заключаться в тег <form>.4. Создать поля для ввода имени пользователя и пароля пользователя

(символы вводимые в поле Пароль должны отображатьсязвездочками). Вставка полей осуществляется тегом <input> сразличными значениями атрибута type.

5. Создать поля для ввода даты рождения. День и месяц рождениявыбирается из выпадающего списка, а год вводится в ручную в полеввода, причем количество вводимых символов не должно превышатьчетыре. Для формирования списка использовать тег <select>, адля задания ограничения на количество вводимых символов атрибутmaxlength тега <input>.

6. Создать переключатели для выбора пола. Реализовать возможностьвыбора только одного варианта. Использовать тег <input>.

7. Создать флажок, с текстом «Да, я желаю получать спам» с флажком,установленным по умолчанию. Использовать тег <input>.

8. Создать переключатели для выбора количества писем получаемых вдень, проверить что бы переключатели из задания 4 и 6 формировалидве различные группы.

9. Создать список интересов с возможностью выбора несколькихэлементов.

32

10.Добавить поле для ввода нескольких строк текста с дополнительнойинформацией о пользователе. Поле должно иметь размеры 7 строк и30 столбцов. Для вставки такого поля используйте тег <textarea>.

11.Создать поле с кнопкой «Обзор» для загрузки файла изображения.Использовать тег <input>.

12.Создать две кнопки. Первую для передачи данных формы на сервер,а вторую для очистки формы. Использовать тег <input>.

13.Покажите выполненную работу преподавателю

4.3 Контрольные вопросы1. В какой тег заключаются все элементы управления?2. Какой атрибут тега <form> указывает на файл, который будет

обрабатывать данные формы?3. Какие существуют значения атрибута type в теге <input>?4. В чем отличия тега <input type=”reset”> и <input

type=”submit”>?5. Как добавить на форму переключатель?6. Для чего предназначен тег <textarea>?7. Сколько тегов необходимо что бы вывести на экран поле ввода для

указания пути к файлу и кнопки обзор?8. Какие существуют методы передачи данных формы на сервер?9. Как осуществляется обработка форм?10.За счет чего переключатели можно разбивать на группы?11.Какой атрибут тега <input> позволяет указать значение, которое

будет заполнено при первом отображении формы?12.Для чего предназначен атрибут checked?

33


Тема: Фреймы. Карты изображенийЦель: 1) Научиться создавать фреймы;

2) Научиться управлять свойствами фреймов;3) Научиться создавать и применять карты изображений для не

прямоугольных ссылок.Время: 2 ч.


5.1.1 Фреймы

Фреймы позволяют разбивать веб-страницы на скроллируемыеподокна с целью улучшения внешнего вида и функциональностиинформационных систем и веб-приложений. Каждый фрэйм имеетследующие свойства:

– каждый фрэйм имеет свой URL, что позволяет загружать егонезависимо от других фрэймов;

– каждый фрэйм имеет собственое имя (атрибут name),позволяющее переходить к нему из другого фрэйма (атрибутtarget в теге ссылки <a>);

– размер фрэйма может быть изменен пользователем прямо наэкране при помощи мыши (если это не запрешено указаниемспециального параметра).

Эти свойства фрэймов позволяют создавать интерфейсные решения,которые могут совмещать статическую информации в одном фрэйме (этоможет быть оглавление, графический логотип фирмы или наборуправляющих кнопок) и динамическую информацию в другом фрейме.Таким образом в одном фрэйме находится собственно запрос, а в другомрезультаты запроса.

Формат документа, использующего фрэймы, внешне оченьнапоминает формат обычного документа, только вместо тэга <body>используется контейнер <frameset>, содержащий описание внутреннихhtml-документов, содержащий собственно информацию, размещаемую вофрэймах. Контейнер <frameset>, в свою очередь состоит из самихфреймов – тег <frame> и <noframe> позволяет строить двойныедокументы для броузеров, поддерживающих фрэймы и неподдерживающих фрэймы.

Тэг <frameset> имеет два взаимоисключающих атрибута: rows(определяет число и высоту строк в наборе фреймов) и cols (определяетчисло и ширину столбцов в наборе фреймов). Ширина (или высота)фрейма может задаваться как в пикселях, так и в процентах от общейширины (или высоты) окна браузера.

34

Например:<FRAMESET COLS="50,*,50"> – описывает три фрэйма, два по

50 точек справа и слева, и один внутри этих полосок.<FRAMESET ROWS="20%,3*,*"> – описывает три фрэйма,

первый из которых занимает 20% площади сверху экрана, второй 3/4оставшегося от первого фрэйма места (т.е. 60% всей площади окна), апоследний 1/4 (т.е. 20% всей площади окна.

Тег <frame> имеет свои атрибуты, которые детально описываютсодержимое и поведение каждого фрейма (см. таблица 5.1):Таблица 5.1 – Атрибуты тега < frame>


src задает путь к файлу, предназначенному для загрузки вофрейме

name задает уникальное имя фрейма

scrolling способ отображения полосы прокрутки во фрейме.Возможные варианты значений: yes, no, auto.

bordercolor цвет линии границыframeborder определяет следует ли отображать рамку вокруг фрейма

norsize определяет можно изменять размер фреймапользователю или нет

Пример использования фреймов рассмотрен в листинге 5.1:Листинг 5.1 – Пример использования фреймов

35

Комментарий к листингу.1. в документе отсутствует тег <body>;2. вначале фреймовая структура разбита на два столбца: первый

шириной в 200 пикселей, а второй занимает все оставшеесяпространство;

3. в левом фрейме открыт файл menu.htm. Ссылки этом файлеорганизованы с указанием целевого фрейма, в котором должныоткрывать новые файлы;

4. вместо правого фрейма организована новая фреймовая структураиз двух строк. Высота первой строки 30% от общей высоты окна,а нижняя часть занимает оставшиеся 70%;

5. в верхнем файле открыт файл header.htm;6. в нижнем файле открыт файл content.htm или тот, который будет

выбран в левом фрейме. Именно по имени тега content (см.листинг 5.1) и по атрибуту target в теге <a> файла menu.htm(см. листинг 5.2) определяется где должна быть открыта ссылка.

Листинг 5.2 – Атрибут target в теге <a>

5.1.2 Карты изображений

Карты-изображения позволяют привязывать ссылки к разнымобластям одного изображения. Реализуются карты изображений в двухразличных вариантах – серверном и клиентском.

В случае применения серверного варианта браузер посылает запросна сервер с указанием координат курсора мыши над изображением дляполучения адреса выбранной ссылки и ждет ответа с требуемойинформацией. Такой подход требует дополнительного времени наожидание результата и отдельные файлы для каждой карты-изображения.

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Клиентский вариант являетсяболее часто используемым. Для указания браузеру, что изображениеявляется картой, используется атрибут usemap в теге <img>. Он являетсяссылкой на описание конфигурации карты, которая задается тегом <map>.Значение атрибута name данного тега должно соответствовать имени вusemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area> с атрибутами (см таблица 5.2):

36

Таблица 5.2 – Атрибуты тега <area>


shapeопределяет форму активной области. Может приниматьзначения circle, rect, poly

alt добавляет альтернативный текст подписи ссылки длякаждой области

cords

задает координаты активной области. Координатыотсчитываются в пикселях от левого верхнего углаизображения. Первое число является координатой погоризонтали, второе – по вертикали.

Список координат передаваемых в атрибут coords зависит отформы области.

Для окружности задаются три числа – координаты центра круга ирадиус: <area shape="circle" coords="230,340, 100"href="circle.html">

Для прямоугольника – координаты левого верхнего и правогонижнего угла: <area shape="rect" coords="24,18, 210,56"href="rect.html">

Для полигона задаются координаты его вершин.В случае использования ссылок не прямоугольной формы

альтернативой картам изображения может быть внедрение flash.

5.2 Практическая часть1. Запустите веб-сервер Денвер.2. Создайте html-файл (frame.htm), состоящий из трех

фреймов (см. рисунок справа). Для созданияфрейма необходимо после раздела заголовкадокумента указать структуру фреймов: два фреймавертикальный, а во втором вертикальном еще двагоризонтальных фрейма…

<frameset cols="20, *"><frame src="file.htm"><frameset rows="100, *">

<frame src="file.htm"><frame src="file.htm">

</frameset></frameset>

3. Поместите файл на свой веб-сервер и дайте каждому фреймууникальное имя: значение атрибута name для тега <frame>.

4. Задайте левому фрейму фиксированную ширину в 234 пикселя сзапретом изменять ширину фрейма (атрибут noresize).

5. В левый фрейм поместите файл меню (menu.htm), который будетсостоять из списка лабораторных работ. Менюразместите в таблице, состоящей из 3-х строк(в каждую строку фоном поместите рисунок).

37

6. Задайте для каждой лабораторной работы ссылку насоответствующий документ, который будет открыт в правом нижнемфрейме. Для открытия ссылки в другом фрейме используйте атрибутtarget тега <a>, в качестве значения атрибута target укажитеимя фрейма в котором необходимо открыть файл.

7. В верхний фрейм поместите в качестве источника поисковуюсистему google.com. Значение атрибута src для второго тега<frame>.

8. Создайте в папке своего домена файла map.htm, содержащий картуизображений.

9. Поместите в файл map.htm изображение-карту с геометрическимифигурами:<img src="figure_1.png" border="0" usemap="#navigation">

10.Дополните файл обработкой карты изображений<map name="navigation"><area shape="circle" coords="72,93,40"

href="krug.html" title="Круг"><area shape="rect" coords="129,129,268,194"

href="pryam.html" title="Прямоугольник"><area shape="poly" coords="168,108,221,15,279,108"

href="triangle.html" title="Треугольник"></map>

11.Проверьте работу карты изображений. Обратите внимание навсплывающие подсказки и ссылки.

12.Создайте в отдельном файле аналогичную карту зображений длязадания областей Украины. В карте изображений выделите триобласти, на киевскую область назначьте ссылку на сайт meta.ua надве других области любые ссылки. Что бы узнать координаты точекизображения можно использовать программу PaintJ.

13.Добавьте в файл, находящийся в левом фрейме ссылку на обе картыизображений.

14.Покажите выполненную работу преподавателю.

5.3 Контрольные вопросы1. Для чего используются фреймы?2. За что отвечает атрибут target тега <a>?3. Как указать ссылке в каком фрейме надо открыться?4. В каких единицах можно задать ширину или высоту фрейма?5. Можно ли изменять границы между фреймами?6. Для чего используются карты изображений?7. Какие формы фигур могут использоваться в картах изображений?8. Как можно подписать фигуры карты изображений?9. Какие виды карт изображений бывают?10.Что может служить альтернативой использования карт

изображений?

38

СПИСОК ЛИТЕРАТУРЫ

1. Гончаров А. Самоучитель HTML. – СПб.: Питер, 2002. – 240 с.: ил.2. Зельдман Д. Web-дизайн по стандартам Пер. с англ. Г. П. Ковалева. -

М. : НТ Пресс, 2005. - 440 с. : ил.3. Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0. - СПб.: БХВ-

Петербург, 2003. - 672 с.: ил.4. Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство,

6-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2008. – 752 с., ил.5. Полонская Е.Л. Язык HTML. Самоучитель: – М: Издательский дом

"Вильяме", 2003. – 320 с. : ил.6. Создание Web-страниц и Web-сайтов. Самоучитель : [учеб. пособие] /

под ред. В. Н. Печникова. – М. : Изд-во Триумф, 2006.– 464 с. : ил.

39

ПРИЛОЖЕНИЕ А(справочное)

Сводная схема тегов языка HTML

40

Documents

Методические указания для лабораторных работ. HTML