Гипертекстовые ссылки в html

Веб-страница, веб-сайт, электронная информационная система по факту, представляет собой упорядоченный список html-страниц (или любой другой смежной технологии), Связанных между собой гиперссылками (гипертекстовыми ссылками).

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

Для осуществления операции создания гиперссылок, используется теговое свойство

< a> < /a>. Между открывающим и закрывающим тегом содержится текстовая и графическая информация, которая может послужить гиперссылкой. Пример простой ссылки:

< a href=”2.html”> Страница 2< /a>

В браузере можно увидеть:

 

Страница 2

 

При нажатии на ссылку, произойдет переход на страницу 2.html в том случае, если данный файл находится в одной папке вместе с файлом, где содержится данная ссылка.

Вы также можете задать адрес страницы, находящейся в сети Internet, путем присвоения адреса, к примеру:

 

< a href=”http: //www.google.ru/”> Google< /a>

 

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

Существуют такие понятия, как:

· Абсолютная ссылка - на объект, который находится по конкретному адресу. К примеру, веб страница на сервере (пример выше) или же файл, находящийся на носителе информации (жесткий диск. Пример: < a href=”D: \my site\index.html”> Google< /a>

· Относительная ссылка - на объект, который находится в каталоге, где и страница со ссылкой. Если необходимо дать ссылку на объект, находящийся в каталоге, но выше по дереву папок, ссылка будет выглядеть следующим образом:

 

< a href=”../2.html”> Страница 2< /a> (в том случае, если объект на один переход выше. Чем выше переход, тем больше содержится элемент../ перед именем объекта).

 

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

· Создайте маркер раздела. Синтаксис данного маркера следующий: < A NAME=" NamedAnchor" > Текст < /A>

· Создайте ссылку на данный маркер:

< A HREF=" #NamedAnchor" > Текст | Изображение < /A>

 

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

 

Таблицы

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

· < table> ... < /table> - служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов < TR> и < TD>. Внутри < TABLE> допустимо использовать следующие элементы: < CAPTION>, < COL>, < COLGROUP>, < TBODY>, < TD>, < TFOOT>, < TH>, < THEAD> и < TR>. Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев; Параметры для тега:

· Align – задает выравнивание таблицы (значения: left | center | right);

· Background – задает фоновое изображение (значения: " URL" );

· Bgcolor – задает фоновый цвет (значения: «цвет»);

· Border – толщина рамки в пикселах (числовое значение);

· Bordercolor – цвет рамки (значения: «цвет»);

· Cellpadding - Отступ от рамки до содержимого ячейки (числовое значение);

· Cellspacing - Расстояние между ячейками (числовое значение);

· Cols - Число колонок в таблице (числовое значение);

· Height - Высота таблицы (числовое значение);

· Width - Ширина таблицы (числовое значение);

 

· < table> < tr> < th>...< /th> < /tr> < /table> - Тег < TH> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег < TH> должен размещаться внутри контейнера < TR>, который в свою очередь располагается внутри тега < TABLE>;

· < table> < tr>...< /tr> < /table> - служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега < TH> или < TD>;

· < table> < tr> < td>...< /td> < /tr> < /table> - Предназначен для создания одной ячейки таблицы. Тег < TD> должен размещаться внутри контейнера < TR>, который в свою очередь располагается внутри тега < TABLE>;

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

< html>

< head>

< title> Таблица< /title>

< /head>

< body>

< table width=" 100%" border=" 0" cellspacing=" 0" cellpadding=" 4" >

< tr align=" center" bgcolor=" #999999" >

< td colspan=" 3" style=" font-size: 160%; font-family: sans-serif" > Lorem

ipsum dolor sit amet...< /td>

< /tr>

< tr>

< td> < img src=" /images/logo.gif" alt=" " width=" 150" height=" 70"

border=" 0" style=" background: #CC9" > < /td>

< td align=" right" > < img src=" /images/title.gif" alt=" " width=" 70"

height=" 70" style=" background: #CF9" > < /td>

< td>

< a href=" lorem.html" > Lorem< /a> < Br>

< a href=" lorem.html" > Ipsum< /a> < Br>

< a href=" lorem.html" > Dolar< /a>

< /td>

< /tr>

< tr>

< td colspan=" 3" >

< table width=" 100%" border=" 0" cellpadding=" 0"

cellspacing=" 0" bgcolor=" #333333" >

< tr> < td> & nbsp; < /td> < /tr>

< /table>

< /td>

< /tr>

< /table>

 

< /body>

< /html>

Листинг использования таблицы

Формы

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

Рис.4 Пример форм в html

Основные свойства:

< form action="..." > ... < /form> - устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

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

Для отправки формы на сервер используется кнопка Submit, то же самое можно добиться, если нажать клавишу < Enter> в пределах формы. Если кнопка Submit отсутствует в форме, клавиша < Enter> имитирует ее использование, но только в том случае, когда в форме имеется только один элемент < INPUT>. Если таких элементов два и более, нажатие на < Enter> не вызовет никакого результата.

Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега < FORM>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега < INPUT>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид:

 

http: //www.htmlbook.ru/cgi-bin/handler.cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED& page=5

 

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (& ). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера < FORM> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов. Параметры для тега:

· action – Адрес CGI-программы или документа, которые обрабатывает данные формы (значения: " URL" );;

· enctype – MIME-тип информации формы;

· method – Метод протокола HTTP (значения get | post);

· name – Имя формы (значение – имя формы);

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

В листинге приведен пример использования форм:

 

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=windows-1251" >

< title> Тег FORM< /title>

< /head>

< body>

 

< form action=" /html/example/handler.php" >

< p> < b> Как по вашему мнению расшифровывается аббревиатура & quot; ОС& quot;? < /b> < /p>

< p> < input type=" radio" name=" answer" value=" a1" > Офицерский состав< Br>

< input type=" radio" name=" answer" value=" a2" > Операционная система< Br>

< input type=" radio" name=" answer" value=" a3" > Большой полосатый мух< /p>

< p> < input type=" submit" > < /p>

< /form>

 

< /body>

< /html>

Листинг использования форм

 

Рис.5 Результат в браузере

Значение параметра method не зависит от регистра. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются.

GET - Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ & ). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST - Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д

· Определение элементов управления формы — тег < INPUT>

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

· Атрибут TYPE=text. Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег < INPUT>, и атрибут TYPE устанавливается в значение text. Это значение принято по умолчанию и указывать его необязательно. Кроме того, задается атрибут NAME для определения наименования переменной поля.

Ваше имя < INPUT NAME=" Name" SIZE=" 35" >

Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется MAXLENGTH, он ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. Вторым атрибутом является SIZE, определяющий размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение MAXLENGTH больше, чем SIZE, браузер будет прокручивать данные в окне. Последним из дополнительных атрибутов является атрибут VALUE, обеспечивающий начальное значение поля ввода.

· Атрибут TYPE=checkbox. При создании форм часто требуется получить ответ пользователя на вопрос типа " Да/Нет". Для создания независимых кнопок в формах HTML используется тег < INPUT> с атрибутом TYPE=checkbox. В зависимости от содержания формы пользователь может отметить несколько флагов. Когда форма использует тег < INPUT> с атрибутом CHECKBOX, в нем должны присутствовать и атрибуты NAME, и VALUE. Атрибут NAME указывает на наименование данного поля (флага) ввода. В атрибуте VALUE будет содержаться значение поля.

Россия< INPUT NAME=" Страна" TYPE=checkbox VALUE=" Россия" > %Страны СНГ< INPUT NAME=" Страна" TYPE=checkbox VALUE=" СНГ" >

В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег < INPUT> должен содержать атрибут CHECKED.

· Атрибут TYPE=radio В некоторых случаях требуется организовать выбор одного из нескольких возможных значений. Для создания формы ввода при выборе пользователем одного значения из нескольких возможных необходимо использовать тег < INPUT> с атрибутом TYPE=radio. Когда в форме применяется данный атрибут, в теге < INPUT> должны быть указаны атрибуты NAME и VALUE. Атрибут NAME указывает наименование соответствующего поля (кнопки). Атрибут VALUE содержит значение поля.

 

Пол мужской< INPUT NAME=" Пол" TYPE=radio VALUE=" Мужской" > %Пол женский< INPUT NAME=" Пол" TYPE=radio VALUE=" Женский" >

· Атрибут TYPE=image В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для этого программисты используют тег < INPUT> с атрибутом TYPE=image. Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он " обрабатывает" введенную в форму информацию. Когда форма использует атрибут image, тег < INPUT> должен содержать также атрибуты NAME и SRC. NAME указывает наименование поля ввода формы. Атрибут SRC содержит URI файла — источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега < IMG>.

 

< BR> Выберите точку< INPUT TYPE=image NAME=point SRC=" image.gif" >

· Атрибут TYPE=password Если в форме требуется организовать ввод пароля, то атрибут TYPE можно установить в значение password (TYPE=password). Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены.

 

Подпись< INPUT NAME=" login" > %Пароль < INPUT TYPE=password NAME=" pass" >

· Атрибут TYPE=reset Когда пользователь заполняет форму, ему может потребоваться начать все сначала. На такой случай существует кнопка Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей. Когда пользователь выбирает данную кнопку, форма восстанавливает первоначальные значения всех элементов, в которых присутствует атрибут TYPE=reset. Для создания кнопки Reset используется тег < INPUT> с атрибутом TYPE=reset. Браузер в свою очередь будет выводить изображение данной кнопки. Если в форме используется атрибут reset, тег < INPUT> может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки.

 

< INPUT TYPE=reset VALUE=" Очистить форму" >

· Атрибут TYPE=submit Используя форму HTML для ввода информации от пользователя, необходимо обеспечить пользователю возможность завершить ввод данных. Для этого используется тег < INPUT> с атрибутом TYPE=submit. Браузер, в свою очередь, выводит данный элемент, как кнопку, по которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Когда в форме используется тег < INPUT> с атрибутом submit, данный элемент может содержать два дополнительных атрибута: NAME и VALUE. Атрибут NAME хранит значение переменной поля в вашей форме. Атрибут VALUE — указывает наименование кнопки Submit.

< BR> < INPUT TYPE=submit VALUE=" Отправить сообщение" > %

· Атрибут TYPE=hidden Скрытые поля. Добавление в тег INPUT атрибута TYPE=hidden позволит включить в отправляемую форму значения атрибутов NAME и VALUE, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.

 

· Создание многострочных областей ввода текста — тег < TEXTAREA>

В зависимости от типа формы может потребоваться организовать ввод большого количества текста. В таких случаях используется тег < TEXTAREA> для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS, NAME и ROWS.

· Атрибут COLS. Указывает (число символов) число колонок, содержащихся в текстовой области.

· Атрибут NAME. Определяет наименование поля.

· Атрибут ROWS. Задает количество видимых строк текстовой области.

 

< TEXTAREA NAME=тема COLS=38 ROWS=3> < /TEXTAREA>

 

· Использование списков в форме — тег < SELECT>

Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег SELECT с атрибутом TYPE=select. Для определения списка пунктов используют тег < OPTION>. Тег < SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.

· Атрибут MULTIPLE. Позволяет выбрать более чем одно наименование.

· Атрибут NAME. Определяет наименование объекта.

· Атрибут SIZE. Определяет число видимых пользователю пунктов списка. Если в форме установлено значение атрибута SIZE=1, то браузер выводит на экран список в виде выпадающего меню. В случае SIZE > 1 браузер представляет на экране обычный список.

В форме может использоваться тег < OPTION> только внутри тега < SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE.

· Атрибут SELECTED. Используется для первоначального выбора значения элемента по умолчанию.

· Атрибут VALUE. Указывает на значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно значению тега < OPTION> (открыть).

 

Выбор < SELECT NAME=" Выбор" > %< OPTION> Вариант 1 < /OPTION> %< OPTION> Вариант 2 < /OPTION> %< OPTION VALUE=" Вариант 3" > Вариант 3 < /OPTION> %< OPTION SELECTED> Вариант 4 < /OPTION> %< /SELECT>

Фреймы

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

Технология использования фреймов позволяет:

 

1) Увеличить скорость загрузки веб-страницы;

2) Сократить скорость обновления и перехода по ссылкам, на данной странице;

3) редактировать данные отдельно взятого элемента страницы, не изменяя свойств других ее элементов;

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

Фреймы бывают двух типов: обычные и встроенные внутрь HTML-документа.

Описание фреймовой структуры создается при помощи тэгов < frameset> и < frame>.

Frameset описывает разделение окна на несколько частей по горизонтали или вертикали. Для этого используются атрибуты rows или cols, в которых через запятую указываются размеры соответствующих подструктур в виде количества пикселей, процентов или пропорциональном виде.

Для описания фрейма используется тэг < frame> с атрибутами:

· name - название фрейма,

· src - URL содержимого фрейма,

· noresize - запрет изменения размера фрейма,

· scrolling - указание наличие скроллинга (yes, no, auto (по мере необходимости)),

· frameborder со значениями 1 или 0 (наличие или отсутствие рамки),

· marginwidth и marginheight — расстояния между границами фрейма и другими объектами).

< noframes> выделяет часть HTML-документа, которая не отображается в случае поддержки фреймов.

Встроенные фреймы создаются с помощью тэга < iframe> (по способу размещения они похожи на рисунки). Атрибуты name, scrolling, marginwidth иmarginheight, frameborder, src имеют тот же смысл, что и в тэге < frame>. Атрибуты align, height и width имеют тот же смысл, что и в тэге < img>

 

⇐ Предыдущая123456Следующая ⇒

Поделиться: