11
Для удобства в каждом документе должна быть ссылка на домашнюю страницу (первый документ, он может иметь оглавление, содержащее список других документов данного web – узла).
Тэги создания гиперссылок
Для организации гиперссылки необходимо выделить объект, который будет являться ссылкой, и объект, к которому обращается ссылка. Ссылки могут быть текстовыми (подчеркнутое слово или фраза) и графическими (объект).
Текстовые ссылки
Текстовые ссылки позволяют щелчком по выделенному слову перейти к другому объекту.
Если этот объект внутри текущего файла, он называется якорем или входом в объект. Т.о., должен быть тэг ссылки на якорь и тэг якоря.
Практическое задание 11
Вначале области BODY добавьте тэги: <UL>
<LI><A HREF=#1>Ссылка 1</A> <LI><A HREF=#2>Ссылка 2</A> <LI><A HREF=#3>Ссылка 3</A> </UL>
Вконце области BODY добавьте тэги: <P><B><A NAME=#1>1</A></B></BR> <P><B><A NAME=#2>2</A></B></BR> <P><B><A NAME=#3>3</A></B></BR>
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку
Обновить или функциональную клавишу F5
<B> -полужирное для выделения. <BR> - с новой строки.
Если же объекты, на которые ссылаются, находятся в других файлах, тогда указываются их маршруты.
<A HREF=”File1.html”>Ссылка на файл File1</A>
и далее аналогично.
Графические ссылки
Если вместо текста используется графический объект для вызова ссылки, то добавляется тэг <IMG> с параметром SRC – source – источник.
<LI><A HREF=”File1.html”><IMG SRC=”Graph_File.gif”></a>
файл, на |
файл картнинки |
который сылаются |
для ссылки |
Графика в web – документе |
|
Не все броузеры могут отражать графику. Для этого необходимо вставлять альтернативную надпись.
12
<IMG SRC=”Pict.jpg” ALT=”щелкнуть здесь”>
Размещение картинок делает страницу привлекательнее, но большие размеры картинок могут замедлить время загрузки страницы. Поэтому желательно использовать картинки в определенных графических форматах:
jpeg, gif – не утрачивая качество, они имеют меньший размер, чем, например, bmp.
Графические объекты могут служить и файлами для ссылок, и файлами для фона web – страницы, но если размер такого файла мал, то броузер размножит его на все поле страницы.
При желании на странице можно ссылаться на звуковые файлы (с расширениями .wav .au), на файлы видеоклипов (с расширениями .mov, .avi,
.mpg), но для их просмотра на компьютере пользователя должны быть соответствующие программы, звуковые колонки, карты и видеокарты.
Маршруты файлов. Абсолютный и относительный путь
Возможны ссылки на области внутри текущего файла, на другой файл в текущем каталоге и на файл в любом другом каталоге.
Абсолютный путь описывает местоположение файла, начиная с самого высокого уровня и включая весь маршрут к файлу.
Пример,
http://имя сервера/каталог1/каталог2/…/имя файла
Естественно, при перемещении данного файла ссылка утрачивает смысл.
Относительный путь описывает местоположение другого файла относительно текущего.
Пример,
../../каталог1/имя файла Например,
Абсолютный путь
<A HREF=”http://s1/p1/p2/file1.htm”>f1</A> - т.е. файл file1 находится в папке p2, p1 на сервере s1
относительный путь
<A HREF=../../p3/file2.htm>f2</A> - т.е. файл file2 находится в папке p3,
лежащей в папке на два уровня выше текущей.
Тэги создания форм
Формы позволяют наладить взаимодействие автора страницы с ее посетителем (аналогично работают опросники, поисковые службы при запросе ключевых слов и выдаче результата).
Для взаимодействия необходимо отправить электронную почту, причем, сделать это непосредственно с данной страницы. Но прежде, чем отправить сообщение, сначала необходимо заполнить анкету. Ответы могут быть в виде произвольного текста или в виде флажков, или выбора из списка.
Формы позволяют разнообразить типы ответов и получить конкретные ответы на поставленные вопросы. Это упрощает компьютерную обработку полученных данных.
13
Например, анкета трудоустройства: Фамилия, имя, отчество:
адрес:
телефон:
пол:
мужчина
женщина комментарий:
послать 
очистить
Практическое задание 12
В область BODY добавьте тэги:
<FORM METHOD=”post” ACTION=”e-mail адрес”> <H4>Анкета трудоустройства</H4>
Фамилия, имя, отчество:<BR>
<INPUT TYPE=”text” NAME=”Фамилия” SIZE=”30”><BR>
Адрес:<BR>
<INPUT TYPE=”text” NAME=”Адрес” SIZE=”30”><BR>
Телефон:<BR>
<INPUT TYPE=”text” NAME=”Телефон” SIZE=”10”><BR> Пол:<BR>
<INPUT TYPE=”radio” NAME=”Выбор” VALUE=”Мужчина”>
Мужчина<BR>
<INPUT TYPE=”radio” NAME=”Выбор” VALUE=”Женщина”>
Женщина<BR> Комментарий:<BR>
<TEXTAREA NAME=”Комментар” ROWS=7 COLS=50></TEXTAREA> <INPUT TYPE=”submit” VALUE=”Послать”>
<INPUT TYPE=”reset” VALUE=”Очистить”> </FORM>
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку Обновить или функциональную клавишу F5
Любая форма оформляется тэгом <FORM>. Внутри имеются параметры METHOD и ACTION. Значение post означает, что анкета будет послана
14
через электронную почту, а параметр ACTION будет запрашивать, в какой каталог и под каким именем разместить анкету.
Тэг <INPUT> определяет стиль вводимой клиентом информации. Параметр TYPE имеет значение text, это означает, что вводимая информация будет произвольным текстом. Параметр NAME определяет имя поля, SIZE – максимальную длину поля, в которое клиент будет вводить данные. Значение radio – задает вариант выбора из списка. Параметр VALUE – определяет название вариантов выбора. Далее идет значение, которое будет передаваться на страницу в случае выбора данного варианта. Вместо radio может быть тип checkbox – флажек, который позволяет выбрать несколько вариантов.
Тэг <TEXTAREA> используется для размещения комментариев и дополнительной информации. Параметры ROWS, COLS означают строки и позиции в строке.
Значения submit и reset задают кнопки, которые позволяют при нажатии послать сообщение по адресу или очистить адрес.
Тэги создания фреймов
Данная технология позволяет поместить на одной странице не один файл (в текущий момент), а несколько.
Сначала необходимо определить, какое окно будет главным и использовать в нем тэг <FRAMESET></FRAMESET>. Данный тэг позволяет задать несколько окон, их взаимное расположение и размеры. Например, необходимо создать страницу с тремя горизонтальными окнами. Для этого в тэг добавляется параметр ROWS (для вертикального COLS) и указываются размеры рамок. Размеры могут быть указаны одним из трех способов :
−абсолютные размеры в пикселях (не всегда удобно, т.к. можем не знать разрешения экранов пользователей);
−в процентах по отношению к высоте (или ширине);
−относительные размеры рамок.
Например,
<HTML>
<HEAD>
<TITLE>1</TITLE>
</HEAD>
<FRAMESET ROWS=”11%,17%,72%”> - второй способ <FRAME SRC=”2.htm”>
<FRAME SRC=”3.htm”>
<FRAME SRC=”4.htm”> </FRAMESET> </HTML>
<HTML>
<HEAD>
<TITLE>5</TITLE>
</HEAD>
15
<FRAMESET COLS=”*,2*,*”> - третий способ <FRAME SRC=”2.htm”>
<FRAME SRC=”3.htm”>
<FRAME SRC=”4.htm”> </FRAMESET> </HTML>
Обычно каждый фрейм имеет полосы прокрутки для быстрого перемещения по активному окну.
* - заменяет абсолютный размер рамки, а броузер самостоятельно высчитывает размеры каждого окна.
Отдельная рамка определяется тэгом <FRAME></FRAME> с параметром SRC, в котором указывается имя файла, на который организовывается ссылка. Имя файла должно задаваться полностью, включая все директории, особенно если он расположен не в текущем директории.
Возможна и смешанная конструкция окна.
<HTML>
<HEAD>
<TITLE>6</TITLE>
</HEAD>
<FRAMESET COLS=”50%,50%”> <FRAME SRC=”2.htm”> <FRAMESET ROWS=”60%,40%”> <FRAME SRC=”3.htm”> <FRAME SRC=”4.htm”> </FRAMESET>
</FRAMESET>
</HTML>
Внешний вид и сложность каждого отдельного файла не влияют на структуру фреймов. Они разрабатываются каждый в отдельности. Все, что заложено в каждом из файлов, будет исправно работать, как и на всю страницу.
Фреймы вводятся для удобства работы с web-страницей. Так, в левой части можно расположить оглавление, а в правой будет отражаться содержимое выбранной страницы. (При обычной структуре web-страницы
пользователю каждый раз после просмотра очередной страницы приходится возвращаться на страницу – оглавление, выбирать следующую страницу для просмотра, возвращаться обратно и т.д. – это неудобно и занимает время, и если страницы плохо связаны между собой по смыслу, это может запутать пользователя, так, что он никогда не разберется в структуре данного web- узла.)
16
Практическое задание 13
Создайте следующие файлы frm.htm, 1.htm, 2.htm, 3.htm:
<HTML>
<HEAD>
<TITLE>frm</TITLE>
</HEAD>
<FRAMESET COLS=”20%,*”> <FRAME SRC=”1.htm”>
<FRAME SRC=”2.htm” NAME=”main”> </FRAMESET>
</HTML>
<HTML>
<HEAD>
<TITLE>1</TITLE>
</HEAD>
<BODY>
<A HREF=”2.htm” TARGET=””main>Пункт1</A><P> <A HREF=”3.htm” TARGET=””main>Пункт2</A><P> <A HREF=”4.htm” TARGET=””main>Пункт3</A> </BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>2</TITLE>
</HEAD>
<BODY>
Пункт1
Текст
</BODY>
</HTML>
аналогично создайте файлы 3 и 4.
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку Обновить или функциональную клавишу F5
Тэг <A HREF=”2.htm” TARGET=””main>Пункт1</A><P> и другие позволяют сделать надпись ссылкой. Причем, при нажатии на эту надпись будет загружаться в правое окно нужный файл, т.е. в текущий момент он будет являться главным.
С помощью параметров NAME и TARGET задается место, где будут появляться файлы в окне, а именно, справа. Т.о., каждый из трех файлов по очереди будет размещаться в правой стороне экрана, рядом с оглавлением.