Вверх A A A
Ноябрь 2018
Нед Пн Вт Ср Чт Пт Сб Вс
44
1
2
3
4
45
5
6
7
8
9
10
11
46
12
13
14
15
16
17
18
47
19
20
21
22
23
24
25
48
26
27
28
29
30
49
Краткий курс HTML 5

Краткий курс HTML 5

Изображение для статьи: Таблицы
| | 1255

В HTML есть мощный инструмент отображения информации, структурированной в виде таблиц. Для этой цели предусмотрен десяток структурных тегов. Простейшая таблица состоит из элемента <table>, включающего по одному или несколько элементов <tr>, <th> и <td>.

<table>
   <caption>Выписка лицевого счета</caption>
   <tr>
      <th>Месяц</th>
      <th>Баланс</th>
   </tr>
   <tr>
      <td>Январь</td>
      <td>500 грн.</td>
   </tr>
</table>

Если необходимо отобразить описание таблицы, то его можно поместить в элемент <caption>, располагаемый сразу за открывающим тегом <table>. Далее последовательно располагаются строки таблицы, обозначаемые тегом <tr>. Каждая строка содержит в себе ячейки <th> или <td>, формируя таким образом столбцы таблицы.

5 / 1001
Изображение для статьи: Разметка веб-страницы
| | 1165

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

HTML 4 и более ранние версии языка применялись в первую очередь для визуального оформления документа. Для создания каркаса страницы было достаточно всего двух тегов: блочного <div> и строчного <span>, которые сами по себе не влияют на отображение текста (кроме стандартных «блочных» свойств <div>), но позволяют использовать глобальные атрибуты class и id. А уже с их помощью задать стили отображения в CSS — не проблема. Тем более, что многие теги стандарта HTML 4 поддерживали целый набор атрибутов для визуального оформления.

32 / 959
Изображение для статьи: Формы
| | 823

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

Полноценная форма состоит из элемента <form>, внутри которого располагается любое содержимое (кроме других форм), включающее одно или несколько полей ввода — кнопки, однострочные и многострочные текстовые поля, выпадающие списки и т. д. Функциональность формы определяется рядом атрибутов элемента <form>. Одним из них является name, в котором можно указать уникальное имя формы. В документе может быть сколько угодно форм, но имена их не должны совпадать. С помощью этого имени подключенные к документу клиентские скрипты могут получать динамический доступ к полям формы еще до ее отправки на сервер.

5 / 598
Изображение для статьи: Элементы ввода данных
| | 901

Наиболее используемым элементом форм несомненно является <input />. С его помощью создаются поля для ввода текста, паролей и выбора файлов, а также кнопки, флажки и переключатели. В HTML5 он еще и приспособлен для ввода всевозможных дат, числовых значений, телефонов, адресов и даже выбора цвета. Все это многообразие определяется атрибутом type, все допустимые значения которого перечислены в таблице ниже. Вы уже знаете, что данные из формы передаются на сервер в виде пар «поле=значение». Название поля, определяемого элементом <input /> задается атрибутом name, а его значение по умолчанию можно указать в value

<input type="text" name="поле" value="значение" />
5 / 705
Изображение для статьи: Создание меню
| | 1030

Элемент <menu> не нов для HTML, но в пятой версии языка изменилось его лексическое назначение. Теперь он представляет собой список команд, который в зависимости от установленного значения атрибута type может выполнять три различных функции — контекстное меню, панель инструментов (toolbar) и произвольное меню с командами:

list — произвольный набор команд (значение по умолчанию).
toolbar — панель инструментов.
context — контекстное меню.
5 / 818
Изображение для статьи: Мультимедиа и скрипты
| | 1094

Стандарт HTML позволяет вставлять в документ различные объекты, включая аудио/видео-проигрыватели, flash-ролики, скрипты, PDF-документы и прочее.

Элемент <object> предназначен для подключения какого-либо внешнего ресурса и может отображаться, в зависимости от его типа, как изображение, встроенный документ или управляемая плагином область. Адрес ресурса, будь-то изображение, видео-ролик или что-либо другое, указывается в атрибуте data, а его MIME-тип — в type. Если необходимо вставить плагин без указания ресурса, то указывается только type, но в любом случае один из этих атрибутов должен обязательно присутствовать в элементе. Если ресурс указанного типа не может быть отображен в браузере, то вместо объекта выводится содержимое элемента <object>. Таким образом, в нем целесообразно помещать информацию о необходимости установки плагина и т. п.

5 / 872
Изображение для статьи: Фреймы
| | 881

С помощью тега <iframe> можно вставить в страницу другой документ, который отобразится во фрейме — специальной прямоугольной области с собственными полосами прокрутки (scrollbars). Основным атрибутом этого элемента является src, в значении которого указывается абсолютный или относительный URL вставляемого документа. HTML5, однако, предлагает альтернативный вариант — вы можете указать исходный код дочерней страницы непосредственно в атрибуте srcdoc, без необходимости хранить ее отдельно. Естественно, этот код должен быть экранирован и соответствовать стандарту HTML.

<iframe src="frame.html"></iframe>
5 / 681
Изображение для статьи: Новые атрибуты в HTML 5
| | 798

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

В HTML5 добавлены несколько атрибутов, принимающих только значения true или false. Атрибут contenteditable указывает, может ли пользователь редактировать содержимое элемента (true) или нет (false). Естественно, что редактируемые элементы могут получать фокус ввода, и для определения порядка переключения между ними используется tabindex, упомянутый в главе «Элементы ввода». Атрибут draggable позволяет включить (true) или отключить (false) возможность перетаскивания элемента мышью. Обычно по умолчанию браузер позволяет перетаскивать только изображения и гиперссылки. С помощью атрибута hidden можно обозначить элемент, содержимое которого уже или еще не актуально. Если установить ему значение true, то такой элемент не будет отображен браузером. И наконец, атрибут spellcheck со значением true сообщает браузеру о необходимости орфографической/грамматической проверки содержимого элемента. В результате такой проверки обнаруженные ошибки будут выделены каким-либо, зависящим от конкретного браузера образом. Этот атрибут применяется вместе с различными элементами ввода.

5 / 585
Изображение для статьи: Обратная совместимость
| | 1074

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

5 / 865
Изображение для статьи: Специальные символы HTML
| | 915

Специальные символы в HTML реализуются с помощью интерпретируемых браузером мнемоник и числовых кодов. Например, двойную кавычку (") можно вывести кодом &quot;, а знак евро (€) — &euro;. Все мнемокоды начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Чтобы обычный амперсанд в тексте не путался с началом мнемокода, его выводят с помощью кода &amp;

5 / 592
Краткий курс HTML 5
Свернуть