МИНИСТЕРСТВО АГРАРНОЙ ПОЛИТИКИ УКРАИНЫ ТАВРИЧЕСКИЙ ГОСУДАРСТВЕННЫЙ АГРОТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
N
Факультет “Инженерии и компьютерных технологий Кафедра Прикладной математики и компьютерных технологий
WEB-ТЕХНОЛОГИИ И WEB-ДИЗАЙН ЧАСТЬ I HTML Методические указания для выполнения лабораторных работ студентами дневной формы обучения специальности 7.080402 Информационные технологи проектирования
Мелитополь 2009
Разработала:
ассистент Быковская Н. В.
Рецензент:
_____________________
Рассмотрено и одобрено на заседании кафедры ПМ и КТ от “_____” ___________________2009 г. Протокол № ________
Рассмотрено и рекомендовано в печать на методическом совете факультета “Инженерии и компьютерных технологий” “__” ________ 2009г. Протокол № ____
СОДЕРЖАНИЕ Введение ........................................................................................................ 4 1 Лабораторная работа №1......................................................................... 5 1.1 Теоретические сведения ....................................................................... 5 1.1.1 Денвер-3. Установка программного продукта. ............................. 5 1.1.2 Создание собственного домена на локальном компьютере ......... 5 1.1.3 Интерфейс программы “HTML Pad 2007” ..................................... 7 1.1.4 Структура HTML-документа .......................................................... 8 1.1.5 Теги уровня документа ................................................................... 9 1.1.6 Основные теги форматирования текста ....................................... 10 1.1.7 Специальные символы и комментарии ........................................ 12 1.2 Практическая часть ............................................................................. 13 1.3 Контрольные вопросы ........................................................................ 16 2 Лабораторная работа №2....................................................................... 17 2.1 Теоретические сведения ..................................................................... 17 2.1.1 Изображения.................................................................................. 17 2.1.2 Списки ........................................................................................... 18 2.1.3 Ссылки ........................................................................................... 20 2.2 Практическая часть ............................................................................. 20 2.3 Контрольные вопросы ........................................................................ 21 3 Лабораторная работа №3....................................................................... 22 3.1 Теоретические сведения ..................................................................... 22 3.1.1 Таблицы. Общие сведения............................................................ 22 3.1.2 Операции над ячейками таблицы ................................................. 23 3.2 Практическая часть ............................................................................. 24 3.3 Контрольные вопросы ........................................................................ 26 4 Лабораторная работа №4....................................................................... 27 4.1 Теоретические сведения ..................................................................... 27 4.1.1 Формы. Общие сведения .............................................................. 27 4.1.1 Элементы управления формы ...................................................... 28 4.2 Практическая часть ............................................................................. 30 4.3 Контрольные вопросы ........................................................................ 32 5 Лабораторная работа №5....................................................................... 33 5.1 Теоретические сведения ..................................................................... 33 5.1.1 Фреймы .......................................................................................... 33 5.1.2 Карты изображений ...................................................................... 35 5.2 Практическая часть ............................................................................. 36 5.3 Контрольные вопросы ........................................................................ 37 Список литературы...................................................................................... 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 Открывающийся тег абзаца
Закрывающийся тег абзаца
<p align=“center”>Текст первого абзаца </p> Атрибут
Значение атрибута
Рисунок 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> может содержать множество атрибутов, которые влияют на отображения всего документа вцелом.
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> устанавливает заголовки различного уровня … значимости от самого крупного h1 до самого <h6>...</h6> мелкого 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 Имя
Код
Вид
Описание
&quot;
&#34;
"
двойная кавычка
&amp;
&#38;
&
амперсанд
&lt;
&#60;
<
знак 'меньше'
&gt;
&#62;
>
знак 'больше'
&nbsp;
&#160;
&sect;
&#167;
§
параграф
&copy;
&#169;
©
знак copyright
&reg;
&#174;
®
знак зарегистрированной торговой марки
&deg;
&#176;
°
градус
&plusmn;
&#177;
±
плюс-минус
&trade;
&#8482;
™
торговая марка
&deg;
&#176;
°
градус
неразрывный пробел
13 Такие символы можно добавлять как в виде имени, так и в виде кода. В программе HTMLPad для этого можно использовать команду Insert Þ Character Þ Special Character… Для комментариев или временного исключения текста из htmlстраницы используют пары символов: <!-- Текст комментария ->. 1.2 Практическая часть 1. Запустите веб-сервер: Пуск Þ Денвер Þ Start (или C:\WebServers\denwer\run.exe). Когда он запустится в системном трее у вас появится значок в виде малинового пера. 2. Проверьте работу Денвера выполнив в командной строке ping test1.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. 4.
Как добавить в Денвер свой домен? Как проверить работоспособность нового домена? Какую программу можно использовать для создания html-страниц? Для чего предназначена палитра Inspector в программе HTMLPad 2008? 5. Что такое тег? 6. Какие существуют теги уровня документа? 7. Какими тегами можно выделить текст жирным, курсивом, подчеркиванием? 8. Какие атрибуты используются тегом <body>? 9. Какими тегами можно отметить верхний и нижний индексы? 10.Какой тег позволяет изменить одновременно шрифт, цвет текста и размер текста? 11.В чем отличие тегов <br> и <p>? 12.С помощью чего можно управлять выравниванием абзаца? 13.Как добавить в документ горизонтальную линию? 14.Что такое специальные символы и как их можно добавить в документ? 15.Между какими символами заключаются комментарии?
17
2 ЛАБОРАТОРНАЯ РАБОТА №2 Тема: Цель:
Изображения. Списки. Ссылки 1) Научиться добавлять изображения в документ и управлять атрибутами тега <img>; 2) Научиться создавать нумерованные, маркированные и многоуровневые списки; 3) Научиться создавать внутренние и внешние ссылки. Время: 2 ч. 2.1 Теоретические сведения 2.1.1 Изображения Вставка картинок в html-документ осуществляется с использованием тега <img>. Тег можно записать вручную и затем с помощью автодополнения кода или с помощью панели Inspecrot указать его атрибуты. Можно также воспользоваться кнопкой Image на панели инструментов HTML программы HTMLPad 2008. Тег <img> имеет следующие атрибуты (см. таблицу 2.1): Таблица 2.1 – Атрибуты тега <img> Атрибут src lowsrc alt и title border hspace vspace height width align
Назначение указывает на путь к графическому файлу. Пути могу быть относительными: photo.jpg, ../img/photo2.gif или абсолютными: http://mysite.com/pic/photo3.jpg путь к графическому файлу худшего качества (и меньшего размера), который грузится перед полноразмерной картинкой альтернативный текст для изображения, используется в качестве всплывающей подсказки или поисковыми системами толщина рамки вокруг изображения. Цвет рамки определяется текущим цветом текста горизонтальный отступ от изображения до текста вертикальный отступ от изображения до текста высота изображения, если не задана, то отображается оригинальный размер изображения, если указана до изображение масштабируется ширина изображения, если при указании ширины одновременно с высотой не сохраняются пропорции, то изображение искажается определяет как рисунок будет выравниваться и обтекаться текстом (см. рисунок 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
name target title
Назначение задает адрес документа, на который следует перейти. Является обязательным атрибутом для тега <a>. Может содержать как относительный, так и абсолютный адрес страницы. А также протоколы отличные от http, например ftp, mailto, ed2 и т.д. устанавливает имя якоря, для определения позиционирования ссылки внутри документа. устанавливает имя окна или фрейма, в котором будет загружен документ. Возможны также варианты использования: _self для открытия ссылки в том же окне и _blank для открытия ссылки в новом окне. добавляет всплывающую подсказку к тексту ссылки
Листинг 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. 2. 3. 4. 5.
Какой тег служит для вставки изображения в html-документ? Где в теге <img> указывается путь к графическому файлу? Как задать выравнивание картинки относительно текста? Какие списки существуют в HTML? Какой тег участвует в создании как маркированного так и нумерованного списков? 6. Как изменить порядок нумерации в нумерованном списке? 7. Как изменить вид маркера в маркированном списке? 8. Что такое списки определений? 9. Как задать якорь для ссылок в приделах одного документа? 10.За что отвечает атрибут target у тега <a>?
22
3 ЛАБОРАТОРНАЯ РАБОТА №3 Тема: Цель:
Таблицы. 1) Научиться создавать таблицы заданного размера; 2) Научиться объединять ячейки по горизонтали и вертикали; 3) Научить создавать фиксированные и динамические таблицы; 4) Научиться управлять расстоянием между ячейками и рамкой таблицы. Время: 2 ч. 3.1 Теоретические сведения 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
4 ЛАБОРАТОРНАЯ РАБОТА №4 Тема: Цель:
Формы 1) Научиться создавать формы и указывать обработчиков форм; 2) Научиться создавать элементы управления формы; 3) Закрепить навыки, полученные при создании таблиц. Время: 2 ч. 4.1 Теоретические сведения 4.1.1 Формы. Общие сведения Формы предназначены для организации взаимодействия с пользователем. Они позволяют вводить текст, осуществлять выбор из предложенных значений при помощи списков или кнопок, организовывать интерактивный обмен информацией между Web-страницей и сервером. Как правило, форма работает совместно с установленным на сервере сценарным приложением, обрабатывающим введенную информацию. Механизм обработки форм представлен на рисунке 4.1. Сеть
Сервер
браузер
веб сервер PHP 3. вызов скрипта по обработке формы 4. передача результата
Домашний компьютер
2. запрос страницы по нажатию на кнопку
5. передача данных клиенту
1. ввод даннях в форму
6. выход данных на экран (в браузере)
Рисунок 4.1 – Обработка данных формы сервером Наиболее широко формы применяются для поиска, регистрации, заполнения анкет, тестов и т.д. Форма определяется с помощью тегов <form></form>, между которыми располагаются поля ввода, кнопки, а также все необходимые элементы оформления формы. Для указания параметров в теге <form> используются атрибуты (см. таблицу 4.1). Таблица 4.1 – Атрибуты тега <form> Атрибут action method
Назначение адрес программы или документа, которые обрабатывают данные формы метод передачи данных по протоколу http. Возможные варианты значений метода: GET – способ передачи, когда данные, введенные в форму добавляются в строку запроса
28 name target enctype
имя формы. Используется для обращения к форме с помощью javscript. имя окна или фрейма, куда обработчик будет загружать возвращаемый результат тип информации формы. Различается в случае использования символьно-цифровой информации и в случае использования файлов
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 alt checked disabled
Назначение определяет выравнивание, в случае если type=“image” определяет альтернативный текст для кнопки с изображением (type=“image”) предварительно активированный переключатель или флажек блокирует доступ и изменение элемента (поле недоступное)
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
5 ЛАБОРАТОРНАЯ РАБОТА №5 Тема: Цель:
Фреймы. Карты изображений 1) Научиться создавать фреймы; 2) Научиться управлять свойствами фреймов; 3) Научиться создавать и применять карты изображений для не прямоугольных ссылок. Время: 2 ч. 5.1 Теоретические сведения 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 bordercolor
Назначение задает путь к файлу, предназначенному для загрузки во фрейме задает уникальное имя фрейма способ отображения полосы прокрутки во фрейме. Возможные варианты значений: yes, no, auto. цвет линии границы
определяет следует ли отображать рамку вокруг фрейма определяет можно изменять размер фрейма norsize пользователю или нет Пример использования фреймов рассмотрен в листинге 5.1: Листинг 5.1 – Пример использования фреймов frameborder
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> Атрибут
Назначение
определяет форму активной области. Может принимать значения 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. shape
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 на две других области любые ссылки. Что бы узнать координаты точек изображения можно использовать программу Paint J. 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