Организация ссылок на область документа

⇐ ПредыдущаяСтр 4 из 36Следующая ⇒

Для того чтобы создать ссылку на область документа, так называемую внутритекстовую ссылку, нужно сначала создать якорь (anchor) как объект для ссылки.

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

< a name=" part1" id==" part1" > < /a> – создали якорь для раздела 1.

Для того, чтобы теперь создать ссылку на фрагмент документа, начало которого отмечено якорем part1, следует написать следующий код:

< a href=" #part1" > Раздел 1< /a> – переход на фрагмент " par1t" файла текущего документа.

Чобы перейти в раздел part1 документа document.html из внешнего файла, следует написать следующий код:

< a href=" document.htm#part" > Раздел 1< /a>

Атрибут target элемента a – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с параметром href и может принимать следующие значения:

_self – указывает, что определенный в параметре href документ должен отображаться в текущем окне;

_parent – указывает, что документ должен отображаться в окне-родителе текущего окна;

_top – указывает, что документ должен отображаться в окне-родителе;

_blank – указывает, что документ должен отображаться в новом окне.

Например, чтобы новый документ открывался в отдельном окне, элемент а записывается следующим образом:

< a href=" document.htm#part1" target=" _blank" > Раздел 1< /a>

Элементы таблиц

Таблица HTML состоит из строк, в строках располагаются ячейки, а в ячейках – данные. Все элементы таблицы располагаются внутри тега < table>.

< table>...< /table> - элемент создания таблицы.

Атрибуты:

Тег < table>. поддерживает все глобальные атрибуты и события. По стандарту HTML5 все ранее используемые атрибуты таблицы, такие, как align, bgcolor, border и т.д. больше не поддерживаются. Поэтому для стилизации таблиц нужно использовать CSS. Например, чтобы добавить рамку для таблицы, используется свойство border, для изменения фона - свойство background, а для выравнивания содержимого в ячейках таблицы – свойства text-align и vertical-aling.

< tr>...< /tr > (table row) - строка таблицы. Она может содержать один или несколько тегов < th> (заголовочные ячейки) или < td> (ячейки с данными таблицы).

Атрибуты:

Тег < table> поддерживает все глобальные атрибуты и события.

< td>...< /td> (table data).- ячейка таблицы. Используется в таблицах внутри тегов < tr> для создания ячеек с данными. Текст, расположенный в ячейке, по умолчанию отображается с выравниванием по левому краю.

Атрибуты: Тег < td> поддерживает все глобальные атрибуты и события. Кроме того, поддерживаются следующие атрибуты:

colspan - число, указывающее, на сколько столбцов будет растянута ячейка по горизонтали. Значением по умолчанию является 1. Например, в результате выполнения следующего кода ячейка растянется на 6 ячеек:

< td colspan=" 6" > Сведения об успеваемости по предметам < /td>

rowspan - число, указывающее, на сколько строк будет растянута ячейка по вертикали. Значением по умолчанию является 1.

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

На рисунке 9 можно видеть пример кода таблицы с использованием атрибута headers и готовую таблицу.

Рисунок 9 – Пример использования атрибута headers

< th>...< /th> (table header) - ячейки заголовка. Эти элементы применяются в таблицах в тегах строк < tr> для создания ячейки заголовка. Текст, расположенный в такой ячейке, отображается по умолчанию полужирным шрифтом и выравнивается в ячейке по центру.

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

rowgroup - заголовок предоставляется группе строк;

colgroup - заголовок предоставляется группе столбцов;

row - заголовок предназначен всем ячейкам в строке, в которой он записан;

col - заголовок предназначен всем ячейкам в столбце, в котором он записан;

< caption>...< /caption> - заглавие таблицы.

Элемент caption должен идти сразу после открывающего тега элемента table, перед всеми остальными элементами таблицы.

Группы строк

В HTML и XHTML определяются элементы для обозначения групп строк, которые позволяют разделить строки на верх таблицы ( < thead>...< /thead> ), нижнюю часть таблицы ( < tfoot>...< /tfoot> ) и тело таблицы ( < tbody>...< /tbody> ). Элемент < thead> должен быть расположен после элементов < caption> и < colgroup> (если таковые присутствуют), но до элементов < tbody> и < tfoot>.

Консорциум W3C включил элементы для группировки строк как способ создания более осмысленной разметки и увеличения гибкости при использовании свойств таблиц стилей.

W3C рекомендует, чтобы элемент tfoot (если он присутствует) находился в разметке перед элементом tbody, чтобы нижнюю часть можно было вывести на экран перед загрузкой всех строк данных (которых может быть много). Например:

< table> < thead> < tr> < th> ФИО< /th> < th> ЗП< /th> < th> Дата< /th> < /tr> < /thead>

< tfoot>

< tr> < td colspan=" 3" > Гл. Бухгалтер < /td> < /tr>

< /tfoot>

< tbody>

< tr> < td> Иванов И.И.< /td> < td> 205679 рублей < /td> < td> 20 июня 2016< /td> < /tr>

< tr>... другие данные...< /tr> < tr>... другие данные...< /tr>

< /tbody>

< /table>

Столбцы и группы столбцов

< col /> – столбец. Тег < col> представляет один или несколько столбцов в элементе < colgroup>. Тег < col> используется для применения стилей на целые столбцы, вместо того, чтобы повторять стили для нужной ячейки в каждой строке. Для применения к столбцам таблицы разных стилей, нужно использовать несколько элементов < col>, каждый из которых будет влиять на то количество столбцов, которое задано атрибутом span.

Атрибуты:

span - содержит положительное целое число, указывающее количество следующих друг за другом столбцов, которое представляет элемент < col>.

< colgroup>...< /colgroup> – группа столбцов. Тег < colgroup> определяет группу из одного или нескольких столбцов таблицы для форматирования. Обычно тег < colgroup> используется для применения стиля на целые столбцы, вместо того, чтобы повторять стили для нужной ячейки в каждой строке.

Элемент < colgroup> должен быть расположен после открывающего тега < table> и после тега < caption>, если он присутствует, и перед тегами < thead>, < tbody>, < tfoot> и < tr>.

Чтобы определить различные свойства для столбцов в < colgroup>, следует использовать тег < col> в элементе < colgroup>.

Пример:

< table>

< colgroup id=" employinfо" >

< col span=" 2" width=" 100" />

< col span=" 1" width=" 50" />

< /colgroup>

Элемент colgroup обозначает три столбца, входящие в одну структурную группу. В таблице может быть несколько групп столбцов, но в данном примере для простоты используется только одна). В элементе colgroup первый элемент col определяет два столбца (span=" 2" ), каждый шириной 100 пикселей. Оставшийся элемент col имеет ширину 50 пикселей. Если бы все столбцы таблицы должны были иметь одинаковую ширину, то эту ширину можно было бы указать в элементе colgroup. Третий столбец обозначается атрибутом class, на который позже можно сослаться в свойстве стиля (например, background).

Формы

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

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

Обработку форм после отправки данных производят, как правило, серверные приложения, взаимодействующие с формами, такие как CGI-скрипты, ASP, ASP.NET, ColdFusion, PHP или Java-сервлеты. С приходом HTML5 произошло то, чего ждали долго: появились элементы управления форм со способностью контроля введённых данных.

Рассмотрим теги, задающие форму и ее элементы.

< form> …< /form> - тег формы.

Внутри тега < form> располагаются элементы, цель которых -предоставить пользователю различные способы ввода данных:

– < input>

– < textarea>

– < button>

– < select>

– < option>

– < fieldset>

– < datalist>

– < label>

Помимо этих специальных элементов, внутри формы можно использовать и любые другие HTML-элементы.

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

Атрибуты: тег < form> поддерживает глобальные атрибуты и события, а также следующие атрибуты:

accept-charset - указывает кодировку символов или список кодировок, разделенных пробелами, для введенных в форму данных, переданных на сервер для обработки. Если данные включают в себя символы, не поддерживающиеся указанной кодировкой, то браузер пытается определить соответствующую для них кодировку. Если соответствующая кодировка не может быть определена, то символы кодируются в числовые коды. Значением по умолчанию является зарезервированная строка «UNKNOWN». Браузеры интерпретируют это значение как кодировку символов, идентичную кодировке документа, содержащего элемент < form>.

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

autocomplete- определяет, включить или выключить автозаполнение формы. При включенном автозаполнении браузер автоматически подставляет значения, которые пользователь вводил во время предыдущего использования формы. Возможные значения атрибута:

· on - браузер автоматически показывает значения, ранее введенные пользователем (значение по умолчанию).

· off - пользователь самостоятельно вводит значения для каждого поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

enctype – указывает, как будут кодироваться данные формы при их отправке на сервер. Может использоваться только совместно с атрибутом method=" post". Возможные значения:

· application/x-www-form-urlencoded - значение по умолчанию: все символы кодируются перед отправкой в шестнадцатиричные значения. Пробелы преобразуются в символ " +", а специальные символы - в значения ASCII HEX.

· multipart/form-data: символы не кодируются. Используется для элементов < input>, у которых в атрибуте type установлено значение " file".

· text/plain: пробелы преобразуются в символ " +", буквы и другие символы не кодируются.

method - казывает метод передачи данных HTTP-протокола, который будет использован при отправке данных формы. Возможные значения:

· get - данные передаются в адресной строке браузера в виде пар «имя=значение» путём их добавления в конце URL-адреса. В качестве разделителя между основным URL-адресом и передаваемыми данными используется знак вопроса (? ), для разделения передаваемых данных между собой используется символ амперсанда (& ). Данный метод применяется при отправке данных небольшого размера.

· post - данные передаются не как часть URL, а в качестве содержимого запроса браузера. Данный метод применяется для отправки данных большого объёма.

По умолчанию используется метод get.

name - о пределяет имя формы. Имя может быть использовано в JavaScript для ссылки на элемент по имени или для ссылки на данные формы после ее отправки. Если в одном документе используется несколько форм, то их имена не должны повторяться.

novalidate - у казывает, что данные, введенные в форму, не будут проверяться перед отправкой. Возможные способы задания логического атрибута novalidate:

< form novalidate>

< form novalidate=" novalidate" >

< form novalidate=" " >

target - определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы.

· _blank - открывает документ в новом окне или вкладке.

· _self - открывает документ в той же директории, где располагается ссылка. Это значение по умолчанию.

· _parent - открывает документ в родительском фрейме.

· _top - открывает документ во всю ширину окна.

· имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.

Элемент формы < input>

Элемент input используется для создания различных видов элементов управления вводом данных. HTML тег < input> - является пустым элементом и содержит только атрибуты. Используется в пределах элемента < form>, объявляя элементы управления для пользовательского ввода, которые позволяют пользователю вводить различные данные. Связать текст с определенным элементом формы можно с помощью тега < label>.

Поля для пользовательского ввода могут значительно отличаться друг от друга. В зависимости от значения атрибута type, поле ввода может быть текстовым полем, полем для пароля, радиокнопкой, простой кнопкой и тд. Атрибут type элемента input указывает тип элемента управления.

Текстовое поле

Значение type=" text" определяет однострочное текстовое поле, ширина которого по умолчанию составляет 20 символов, но можно указать любой размер, используя атрибут size; а максимальное число вводимых символов можно ограничить при помощи атрибута maxlength, атрибут value используется для указания исходного значения, то есть текста, который появляется в этом поле при загрузке формы.

Пример:

< input type=" text" name=" pole_txt" size=" 15" maxlength=" 50" value=" Enter your name" />

Поле пароля

Значениеатрибута type=" password" показывает, что текстовое поле предназначено для ввода пароля. Поле пароля работает так же, как текстовое поле, за исключением того, что символы скрываются при помощи звездочки (*), маркера (•) или другого символа, определяемого пользовательским агентом.

Пример:

< input type=" password" name=" pole_pass" size=" 10" maxlength=" 20" />

Скрытое поле

Значение type=" hidden" определяет скрытое поле. Скрытое поле представляет собой элемент управления, не отображаемый в браузере, но передаваемый программе обработки при отправке данных.

Пример:

< input type=" hidden" name=" extra_info" value=" important" />

Флажок

Значение type=" checkbox" определяет элемент управления флажок, который может быть либо установлен, либо снят. Можно устанавливать сразу несколько флажков, входящих в группу, что делает их удобными для использования в вопросах с несколькими вариантами ответов, где допустим выбор сразу нескольких вариантов. При отправке данных формы на сервер отправляются только значения установленных (включенных) флажков.

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

Пример.

< input type=" checkbox" name=" os" value=" Mac" checked=" checked" />

⇐ Предыдущая 1 2 345 6 7 8 9 10 Следующая ⇒