Гипертекстовые ссылки
Ссылки позволяют щелчком по выделенному слову или фразе перейти к другому документу (файлу). Ссылки выделяются другим цветом или подчеркиванием.
Для создания ссылок используется специальный тег <A> anchor (якорь). Якорь имеет несколько атрибутов, главным из которых является HREF – Hyper Text Reference <A HREF=”URL_адрес”> Текст </А> <A HREF=”Документ.htm”> Выделенный текст </А> Результат: щелкая на «Выделенный текст» перемещаемся в «Документ.htm»
Для ссылки внутри документа используется маркер <A…> с атрибутом Name
<A HREF=”#GO”> … </A> … <A NAME=”GO”> … </A>
Для ссылки в определенное место документа используется имя документа и маркер.
<A HREF=”example.html # first”> Ссылка </A> <A NAME=first> Некий заголовок </A> Пример: <HTML> <HEAD><TITLE>Файл данных</HEAD> <BODY> <H1> Файл о студентах и сотрудниках </H1> <UL> <LH> Перечень списков </LH> <LI> <A href=”#SOTR”> Сотрудники </A> <LI> <A href=”#STUD”> Студенты </A> </UL> <A NAME=”SOTR”> Сведения о сотрудниках </A> <P> Иванов … <BR> Петров … <BR> Сидоров … <BR> <A NAME=”STUD”> Сведения о студентах </A> <P> Котов … <BR> Яхин… <BR> Титова … <BR> </BODY> </HTML>
Графические ссылки
Для графических ссылок используется метка <IMG…> с атрибутом SRC <A HREF=”DOM.HTML”><IMG SRC=”DOM.GIF”></A> DOM.HTML – имя файла, на который указывает ссылка DOM.GIF – файл изображения, на который необходимо щелкнуть.
Рис.14.1. Схема перехода по графической ссылке
Таблицы.
Формируются с помощью тега. <TABLE> … </TABLE> BORDER – ячейки таблицы выделить рамкой (бордюром) CAPTION – задает название таблицы TH – название столбцов TR – начало каждого ряда TD – ввод данных Пример: Сотрудники
|
Имя |
Отдел |
Год рожд-я |
|
Андреев А |
АСУ |
1973 |
|
Иванов И |
КО |
1964 |
|
Сергеев С |
САПР |
1978 |
Рис.14.2. Таблица «Сотрудники»
<TABLE BORDER> <CARTION ALIGN=TOP> Сотрудники </CAPTION> <TR> <TH> Имя </TH> <TH> Отдел </TH> <TH> Год рождения </TH> </TR> <TR> <TD> Андреев А</TD> <TD> АСУ </TD> <TD> 1973 </TD> <TR> <TD> Иванов И </TD> <TD> КО </TD> <TD> 1964 </TD> <TR> <TD> Сергеев С</TD> <TD> САПР </TD> <TD> 1978 </TD> </TABLE>
Фреймы
Фреймы – позволяют разбить окно на несколько разделов, которые имеют свои рисунки, полосы прокрутки, свои данные. В каждом фрейме показывается свой документ HTML.
Рис.14.3.
Пример разделения экрана на фреймы
Для разбивки окна на фреймы используется тег <FRAMESET>. С помощью атрибутов COLS и ROWS производится разбивка на колонки и строки. Разбивка может производится в пикселях или в процентах. Пример. <FRAMESET COLS=”100, 200, *”> <FRAMESET ROWS=”30%, 70%”> Для заполнения фрейма страницы HTML используется тег: <FRAME SRC> Пример. <FRAME SET COLS=”100, 200, 300”> <FRAME SRC=”A.HTM”> <FRAME SRC=”B.HTM”> <FRAME SRC=”C.HTM”>
Пример. <FRAMESET ROWS=”50%,50%”> <FRAME SRC=”top.htm” NAME=”Top”> <FRAMESET COLS=”50%,50%”> <FRAME SRC=”fleft.htm” NAME=”BottonLeft”> <FRAME SRC=”fright.htm” NAME=”BottonRight”> </FRAMESET> </FRAMESET>
Для вызова файла используется атрибут TARGET.
Например:
<A HREF=”New.html” TARGET “BottonRight”>Новый текст </A>
Файл New.html загружается в окно BottonRight
Формы
Формы используются: · Для общения клиентских программ с базой данных · Регистрации пользователей · Организации заказов на товары Формы создаются с помощью Браузера.
Браузер пересылает введенную информацию по указанному электронному почтовому адресу. Web – сервер выдает клиенту требуемую информацию в виде HTML-страницы. На рис.15.4 представлен пример формы, предназначенный для формирования заказа.
Рис.14.4. Пример формы
Основными частями формы являются: · Открывающий тег <FORM> · Объявление типов полей ввода <INPUT TYPE> · Кнопка отправки <SUBMIT> · Кнопка отмены <RESET> Открывающий тег <form> содержит атрибут action, который определяет, где находится программа-обработчик, или адрес сервера, который будет обрабатывать форму Оформление тега формы: <FORM ACTION=”URL” METHOD метод передачи ENCTYPE=тип_кода>. Так как сообщение, написанное посетителем сайта, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например: action=”mailto: geoton@narod.ru”
Атрибут тега <form> - metod – определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе обработчику. Определяет метод пересылки данных формы от обозревателя к Web –серверу.
Различают два метода передачи: 1. GET – принимается по умолчанию 2. POST Если параметр имеет значение GET, то данные формы передаются в составе запроса URL, будучи присоединенным к нему справа от символа “?”.
Так как обычно используется электронная почта, то значение этого атрибута должно быть POST.
Тогда
<form action=”mailto: geoton@narod.ru” metod=post>
</form>
Если GET, то GET /bhv.ru/cgi-bin/prog1.сgi ? NAME=stive&format=HTML HTTP/1.0 Тег Input: Данный тег используется для ввода текстовых данных, паролей, значения флагов и т.д. <INPUT TYPE: тип_поля_ввода NAME=имя_поля_ввода дополнительные параметры> TYPE: · TEXT – символьная строка · PASSWORD – символы заменяются на * · CHECKBOX – выводит поле для установки флагов в виде ограниченной области. Может быть произведен выбор сразу нескольких опций из числа предложенных. · RADIO – аналогичен предыдущему типу поля, но имеет несколько отличный вид. · RESET – очистка формы. · SUBMIT – отправка данных на сервер. Пример. <FORM> Введите имя <INPUT TYPE: “text” NAME=”My” Value=”Имя” SIZE=10 MAX LENGTH=”20”> Пример. <FORM> Введите имя <INPUT TYPE: “password” NAME=”posst” Value=”Имя” SIZE=20 MAX LENGTH=”30”> Пример.
Рис.14.5. Пример создания формы <HTML> <HEAD> <TITLE> Сведения </TITLE> </HEAD> <BODY> <H1>Кто Вы?</H1> <P> Укажите свои данные <BR> <FORM METHOD=”POST” ACTION=”Tbindwio”> Фамилия: <BR> <INPUT TYPE=”text” NAME=”FIO” SIZE=”20” MAX_LENGTH=”40”> Имя: <BR> <INPUT TYPE=”text” NAME=”IMY” SIZE=”20” MAX_LENGTH=”40”> <P> <INPUT TYPE=”SUBMIT” VALUE=”Далее”> <INPUT TYPE=”RESET” VALUE=”Очистить”> </FORM> </HTML> При использовании переключателей: RADIO: <UL> <INPUT TYPE=”RADIO” NAME=”cord1” VALUE=”Холодильник” CHECKED> <INPUT TYPE=”RADIO” NAME=”cord2” VALUE=”Телевизор”> <INPUT TYPE=”RADIO” NAME=”cord3” VALUE=”Компьютеры”> </UL> Результат:
CHECKBOX:
<UL>
<INPUT
TYPE=” CHECKBOX” NAME=”cord1” VALUE=”Yes”
CHECKED>
Толстой <BR>
<INPUT TYPE=”
CHECKBOX” NAME=”cord2” VALUE=”Yes” CHECKED>
Пушкин
<BR>
<INPUT TYPE=” CHECKBOX” NAME=”cord3” VALUE=”
” CHECKED>
Лермонтов <BR>
</UL>
Результат:
Для
передачи текстовой области:
<TEXTAREA
NAME=”Resume” ROWS=10 COLS=60>
Текст
</TEXTAREA>
Раскрывающиеся
списки:
<SELECT NAME=”имя_поля” SIZE=число
MULTIPLE>
<SELECT NAME=”теги”>
<OPTION
SELECTID Value=”D1”> Действие 1
<OPTION SELECTID
Value=”D2”> Действие 2
<OPTION SELECTID
Value=”D3”> Действие 3
</SELECT>
В приложении 1 приведен пример создания Web – страницы, по истории и развитии г.Казани.