ТЕМА 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE
advertisement
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE ТЕМА 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ Цели: ознакомиться с основами языка разметки гипертекста HTML; ознакомиться с принципами создания гипертекстовых страниц с помощью текстового редактора и с помощью редактора гипертекстовых страниц Dreamweaver; научиться создавать сайт, состоящий из нескольких страниц. Оглавление 7.3.1. Принципы гипертекстовой разметки 7.3.2. Структура документа 7.3.3. Форматирование текста 7.3.4. Вставка изображений 7.3.5. Таблицы 7.3.6. Гиперссылки 7.3.7. Навигационные карты 7.3.8. HTML формы 7.3.9. Среда приложения для создания гипертекстовых страниц Micromedia Dreamweaver Версия для печати Хрестоматия Практикумы Презентации Тьюторы Тесты 7.3.1. Принципы гипертекстовой разметки Гипертекстовые страницы создаются с помощью языка разметки гипертекста HTML (HyperText Markup Language) в текстовом редакторе или в среде специальных редакторов web-страниц. Гипертекстовый документ содержит: текст, который отображается в окне браузера в соответствии с форматированием, заданным в кодах HTML; коды разметки, определяющие форматирование элементов документа; коды разметки, обеспечивающие вставку различных элементов в документ; коды, определяющие структуру связей с другими информационными ресурсами (гипертекстовые ссылки). Эти связи могут объединять документы с самыми разными информационными ресурсами, в том числе содержащими звуки, видео. Поэтому гипертекстовые документы называются еще и гипермедиальными. Коды разметки представляют собой символы ASCII. Поэтому страницы можно создавать в текстовых редакторах. Существующие редакторы web-страниц позволяют пользователю создавать и форматировать элементы страницы с помощью меню, кнопок панелей инструментов. 1 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Язык разметки HTML представляет собой описание документов с помощью указателей HTML-кодов, называемых также тэгами. Тэги гипертекстового документа представляют собой варианты сокращений слов английского языка, регистр букв не имеет значения. Текст тэга заключается в угловые скобки, например, <HTML>. Тэги могут быть автономными и контейнерами. Автономные тэги разметки не имеют конечного компонента, служат для вставки в документ элементов, например горизонтальной линии (<HR>), разрыва строки(<BR>), вставки изображения <IMG>. Контейнер – это пара тэгов, начального и конечного, между которыми содержатся другие элементы документа, например текст или другие тэги. Указания тэгов применяются к расположенному между ними объекту. Тэг-контейнер имеет следующую структуру: <имя начального тэга [список атрибутов]> содержание контейнера </имя конечного тэга>. Имя конечного тэга идентично имени начального, но перед ним ставится знак «/». Действие начального тэга применяется к тому, что находится за ним, и прекращается конечным тэгом. Например, чтобы выделить текст жирным шрифтом нужно расположить его между тэгами: <B> Текст </B> Обязательный компонент тэга - его имя и, иногда, указание адреса используемого ресурса, или гиперссылки. За ними может следовать необязательный список атрибутов тэга и их значений, которые могут задаваться автором. Значение атрибута следует за знаком равенства после имени атрибута. Атрибуты перечисляются в тэге в свободном порядке. Например, при описании таблицы, открывающий тэг может выглядеть так: <TABLE>. Но он может содержать атрибуты, задающие: WIDTH - ширину таблицы; ALIGN - расположение таблицы относительно других объектов страницы; BORDER - ширину границы; BGCOLOR - цвет таблицы. Тогда тэг-контейнер, задающий вид таблицы, выглядит следующим образом: <TABLE WIDTH="780" ALIGN="left" BORDER="1" BGCOLOR="ivory"> </ TABLE > Приведенный тэг задает ширину таблицы 780 пикселей, выравнивание - по левому краю, ширину рамки - 1 пиксел, цвет фона таблицы – слоновой кости. 2 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Значения атрибутов принято заключать в одинарные или двойные кавычки, особенно, если они содержат несколько слов, разделенных пробелами. Длина значения атрибута ограничена 1024 символами. Вставка специальных символов - CER (Character Entity Reference) Специальные сочетания символов позволяют отображать на web –страницах те символы, которые могут быть неверно обработаны браузером. Например, символы, используемые тэгами (угловые скобки, двойные кавычки). Некоторые из них приведены в Таблице 1. Эти сочетания вводятся в нужном месте гипертекста без угловых скобок. Таблица 1. Вставка специальных символов. Символ Имя Описание < &lt; Меньше > &gt; Больше пробел & nbsp; Пробел & &amp; Амперсанд £ &pound; Фунт © &copy; Копирайт ® &reg; Регистрирован ная торговая марка Тэги можно разделить по назначению: тэги формирования структуры документа; тэги оформления страниц (вид текста, списки, изображения, списки, таблицы, картинки); тэги гипертекстовых ссылок и закладок; тэги интерактивных форм; тэги внедренных объектов, например, вызова программ. 7.3.2. Структура документа Основная часть документа HTML-документ позволяет вкладывать контейнеры друг в друга. Документ начинается с тэга - контейнера <HTML> и заканчивается конечным тэгом </HTML>. В гипертекстовом документе определяется его заголовок (HEAD), и основная часть, называемая телом (BODY). Пример структуры документа: 3 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE <HTML> <HEAD> <TITLE> Тема документа </TITLE> </HEAD> <BODY TEXT="#0000ff" BGCOLOR="#f0f0f0"> <H1>Заголовок первого уровня</H1> Наряду с простой структурой гипертекстовой разметки существует фреймовая структура. Фреймы (кадры), на которые делится окно браузера, могут содержать одновременно разные гипертекстовые документы. Гиперссылки в этих документах позволяют указывать тот кадр, в который нужно загрузить новый документ. Например, один фрейм отображает содержание сайта в виде гиперссылок, а в другом загружаются последовательно страницы, вызываемые этими гиперссылками (рис. 1). Рис. 1. Фреймы Если используется фреймовая структура, то документ не имеет тэга <BODY>. На случай браузера, который не поддерживает загрузку фреймов в коде разметки указывается тэг <NOFRAMES> и вариант описания параметров для обычной структуры страницы. Для создания структуры (рис. 2) должно быть 3 файла. Файл с определением набора фреймов, который описывает количество кадров, их имена, размеры, наличие линеек прокрутки. Чтобы заполнить кадры нужно в тэге frame определить, какие файлы будут в них загружаться. На рис. 2 в левом фрейме отображен список банков, каждый элемент которого является гиперссылкой. Щелчок по гиперссылке загружает в правый фрейм нужный файл. Атрибут Name задает имена кадров. Левый кадр имеет имя topics, правый - docum. Они задаются для управления загрузкой документов в нужный кадр. Файл, задающий фреймы выглядит следующим образом: <HTML> <FRAMESET COLS="40%,60%" BORDERCOLOR="#FFFFCC"> ROWS="*" <FRAME SRC="ved.htm" NAME="topics"> <FRAME SRC="banki.htm" NAME="docums"> </FRAMESET> <NOFRAMES> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> 4 FRAMEBORDER="YES" МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE </BODY> </NOFRAMES> </HTML> Заголовок документа Элемент разметки HEAD–контейнер не является обязательным тэгом. В заголовке часто располагаются элементы разметки, задающие параметры документа, такие как: TITLE (заглавие документа или его тема); META (метаинформация); STYLE (описатели стилей); SCRIPT (скрипты). Элемент разметки TITLE Контейнер TITLE служит для задания темы документа в World Wide Web. Так же именуется окно браузера, в котором документ просматривается. Слова из контейнера TITLE попадают в индекс поисковой системы. Пример: <TITLE> Высшее образование</TITLE> Элемент разметки META Тэг META позволяет хранить список ключевых слов и описание документа, которые используются для составления индекса поисковой системы. < META институт"> NAME ="description" CONTENT ="Международный банковский Атрибут CONTENT отображает содержание описания документа. < META content="Платонов" name=Author> < META NAME ="keywords" CONTENT="институт; деканат; факультет; международный; банковский; экономика; прикладная информатика"> При индексировании документы, в которых задана тема в тэгах TITLE, ключевые слова и описание документа в атрибутах тэга META, попадут в индекс некоторых поисковых машин. Элемент разметки STYLE Предназначение тэга разметки STYLE - размещение описания стилей. Описание стиля может встречаться и в теле страницы, но если оно находится в заголовке – правила отображения стиля действуют для всей страницы. Атрибут тэга – TYPE задает тип стиля. Это может быть либо text/css, либо text/javascript: <STYLE TYPE=тип_описания_стилей> описание стиля/стилей </STYLE> Элемент разметки SCRIPT 5 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 1. Контейнер SCRIPT содержит код JavaScript, VBScript или JScript. 2. Он не обязательно должен находиться в заголовке, а может быть также и в теле документа. 3. Если открыт тэг начала, то должен быть тэг конца контейнера. 4. В общем виде запись контейнера выглядит следующим образом: <SCRIPT [TYPE=тип_языка_программирования] [SRC=URL]> JavaScript/VBScript- код </SCRIPT> При использовании элемента разметки SCRIPT в заголовке определяется зона видимости функций и переменных во всем документе, т.е. они определяются как глобальные переменные. Основная часть документа Оформление документа Цвет элементов Основная часть документа начинается с тэга <BODY>. Он может содержать атрибуты, которые определяют документа, например, цвет текста, ссылки, цвет фона. параметры всего Цвета задаются названиями цветов, которые можно найти в специальных таблицах или шестнадцатиричными кодами, в которых каждые две цифры задают значения трех составляющих цвета – RGB (красного, зеленого, синего). Например, код цвета фона bgcolor ="# FF 0000" задает максимальное значение красного (FF) и минимальные зеленого и синего. Таблица 2. Цвета, используемые в Internet 6 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 7 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 8 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Данные Таблицы 2 скопированы с сайта известного дизайнера А.Лебедева. http:// www.artlebedev.ru/tools/colors Белый цвет задается смешением максимальных значений красного, зеленого и синего цветов. Код его FFFFFF. Черный – наоборот все нули. В тэге BODY можно задавать цвет фона страницы, текста, гиперссылок. Пример определения цвета разных элементов страницы: <BODY TEXT="#336699" VLINK="#339999"> BGCOLOR="#000000" Где: TEXT – цвет текста страницы; BGCOLOR – цвет фона страницы; LINK – цвет ссылок; VLINK – цвет посещенных ссылок. 9 LINK="#339999" МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Другие элементы оформления Горизонтальная линия часто используется для раздела логических частей страницы. Линия выглядит в виде канавки. Задается тэгом <HR>. Атрибуты тэга : <HR ALIGN="right"> - выравнивание (center или left); <HR WIDTH="30%"> - ширина линии в процентах или пикселях; <HR SIZE="6"> - толщина линии в пикселях; <HR NOSHADE> - отмена объемности; <HR COLOR="cc0000"> - задание цвета линии, действует в только в Internet Explorer. 7.3.3. Форматирование текста Текст, представленный на странице, может иметь различное форматирование. Основные тэги, используемые для оформления текста, приведены в Таблице 3. Таблица 3. Тэги, оформляющие текст. Назначение тэга Имя Атрибуты Шрифт (задание размеров, цвета, вида) <font> Color – цвет </font> Size – размер Пример <font size=4 face="ARIAL" color=”red”> текст </font> face – вид Параграф (Начало нового абзаца) <p></p> Заголовок. Объявление текста заголовком. Можно задать заголовки шести уровней. <H2> </H2> Полужирный текст <b> </b> <b> Полужирный текст </b> <i> </i> <i> Наклонный текст (курсив) </i> <u> </u> <u> Подчеркнутый текст </u> Курсив Подчеркнутый текст Align выравнивание. – Возможные значения – left; right; justify; center <p align="center"> текст </p> color – цвет <H1 align=”left”> align – текст </H1> выравнивание 10 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Перечеркнутый текст <strike></stri ke> <strike> Перечеркнутый </strike> <s> Перечеркнутый </s> <s> </s> Верхний индекс, например для задания степеней <sup> </sup> <sup> </sup> sup Нижний индекс <sub> </sub> <sub> </sub> sub Элемент списка <li > Type – маркера :. Disk - диск Circle - круг Square квадрат тип <li Диск type="disk"> <li type="circle"> Круг <li - type="square"> Квадрат Начало списка маркированного <ul> < ul > </ul> < li >Брусника < li >Черника </ ul > Начало списка нумерованного <ol> </ol> < ol > < li >Брусника < li >Черника </ ol > Перевод следующего тэгом текста новую строку за на <br> Встает заря во мгле холодной.< br > На нивах шум работ умолк. 7.3.4. Вставка изображений Тэг вставки изображения в простейшем варианте выглядит так: < img src ="photo.jpg "> Где: 11 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE SRC – обязательный атрибут, указывающий на файл–источник изображения, в данном случае - "photo.jpg". Предполагается, что файл находится в той же папке, что и страница, куда вставляется изображение. Если это другая папка, например, images, то ее имя необходимо указать: <img src="images/photo.jpg"> Если же изображение находится в папке images на удаленном компьютере, то тэг выглядит так: <img src="http://www.site_name.ru/images/photo.jpg"> Тэг вставки изображения может иметь такие атрибуты как: WIDTH – ширина изображения, значение которой задается в пикселях или в процентах от экрана. Важно предусмотреть, чтобы изображение не было слишком большим, если будет открываться на маленьком экране; HEIGHT – высота изображения, значение которой задается в пикселях или процентах; ALIGN – выравнивание, расположение относительно текста. Задаются такие значения атрибута как: слева, справа, по центру; BORDER – ширина рамки. Значение задается в пикселях. Если рисунок является ссылкой и цвет его рамки не соответствует стилю остальных элементов страницы, можно задать рамку равной нулю; ALT – альтернативный текст, представляющий собой фразу, комментирующую изображение; HSPACE – расстояние между изображением и текстом по горизонтали в пикселях; VSPACE – расстояние между изображением и текстом по вертикали в пикселях. Пример: Чтобы вставить изображение таким образом, как на рис.2 < IMG SRC="paris_photo.jpg" ALT ="Вид на остров Ситэ" WIDTH="70%" BORDER="0"> Указанное изображение находится в одной папке со страницей. Его имя paris_photo.jpg. Ширина изображения меняется в зависимости от размеров экрана и составляет 70% от его ширины (рис.2). Изображение имеет альтернативный текст. Рамка изображения отсутствует. 12 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 2. Фрагмент гипертекстовой страницы с изображением 7.3.5. Таблицы Широко применимым является тэг <TABLE>, с помощью которого можно задавать расположение элементов на странице, создавать панель навигации, представлять табличную информацию. Таблица задается тэгом-контейнером: <TABLE></TABLE> Таблица состоит следующими тэгами: из строк и столбцов (ячеек), которые указываются <TR></TR> - строчка таблицы; <TD></TD> - столбец (ячейка) таблицы. Для лучшего результата таблицу предварительно стоит нарисовать на бумаге. В ячейках таблицы могут находиться изображения, текст, гиперссылки, а также другие таблицы. Следующий HTML-код задает таблицу. Браузер преобразует код в таблицу, представленную на рис. 3. <TABLE BGCOLOR="lightblue" ALIGN="middle"> <TR> <TD><IMG SRC=1.gif ></TD> <TD><IMG SRC=2.gif ></TD> <TD><IMG SRC=3.gif ></TD> </TR> <TR> 13 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE <TD VALIGN="top"> Лампа 1</TD> <TD VALIGN="top"> Лампа 2</TD> <TD VALIGN="top"> Лампа 3</TD> </TR > </ТABLE > Рис. 3. Представление изображений в таблице Некоторые атрибуты таблицы, рядов и ее ячеек: WIDTH – ширина; HEIGHT - высота; ALIGN – выравнивание; VALIGH – расположение текста в ячейке по вертикали, возможные значения: top, bottom; ROWSPAN - объединение рядов, указывается числом (количество); COLSPAN – объединение столбцов (ячеек); BGCOLOR – цвет ячейки, ряда, таблицы; CELLSPACING – расстояние между ячейками; CELLPADDING – расстояние между содержимым и границами ячейки. Атрибут CELLSPACING задает пространство между ячейками в пикселях. Если нужно избавиться от пространства между ячейками значение атрибута CELLSPACING приравнивается нулю: <TABLE CELLSPACING=0 > Атрибут CELLPADDING задает пространство между содержимым ячейки и ее границами, и также может быть использован для его уменьшения. 7.3.6. Гиперссылки Сайт представляет собой набор связанных гипертекстовых документов. Самая главная страница сайта, которая загружается первой, имеет, как правило, имя index.html или main.html. Она содержит ссылки на другие страницы. Они могут быть оформлены в виде панели навигации. Имена страниц сайта могут иметь любые имена, но нужно помнить, что система различает строчные и заглавные буквы. Например, photos.html и Photos.html – это разные файлы. Страницы сайта могут находиться в одном каталоге (папке) или - в разных, или - на удаленном компьютере. 14 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Чтобы документы связать, необходимо определить, какие элементы страницы будут использованы в качестве гиперссылок и какие страницы будут загружаться при активизации этих ссылок. Гипертекстовая ссылка — это адрес другого документа или информационного ресурса Internet, который связан с документом посредством ссылки. Щелчок по ней позволяет загрузить этот документ в окно браузера или скопировать на локальный компьютер, или открыть окно приложения для создания сообщения электронной почты. Гиперссылка активизируется благодаря атрибуту HREF ( hypertext reference – гипертекстовая ссылка), задающему адрес документа. Например, имеется документ с фотографиями, имя которого paris.html. Он находится в одной папке с главным документом index.html. Для создания гиперссылки нужно выбрать фразу или слово, например «Поездка в Париж», поместить их в тэг-контейнер <a></a>, называемый якорем. HTML-код этой ссылки выглядит так: <a href ="paris.html">Поездка в Париж</a> Тэг <a></a> делает ссылкой не только текст, но и изображения, и адреса электронной почты. Адрес документа задается по тем же принципам, что и для изображений: <a href ="paris.html">Поездка в Париж</a> - файл находится в одной папке с текущей страницей; <a href ="pages/2.html ">Впечатления</a> - файл находится в папке pages; href ="http://www.my_site.ru/ photo.html">Фотоальбом</a> - файл находится на удаленном компьютере. Ссылкой может быть текст (фраза или слово), изображение, анимация, адрес электронной почты. <a Адрес ссылки (URL) может быть указанием на: страницу на удаленном или локальном компьютере, например, < A HREF ="http://www.kiae.ru/info/rus/ information.html">информация</A> изображение: <A HREF="http://www.hermitage.ru/grafika/portret1.jpg" >Петр I</A> адрес электронной почты: < A HREF ="mailto: kak_ zhe_tak@pisem. net ">Пишите нам</A> Ссылка может быть не только текстом, но и изображением. <A HREF="description.html"><IMG SRC=tsar.jpg></A>, Где: IMG - это тэг вставки изображения; SRC - атрибут гиперссылка. указания файла с изображением. Само изображение - Гиперссылка может вызывать загрузку не только гипертекстовых документов, но и других файлов (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Например, 15 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE <a href="http://www.melody.ru/music.mp3"> скачать песню </a>. Закладки Иногда важно сделать ссылку не на другую страницу, а на определенный текст текущей страницы. Место, к которому нужно перейти называют закладкой. Ему задают имя: <A name="ssilka1"> Первая часть </A>. Гиперссылки на нужные закладки оформляются следующим образом: <A href="#ssilka 1">Первая часть</A><BR> <A href="#ssilka 2">Вторая часть</A><BR> <A href="#ssilka 3">Третья часть</A><BR><BR>. 7.3.7. Навигационные карты Навигационная карта - это изображение, на котором определены геометрические области, являющиеся гиперссылками. Это дает возможность переходить с одного изображения к разным страницам, в зависимости от выбранной области. Навигационная карта задается тэгом-контейнером MAP, описывающим ее. Геометрические области изображения определяются тэгом AREA. <MAP> <AREA ...> <AREA ...> ... <AREA ...> </MAP> Форма области задается атрибутом SHAPE: Прямоугольник - SHAPE="rect"; Круг - SHAPE="circle"; Многоугольник - SHAPE="poly". и соответствующими координатами. Их определяет атрибут COORDS. Число координат и порядок их значений зависят от выбранной формы (рис.4). Рис. 4. Координаты геометрических областей навигационной карты 16 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Левый верхний угол изображения (рис.4) имеет координаты (0;0). При задании координат прямоугольной области задаются координаты верхнего левого и нижнего правого углов области. Порядок записи координат для параметра coords следующий: <AREA SHAPE="rect" COORDS="x1,y1,x2,y2"> Предположим, что на рис. 4 x1=25, y1=36; x2=114, y2=98. Пример кода навигационной карты, на которой задана эта прямоугольная область: <MAP> <AREA SHAPE="rect" COORDS="25,36,114,98"> <AREA SHAPE="rect" COORDS="150,15, 180,100"> </MAP> К описанию областей нужно добавить гиперссылки: <MAP> <AREA HREF="http://www.moscow.kremlin.ru/first.html" SHAPE="rect" COORDS="25,36,114,98"> <AREA HREF="http://www.300.spb.ru/history.html" SHAPE="rect" COORDS="150,15, 180,100"> </MAP> Это только описание карты. Кроме описания необходимо вставить в документ изображение с картинкой, выполняющей роль карты. Поскольку в документ может быть включено множество изображений, нужно определить имя того самого изображения, для которого сделано описание карты. Для этого используется атрибут NAME, задающий имя карты, например, тэг: <MAP NAME="karta1"> Для того, чтобы связать карту с изображением, необходимо в тэге вставки изображения использовать атрибут usemap="#имя_карты" для картинки: <img src="russia.gif" usemap="#karta1"> Для создания круглой области задаются координаты ее центра (x и y) и длина радиуса (R) в пикселях: <AREA SHAPE="circle" coords="x,y,R"> Допустим, координаты круга будут такие: x=46, y=48; а длина радиуса - R=35. Тогда: <MAP NAME="KARTA2"> <AREA SHAPE="circle" COORDS="46,48,35"> </MAP> Описание карты может находиться в любом месте страницы. При вставке рисунка, это описание определяется по имени карты, указанному в тэге вставки рисунка. <img src="mapcircle.gif" usemap="#karta2"> 17 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Для задания многоугольной области используются координаты углов и атрибут POLY. Координаты задаются подряд через запятые: <AREA SHAPE="poly" COORDS="x1,y1,x2,y2,...,xN,yN"> В карте также можно одновременно использовать разные области, например круг и многоугольник. 7.3.8. HTML формы Формы задаются для того, чтобы пользователь мог выполнять какие-либо действия на сайте. Обмен информацией с пользователем возможен с помощью таких экранных элементов как поля ввода текста, кнопки альтернативного выбора, флажки, выпадающие меню, прокручиваемые списки, кнопки. Для отправки информации, введенной пользователем существуют кнопки submit. Для управления этими элементами динамических web-страниц, необходимо обрабатывать информацию пользователя или с помощью Java скриптов, или Visual Basic скриптов в браузере пользователя, или с помощью компонента программного обеспечения Web-сервера CGI (Common Gateway Interface). Форма создается тэгом-контейнером <FORM> </FORM>. <FORM METHOD="get|post" ACTION="URL"> Между этими тэгами располагаются другие формы и элементы гипертекстового документа. </FORM> Атрибут METHOD указывает один из двух возможных методов отправки данных, введенных в форму: GET - информация из формы добавляется в конец URL, указанного в описании тэга < FORM >; POST - информация из формы пересылается по указанному адресу. Атрибут ACTION указывает URL, вызываемый для обработки формы. Как правило, это адрес CGI-программы, обрабатывающей форму. Тэги формы TEXTAREA – этот тэг позволяет пользователю вводить более одной строки информации в текстовое поле. Пример: < TEXTAREA NAME ="data" ROWS =5 COLS =20> Платонов, Юрий Петрович, Санкт-Петербург </TEXTAREA> Где: NAME - имя поля ввода; ROWS высота поля ввода в символах; COLS - ширина поля ввода в символах. INPUT - тэг используется для ввода одной строки текста или одного слова. Атрибуты тэга: CHECKED - подтверждение , что CHECKBOX (флажок) или RADIOBUTTON (кнопка альтернативного выбора) будут выбраны; MAXLENGTH - количество символов, которое пользователи могут ввести в поле ввода; 18 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE NAME - имя поля ввода, идентификатор позволяющий получить данные, помещенные пользователем в это поле; SIZE - размер поля в символах; SRC - URL, указывающий на изображение; TYPE - тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Другие типы элементов формы: CHECKBOX - флажок, задает одно из значений ON или OFF (логические). HIDDEN – поле, не отображаемое браузером, не позволяет делать изменения, передает длину логина или пароля. PASSWORD – текстовое поле, не отображаемое браузером на экране. RADIO - поле выбора одной из альтернативных возможностей. Альтернатива обеспечивается созданием нескольких полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране. RESET - кнопка, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. SUBMIT - кнопка, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке. TEXT - текстовое поле одной строки. Атрибуты MAXLENGTH и SIZE определяют максимальную длину вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов). VALUE – атрибут, присваивающий полю значение по умолчанию или значение, которое будет выбрано при использовании элементов разного типа. LISTBOX - меню выбора. Формы можно использовать для отправки не только небольших информационных сообщений в виде параметров, а также и для отправки файлов. Рис. 5. Форма для отправления файла HTML-код формы выглядит следующим образом: < FORM Отправить <P> <INPUT </FORM> ENCTYPE данный ="multipart/form-data" файл : <INPUT TYPE="submit" ACTION ="url" METHOD=POST> NAME="userfile" TYPE="file"> VALUE="Отправить 19 файл "> МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 7.3.9. Среда приложения для создания гипертестовых страниц Micromedia Dreamweaver В окне редактора (рис. 6) строка заголовка отображает название страницы и имя файла. Рис. 6. Окно приложения Micromedia Dreamveawer Под окном заголовка - строка меню. Слева - панель объектов, при помощи которой можно создавать различные объекты: таблицы, слои, вставлять картинки и многое другое. Справа можно открывать дополнительные окна, например (рис.6), "HTML style", "Behaviors ", "CSS styles" и т.д. 20 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 7. Окно параметров Перед работой в приложении необходимо сделать начальные установки. Команда Preferences/General открывает окно, в котором можно задать необходимые параметры. Например, чтобы отображался и русский и английский текст нужно выбрать категорию Fonts/Encoding и правильно настроить Default Encoding, выбрав из набора шрифт, содержащий кириллицу. Здесь же можно задать другие параметры шрифта. Рис. 8. Панель объектов. 21 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE В рабочем поле окна приложения можно создавать документ, вводя текст, в нужных местах можно вставлять объекты, используя меню INSERT и панель объектов (рис. 8). Для изменения свойств объектов вызывается специальная панель properties (свойства), в полях которой задаются конкретные параметры объекта (рис.9). Рис. 9. Панель свойств таблицы. В приложении можно вызывать окно, отображающее HTML-код создаваемой страницы и окно просмотра страницы в браузере. При создании сайта рекомендуется продумать его структуру. Затем создать папку, в которой будут располагаться все файлы сайта. В ней можно создать отдельные папки для используемых файлов с изображениями, например, IMAGES. Команда Site>Define sites откроет окно настройки параметров сайта. Категория Local info позволяет задать имя сайта (рис.10), местный адрес папки с сайтом, а также HTTP Address – адрес сайта в Интернет. Рис. 10. Окно настройки параметров сайта. Категория Local Info Категория Remote Info позволяет задать адрес FTP сервера, в графе HOST Directory нужно указать папку на удаленном компьютере (рис.11), в которую Dreamweaver будет перемещать файлы созданного сайта. 22 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 11. Настройки сайта Remote Info В поле Login ввести логин пользователя на удаленном компьютере. В поле Password - пароль. Вопросы для закрепления материала 1. Что представляет собой файл с гипертекстом? 2. Что такое тэг? Автономный тэг? Тэг-контейнер? 3. В каком приложении можно создать гипертекстовую страницу? 4. Какие расширения имеют файлы с гипертекстом? 5. Какова структура гипертекстовой страницы? 6. Что такое Фрейм (кадр)? 7. Для чего используются тэги < body ></ body >, < head ></ head >? 8. Как задается цвет элементов гипертекстовой страницы? 9. Каким образом форматируется текст гипертекстовой страницы? 10. Как создать гиперссылку? 11. Какие атрибуты могут менять изображения гипертекстовых страниц? 12. Для чего используются таблицы? 13. Что такое карта? 14. Каковы принципы создания гипертекстовых страниц в приложении Micromedia Dreamweaver? 23