Возможности html: Что такое HTML и почему его должен знать каждый веб-разработчик — статьи на Skillbox

Часть 1. Приступая к работе

Основы HTML5

Грейс Уолкер
Опубликовано 16.05.2012

Серия контента:

Этот контент является частью # из серии # статей: Основы HTML5

http://www.ibm.com/developerworks/ru/opensource/library/?series_title_by=html5+Основы

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

Этот контент является частью серии:Основы HTML5

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

HTML5 — это инструмент для упорядочивания Web-контента. Он предназначен для упрощения Web-проектирования и Web-разработки за счет языка разметки, обеспечивающего стандартизированный и интуитивно понятный пользовательский интерфейс. HTML5 предоставляет разработчику средства для секционирования и структуризации Web-страниц, а также позволяет создавать обособленные компоненты, которые не только обеспечивают логическую организацию Web-сайта, но и предоставляют ему возможности синдикации. Язык HTML5 реализует подход к проектированию Web-сайтов, основанный на отображении информации, поскольку он воплощает саму суть отображения информации — разделение и маркирование информации для упрощения ее использования и понимания. Именно в этом состоит огромная семантическая и эстетическая ценность HTML5. HTML5 предоставляет дизайнерам и разработчикам всех уровней возможности для предоставления в публичный доступ буквально любого контента – от простых текстов до мультимедийно насыщенных интерактивных материалов.

Часто используемые сокращения

• API: Application programming interface(Интерфейс прикладного программирования, API-интерфейс)
• CSS3: Cascading style sheet version 3 (Каскадная таблица стилей), версия 3
• GUI: Graphical user interface (Графический интерфейс пользователя)
• HTML: Hypertext Markup Language (Язык гипертекстовой разметки, язык HTML)
• HTML5: HTML, версия 5
• SQL: Structured Query Language (Язык структурированных запросов)
• UI: User interface (Интерфейс пользователя)

HTML5 предоставляет эффективные инструменты для управления данными, для рисования, для воспроизведения видео- и аудиоконтента. HTML5 облегчает разработку кросс-браузерных Web-приложений, а также приложений для мобильных устройств. HTML5 относится к числу технологий, которые стимулируют развитие мобильных сервисов на основе облачных вычислений. Кроме того, HTML5 способствует повышению гибкости – благодаря возможности создания впечатляющих и интерактивных Web-сайтов. И, наконец, HTML5 предлагает новые теги и усовершенствования, в числе которых следующие: элегантная структура, органы управления формами, API-интерфейсы, мультимедийные функции, поддержка баз данных, существенно увеличенная скорость обработки.

Новые теги HTML5 обладают «говорящими» названиями, которые раскрывают назначение и характер использования этих элементов. В предыдущих версиях HTML использовались весьма неопределенные названия тегов. В спецификации HTML5, напротив, используются весьма описательные, интуитивно понятные названия. HTML5 предоставляет информационно-насыщенные названия, которые однозначно идентифицируют соответствующий контент. Например, широко применявшийся до настоящего времени тег <div> был дополнен тегами <section> и <article>. Кроме того, были добавлены теги <video>, <audio>,

<canvas> и <figure>, которые обеспечивают более точное описание определенных типов контента.

HTML5 предоставляет следующие возможности.

• Теги с описательными названиями, которые точно указывают, для содержания какого контента предназначены эти теги.
• Усовершенствованные сетевые коммуникации.
• Существенно улучшенное хранение данных
• Средства Web Worker для исполнения фоновых процессов.
• Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером.
• Улучшенное извлечение хранящихся данных.
• Повышенная скорость сохранения и загрузки страниц
• Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.
• Улучшенная обработка форм в браузере.
• API-интерфейс баз данных на основе SQL, позволяющий применять локальное хранилище на стороне клиента.
• Теги canvas и video, позволяющие добавлять графические и видеоматериалы без установки сторонних подключаемых модулей.
• Спецификация API-интерфейса Geolocation, использующая геолокационные возможности смартфонов в интересах задействования облачных сервисов и приложений для мобильных устройств.
• Усовершенствованные формы, ослабляющие потребность в загрузке кода JavaScript, что обеспечивает более эффективную связь между мобильными устройствами и серверами cloud-среды.

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

Фактически HTML5 является синонимом непрерывных инноваций: новые теги, новые методики и общая инфраструктура разработки, базирующаяся на взаимодействии технологии HTML5 с родственными технологиями CSS3 и JavaScript. Это создает основу для функционирования приложений, ориентированных на клиентов. Помимо широкого распространения средств и методик технологии HTML5 на настольных системах, она может быть реализована в функционально насыщенных Web-браузерах для мобильных телефонов. Это растущий рынок, характерными представителями которого являются популярные и вездесущие платформы Apple iPhone, Google Android и Palm webOS.

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

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

Технология HTML5 — это не волшебная лампа с джинном внутри. Тем не менее технические и методические активы этой технологии уже сделали ее вторым по значимости способом решения проблем (первый способ — потереть волшебную лампу).

Планирование страницы

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

Создаваемая нами страница будет иметь высокоуровневый дизайн, показанный на рисунке 1. Страница состоит из области Header, области Navigation, области Article, содержащей три раздела, области Aside и, наконец, области Footer. Эта страница предназначена для работы в браузере Google Chrome, что исключает возможный визуальный беспорядок, порождаемый стремлением к браузерной совместимости, который мог бы затруднить понимание базовой структуры. Наша цель состоит в создании страницы, которая наглядно демонстрировала бы новые теги HTML5 и показывала возможности их использования для создания хорошо оформленного кода и элегантного дизайна страницы.

Рисунок 1. План Web-страницы Acme United

В процессе создания этой страницы я коснусь технологии CSS3, которая требуется для надлежащего отображения HTML5-страниц. Технология CSS3 необходима для придания определенного стиля HTML5-странице, для навигации по этой странице и для создания общего впечатления об этой странице. Группы свойств, описываемые в разделе CSS3 Reference на Web-сайте W3Schools.com (см. раздел Ресурсы), охватывают такие полезные теги, как фон, шрифт, выделенные области и анимация.

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

В рассматриваемом примере область Header содержит заголовок страницы и подзаголовок. Тег <header> используется с целью создания контента для области Header данной страницы. Тег <header> может содержать открывающую информацию о теге <section> и о теге <article> в дополнение к самой Web-странице. Создаваемая нами Web-страница имеет область Header, показанную на высокоуровневом представлении ее дизайна, а также область

Header внутри области Article и области Section. В листинге 1 показан пример разметки тега <header>.

Листинг 1. Пример тега <header>

<header>
    <h2>Heading Text</h2>
    <p> Text or images can be included here</p>
    <p> Logos are frequently placed here too</p>
</header>

Тег <header> также может содержать тег <hgroup> (листинг 2). Тег <hgroup> группирует заголовки вместе, используя показанные уровни заголовков с <h2> по <h6> с главным заголовком и подзаголовком.

Листинг 2. Пример тега <hgroup>

<header>
    <hgroup>
          <h2>Main Heading</h2>
          <h3>Sub-heading </h3>
    </hgroup>
    <p> Text or images can be included here</p>
</header>

Область Navigation

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

Листинг 3. Пример тега <nav>

<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Products</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

Области Article и Section

Проектируемая нами страница имеет одну область Article, которая содержит реальный контент данной страницы. Для создания этой области мы используем тег <article>, определяющий контент, который может быть использован независимо от остального контента этой данной страницы. Например, если вы хотите создать RSS-поток, то сможете использовать тег <article> для уникальной идентификации соответствующего контента. Тег <article> идентифицирует контент, который при перемещении в другой контекст может стать совершенно недоступным для понимания.

Область Article в плане страницы Acme United содержит три области Section. Мы создаем эти области с помощью тега <section>. Тег <section> содержит релевантные области компонентов Web-контента. Тег <section>— как и тег <article>— способен содержать заголовки, нижние колонтитулы или любые другие компоненты, необходимые для формирования данного раздела. Тег <section> предназначен для группировки контента. Контент для тега <section> и для тега <article> обычно начинается с тега <header> и заканчивается тегом <footer>, между которыми находится сам контент соответствующего тега.

Тег <section> также способен содержать теги <article>, а тег <article> способен содержать тег <section>. Тег <section> следует использовать для группировки сходной информации, а тег <article> следует использовать для такой информации, как статья или блог, которая может быть перемещена в новый контекст без искажения смысла контента. Тег <article>, как и следует из его названия («статья»), предоставляет полный пакет информации. Тег <section>, напротив, содержит связанную информацию, однако эта информация не может быть помещена в другой контекст сама по себе, поскольку в этом случае ее смысл будет потерян.

В листинге 4 показан пример применения тега <article> и тега <section>.

Листинг 4. Пример тегов <article> и <section>

<article>
     <section>
          Content
     </section>
     <section>
          Content
     </section>
</article>
<section>
     <article>
          Content
     </article>
     <article>
          Content
     </article>
</section>

Изобразительные теги

Теги <section> и <article>, как и теги <header> и <footer>, способны содержать тег <figure>. Этот тег используется для включения изображений, диаграмм и фотографий.

Тег <figure> может содержать тег <figcaption>, который, в свою очередь, содержит подпись для иллюстрации, содержащейся в теге <figure>. Это позволяет ввести описание, которое будет теснее связывать эту иллюстрацию с контентом. В листинге 5 показан пример структуры с тегом <figure> и тегом <figcaption>.

Листинг 5. Пример тега <figure> и тега <figcaption>

<figure>
     <img src="/figure.jpg" alt="Picture">
     <figcaption>Caption for the figure</figcaption>
</figure>

Медиа-теги

Теги <section> и <article> также способны содержать различный медиаконтент. HTML5 предоставляет теги, которые обеспечивают быстрое понимание содержащегося в них контента. До недавнего времени такие медийные компоненты, как музыка и видео, поддерживались только встраиваемыми средствами. HTML5 поддерживает их собственными средствами.

Тег <audio> способен содержать аудиоконтент, например, музыкальные или любые другие звуковые потоки. Тег <audio> имеет атрибуты, которые определяют, какой аудиоматериал, когда и как будет воспроизводиться. К числу этих атрибутов относятся следующие: src, preload, control, loop, autoplay. В примере, показанном в листинге 6, аудио начинает воспроизводиться немедленно после загрузки страницы и воспроизводится непрерывно. Пользователю предоставляются органы управления, с помощью которых он может остановить или перезапустить воспроизведение аудио.

Листинг 6. Пример тега <audio>

<audio src="MyFirstMusic.ogg" controls autoplay loop>
     Your browser does not support the audio tag.
</audio>

Тег <video> позволяет транслировать видеоклипы или потоковые визуальные материалы. Он имеет все атрибуты тега <audio>, а также три других атрибута: poster, width и height. Тег poster позволяет указать изображение, которое должно отображаться на протяжении загрузки видео, или в ситуации, когда видео вообще не способно загрузиться.

В листинге 7 показан пример структуры тега <video>.

Листинг 7. Пример тега <video>

<video src="MyFirstMovie.ogg" controls="controls">
     Your browser does not support the video tag
</video>

Теги <video> и <audio> способны содержать тег <Source>, который описывает мультимедийные ресурсы для тегов <video> и <audio>. Этот тег позволяет разработчику указать альтернативные видео- и аудиофайлы, из которых браузер сможет затем выбирать в зависимости от типа поддерживаемого медиаформата или кодека. В листинге 8 представлено два варианта выбора. Если используемый браузер не способен воспроизвести WMA-версию файла, попытайтесь использовать версию в формате MP3. В противном случае отобразите соответствующее сообщение, чтобы пользователь понимал, что данный аудиофайл недоступен.

Листинг 8. Пример тега <source>

<audio>
     <source src="/music/good_enough.wma" type="audio/x-ms-wma">
     <source src="/music/good_enough.mp3" type="audio/mpeg">
     <p>Your browser does not support the HTML 'audio' element.</p>
</audio>

Тег <embed> описывает встроенный контент, который может быть отображен на странице, например, файлы Adobe Flash в формате SWF. Листинг 9 содержит атрибут type, который идентифицирует встроенный источник как Flash-файл.

Листинг 9. Пример тега <embed>

<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

В дополнение к атрибутам src и type тег <embed> имеет атрибут height и атрибут width.

Область Aside

Мы создаем область Aside в плане страницы Acme United с помощью тега <aside>. Этот тег предназначен для вспомогательного контента, не являющегося частью основного материала статьи, которую он дополняет. Например, в журналах теги типа aside часто используются для выделения выводов, сделанных в самой статье. Тег <aside> содержит контент, который может быть удален без ущерба для информации, излагаемой в статье, секции или странице, содержащей этот тег.

В листинге 10 показан пример применения тега <aside>.

Листинг 10. Пример тега <aside>

<p>My family and I visited Euro Disney last year.</p>
<aside>
     <h5>Disney in France</h5>
     <p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>

Тег <footer> содержит информацию о странице, о статье или о разделе, например, сведения об авторе или дату написания. В качестве нижнего колонтитула он может содержать информацию об авторских правах и другую важную юридическую информацию (листинг 11).

Листинг 11. Пример тега <footer>

<footer>
     <p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>

Конструирование страницы

Теперь, когда вы познакомились с базовыми тегами, необходимыми для создания HTML5-страницы, приступим к конструированию своей страницы. Мы собираемся сконструировать Web-страницу для компании Acme United. Полностью эта страница показана на рисунке 2. Вы можете загрузить ее для последующего использования (см. раздел Загрузка).

Рисунок 2. Web-страница Acme United

SИтак, приступим к формированию страницы. Сначала следует тег <!doctype>. В спецификации HTML5 тег <!doctype> был упрощен: вам достаточно запомнить его атрибут —html. Это не только облегчает ввод этого тега, но и улучшает его защиту от ошибок. Обратите внимание, что атрибут имеет вид html, а не html5. Вне зависимости от количества версий HTML, тег <!doctype> всегда сможет иметь атрибут html.

Тег <html> содержит все остальные HTML-теги за исключением тега <!doctype>. Каждый из остальных тегов должен быть размещен между тегом <html> и тегом </html> (листинг 12).

Листинг 12. Пример тега <!doctype>

<!doctype html>
<html lang="en">

После указания атрибута html и английского языка следует тег <head>, который может содержать скрипты, информацию о поддерживаемых браузерах, ссылки на таблицу стилей, метаинформацию и другие инициализационные функции. В разделе head можно использовать следующие теги.

• <base>
• <link>
• <meta>
• <script>
• <style>
• <title>

Тег <title> содержит фактический заголовок документа и является обязательным тегом раздела <head>. Этот заголовок можно увидеть в верхней части браузера при просмотре страницы. Тег <link> в листинге 13 указывает CSS3-таблицу стилей, которая будет использоваться для отображения данной HTML5-страницы. Эта таблица стилей имеет имя main-stylesheet.css.

Листинг 13. Пример тега <head>

<head>
     <title>HTML5 Fundamentals Example</title>
     <link rel="stylesheet" href="main-stylesheet.css"  />
</head>

Затем мы используем тег <body>, за которым следуют теги <header> и <hgroup>, описанные ранее. Область <h2> в данном примере содержит название вымышленной компании (Acme United), а область <h3> содержит подзаголовок «A Simple HTML5 Example» (простой пример на HTML5). Соответствующая разметка показана в листинге 14.

Листинг 14. Пример тегов <body> и <header>

<body >
     <header>
          <hgroup>
               <h2>Acme United</h2>
               <h3>A Simple HTML5 Example</h3>
          </hgroup>
     </header>

Технология CSS3 используется для формирования облика страницы, как показано в листинге 15. Сначала для страницы задается шрифт, а затем детали для тела страницы. После этого задаются размеры тела, а затем проектируется структура параграфа заголовка для тегов заголовков первого и второго уровней. Именно эти заголовки мы будем использовать для данной страницы.

Листинг 15. Первый пример CSS3

* {
	font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
	width: 800px;
	margin: 0em auto;
}

header h2 {
	font-size: 50px;
	margin: 0px;
	color: #006;
}

header h3 {
	font-size: 15px;
	margin: 0px;
	color: #99f;
	font-style: italic;
}

В листинге 16 показан тег <nav>, предназначенный для осуществления навигации по главному сайту.

Листинг 16. Пример тега <nav>

<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

В HTML5 также имеется тег <menu>, который вызывает затруднения у некоторых дизайнеров и разработчиков. Это объясняется тем фактом, что под навигацией часто понимается «навигационное меню». Тег <menu>, который был исключен в версии HTML 4.01, а затем снова появился в HTML5, предназначен для улучшения интерактивности. Этот тег не следует использовать для основной навигации. Единственный тег, который следует использовать для основной навигации — это тег <nav>. Мы используем тег <menu> в нашем примере позднее.

Форматирование навигации осуществляется посредством CSS3. Каждое определение тега <nav> в листинге 17 отражает определенное состояние тегов <ul> и <li> внутри тега <nav>.

Листинг 17. Второй пример CSS3

nav ul {
	list-style: none;
	padding: 0px;
	display: block;
	clear: right;
	background-color: #99f;
	padding-left: 4px;
	height: 24px;
}
nav ul li {
	display: inline;
	padding: 0px 20px 5px 10px;
	height: 24px;
	border-right: 1px solid #ccc;
}

nav ul li a {
	color: #006;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
}

nav ul li a:hover {
	color: #fff;
}

Далее следует область Article. Эта область, определяемая тегом <article>, содержит свой собственный тег <header>. Тег <section> внутри тега <article> также содержит свой собственный тег <header> (листинг 18).

Листинг 18. Пример тегов <article> и <section>

<article>
     <header>
          <h2>
               <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
          </h2>
     </header>
     <p> Primum non nocere ad vitam Paramus . . . </p>
     <section>
          <header>
               <h2>This is the first section heading</h2>
          </header>
          <p>Scientia potentia est qua nocent docentp . . .</p>
     </section>

В листинге 19 показана CSS3-разметка, обеспечивающая визуализацию этого формата. Обратите внимание, что области paragraph, header и section определяются тегом <article>, внутри которого они содержатся. Заданный здесь тег <h2> не совпадает по формату с тегом <h2>, заданным для уровня страницы.

Листинг 19. Третий пример CSS3

article > header h2 {
	font-size: 40px;
	float: left;
	margin-left: 14px;
}

article > header h2 a {
	color: #000090;
	text-decoration: none;
}

article > section header h2 {
	font-size: 20px;
	margin-left: 25px;
}

article p {
	clear: both;
	margin-top: 0px;
	margin-left: 50px;
}

Второй тег <section> в теге <article> содержит ту же базовую информацию, что и первый тег <section>, однако на этот раз мы собираемся использовать теги <aside>, <figure>, <menu>, и <mark> (листинг 20).

Тег <aside> используется здесь для представления информации, которая не является частью окружающего ее потока. Тег <figure> содержит изображение Стоунхенджа. Данный тег <section> также содержит тег <menu>, который мы используем для создания кнопок с именами четырех Муз. При нажатии на какую-либо из этих кнопок этот тег предоставляет информацию о соответствующей Музе. Тег <mark> внутри тега <p> используется для подсвечивания слов veni, vidi, vici.

Листинг 20. Пример тегов <article> и <section>

<section>
     <header>
          <h2>Second section with mark, aside, menu & figure</h2>
     </header>
     <p> . . .  <mark>veni, vidi, vici</mark>. Mater . . .</p>
     <aside>
          <p>This is an aside that has multiple lines. . . .</p>
     </aside>
     <menu label="File">
          <button type="button">Clio</button>
          <button type="button">Thalia</button>
          <button type="button">Urania</button>
          <button type="button">Calliope</button>
     </menu> 
     <figure><img src="stonehenge.jpg" alt="Stonehenge"/>
          <figcaption>Figure 1. Stonehenge</figcaption>
     </figure>
</section>

CSS3-разметка для данного раздела содержит новое определение тега <p>, который имеет уменьшенную ширину по сравнению с заданной нами шириной страницы. Это изменение позволяет боковой панели (aside) смещаться вправо без перекрытия текста. Соответствующая разметка показана в листинге 21.

Листинг 21. Четвертый пример CSS3

article p.next-to-aside {
	width: 500px;
}

article >  section figure {
	margin-left: 180px;
	margin-bottom: 30px;
}

article > section > menu {  
	margin-left: 120px;
}	  

aside p {  
        position:relative;
        left:0px;
        top: -100px;
		z-index: 1;
        width: 200px;  
    	float: right;
	    font-style: italic; 
       	color: #99f;
}

Теги раздела Video

Заключительным компонентом тега <article> является раздел video. В данном примере (листинг 22) видео представляет собой видеофайл в формате ogg, который автоматически начинает воспроизводиться при загрузке страницы и воспроизводиться в бесконечном цикле. Пользователю предоставляются органы управления для приостановки и возобновления воспроизведения. Во многих современных реализациях видеофайлы в формате ogg имеют расширение ogv («v» означает видео). Тег <audio> функционирует аналогичным образом.

Листинг 22. Пример тегов <article> и <section>

     <section>
          <header>
               <h2>This is a video section</h2>
          </header>
          <p><video src="//people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" 
                                controls autoplay loop>
                <div><p>This video will work in 
                                Mozilla Firefox or Google Chrome only. </p>
                </div>
          </video></p>
     </section>
</article>

В листинге 23 приведены CSS3-определения для раздела video.

Листинг 23. Пятый пример CSS3

article > section video {
	height: 200px;
	margin-left: 180px;
}
	
article > section div.no-html5-video{
	height: 20px;
	text-align: center;
	color: #000090;
	font-size: 13px;
	font-style: italic;
	font-weight: bold ;
	background-color: #99f;
}

В листинге 24 показан нижний колонтитул и завершающая часть страницы.

Листинг 24. Пример тега <footer>

          <footer>
              <p>Copyright: 2011 Acme United. All rights reserved.</p>
          </footer>
     </body>
</html>

В листинге 25 показан CSS3-код для нижнего колонтитула.

Листинг 25. Пятый пример CSS3

footer p {
	text-align: center;
	font-size: 12px;
	color: #888;
	margin-top: 24px;
}

Заключение

Итак, мы создали нашу Web-страницу. На этом завершается первая статья в данной серии из четырех частей. Цель этой статьи состояла в том, чтобы представить новый режим работы HTML5. HTML5 — это не просто модернизация HTML4, — это новый способ цифрового коммуницирования. Благодаря функциональности технологий CSS3 и JavaScript, спецификация HTML5 вплотную приблизилась к тому, чтобы предоставить разработчику все возможности в одном пакете. Если вы усвоите все необходимое из обширного массива имеющейся в открытом доступе информации по HTML5, то сможете присоединиться к растущему сообществу Web-дизайнеров и Web-разработчиков, компетентных в мультимедийных аспектах HTML5. В следующей части данной серии мы рассмотрим, как писать код для HTML5-форм и как структурировать эти формы.

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

Похожие темы

Пять вещей, которые надо знать об HTML5

Оригинал: http://diveintohtml5.info/introduction.html

Перевод: Влад Мержевич

1. Это не одна большая вещь

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

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег <video>, он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега <video>.

2. Вам не надо откидывать имеющееся

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

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type=»email», поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

3. Легко начать

«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

<!DOCTYPE html>

Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде <article>, <section>, <header> и <footer>.

4. Это уже работает

Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом <canvas>, видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.

Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.

5. Он уже здесь

Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:

Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.

HTML5 уже здесь. Давайте погрузимся в него.

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	8.0+	9.2+	5.0+	4.0+	2.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime.

Синтаксис

<time>дата и время</time>
<time datetime="<дата и время>">текст</time>
  

Атрибуты

datetime

Задает дату, время или оба значения для текста.

pubdate

Указывает дату публикации документа.

Закрывающий тег

Обязателен.

Пример

HTML5IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>time</title>
  <style>
   time { background: #f0f0f0; }
  </style>
 </head> 
 <body>
  <article>
   <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>
   <p><time>1960-08-19</time> первый полет собак в космос.</p>
   <p><time>1961-04-12</time> первый полет человека в космос.</p>
   <p><time>1963-06-16</time> первый полет женщины-космонавта.</p>
   <p><time>1969-07-21</time> высадка человека на Луну.</p>
  </article>
 </body> 
</html>

Браузеры

Браузеры, которые не поддерживают тег <time>, отображают его содержимое. Браузеры с поддержкой тега могут устанавливать для элемента стилевое оформление.

20 самых красивых и творческих сайтов на HTML5

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

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

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

Возможно Вам будут интересны вот эти подборки:

Интересный сайт сделанный с помощью HTML 5. Вам нужно добавить усы к видео на котором находятся разнообразные герои. Это как оказалось не очень и просто сделать 🙂

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

Наверное самые красивые иллюстрации на сайте Швейцарского часового. Очень красиво, просто сказочно. И естественно этот сайт сделан на самых новых технологиях HTML5 и JQuery.

Довольно необычный сайт с 3d графикой рок — певицы Бьёрк (Bjork). Красивые 3d элементы добавляют необыкновенную объёмность сайту, в общем нужно зайти и посмотреть.

Необычный сайт на HTML5, в котором нужно переместить компакт диск в указанное место и смотреть видео ролики. Идея просто супер, и очень удобно.

Супер веб — сайт Джеймса Андерсона, который очень любит игру крикет, и таким образом сделал сайт — инфографику с красивой и «живой» статистикой игры.

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

Если Вы всё время мечтали научится играть на пианино, то не упустите свой шанс и попробуйте. Правда это довольно необычное пианино, но очень красивое и креативное 🙂

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

www.the-bea.st

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

Классный сайт на котором можно посмотреть разнообразные видео со всей планеты. И конечно же этот сайт отчётливо подчёркивает огромные возможности HTML5.

Это стильный цифровой комикс, воплощённый в жизнь с помощью HTML5. Этот сайт доставит огромное удовольствие поклонникам книги.

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

beta.theexpressiveweb.com

Классный справочник, который был создан компанией Adobe, в котором представлены разные полезности, например как CSS3 анимация и т.д.

Сайт, который показывает использование видео на сайте с помощью HTML5. Создатель видео Крис Молоко, он же и создал этот сайт со своими друзьями из Гугл.

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

Супер пример использования параллакса, HTML5 и JQuery в веб дизайне.

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

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

Это популярный сайт радиостанции, который использует технологии HTML5, JQuery и плавные переходы с красивой анимацией на CSS3.

Огромное спасибо speckyboy.com

Редактор HTML-документа

HTML-редактор используется для создания пользовательских описаний в виде HTML-документов. Окно редактора содержит три закладки, позволяющие осуществлять просмотр и редактирование документа.

На закладке Редактирование документ отображается в текстовом и графическом виде:

На закладке Текст разработчик имеет возможность редактировать HTML-текст документа:

Закладка Просмотр предназначена для отображения документа в том виде, в котором он будет показан пользователю:

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

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

Текст HTML-документа можно форматировать: устанавливать его стиль, абзацные отступы, выбирать размер шрифта, параметры, гарнитуру и т. д.:

При копировании текста из других текстовых редакторов (например, Word) HTML-редактор сохраняет исходное форматирование текста.

Таблицы

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

Картинки

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

Надписи

HTML-редактор позволяет использовать в документах надписи — специальные объекты HTML-документа. В надписи можно разместить текст, таблицу, картинку или другую надпись. При просмотре документа вложенные объекты надписи будут непрерывно прокручиваться справа налево:

Гиперссылки

Редактор позволяет вставлять в текст документа гиперссылки. Гиперссылка может представлять собой как обычный URL (например, http://nashe1c.ru), так и ссылку на другой HTML-документ, содержащийся в прикладном решении:

HTML – история развития языка разметки гипертекста: публикации CASTCOM

Большая часть современных интернет технологий основана на давно используемом, самом дискутируемом языке HTML. Он был разработан для выполнения разметки и оформления документов, размещаемых на веб-страницах. Свои первые черты язык начал обретать в 1986 году. Толчком стало принятие Международной организацией по стандартизации (ISO) ISO-8879-стандарта — Standard Generalized Markup Language или, в сокращенном варианте — SGML. К нему прилагалось описание, в котором говорилось о том, что SGML предназначен для структурной разметки текста. Примечательно, что описания внешнего вида документа не предполагалось.

Исходя из этого, можно сделать вывод о том, что SGML не являлся системой для разметки текста и не располагал какого-либо списка структурных элементов языка, используемых в определенных условиях. Язык подразумевал описание синтаксиса написания главных элементов разметки. Спустя некоторое время они получили, хорошо известное сегодня название — «теги».

Вполне очевидной была потребность в создании языка, который:

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

Несмотря на то, что язык SGML, как и его схожие приложения, не получил особого развития, он и не был окончательно забыт. В 1991 году Европейский институт физики частиц объявил о необходимости разработки механизма, позволяющего передавать гипертекстовую информацию через Глобальную сеть. Именно SGML лег в основу будущего языка — Hyper Text Markup Language (HTML ).

Этапы становления

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

Разработкой HTML версии 2.0 занялся консорциум W3С. Первый результат удалось получить, спустя год насыщенной работы — в 1995 году. Практически параллельно обсуждались возможности версии 3.0. Если вторую версию нельзя назвать существенно отличающейся от первой, то третья стала безусловным прорывом.

HTML 3.0 включал интересные новинки:

• Разметку математических формул
• Теги для создания страниц
• Вставку рисунков, обтекаемых текстом
• Примечаний и т.д.

Однако, этого было недостаточно, потребность в визуальном оформлении гипертекстовых страниц становилась все более актуальной. Тогда, W3С приступили к созданию самостоятельной системы, при этом не противоречащей основам HTML, но позволяющей описывать визуальное оформление документов. Результатом стало появление CSS — Cascading Style Sheets, иерархические стилевые спецификации, наделенные уникальным синтаксисом, структурой, задачами.

Но, не будем забегать вперед, и вернемся к HTML. Существенное расширение тегов произошло с подачи Netscape Communications — корпорации, запустившей первый коммерческий браузер — Netscape Navigator. Нововведения преследовали лишь одну цель — улучшить внешний вид документа, но при этом они совершенно противоречили исконным принципам языка.

HTML версии 3.2 создали в кратчайшие сроки. Он был ориентирован на Microsoft Internet Explorer. До недавнего времени эта версия HTML была единственным стандартом языка при разработке интернет-проектов. Тем не менее, направление развивается очень активно, с помощью HTML удалось придать некую упорядоченность элементам разметки всех браузеров, но возможностей языка становилось недостаточно.

В 2004 году приняли новую версию HTML — 4.01. Он обеспечивает отличные показатели кросс — браузерности и кросс — платформенности.

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

Сравнение редакций решений Veeam

	СКАЧАТЬ БЕСПЛАТНО Поддерживаемые системы	СКАЧАТЬ ПРОБНУЮ ВЕРСИЮ	СКАЧАТЬ ПРОБНУЮ ВЕРСИЮ
НАДЕЖНОЕ РЕЗЕРВНОЕ КОПИРОВАНИЕ, ВОССТАНОВЛЕНИЕ И РЕПЛИКАЦИЯ
Виртуальные среды: VMware, Hyper-V и NutanixVeeam предлагает надежную поддержку защиты данных гипервизоров VMware vSphere, Microsoft Hyper-V и Nutanix Acropolis (AHV).
Физические среды: Microsoft Windows, Linux и MacVeeam обеспечивает надежную защиту данных физических систем, включая серверы, рабочие станции и компьютеры на базе Microsoft Windows, Linux и MacOS.
Физические среды: Oracle, SAP и UNIXСпециально для платформ UNIX Veeam предлагает интегрированную поддержку защиты данных физических систем, включая Oracle и SAP на базе Oracle Solaris и IBM AIX.
Облако: AWS, Microsoft Azure и другиеVeeam поддерживает резервное копирование в главные публичные облака, включая AWS, Microsoft Azure и другие. Возможности включают поддержку объектных систем для долгосрочного хранения данных, облачные опции послеаварийного восстановления, прямое восстановление в облако и использование режима неизменности для защиты облачных данных от программ-вымогателей. Veeam Backup & Replication также предлагает интеграцию для защиты нативных облачных систем, работающих в AWS.
Резервное копирование NASМодернизация и упрощение защиты неструктурированных файловых данных и файловых серверов благодаря гибким возможностям защиты данных NAS, которые позволяют снизить воздействие резервного копирования и ускорить восстановление.	Частично
Масштабируемый репозиторий, включая Veeam Capacity Tier и Archive TierИнтеллектуальная консолидация и расширение репозиториев резервных копий с помощью технологии масштабируемого репозитория. В зависимости от бюджета и потребностей в хранении данных вы можете выбрать, где разместить резервные копии ― в более производительных локальных хранилищах уровня «Performance Tier» или в объектном облачном хранилище уровня «Capacity Tier» для более долгосрочного хранения.
Veeam Plug-in for Oracle RMAN и Veeam Plug-in for SAP HANAАдминистраторы БД Oracle и SAP HANA смогут применять свои навыки владения Oracle RMAN и SAP Backint для резервного копирования и восстановления баз данных с использованием объединенных репозиториев и консолей Veeam без специальных инструментов или обучения.
Резервное копирование из аппаратных снимковСнижение воздействия на сеть, системы и данные за счет выполнения резервного копирования непосредственно из аппаратных снимков СХД. Резервное копирование с учетом состояния приложений при использовании аппаратных снимков СХД позволяет еще больше сократить показатели допустимого времени восстановления (RTO). Аппаратные снимки также можно использовать для дополнительного тестирования благодаря созданию тестовой среды по запросу с помощью технологии Veeam DataLabs™.
Встроенная репликацияБыстрый и безопасный перенос данных с помощью встроенной WAN-акселерации гарантирует создание реплик в среде VMware vSphere или Hyper-V на резервной площадке.
Непрерывная защита данныхНепрерывная защита данных (CDP) позволяет сократить незапланированные простои и минимизировать потери данных для критически важных систем VMware. CDP предоставляет гибкие опции RTO и RPO для сокращения затрат и снижения нагрузки на сеть без ограничения возможностей послеаварийного восстановления в плане расстояния или объема данных.
Механизм мгновенного восстановления VeeamМгновенное восстановление одной или нескольких ВМ из ЛЮБОЙ резервной копии Veeam в VMware vSphere или Hyper-V за несколько минут. Процесс обеспечивает скорость, гибкость и портативность, необходимые для миграции или восстановления данных в соответствии с требуемыми показателями. Veeam был родоначальником технологий мгновенного восстановления данных и применяет его к практически любым защищаемым системам.
Инструменты Veeam Explorer™ для Microsoft Active Directory, Exchange, SharePoint, SQL Server и OracleНадежное мгновенное восстановление корпоративных приложений и их объектов позволяет выполнить практически любой сценарий восстановления с минимальными показателями RTO.	Частично
Veeam DataLabs™Гарантия готовности к безопасному восстановлению в соответствии с нормативами благодаря встроенным инструментам. Это обеспечивает верификацию возможности восстановления данных, защиту от вирусов, поэтапное восстановление с соблюдением GDPR, создание тестовой среды и многое другое.
API, инструменты самообслуживания и управление для крупных компанийМасштабируемое управление с помощью инструментов самообслуживания для пользователей, создания скриптов для применения эффективных API и пользовательских интерфейсов, позволяющих управлять крупнейшими корпоративными экосистемами.
Повторное использование данных и API для интеграции сторонних решенийВы можете предоставить сторонним экспертам мгновенный доступ к содержимому любых резервных копий Veeam для сбора данных, анализа безопасности и повторного использования данных, что позволит вам получить аналитическую информацию и использовать свои данные более эффективно.
Veeam ONE™
Мониторинг, создание отчетов и аналитикаИнтеллектуальный мониторинг 24/7 с комплексными возможностями создания отчетов позволяет повысить успешность работы и максимизировать готовность инфраструктуры.
Интеллектуальная диагностика и действия по ремедиацииУстранение ошибок и потерь данных благодаря автоматическим действиям по ремедиации для разрешения стандартных проблем резервного копирования.
Планирование ресурсов и анализ распределения затратВам больше не придется гадать при планировании ресурсов ― используйте инструменты для отслеживания и построения тенденций роста среды и потребления ресурсов, а также для интеллектуального анализа распределения затрат по подразделениям.
Veeam Availability Orchestrator
Оркестрация послеаварийного восстановленияОркестрация и автоматизация восстановления, тестирования и создания документации значительно повышают эффективность работы.		Опциональный дополнительный модуль ― пакет для послеаварийного восстановления	Опциональный дополнительный модуль ― пакет для послеаварийного восстановления
Тестирование послеаварийного восстановленияПрогнозирование и обеспечение необходимых результатов с помощью полностью автоматизированного тестирования послеаварийного восстановления, которое не влияет на работу производственной среды и пользователей.				Опциональный дополнительный модуль ― пакет для послеаварийного восстановления	Опциональный дополнительный модуль ― пакет для послеаварийного восстановления
Автоматическое создание документации для послеаварийного восстановленияАвтоматическое создание и обновление актуальной документации для выполнения нормативов и требований заинтересованных лиц.				Опциональный дополнительный модуль ― пакет для послеаварийного восстановления	Опциональный дополнительный модуль ― пакет для послеаварийного восстановления

возможностей HTML5 | Codecademy

веб-языков нуждаются в регулярном обновлении, чтобы оставаться актуальными и решать новые проблемы, с которыми сталкиваются веб-разработчики. HTML5 — это последняя версия HTML. Ниже приведены некоторые функции HTML5, с которыми вы столкнетесь, изучая Codecademy.

видео

Элемент video позволяет легко передавать потоковое видео с веб-сайта.

 
  
 <элементы управления видео>
  
 
  

В приведенном выше HTML-коде width и height задают размеры для элемента video . управляет атрибутом создает кнопки воспроизведения, такие как «Воспроизведение» и «Пауза». Тег source src предоставляет URL-адрес, по которому размещено видео, а type указывает тип видео, в данном случае «video / mp4».

рисунок

Элементы Figure могут использоваться для отображения визуального контента, такого как фотографии, иллюстрации, диаграммы или фрагменты кода.

 
  
 <рисунок>
  

<рисунок>
  
 
  

В приведенном выше примере кода элементы figure имеют класс «gallery-item», и каждый содержит элемент img .

раздел

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

 
  
 <раздел>
   
 Свяжитесь с нами 
 
  <форма>
    ...