| Россия |
Преподаватель
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.07.2010 | Уровень: для всех | Доступ: платный
Лекция 2:
Язык гипертекстовой разметки HTML
Пользовательские формы
Элемент FORM описывает форму на веб-странице и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT> , размещенных внутри пары <FORM> и </FORM>. В форме в качестве атрибутов для описания обработки данных, вводимых пользователем в форму используются как метод (method) и действие ( action ).
Тег <INPUT> используют для определения области внутри формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE.
| Тип элемента | Описание |
|---|---|
| text |
Используется, если необходимо ввести небольшое количество текста (одну или несколько строк). Кроме того, задается атрибут NAME для определения наименования переменной поля. Имеет еще три дополнительных атрибута. MAXLENGTH - ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. SIZE - определяет размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. MAXLENGTH - если его значение больше, чем SIZE, браузер будет прокручивать данные в окне. VALUE - обеспечивает начальное значение поля ввода |
| checkbox | Применяется для создания флажков с независимым выбором. Должны также присутствоватьатрибуты NAME, и VALUE. В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED. |
| radio | Применяется в случае, когда требуется организовать выбор одного из нескольких возможных значений. Должны быть также указаны атрибуты NAME и VALUE. |
| image | Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. Должны быть указаны также атрибуты NAME и SRC. Атрибут SRC содержит URI файла - источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG> . |
| password | Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены. |
| button | Используется для размещения кнопок на веб-странице. Имеет атрибуты NAME и VALUE. |
| file | Элемент управления для запуска диалогового окна выбора файла. Для задания имени файла по умолчанию можно использовать атрибут VALUE. |
| submit | Используется как элемент интерфейса для завершения ввода данных. Может содержать два дополнительных атрибута: NAME и VALUE. |
| reset | Используется как элемент интерфейса для сброса всех введеных в поля формы данных. Дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки. |
| hidden | Позволяет включить в отправляемую форму значения атрибутов NAME и VALUE, недоступные для изменения пользователем. |
Тег <TEXTAREA> используется для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS (число колонок, содержащихся в текстовой области), NAME и ROWS (количество видимых строк текстовой области).
Тег SELECT используют для определения списка пунктов, задаваемых тегами <OPTION> . Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.
| Атрибут | Описание |
|---|---|
| MULTIPLE | Позволяет выбрать более чем одно наименование |
| NAME | Определяет наименование объекта |
| SIZE | Определяет число видимых пользователю пунктов списка |
В форме может использоваться тег <OPTION> только внутри тега <SELECT> . Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE. Атрибут SELECTED используется для первоначального выбора значения элемента по умолчанию. Атрибут VALUE указывает на значение, возвращаемое формой после выбора пользователем данного пункта.
Пример:
<BR>Ваш выбор <SELECT NAME="choice"> <OPTION VALUE="Вариант 1">Вариант 1 <OPTION VALUE="Вариант 2">Вариант 2 <OPTION VALUE="Вариант 3">Вариант 3 <OPTION SELECTED>Вариант 4 </SELECT>
Работа с фреймами
Экран с фреймами описывается в НТМL -странице, в контейнере FRAMESET. Содержимое фрейма - отдельная HTML -страница, которая может физически может находиться в другом месте где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой содержимого фреймов нет.
Пример:
<HTML> <HEAD> <TITLE>Пример фреймов</TITLE> </HEAD> <FRAMESET COLS="30%, 70%"> <FRAME SRC="menu.html"> <FRAME SRC="index.html" NAME="index"> </FRAMESET> </HTML>
Для того, чтобы при щелчке на ссылке со страницы menu.html загружались и отображались в правом окне другие страницы. следует добавить атрибут ТАRGET ( TARGЕТ="main" ) в тег этих ссылок. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме index. Если не определен атрибут ТАRGЕТ, то страница появится там, где щелкнули гиперссылку - т.е.в левом фрейме.
Если посетитель с устаревшим браузером окажется на вашей странице с фреймовой структурой, то все, что находится на ней между тегами <NOFRAMES> и </NOFRAMES> , будет выглядеть корректно - браузер просто проигнорирует фреймы.
У тега <FRAMESET> только два возможных атрибута: ROWS, задающий число строк, и СОLS, задающий число столбцов.
Тег <FRАМЕ> определяет внешний вид и поведение фрейма. Этот тег не имеет закрывающего тега, поскольку в нем ничего не содержится. Тег <FRАМЕ> имеет следуюшие атрибуты: NАМЕ, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE и SRC.
HTML 5
Первый черновик спецификации был опубликован в январе 2008 г. Спецификация сейчас находится в разработке. Предполагается, что отдельные части HTML 5 будут закончены и реализованы в веб-браузерах до того, как спецификация официально получит статус рекомендации.
В HTML 5 вводится несколько новых элементов и атрибутов, например <nav> (навигационная панель) и <footer> . Эти теги будут облегчать работу поисковым системам, а также обработку сайта с мобильных устройств или читающих программ. Другие элементы предоставляют новую функциональность, такие как <audio> и <video> .
Основные отличия HTML 5 от HTML 4:
- Новые правила лексического разбора;
- Новые элементы - footer,section, video, audio, progress, nav, meter, time, aside, canvas ;
- Новые типы input -элементов;
- Новые атрибуты;
- Глобальные атрибуты - id, tabindex, repeat ;
- Устаревшие элементы убраны - center, font, strike.
- Обработка ошибок
- HTML 5 разработан так, что не поддерживающие его браузеры могут просто игнорировать элементы HTML 5. В отличие от четвертой версии, пятая версия четко определяет правила лексического разбора, позволяющие различным браузерам отображать один и тот же результат в случае употребления некорректного синтаксиса разметки в документе.
XHTML
XHTML - язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является ее подмножеством. Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума W3C в 2001 году.
Буква "X" в XHTML означает "расширяемый. Основные различия между XHTML и HTML показаны в Таблице 2.1.
| HTML | XHTML |
|---|---|
| Для элементов и атрибутов не различается регистр символов. | Для элементов и атрибутов различается регистр символов; они используют символы нижнего регистра |
| Некоторым элементам не требуется закрывающий тег (например, параграфы, <p>), в то время как другие (называемые "пустыми элементами") запрещают закрывающий тег (например, изображения, <img> ). | Все элементы должны быть явно закрыты . Элементы без содержимого могут быть закрыты с помощью косой черты в конце начального тега (например, <br/> ). Если XHTML обрабатывается как text/html, то необходимо использовать сокращенный синтаксис для всех элементов, которые определены как "пустой", и помещать пробел перед косой чертой. Необходимо использовать длинную форму (с раздельными начальным и конечным тегами) для любого элемента, не определенного как пустой - даже если он не имеет никакого контента. |
| Некоторые значения атрибутов могут записываться без кавычек. | Значения атрибутов должны быть заключены в кавычки |
| Для некоторых атрибутов можно использовать сокращения (например, <option selected> ). | Для всех атрибутов должна использоваться полная форма атрибута (например, <option selected="selected"> ) |
| Серверы должны доставлять клиенту HTML документ с MIME типом text/html | XHTML должен использовать MIME тип application/xhtml+xml, но может использовать application/xml, text/xml или text/html. |
