Внешние ссылки

Ссылки на веб-страницы других сайтов являются внешними, они добавляются в HTML-документ при помощи тега <a>. Чтобы создать внешнюю ссылку, нужно указать абсолютный URL-адрес, который начинается с протокола http:// (или https://)

Ссылки на разделы текущей страницы

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

Внутренние ссылки также добавляются при помощи тега <a> с разницей в том, что атрибут href содержит имя указателя (так называемый якорь), а не URL-адрес. Перед именем указателя ставится знак #.

Если вам нужно сделать ссылку с одной страницы вашего сайта на определенный раздел другой страницы вашего сайта, то необходимо задать id для этого раздела страницы, а потом добавить его к абсолютному адресу ссылки

Ссылки на страницы своего сайта

При создании ссылок на страницы собственного сайта задаются относительные ссылки, которые обращаются к какой-либо странице на одном и том же сервере.

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

Можно задавать путь к документам относительно корневого каталога. Обращение к корневому каталогу осуществляется через символ /. Далее указываются каталоги, в которые браузер должен перейти, чтобы добраться до нужного документа.

Графические ссылки

Средствами HTML можно было создавать ссылки с помощью текста или изображений. С появлением стандарта HTML5 элемент <a> может содержать помимо встроенного контента еще и блочные элементы, то есть, можно объединять в одной ссылке главный заголовок и логотип вашего сайта:

Атрибуты ссылок

Помимо глобальных атрибутов, элемент <a> поддерживает атрибуты, приведенные в тблице.

Атрибут	Описание, принимаемое значение
download	Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения: <a href="/images/logo.png" download><img src="/images/logo.png" alt="logo"></a> <a href="/images/logo.png" download="logo"><img src="/images/logo.png" alt="logo"></a> <a href="files/20022014.pdf" download="Отчет Февраль 2014.pdf">Загрузить отчет за Февраль 2014</a>
href	Значением атрибута является URL-адрес документа, на который указывается ссылка.
hreflang	Определяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка, например: <a href="http://www.anysite.ru" hreflang="en">Anysite</a>
media	Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
ping	Отслеживает URL-адреса ресурсов, по которым переходил пользователь.
rel	Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения: alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало). author — ссылка на автора документа. bookmark — постоянный URL-адрес, используемый для закладок. help — ссылка на справку. license — ссылка на информацию об авторских правах на данный веб-документ. next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности. nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке. noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта. prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш. search — указывает, что целевой документ содержит инструмент для поиска. tag — указывает ключевое слово для текущего документа.
target	Указывает на то, в каком окне должен открываться документ, к которому ведет ссылка. Принимает следующие значения: _self — страница загружается в текущее окно; _blank — страница открывается в новом окне браузера; _parent — страница загружается во фрейм-родитель; _top — страница загружается в полное окно браузера.
type	Указывает MIME-тип файлов ссылки, т.е. расширение файла. На данный момент носит больше справочную информацию.

8. Формы.

Форма HTML - это раздел документа, в котором содержатся обычная информация, разметка и специальные элементы, называемые управляющими элементам (флажки, кнопки с зависимой фиксацией, меню и т.д.), а также метки этих управляющих элементов. Обычно пользователи «заполняют» форму, модифицируя управляющие элементы (вводя текст, выбирая пункты меню и т.д.) перед тем, как предоставить форму браузеру для обработки (например, на Web-сервер, на почтовый сервер и т.д.)

Все формы начинаются тэгом <FORM> и звершаются тэгом </FORM>.

Управляющие элементы

Пользователи взаимодействуют с формами с помощью именованных управляющих элементов.

«Имя элемента» задается атрибутом name. Областью действия атрибута name для управляющего элемента в элементе FORM является элемент FORM.

Каждый управляющий элемент имеет начальное и текущее значение, оба они являются символьными строками. В общем случае «исходное значение» управляющего элемента может задаваться с помощью атрибута value. Однако исходное значение элемента TEXTAREA задается его содержимым.

«Текущее значение» управляющего элемента сначала устанавливается равным начальному значению. Затем текущее значение может изменяться пользователем или скриптами.

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

Когда форма предоставляется для обработки, с формой передаются пары «управляющий элемент» - «текущее значение». Передаваемые пары имя/значение называются успешными управляющими элементами.

Типы управляющих элементов

В HTML определены следующие типы управляющих элементов:

кнопки

Можно создавать три типа кнопок:

• кнопки отправки: При активизации такой кнопки производится отправка формы. В форме может быть несколько кнопок отправки.

• кнопки сброса: При активизации такой кнопки для всех управляющих элементов устанавливаются исходные значения.

• прочие кнопки: Для таких кнопок действие по умолчанию не определено. С атрибутами событий каждой такой кнопки могут быть связаны клиентские скрипты. Если происходит событие (например, пользователь нажимает кнопку, отпускает ее и т.д.), включается связанный с событием скрипт.

флажки

Флажки (и кнопки с зависимой фиксацией) - это переключатели вкл./выкл., которые могут переключаться пользователем. Переключатель «включен», если для управляющего элемента установлен атрибут selected.

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

кнопки с зависимой фиксацией

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

меню

Выпадающий список. Предоставляют пользователям варианты на выбор.

текстовый ввод

Для ввода текста пользователем авторы могут создавать управляющие элементы двух типов. Элемент INPUT создает управляющий элемент для ввода текста из одной строки, а элемент TEXTAREA - элемент для ввода текста из нескольких строк. В обоих случаях вводимый текст становится текущим значением управляющего элемента.

выбор файлов

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

скрытые управляющие элементы

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

объекты

Можно помещать в формы общие объекты, так что связанные с ними значения будут передаваться с другими управляющими элементами.

Элемент FORM

Элементы, используемые для создания управляющих элементов, обычно располагаются в элементе FORM, но могут находиться и за пределами объявления FORM, если они используются для построения интерфейса пользователя.

Элемент FORM служит контейнеров для управляющих элементов. Он определяет:

• Макет формы (дается содержимым элемента).

• Программу, которая будет обрабатывать заполненную и переданную форму (атрибут action). Получающая форму программа должна иметь возможность определения пар имя/значение, чтобы их использовать.

• Метод отправки данных на сервер (атрибут method).

• Кодировку символов, которая должна приниматься сервером для обработки этой формы (атрибут accept-charset).

Форма помимо управляющих элементов может содержать текст и разметку (абзацы, списки и т.д.).

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

action - задает агента для обработки формы. Например, значением может быть URI HTTP (для передачи формы в программу) или mailto URI (для отправки формы по электронной почте).

method - определяет метод HTTP, используемый для передачи набора данных формы. Возможные значения (с учетом регистра) - «get» (по умолчанию) и «post».

enctype - задает тип содержимого, используемый для отправки формы на сервер (если для метода используется значение «post»). По умолчанию для этого атрибута используется значение «application/x-www-form-urlencoded».

Элемент INPUT

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутов

type - определяет тип управляющего элемента. По умолчанию используется значение «text».

name - определяет имя управляющего элемента.

value - определяет начальное значение управляющего элемента. Этот атрибут не обязателен, если только для атрибута type не установлено значение «radio».

size - сообщает браузеру начальную ширину управляющего элемента. Ширина дается в пикселах, если для атрибута type не установлено значение «text» или «password». В этом случае ширина задается в числе символов (число должно быть целым).

maxlength - если для атрибута type установлено значение «text» или «password», этот атрибут определяет максимальное число символов, вводимых пользователем. Это число может превышать указанный в атрибуте size размер поля. По умолчанию число символов не ограничено.

checked - если для атрибута type установлено значение «radio» или «checkbox», этот логический атрибут указывает, что флажок установлен. Агенты пользователей должны игнорировать этот атрибут для других типов управляющих элементов.

src - если атрибут type имеет значение «image», этот атрибут определяет местоположение изображения, используемое для представления графической кнопки.

Типы управляющих элементов, создаваемые с помощью элемента INPUT

Тип управляющего элемента, определяемый элементом INPUT, зависит от значения атрибута type:

text

Создает элемент для ввода текста из одной строки.

password

Аналогичен значению «text», но вводимый текст представляется таким образом, чтобы не отображать символы (например, в виде ряда звездочек). Этот управляющий элемент часто используется для ввода паролей. Обратите внимание, что текущим значением является текст, введенный пользователем, а не текст, представляемый агентом пользователя.

checkbox

Создает флажок.

radio

Создает кнопку с зависимой фиксацией. Если атрибут name у нескольких кнопок имеет одинаковое значение, то кнопки работают в группе. Если значения нет или оно разное, кнопки работают независимо друг от друга.

submit

Создает кнопку отправки.

image

Создает графическую кнопку отправки. Значение атрибута src задает URI изображения, используемого для представления кнопки. Из соображений доступности авторам следует предусматривать альтернативный текст для изображения с помощью атрибута alt.

reset

Создает кнопку сброса.

button

Создает другую кнопку. Агенты пользователей должны использовать в качестве метки на кнопке значение атрибута value.

hidden

Создает невидимый управляющий элемент.

file

Создает управляющий элемент выбор файла. Браузеры могут использовать значение атрибута value в качестве исходного имени файла.

Элемент BUTTON

Кнопки, создаваемые с помощью элемента BUTTON, действуют так же, как и кнопки, создаваемые с помощью элемента INPUT, но они обеспечивают более богатые возможности представления: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, действует и может отображаться подобно элементу INPUT, для атрибута type которого установлено значение «image», но тип элемента BUTTON может иметь содержимое.

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

name - определяет имя управляющего элемента.

value - определяет начальное значение кнопки.

type - Объявляет тип кнопки. Возможные значения:

• submit: Создает кнопку отправки. Это значение используется по умолчанию.

• reset: Создает кнопку сброса.

• button: Создает другую кнопку.

Визуальные агенты пользователей могут представлять кнопки BUTTON рельефно или с эффектом нажатия при щелчке мыши, в то время как кнопки INPUT могут представляться только как «плоские» изображения.

Элемент SELECT

Элемент SELECT создает меню (выпадающий список). Каждый вариант пункт меню представляется элементом OPTION. Элемент SELECT должен содержать хотя бы один элемент OPTION.

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов элемента SELECT

name - определяет имя управляющего элемента.

size - если элемент SELECT представлен в виде списка с возможностью прокрутки, этот атрибут определяет число строк в списке, видимых в один момент времени. Визуальные агенты пользователей не обязательно должны представлять элемент SELECT в виде списка; они могут использовать другие механизмы - например, выпадающие меню.

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

Элемент OPTGROUP

Элемент OPTGROUP позволяет авторам логически группировать варианты. Обычно это полезно, если пользователь должен делать выбор в длинном списке вариантов; группы связанных вариантов проще просматривать и запоминать, чем один длинный список вариантов. В HTML 4.0 все элементы OPTGROUP должны задаваться непосредственно в элементе SELECT (т.е. группы не могут быть вложенными).

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов элемента OPTGROUP

label - метка группы вариантов.

Элемент OPTION

Задает пункт меню.

Начальный тег: обязателен, Конечный тег: optional

Определения атрибутов элемента OPTION

selected - если этот логический атрибут установлен, этот вариант выбран заранее.

value - определяет исходное значение управляющего элемента. Если этот атрибут не установлен, исходное значение устанавливается равным содержимому элемента OPTION.

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

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

Атрибут label элемента OPTGROUP определяет метку группы

Элемент TEXTAREA

Элемент TEXTAREA создает управляющий элемент для многострочного ввода текста.

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

name - имя управляющего элемента.

rows - число видимых текстовых строк.

cols - видимая ширина, выраженная шириной среднего символа.

Установка атрибута readonly позволяет авторам отображать неизменяемый текст в элементе TEXTAREA. В отличие от стандартной разметки текста в документе, при такой разметке значение элемента TEXTAREA передается с формой.

Метки

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

Элемент LABEL

Элемент LABEL используется для задания меток для управляющих элементов, не имеющих неявных меток. Label позволить сделать текст рядом с элементом веб формы кликабельным, то есть для фокусировки элемента формы можно кликать по метке.

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

for - явно связывает определяемую метку с другим управляющим элементом. Если указано значение этого атрибута, оно должно совпадать со значением атрибута id другого управляющего элемента в этом же документе. Если этот атрибут не указан, определяемая метка связывается с содержимым элемента.

Элемент LABEL может использоваться для прикрепления к управляющим элементам информации. Каждый элемент LABEL связан ровно с одним управляющим элементом формы.

Атрибут for явно связывает метку с другим управляющим элементом: значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента. С одним и тем же управляющим элементом может быть связано несколько элементов LABEL, если создать несколько ссылок с помощью атрибута for.

Чтобы неявно связать метку с другим управляющим элементом, этот управляющий элемент должен находиться в элементе LABEL. В таком случае элемент LABEL может содержать только один управляющий элемент. Сама метка может располагаться до или после связанного с ней управляющего элемента.

Если на элемент LABEL переходит фокус, то он передается в связанный управляющий элемент.

9. Элементы формы как объекты.

Каждый элемент страницы можно рассматривать как объект, который имеет свои свойства, методы и обработчики событий. Чаще всего события на странице связаны с формой (нажатие кнопки, например).

Формы в документе представлены семейством Forms. К именованным формам можно обратиться непосредственно по имени: forms.MyForm.свойство или MyForm.свойство.

Общие свойства элементов формы:

Value – возвращает содержимое объекта.

Disabled – делает объект неактивным.

Name – возвращает строку со значением name объекта.

Общие события элементов формы:

OnFocus – объект попал в фокус, стал активным.

OnBlur – объект вышел из фокуса.

OnClick – произошло нажатие мыши в области объекта.

OnDblClick – произошло двойное нажатие мыши в области объекта.

OnMouseOver – мышь наведена на элемент.

OnMouseOut – указатель мыши «ушел» с элемента.

Общие методы элементов формы:

focus – передает фокус указанному элементу формы.

blur – удаляет фокус из элемента формы.

Элементы Text, Password, textArea.

Свойства:

maxLength – возвращает максимальную длину строки.

defaultValue – возвращает первоначальное значение элемента, установленное в тегах.

Методы:

select() – выделяет область ввода указанного элемента формы.

События:

OnChange – содержимое объекта было изменено. Проверяется конечный результат. То есть, в процессе редактирования могли быть внесены, а затем удалены изменения. Если начальное состояние поля равно конечному состоянию, то считается что событие не произошло.

OnSelect – произошло выделение части текста.

Элемент CheckBox, Radio.

Свойства:

checked – проверка текущего состояния флажка. True – установлен, False – снят.

defaultChecked - возвращает первоначальное значение элемента, установленное в тегах.

Элемент Select.

Свойства:

options – массив параметров option объекта.

selectedIndex – возвращает индекс выбранного элемента.

selected – возвращает логическое значение, показывающее текущее состояние параметра в объекте.

defaultSelected – возвращает логическое значение - первоначальное значение элемента, установленное в тегах.

index – возвращает индекс элемента.

События:

OnChange – содержимое объекта было изменено.

10. Теги логического разделения. Общие атрибуты тегов.

HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Такая линия будет полезна при отделении тематического вступления от основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.

Некоторые элементы HTML, которые могут присутствовать внутри тега BODY, называются элементами «уровня блока », в то время как другие - «встроенными » (также называемыми элементами «уровня текста»).

Модель содержимого

Элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока.

Встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию свойственна идея о том, что элементы блока создают «большие» структуры, чем встроенные элементы.

Форматирование

По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Обычно элементы уровня блока начинаются с новой строки, а встроенные элементы - нет.

Группировка элементов: элементы DIV и SPAN

Начальный тег: обязателен, Конечный тег: обязателен

Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста.

Визуальные браузеры обычно помещают символ перевода строки перед и после элементов DIV