listing в HTML


Содержание

Публикация листингов html-кода на страницах сайта

Решение, которое подходит для вывода мнемоник, не применимо для случаев вывода листингов с html-кодом. У задачи появляются новые особенности.

  1. После открывающего тэга и перед закрывающим могут идти пробельные символы. Паттерн @ (.*?)code>@ не учитывает этот момент.
  2. Листинг содержит несколько строк кода и это разбиение на строки нужно сохранить.

Этапы поиска решения

1. Составить хороший пример, иллюстрирующий все тонкие моменты.

    Самый простой вариант — пробельных символов после и перед нет, html-тэга всего два — открывающий и закрывающий.

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

2. Функция htmlentities(), увы, не вполне подходит. Нам нужна замена всего двух символов: на и & на & . Создадим свою функцию, которая будет выполнять эту задачу.

function changesymbols ($somecontent) <

preg_match_all(«@\&@»,$somecontent,$smatches); //собираем массив вхождений амперсанда
$nums=sizeof($smatches[0]); //считаем количество амперсандов в тексте
$somecontent=preg_replace(«@\&@»,»&»,$somecontent,$nums); //производим замену в $somecontent несколько раз, а именно $nums раз

preg_match_all(«@\
$nums=sizeof($fmatches[0]);
$somecontent=preg_replace(«@\

3. Выполняем замену с сохранением разбиения по строкам.

Посчитаем число отрывков исходного кода для экранирования.

Создадим цикл с нужным числом итераций.

Внутри цикла проверяем условие.

if ( preg_match(» de html>(.*?) de>@s», $content, $matches)>0 ) <>

Здесь паттерн @ (.*?) @s позволяет найти и те случаи, когда после открывающего тэга или перед закрывающим идёт пробельный символ. Можно было бы его записать ещё так: @(?| | \s)(.*?)(?| |\s )@

Далее перезаписываем вначале каждой итерации значение переменных: $difflines=»; $resultcode=»;

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

Считаем количество строк.

Производим замену символов в каждой строке по отдельности, а потом измененную строку прибавляем конкатенацией к результирующей переменной $resultcode .

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

Для WordPress нужно отключить функцию автоматического добавления абзацев, чтобы функция работала корректно. Результат для WordPress выглядит так:

remove_filter(‘the_cont ent’, ‘wpautop’);
function true_code ($con tent) <
if ( is_single() ) <
$iteration=substr_count($content, «

preg_match_all(«@\
$nums=sizeof($fmatches[0]);
$somecontent=preg_replace(«@\

for ($i=0; $i
if ( preg_match(«@ (.*?) @s», $content, $matches)>0 ) <
$difflines=»;
$difflines=preg_split(‘#\n#’, $matches[1]);
$difflines_size=sizeof($difflines);
$resultcode=»;
for ($k=0; $k
$difflines[$k]=changesymbols($difflines[$k]);
$resultcode.=$difflines[$k].’
‘;
>;

$content=preg_replace(«@ (.*?) @s», » «.$resultcode.» «, $content, 1);
>;
>;
return $content;
> else return $content;
>;
add_filter(‘the_content’, ‘true_code’);

Для всех остальных случаев надо убрать первую, третью и последнюю строки.

HTML Списки

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

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

Нумерованные списки

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег имеет следующий синтаксис:

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

Пример: Нумерованный список

Пошаговая инструкция

  1. Достать ключ
  2. Вставить ключ в замок
  3. Повернуть ключ на два оборота
  4. Достать ключ из замка
  5. Открыть дверь

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

Здесь: type – символы списка:

  • A — прописные латинские буквы (A, B, C . . .);
  • a — строчные латинские буквы (a, b, c . . .);
  • I — большие римские цифры (I, II, III . . .);
  • i — маленькие римские цифры (i, ii, iii . . .);
  • 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

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

Пример: Применение атрибутов type и start.

  1. Перепела
  2. Фазаны
  3. Куропатки
  4. Павлины

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

В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.

Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка:

Пример: Применение атрибута value

  1. Первый пункт списка
  2. Второй пункт списка
  3. Третий пункт списка

В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

Форматирование нумерованных списков с помощью CSS

Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

Стили оформления нумерованных списков

Пример Значение Описание
а, Ь, с lower-alpha Строчные буквы
А, В, С upper-alpha Прописные буквы
i, ii, iii lower-roman Римские цифры, набранные строчными буквами
I, II, III upper-roman Римские цифры, набранные прописными буквами

На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

Пример: Применение свойства CSS list-style-type

  1. первый пункт списка
  2. второй пункт списка
  3. третий пункт списка

Маркированные списки

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

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

Пример: Маркированный список

  • Windows Movie Maker
  • Pinnacle VideoSpin
  • AviSynth
  • Avidemux

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

Вложенные списки

Пример: Вложенные списки

  • Понедельник
    1. Отправить почту
    2. Визит к редактору
      • Выбор темы
      • Дкаративное оформление
      • Заключительный отчет
    3. Вечерний просмотр сообщений
  • Вторник
    1. Пересмотреть график
    2. Отправить изображения
  • Среда .
При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию.

Форматирование маркированных списков

Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

Стили оформления маркированного списка

Значение Описание
disc маркер в форме кружков с заливкой
circle маркер в форме кружков без заливки
square маркер в форме квадрата с заливкой
none пункты списка без маркера

В следующем примере рассмотрены различные стили оформления маркированных списков:

HTML Lists

In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let’s have a look.

Unordered HTML Lists

We use unordered lists for grouping a collection of items having no numerical order. If you change the order of list items, the meaning will not change. To create unordered list we use the tag. This tag comes in pairs, the content is written between opening

    and closing

tags.

Each element of an unordered list is declared inside the tag.

Example

The items in unordered lists are marked with bullets (small black circles) by default. However, you can change the default bullet style for the list items using type attribute.

You can use type attribute to change the default bullet style for the list items.

Example

You can also use CSS list-style-type or list-style-image property to define the type of a list item element.

Example

Ordered HTML Lists

Ordered HTML list is used for listing items marked with numbers. It starts with the tag. This tag comes in pairs, the content is written between opening

    and closing

tags.

Each item in the ordered list starts with opening
tag and ends with closing tag.

Example

The items in ordered lists are marked with numbers by default. If you want to create ordered list with alphabet or Roman numbers you just need to add to

    tag type=»a» or type=»I» .

Example

Description Lists

A description, or definition, the list is used to arrange terms or names with a description the same way as they are arranged in a dictionary.

To create a description list we use tag. This tag comes in pairs.

In we use for a term/name in a description list and for a description of a term/name in a description list.

РЕАЛИЗАЦИЯ САЙТА, СОЗДАНИЕ ЭЛЕМЕНТОВ ДИЗАЙНА

Добро пожаловать на мой сайт!

Здесь поклонники живописных мест смогут вдоволь насладиться красотами родных просторов. Белорусы на протяжении уже многих лет отдыхают за границей, считая, что на своей Родине нет альтернативы. Я же хочу переубедить Вас, ведь стоит только немного присмотреться и мы увидим, насколько чудесная наша страна! Мы перестали ценить то, что находиться вокруг нас, но остановите свои взоры на данном сайте и Вы поймете, что жизнь — прекрасная штука и не надо далеко ходить, чтобы это понять.

Браславщина — одно из самых красивых , загадочных и гостеприимных мест в нашей стране! Сколько ослепительных мест мы открыли здесь, но сколько еще предстоит открыть. Вам.

Атрибут list

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

Синтаксис

Значения

Имя идентификатора элемента .

Значение по умолчанию

Пример

Вид текстового поля при наборе текста показан на рис. 1.

Рис. 1. Выбор текста из списка

Браузеры ?

10 12 20 9.6 4

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Атрибут list

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

Синтаксис

Значения

Имя идентификатора элемента .

Значение по умолчанию

Пример

Вид текстового поля при наборе текста показан на рис. 1.

Рис. 1. Выбор текста из списка

Браузеры ?

10 12 20 9.6 4

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

All HTML Tags List

In this page contains all HTML tags list with description (cover latest HTML5 tags). The previous HTML version tags are always useful, but few tags are removed in HTML5 and few tags are introduce in HTML5. Following all HTML tags list with description alphabetically listed.

Tag List | HTML Tag List With Description

HTML Tag List With Description

NEW — New tag introduce in HTML5
REMOVE — Not Support in HTML5
NEW / REMOVE — New Tag introduce in HTML5, But now yet support in HTML5

Урок 3. Как сделать список в HTML

Доброго времени суток!

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

Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.

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


1. Маркированные списки в HTML

Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:

А вот так выглядит в браузере:

1.1 Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

Название маркера Значение атрибута «type» Пример списка
Маркеры в виде круга disc
  • Земля
  • Сатурн
  • Венера
Маркеры в виде незакрашенного круга circle
  • HTML
  • JS
  • CSS
Маркеры в виде квадрата square
  • Лужа
  • Озеро
  • Море

1.2 Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

Сразу смотрим как этот код будет выглядеть в браузере:

1.3 Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка:

Обратите внимание на маркер, он стал квадратным:

Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте здесь) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (» «), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — валидация сайта.

Ошибка будет следующая:

Из пояснения становится понятно, что этот атрибут является устаревшим и нужно использовать CSS вместо этого атрибута, чтобы задать вид маркера у списка. Как это сделать читайте в этом уроке по CSS — Урок 8. Оформление списков.

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

2. Нумерованные списки в HTML

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

Пример нумерованного списка:

Таким образом выглядит нумерованный список со стандартными настройками в браузере:

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

2.1 Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

Название маркера Значение атрибута «type» Пример списка
Маркеры в виде арабских чисел 1
  • Бадминтон
  • Бейсбол
  • Бокс
Маркеры в виде строчных латинских букв a
  • Джомолунгма
  • Чогори
  • Канченджанга
Маркеры в виде заглавных латинских букв A
  • Summit Plummet
  • Tantrum Alley
  • Insano
Маркеры в виде римских цифр в нижнем регистре i
  • Филиппинское море
  • Аравийское море
  • Коралловое море
Маркеры в виде римских цифр в верхнем регистре I
  • Красный
  • Зеленый
  • Синий

2.2 Своя нумерация в списке HTML

Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

Вот как это будет отображаться на реальном сайте:

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

Важное замечание: в нумерованном списке валидатор не выдаст ошибку, здесь можно использовать данные атрибуты, но также можно задать нумерацию и с помощью CSS. Подробнее об этом здесь — Урок 8. Оформление списков.

Ну а сейчас перейдем к вложенным спискам HTML.

3. Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по выпадающему меню на CSS3), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

Обратите внимание, как выглядит многоуровневый список в браузере:

Мы делали многоуровневый список с помощью маркированного (тег

    ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать стили для маркеров с помощью CSS).

Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

Смотрим его вид в браузере:

4. Полезные материалы по спискам HTML

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: основы CSS. Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

4.1 Как сделать список HTML в строку

Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:

4.2 Как сделать список HTML без значка

За это отвечает свойство list-style-type в CSS (подробнее здесь):

4.3 Как сделать список в HTML по центру

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

4.4 Как сделать список в HTML с картинками

Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

4.5 Маркированный список HTML свой маркер

В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome). Тогда можно сделать любую иконку вместо стандартного маркера:

4.6 Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

5. Комбинированный список HTML

Чтобы сделать комбинированный список в HTML лучше всего использовать иконочные шрифты. Например, Flaticon или Fontawesome.

Эта информация уже для продвинутых, поэтому для начала необходимо будет изучить уроки по CSS.

6. Практика работы со списками

На видео ниже вы можете увидеть всю работу со списками HTML на практике:

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

На этом со списками заканчиваем и переходите к следующему уроку по изображениям.

Новые элементы в HTML 5

Структура и семантика

Работа над HTML фактически остановилась в 1999 г. после выхода HTML 4, после чего W3C сосредоточилась на изменении синтаксиса с SGML (Standard Generalized Markup Language) на XML, а также на разработке новых языков разметки, таких как SVG (Scalable Vector Graphics), XForms и MathML. Производители браузеров были поглощены работой над новыми возможностями своих продуктов, например, закладками или чтением новостных лент RSS, а Web-дизайнеры изучали CSS и JavaScript™, позволяющие использовать существующие решения на основе Ajax (Asynchronous JavaScript + XML) для разработки Web-приложений. Сам же язык HTML практически не развивался все эти восемь лет.

И вот недавно этот зверь проснулся. Три крупнейших производителя браузеров — Apple, Opera и Mozilla Foundation — создали рабочую группу под названием WhatWG (Web Hypertext Application Technology Working Group), целью которой стала разработка новой, улучшенной версии HTML. W3C обратил на это внимание чуть позднее и в итоге также включился в работу над HTML следующего поколения, причем силами многих участников WhatWG. В конце концов, эти две группы, скорее всего, объединятся. Несмотря на то, что споры над множеством деталей по-прежнему ведутся, общая картина следующей версии HTML постепенно проясняется.

Если представить себе Web-дизайнера, который проспал все восемь лет, начиная с 1999 г., то он по-прежнему сможет легко работать с HTML 5 (альтернативное название— Web Applications 1.0). Как и ранее, нет никаких пространств имен или схем, элементы закрывать необязательно, а браузеры прощают синтаксические ошибки. Другими словами, p и table – это все те же p и table .

Но в тоже время наш очнувшийся от спячки дизайнер наверняка обнаружит новые, непонятные элементы. К такому старому доброму приятелю, как div , добавились section , header , footer и nav , а к em , code и strong — meter , time и m . Также вдобавок к img и embed появились video и audio . Но если присмотреться, то можно заметить, что эти элементы не сильно отличаются от сушествующих. Многие из них требовались еще в 1999 г., просто тогда их еще не было. К тому же в них легко разобраться по аналогии с уже использующимися элементами, что делает HTML 5 более простым для изучения, чем, например, Ajax или CSS.

Если же вместе с дизайнером все восемь лет спал и его старый ноутбук с процессором 300MГц и Windows 98, то на нем по-прежнему можно будет запустить новые страницы, и, как ни странно, они будут замечательно отображаться браузерами Netscape 4 или Windows® Internet Explorer® 5. Разумеется, браузер не распознает новые элементы и все что с ними связано, но отобразить содержимое страницы он вполне сможет.

Это вовсе не какая-то счастливая случайность – одной из задач HTML 5 было то, что браузеры, не поддерживающие новый стандарт, должны отображать страницы с минимальными потерями. Причина этого проста: мы все в той или иной степени очнулись от спячки. Несмотря на такие возможности браузеров, как закладки, поддержка CSS или XmlHttpRequest, рендеринг HTML по-прежнему тот же, что был восемь лет назад. Web не может двигаться вперед без учета существующего положения дел, и разработчики HTML 5 это прекрасно понимали. Новый стандарт предоставляет новые возможности авторам страниц уже сейчас, обещая, что все они станут доступными для пользователей по мере выпуска новых версий браузеров. В свете этого давайте посмотрим, что же появилось нового в HTML 5.

Структура

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

  • section : служит для определения частей и секций, например для разбивки книжных глав на разделы. Этот элемент может использоватья для любого описания любого блока текста, для которого требуется собственный заголовок.
  • header : определяет верхнюю секцию на странице. Учтите, что это не то же самое, что head .
  • footer : определяет нижнюю секцию на странице. Например, место для подписи в сообщениях email.
  • nav : содержит набор ссылок на другие страницы.
  • article : может описывать отдельные записи в блогах, статьи в журналах или руководствах и т.д.

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

Листинг 1. Типичная запись в блоге

Даже несмотря на отступы, такая масса вложенных элементов div выглядит запутанно. Используя новые элементы HTML 5, страницу можно переписать, как показано в листинге 2.

Листинг 2. Та же запись, переписанная на HTML 5

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

Элементы уровня блока

Вдобавок к структурным элементам, HTML 5 предлагает набор семантических элементов уровня блока:

Я постоянно использую первые два в своих статьях и книгах. Несмотря на то, что я не очень часто использую dialog, он достаточно популярен у других авторов.

aside

Этот элемент обычно используется для советов, примечаний, цитат, ремарок – т.е. для всего, что не является частью основного повествования. Например, в статьях developerWorks, часто встречаются боковые панели, выполненные в виде таблиц, как показано в листинге 3.

Листинг 3. Боковая панель в статьях developerWorks на HTML 4

However, Firefox doesn’t yet support this syntax.

На HTML 5 подобный фрагмент описывается значительно элегантнее, как показано в листинге 4.

Листинг 4. Та же панель, но на HTML 5

However, Firefox doesn’t yet support this syntax.

Используя CSS, браузер самостоятельно расположит панель в нужном месте документа.

figure

Элемент figure описывает изображение вместе с подписью. Например, в статьях developerWorks можно найти фрагменты, схожие с листингом 5. Результат показан на рисунке 1.

Листинг 5. Рисунок в статье developerWorks на HTML 4
Рисунок 1. Диалог установки Mozilla XForms

Подобные вещи реализуются значительно более осмысленно на HTML 5, как показано в листинге 6.

Листинг 6. Тот же рисунок, но описанный на HTML 5

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

Кроме картинок figure может использоваться для добавления подписей к таким элементам, как audio , video , iframe , object и embed .

dialog

Элемент dialog служит для оформления диалога между несколькими собеседниками. В HTML 5 элемент dt по умолчанию используется для отображения имени говорящего, а элемент dd служит для форматирования речи. В итоге диалог отображается достаточно неплохо даже в старых браузерах. В листинге 7 показан фрагмент знаменитого диалога из работы Галилео Галилея “Диалог о двух главнейших системах мира”.

Листинг 7. Диалог Галилео на HTML 5

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

Семантические элементы уровня текста

В HTML 4 существуют несколько элементов уровня текста для представления разного рода фрагментов кода, такие как var , code , kbd , tt и samp . При этом не существует никаких специальных конструкций для выделения таких базовых понятий, как время, числа, саркастические оттенки и т.д. В целях выровнять этот перекос в сторону технических текстов, HTML 5 предлагает несколько новых встроенных элементов.

Элемент m указывает, что фрагмент текста отмечен каким-либо образом (необязательно подчеркнут), скажем, для выделения важных эпизодов в книге. Классическим примером использования могут служить закешированные страницы Google, на которых отмечены ключевые слова, использованные для поиска. Если поиск был выполнен по некоторому слову, например, “Egret”, то закешированная страница может быть размечена следующим образом:

Название этого элемента до сих пор остается предметом обсуждения. Оно может быть измененено на mark вместо m в окончательной версии спецификации.

Элемент time служит для представления определенных моментов времени, таких как 23 апреля, 5:35 P.M., EST, 2007. Например:

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

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

meter

Элемент meter служит для представления числового значения в определенном интервале. Он может использоваться для таких вещей, как зарплаты, процент французов, проголосовавших за Ле Пена, результаты тестирования и т.д. В данной статьей meter используется для разметки данных полученных от одного программиста Google на конференции Software Development 2007.

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

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

Это означает, что студент получил 88.7 баллов из 100 возможных. При этом нижний минимум оценки – 0, самая низкая из полученных оценок – 65, а самая высокая – 96 из ста. Разумеется, различные программы-агенты могут по-разному представлять эту информацию, используя различные интерфейсные элементы или же просто выдавая подсказку, расшифровывающую значение оценки, но большинство, скорее всего, будет использовать стандартное оформление для элементов уровня текста.

progress

Элемент progress служит для представления состояния некого выполняющегося процесса аналогично строке состояния в графических приложениях. Например, он может использоваться для отображения процесса скачивания файла или просмотра видео. Ниже приведен элемент progress, показывающий, что скачано 33% файла:

Атрибут value служит для представления текущего, а атрибут max – для конечного состояния процесса. Например, в данном случае элемент показывает, что скачалось 1,534,602 байт из 4,603,807.

Если опустить атрибут max , то можно использовать этот элемент для отображения процессов с неопределенным текущим состоянием.

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

Элементы мультимедиа

Использование видеофайлов на Web-страницах растет быстрыми темпами, но только за счет проприетарных технологий, таких как Flash на YouTube, Microsoft Windows Media® или QuickTime в случае Apple. Таким образом, способы разметки подобного контента зависят от конкретного браузера. WhatWG предложила новый элемент video , позволяющий размещать видеоролики произвольных форматов. Например, можно добавить фильм “Sora in Prospect Park” в формате QuickTime следующим образом:

В то же время продолжаются споры о том, надо ли отдавать предпочтение какому либо одному кодеку или видеоформату. В частности, очень вероятно, что поддержка Ogg Theora будет, как минимум, рекомендована, а может и вовсе стать обязательной, в отличие от проприетарных форматов, таких как QuickTime, а также форматов, защищенных патентами, например, MPEG 4. Скорее всего, набор поддерживаемых форматов определится в результате естественной конкуренции, аналогично тому, как изображения в форматах GIF, JPEG и PNG стали в итоге использоваться гораздо чаще в элементах img , чем BMP, X-Bitmap или же JPEG 2000.

Кроме video также предложен новый элемент audio . Например, он может использоваться для добавления музыкального фона к Web-странице:

Атрибут autoplay служит для указания браузеру, что проигрывание должно начаться сразу после загрузки страницы, без всякого действия со стороны пользователя. Оно должно повториться 20,000 раз или же пока пользователь не покинет страницу. Разумеется, браузеры могут и должны предоставлять возможность выключить звук или же остановить проигрывание, вне зависимости от того, предусмотрел автор такую возможность или нет.

Поддержка формата WAV будет обязательной для браузеров, в отличие от других форматов, например, MP3.

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

Листинг 8. Выступление Джона Ф. Кеннеди на инаугурации. HTML 5

Интерактивные элементы

HTML 5 также известен как Web Applications 1.0. В частности, поэтому он предоставляет несколько элементов для улучшения интерактивной составляющей Web-страниц:

С помощью этих элементов пользователь потенциально может изменить содержимое страницы без ее перезагрузки на сервере:

details

Элемент details служит для представления информации, которую необязательно показывать по умолчанию. Дополнительный атрибут legend может использоваться для краткого отображения содержимого details . Например, элемент может применяться для отображения сносок:

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

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

datagrid

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

Изначально данные в datagrid берутся из одного или нескольких дочерних элементов, таких как table , select и т.д. Например, в листинге 9 приведен пример datagrid для показа ведомости с оценками. В этом примере, данные берутся из элемента table . В более простом случае, они могут находиться в одноразмерном элементе select . Если используются несколько дочерних элементов, то каждый из них превращается в отдельную строчку в таблице.

Листинг 9. Ведомость с оценками в datagr >

Главным отличием данного элемента от обычных HTML-таблиц является то, что пользователь может выбирать, сворачивать, удалять строки, столбцы и ячейки, сортировать таблицу, т.е. работать с данными непосредственно в браузере на клиентской стороне. Для отслеживания изменений в данных служит HTMLDataGridElement — специальный JavaScript-интерфейс, добавленный в модель DOM (Document Object Model).

Листинг 10. HTMLDataGr >

DOM также может быть использован для автоматической загрузки данных в таблицу. Таким образом, datagrid не обязан содержать дочерние элементы для хранения изначальных данных. Вместо этого они могут устанавливаться с помощью объекта типа DataGridDataProvider , как показано в листинге 11. Подобным образом можно получать информацию из баз данных, через XmlHttpRequest и вообще из любых источников, доступных через JavaScript.

Листинг 11. DataGr >

Элементы menu и command

Элемент menu существовал в HTML как минимум со второй версии, затем был объявлен устаревшим в HTML 4, однако триумфально вернулся в HTML 5. В новом стандарте он содержит дочерние элементы command , каждый из которых моментально запускает определенное действие. В листинге 12 приведен пример использования menu для показа сообщений alert.

Листинг 12. Меню на HTML 5

C помощью атрибута checked=»checked» элементы command можно превратить в группу флажков (check boxes), которые в свою очередь легко преобразуются в группу радиокнопок путем использования атрибута radiogroup (он должен содержать название группы неповторяющихся названий кнопок).

Кроме простого списка команд, элемент menu можно использовать для создания панелей инструментов или контекстных меню, используя значения toolbar и popup атрибута type . Например, в листинге 13 показана панель инструментов, типичная для редакторов блогов, таких как WordPress. В ней используется атрибут icon для ссылок на иконки для кнопок.

Листинг 13. Панель инструментов на HTML 5

Для задания заголовка меню используется атрибут label . Пример использования в меню «Правка» показан в листинге 14.

Листинг 14. Меню «Правка» на HTML 5

Также можно создавать иерархические меню путем вложения одних элементов в другие.

Заключение

HTML 5 – это часть будущего Web. Новые элементы упрощают разметку страниц, делая их более понятными для пользователя. И хотя старые теги div и span по-прежнему могут использоваться, область их применения значительно сужается, а многим страницам они становятся и вовсе не нужны.

Конечно, не все браузеры сразу станут поддерживать новые элементы, но ведь та же ситуация наблюдалась и в случае многих конструкций, добавленных после выхода первого стандарта HTML, например, тегов img , table , object и т.д. Поддержка новых элементов будет постепенно реализовываться, а пока же они будут игнорироваться старыми браузерами в соответствии с соглашением “необходимо пропускать” (must-ignore). Это означает, что браузеры по-прежнему смогут отображать страницы HTML 5, что и происходит в настоящее время. Пользователи современных браузеров, конечно, получат определенное преимущество, но возможность просматривать новые страницы будет у всех.

Восемь лет ожидания новых возможностей – это очень долго, особенно в стремительно развивающемся мире Web. HTML 5 частично возрождает радостное возбуждение ранних дней развития HTML, когда Netscape, Microsoft и другие компании еженедельно предлагали новые элементы. Но в данном случае используется гораздо более осторожный и обдуманный подход к определению элементов, направленный на то, чтобы сделать их доступными для всех. В общем, будущее выглядит очень привлекательным.

Ресурсы для скачивания

Похожие темы

  • Оригинал статьи: New elements in HTML 5: Structure and semantics. (EN)
  • Ознакомьтесь с различными предложениями по развитию HTML, сделанными разработчиками, дизайнерами, авторами, производителями ПО и т.д., приведенными в статье Будущее HTML, часть 1: WHATWG (Эд Дамбилл (Edd Dumbill), developerWorks, декабрь 2005 г.).
  • Прочитайте о следующей версии языка XHTML (Extensible Hypertext Markup Language) и об ответе W3C на необходимость разработки многофункциональных клиентов на Ajax в статье Будущее HTML, часть 2: XHTML 2.0 (Эд Дамбилл (Edd Dumbill), developerWorks, январь 2006 г.).
  • Обратитесь к статье XHTML 1.0: Marking up a new dawn (Молли Хольцшлаг (Molly Holzschlag), developerWorks, январь 2006 г.) за сведениями о создании правильно сформированных и валидных документов XHTML 1.0. (EN)
  • Ознакомьтесь со списком часто задаваемых вопросов о деятельности рабочей группы WhatWG на странице Часто задаваемые вопросы о WhatWG и HTML 5. (EN)
  • Ознакомьтесь с текущим вариантом спецификации HTML 5 на странице Web Applications 1.0. (EN)
  • Прочитайте работу Галилео Диалог о двух главнейших системах мира, переведенную на английский Стиллманом Дрейком (Stillman Drake) с сокращениями и комментариями С. И. Скортино (S. E. Sciortino). (EN)
  • Опробуйте открытый видеоформат нового поколения Ogg Theora. (EN)
  • Сертификация по XML корпорации IBM: узнайте, как стать сертифицированным разработчиком IBM в области XML и связанных с ним технологий. (EN)
  • XML: данный раздел сайта developerWorks содержит множество статей, советов, руководств, стандартов и IBM Redbooks.
  • Скачайте программное обеспечение IBM (время работы без регистрации ограничено): начните ваш следующий проект, используя программное обеспечение, которое можно скачать прямо с сайта IBM developerWorks. (EN)

Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

HTML Lists

HTML Tutorials

Information in your web page can be listed using the List feature of HTML. There will be a set of reasons you may have for including a list in your web pages. These reasons can vary from inserting your user’s ten favorite music albums the page, or may include names of visitors along with their favorite hobby to list down in a web document. There may be plenty of many reasons. So in simple terms, you can prov >

HTML’s Listing Tags

HTML prov >

Tag Description HTML ol tag is abbreviated as Ordered List which is used for numbering the lists in a web page. HTML UL tag is abbreviated as Unordered List which is used for listing your items via bullets and circles. HTML dl tag is abbreviated as Definition List which is used for arranging your data items like the way items remain arranged in any dictionary.

The type Attribute

You can use the type attribute in these above listing tags. This type of attribute will eventually help you in specifying your customized type from the types pre-specified by HTML.

      — Numbers, which is the default type of Ordered List
        — Numerals (roman) with lower caps
          — Numerals (roman) with upper caps
            — Numbering will be done in the form of Lower-case Letters
              — Numbering will be done in the form of upper-case Letters

Similarly, for Unordered lists also, there are three symbols which will acts as bullets for your lists.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL