Ссылки
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте Общий синтаксис создания ссылок следующий: <ahref="URL">ключевая фраза</a> Атрибут href определяет URL (UniversalResourceLocator, универсаль-ный указатель ресурса). Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается. Адрес ссылки может быть абсолютным или относительным. Абсолютные адреса должны начинаться с указания протокола (обычно https://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа. С тегом <a> можно использовать параметры target и title. target указывает окно, в котором нужно открыть ссылку. По умолча-нию, при переходе по ссылке документ открывается в текущем окне. Синтаксис следующий: <atarget="имя окна">...</a> В качестве значения используется имя окна, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие:
· _blank — загружает страницу в новое окно браузера.
· _self — загружает страницу в текущее.
Параметр title добавляет поясняющий текст к ссылке в виде всплывающей подсказки, которая отображается при наведении мыши на ссылку. Пример: <ahref=”https://nngasu.ru”title=”ННГАСУ”>ННГАСУ</a> Для создания ссылки на адрес электронной почты в параметре href надо указать mailto:адрес электронной почты. Например, <ahref=”mailto:admin@syktsu.ru”>администратор</a>.
Кроме внешних ссылок можно использовать внутренние ссылки. Для этого вначале необходимо сделать метку в соответствующем месте страницы и дать ей имя при помощи атрибута name тега <a>. Для обращения к метке используется символ решетки (#).
Пример. Создадим в конце web-страницы ссылку, которая введет в начало документа. Для этого в начале документа, задаем метку:
<aname="ttt"></a> Затем в конце страницы задаем ссылку: <ahref="#ttt">В начало</a>. Также можно сделать ссылку на метку другого документа.
Примеры ссылок:
1. Налокальныйфайл:
<a href=”filename.html”>…</a>
2. На внешний файл:
<ahref=”https://server/path/file.html”>…</a>
3. На именованный якорь:
<ahref=” https://server/path/file.html#fragment”>…</a>
4. На именованный якорь в том же просматриваемом документе:
<a href=”#fragment”>…</a>
5. Дляпередачи e-mail-сообщения:
<ahref=”mailto:username@domain”>…</a>
6. На файл FTP-сервера:
<a href=”ftp://server/path/filename”>…</a>
Рисунки
Для вставки графических изображений в HTML-документ используется HTML тег <img> (img сокращение от англ. слова image - изображение). Изображения не вставляются напрямую на веб-страницу, тег содержит лишь ссылку на изображение и создает требуемого размера пространство, в котором отображается картинка в графическом формате GIF, JPEG или PNG:
JPG - наиболее распространенный формат для фотографий. Изображения с расширением.jpg отображают миллионы цветов, что особенно важно для точного отображения различных оттенков и градиентов в фотографиях. Однако, такие изображения не могут содержать прозрачные области.
GIF используется для простой графики, например, такой как логотипы. Изображения в формате GIF не используются для фотографий, потому что они не могут содержать столько цветовой информации как JPG-изображения. Однако GIF-изображения могут иметь прозрачные области и могут быть сжаты в файлы очень маленьких размеров. Также формат GIF поддерживает анимацию.
PNG - формат изображений, позволяющий, также как и JPG, отображать миллионы цветов и содержать прозрачные области. Однако, как правило, изображения с расширением.png имеют несколько больший размер, чем JPG или GIF.
Атрибуты тега IMG
Src - Путь к графическому файлу.
Align - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
Alt - Альтернативный текст для изображения.
Border - Толщина рамки вокруг изображения.
Height - Высота изображения.
Hspace -Горизонтальный отступ от изображения до окружающего контента.
Lowsrc - Адрес изображения низкого качества.
Vspace - Вертикальный отступ от изображения до окружающего контента.
Width - Ширина изображения.
Пример.<imgsrc="images.jpg"alt="цветок"width=200>
Карты изображения
Карты изображения позволяют привязывать ссылки к разным областям одного изображения. По сути это графические изображения с размеченными областями. Для создания карты изображения нужно дать команду <imgsrc="map.gif"usemap="#map1"> Далее необходимо определить области на карте следующим образом: <mapname="map1"><areashape="форма"coords="список координат"href="ссылка"> … </map> Возможны следующие варианты форм:
| Форма | Название | Задаваемые координаты |
| rect | прямоугольник | координаты двух вершин |
| poly | многоугольник | координаты всех вершин |
| circle | окружность | координаты центра и радиус |
Пример.
<imgsrc="images/map.gif" width="411" height="46"usemap="#map" alt="Навигация">
<map name="map"><area shape="poly" alt="Закладка 2"
coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1, 115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27"href="2.html">
<area shape="poly" alt="Закладка 3"coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1, 206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27"href="3.html">
<area shape="poly" alt="Закладка 4"coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27"href="4.html">
</map>
Лекция 3 Формы
Формы
Формы предназначены для обмена данными между пользователем исервером. Область применения форм не ограничена отправкой данных насервер, с помощью скриптов можно получить доступ к любому элементуформы, изменять его и применять по своему усмотрению.
Для указания браузеру, где начинается и заканчивается форма,используется тег <FORM>. Между открывающим и закрывающим тегами<FORM> и </FORM> можно помещать любые необходимые теги HTML.
Это позволяет добавить элементы формы в ячейки таблицы для ихформатирования, а также использовать изображения. Документ можетсодержать несколько форм, но они не должны быть вложены одна вдругую.
HTML-теги форм лишь обеспечивают интерфейс и элементыуправления для сбора информации. Реальная работа выполняетсяприложениями, обрабатывающими формы, обычно сценариями CGI(CommonGatewayInterface, интерфейс общего шлюза). CGI представляетсобой интерфейс между HTTP (программой ответственной за Web-транзакции) и другими программами на сервере.
Программа CGI (или сценарий) может быть написана на несколькихязыках программирования. Для сервера не имеет значения, на какомименно, если он обретает возможность принимать данные и посылать ихназад.
Обычно Веб-дизайнер занимается разработкой элементов HTML-форм, а программирование остается опытным программистам.
Основные элементы HTML-форм
1. Тег-контейнер FORM (базовая форма)
Тег <form> обозначающий форму, содержит информацию, необходимуюдля взаимодействия с CGI-программой на сервере. Форма состоит изопределенного числа элементов управления (полей ввода текста, кнопок,флажков, радиокнопок и т.д.) Когда пользователь завершает заполнениеформы и нажимает кнопку «submit», введенные данные поступают в CGI-программу, заданную атрибутом action. Внутри одного документа можетнаходиться несколько форм, но они не могут быть вложенными.
Необходимо следить и за тем, чтобы они не перекрывали друг друга.Каждая форма характеризуется некоторыми атрибутами которыеуказываются в теге <FORM>. Эти параметры задают имя формы, ееобработчик и метод отправки данных на сервер, а также некоторые другиехарактеристики.
Основные атрибуты тега <form>:
• action - Указывает обработчик, к которому обращаются данныеформы при их отправке на сервер. В качестве обработчика можетвыступать CGI-программа или HTML-документ, который включает всебя серверные сценарии. После выполнения обработчикомдействий по работе с данными формы он возвращает новый HTML-документ. Если параметр action отсутствует, текущая страницаперезагружается, возвращая все элементы формы к их значениям поумолчанию. В качестве обработчика можно указать также адресэлектронной почты, начиная его с ключевого слова mailto. Приотправке формы будет запущена почтовая программа установленнаяпо умолчанию. В целях безопасности в браузере установлено, чтоотправить незаметно информацию, введенную в форме, по почтеневозможно. Для корректной интерпретации данных используйтепараметр enctype со значением text/plain в теге <FORM>.
• enctype – устанавливает тип данных отправляемых вместе с формой.Обычно устанавливать значение параметра enctype не требуется,данные вполне правильно понимаются на стороне сервера. Однакоесли используется поле для отправки файла (<INPUTtype="file">),следует определить параметр enctype как multipart/form-data.
Допускается также устанавливать сразу несколько значений,разделяя их запятыми.
• method - метод сообщает серверу о цели запроса. Различают дваметода — GET и POST. Существуют и другие методы, но они покамало используются. GET - Этот метод является одним из самыхраспространенных и предназначен для получения требуемойинформации и передачи данных в адресной строке. Пары«имя=значение» присоединяются в этом случае к адресу послевопросительного знака и разделяются между собой амперсандом(символ &). Удобство использования метода GET заключается в том,что адрес со всеми параметрами можно использовать неоднократно,сохранив его, например, в «Избранное» браузера, а также менятьзначения параметров прямо в адресной строке. POST - метод POSTпосылает на сервер данные в запросе браузера. Это позволяетотправлять большее количество данных, чем доступно методу GET,поскольку у него установлено ограничение в 4 Кб. Большие объемыданных используются в форумах, почтовых службах, заполнениибазы данных и т.д.
• target – после того, как обработчик формы получает данные, онвозвращает результат в виде HTML-документа. Вы можетеопределить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве егозначения используется имя окна или фрейма. Если параметр target неустановлен, возвращаемый результат показывается в текущем окне.
В качестве аргумента используется имя окна или фрейма, заданноепараметром name. Если установлено несуществующее имя, то будетоткрыто новое окно. Зарезервированные имена следующие:
_blank — загружает страницу в новое окно браузера;
_self — загружает страницу в текущее окно;
2. Тег-контейнер INPUT
Рассмотренные ниже элементы управления вводятся как вариантыатрибуты type тега <input>
Текстовое поле - <inputtype="text" атрибуты>Создает элемент для ввода пользователем строки текста.
Основные атрибуты:
• size = “число” – ширина поля
• maxlength = “число” – задает максимальное количество символовразрешенных в тексте. Если этот параметр опустить, то можновводить строку длинее самого поля.
• name = “Name” - определяет имя поля. Предназначено для того,чтобы обработчик формы мог идентифицировать это поле.
• value = “текст” – задает начальный текст в поле.
• readonly - устанавливает режим «только для чтения».
• disabled - блокирование элементов форм. Обычно используется длятого, чтобы динамически с помощью скриптов изменять значениеполя. Пользователь же не должен в подобном случае иметь доступ кполю, поэтому оно блокируется.
• tabindex = “порядковый номер” - определяет последовательностьперехода между полями при нажатии на <Tab>.
Текстовое поле ввода пароля - <inputtype="password" атрибуты>
Поле для пароля — обычное текстовое поле, но отличается тем, что всесимволы показываются звездочками или кружочками. Хотя символы невыводятся, они доступны как данные формы, поэтому этот способ неявляется безопасным способом передачи паролей.
Возможные атрибуты совпадают с элементом текстового поляНевидимый элемент ввода - <inputtype="hidden" атрибуты>
Тип hidden (невидимый) добавляет в форму элемент управления, неотображаемый браузером. Он удобен, когда необходимо послать наобработку информацию вместе с данными, введенными пользователем.Это могут быть метки, используемые сценарием для сортировки форм.Некоторые сценарии CGI для обеспечения правильной работы требуют,чтобы к формам были добавлены определенные невидимые поля.Атрибуты совпадают с атрибутами элемента текстового поля.
Флажки (галочки) - <inputtype="checkbox" атрибуты>
Флажки обычно используются для задания многовариантных запросов.Когда флажок установлен, соответствующее значение передается вместе сформой в программу обработки на сервере.
Основные атрибуты:
• name = “Name” - определяет имя поля. Предназначено для того,чтобы обработчик формы мог идентифицировать это поле.
• value = “текст” – задает начальный текст в поле.
• checked - устанавливает элемент выбранный по умолчанию.
• disabled - блокирование элементов форм.
• tabindex = “порядковый номер” - определяет последовательностьперехода между полями при нажатии на <Tab>.
Кнопка-переключатель (радиокнопка)-<inputtype="radio" атрибуты>
Кнопки-переключатели (типа radio) используют, когда необходимовыбрать один единственный вариант из предложенных.
Основные атрибуты:
• name = “Name” - определяет имя поля. Предназначено для того,
чтобы обработчик формы мог идентифицировать это поле.
• value = “текст” – задает начальный текст в поле.
• checked - устанавливает элемент выбранный по умолчанию.
• disabled - блокирование элементов форм.
• tabindex = “порядковый номер” - определяет последовательностьперехода между полями при нажатии на <Tab>.
Настраиваемая кнопка - <inputtype="button" атрибуты>
Кнопка типа button не имеет какой-либо предопределенной функции, онаявляется общим средством и настраивается JavaScript.
Чтобы написать текст на кнопке, нужно задать атрибут value.
Основные атрибуты:
• name = “Name” - определяет имя поля. Предназначено для того,
чтобы обработчик формы мог идентифицировать это поле.
• value = “текст” – задает надпись на кнопке, а также ее значение.
• disabled - блокирование элементов форм.
• tabindex = “порядковый номер” - определяет последовательностьперехода между полями при нажатии на <Tab>.
Кнопка SUBMIT - <input type="submit"атрибуты>
Когда пользователь нажимает на эту кнопку, данные формы отправляютсяна сервер и обрабатываются программой, указанной параметром action
тега <FORM>.
Параметр name для этого типа кнопки может быть опущен. Еслизначение параметра value не указывать, автоматически появится надпись
Подача запроса (для браузера InternetExplorer), Отправить (для Opera) илиОтправить запрос (для Firefox).
Основные атрибуты:
• name = “имя” - определяет имя поля. Предназначено для того,чтобы обработчик формы мог идентифицировать это поле.
• value = “текст” – задает начальный текст в поле.
• disabled - блокирование элементов форм.
• tabindex = “порядковый номер” - определяет последовательностьперехода между полями при нажатии на <Tab>.
Кнопка RESET-<input type="reset"атрибуты>
Кнопка reset восстанавливает данные формы в первоначальное состояние.
Атрибуты совпадают с атрибутами простых кнопок. Аналогично кнопкеSubmit, значение параметра name можно не указывать, тогда надписьСброс на кнопке будет добавлена браузером автоматически.
Значение кнопки Reset никогда не пересылается на сервер.
Кнопка – изображение - <inputtype="image" атрибуты>
Можно изменить кнопку button произвольным изображением, используятип image.
Основные атрибуты:
• name = “имя” - определяет имя поля. Предназначено для того,
чтобы обработчик формы мог идентифицировать это поле.
• src = url – задает URL изображения. Обязательный параметр.
• align = left|right|center|top|bottom|middle - задает выравниваниеполя. Результат их использования точно такой же, как и уизображений.
• disabled - блокирование элементов форм.
• tabindex = “порядковый номер” - определяет последовательностьперехода между полями при нажатии на <Tab>.
Выбор файла - <inputtype="file" атрибуты>
Поле формы типа file позволяет пользователю выбрать файл, хранящийсяна его компьютере, и послать его на сервер как данные формы.
<form enctype="multipart/form-data" method="POST">
<input type="file"атрибуты>
</form>
Параметрыформыenctype="multipart/form-data"нужендлякорректнойпередачифайла. Если его не указать, будет передан лишь путь к файлу.
Атрибуты те же, что и для текстового поля.
3. Тег-контейнер TEXTAREA
<textarea атрибуты>текст</textarea>
Тег <textarea> создает многострочное текстовое окно с прокруткой,которое позволяет пользователям вводить достаточно большой текст.
Текст, который появляется между тегами <textarea>…</textarea>, будетисходным содержимым окна текстового ввода при отображении формы.
Основные атрибуты:
• name = “имя” - определяет имя поля. Предназначено для того,чтобы обработчик формы мог идентифицировать это поле.
• cols = “число” – определяет ширину (в символах). Еслипользователь вводит текст, который не помещается в созданномокне, то появляется прокуртка.
• rows = “число” - задает количество выводимых строк
• wrap – задает параметры переноса строк. Возможные значения: off— отключает перенос строк; virtuals — показывает переносы строк,но отправляет текст как он введен; physical — переносы строквставляются где указано и в таком виде текст отправляется.
• readonly - устанавливает режим «только для чтения».
• disabled - блокирование элементов форм.
• tabindex = “порядковый номер” - определяет последовательность
перехода между полями при нажатии на <Tab>.
4. Тег-контейнер SELECT
Тег <select> создает меню. Оно более компактно, чем группы кнопок илифлажков. Меню выводится как разворачивающееся или в видепрокручиваемого списка в зависимости от заданного размера. Тег <select>работает как контейнер для любого количества тегов <option>.
Основные атрибуты тега <select>:
• name = “имя” - определяет имя поля. Предназначено для того,чтобы обработчик формы мог идентифицировать список.
• size = “число” – определяет количество видимых строк. Поумолчанию одна строка.
• multiple - задает прокручивающийся список, позволяет выбратьсразу несколько строк.
• disabled - блокирование элементов форм.
• tabindex = “порядковый номер” - определяет последовательностьперехода между полями при нажатии на <Tab>.
Основные атрибуты тега <option>:
• selected - видимое поле по умолчанию
• value = “текст” - определяет, что будет отправлено на сервер привыбранном пункте списка.
5. Тег-контейнер LABEL
Тег используется для связывания информации с элементамиуправления. Каждый элемент label ассоциирован строго с однимэлементом управления формы. Такая связь необходима, чтобы изменятьзначение переключателей и флажков при нажатии курсором мыши натекст.
Для связывания элемента формы и текста в теге <LABEL>используется параметр for, аргументом для которого служитидентификатор элемента, задаваемого параметром id.
Основные атрибуты тега <label>:
• selected - видимое поле по умолчанию
• for = “текст” – связывает метку с элементом управления, используязначение атрибута for, совпадающее со значением атрибута idвнутри элемента управления.
Пример:
<formaction="handler.php">
<inputtype="checkbox"id="t1">Укажитенагалочку
<input type="checkbox" id="t2">
<labelfor="t2">Нажмите на этот текст, чтобы выбрать этугалочку</label>
</form>
В первой строке, чтобы активизировать флажок, надо щелкнуть на негосамого. Во второй строке активным элементом является и текст, принажатии на который курсором мыши, можно устанавливать или сниматьгалочку. Вот и вся разница.
6. Теги-контейнеры FIELSET и LEGEND
При создании сложной формы не обойтись без визуального отделенияодного логического блока от другого. Этого можно добиться, используявнутри тега <FORM> сочетания тегов и стилей. Например, элементыформы можно выделить, если использовать для них фоновый цвет илирамку, задавая их через CSS. Кроме того, существует и другой подход,который состоит в применении тега <FIELDSET>. Этот контейнергруппирует элементы формы, отображая вокруг них рамку.
Чтобы добавить к рамке специальный заголовок применяется контейнер<LEGEND>, который должен располагаться в теге <FIELDSET>. Внутритега <LEGEND> допустимо использовать текст и теги форматирования, атакже стили CSS.
<form>
<fieldset>
<legend>Заголовок</legend>
<input type="checkbox">Галочкапервая<br>
<input type="checkbox">Галочкавторая<br>
<input type="checkbox">Галочкатретья
</fieldset>
</form>
Пример HTML-кода отправки данных текстового поля на e-mail:
<FORM METHOD=POST ACTION="mailto:ling@ulstu.ru">
<INPUT TYPE=TEXT NAME="Name" SIZE=40>
<INPUT TYPE=SUBMIT VALUE="Отправить">
<INPUT TYPE=RESET VALUE="Очистить">
</FORM>