Часть 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>,

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, показанную на высокоуровневом представлении ее дизайна, а также область

Листинг 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 или учимся верстать на HTML5

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

Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

Верстка div (старая)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
 <head profile="http://gmpg.org/xfn/11">

<!-- ......... -->

</head>
 <body>
 <!-- Шапка сайта -->

<div>

<!-- Навигация -->

<div>
 <!-- ......... -->
 </div>
 <!-- Конец навигации -->

</div><!-- Конец шапки сайта -->

<div><!-- основной блок -->

<div><!-- блок там где отображаются посты -->

<!-- Начало поста -->
 <div>
 <!-- ......... -->
 </div>
 <!-- Начало поста -->

<div> <!-- блок боковой колонки -->
 <!-- ......... -->
 </div>

</div>
 </div>

<div><!-- Футер сайта -->
 <!-- ......... -->
 </div>

</body>
</html>

Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.

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

Теги HTML5

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

<header> — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.

<section> — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

<article> — обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.

<aside> — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

<footer> — в этот тег должен входить низ Вашего сайта (Футер)

<hgroup> — в данный тег входят групы заголовков сайтов, например <h3>.

<nav> — данный тег включает в себя всю навигацию на сайте (меню).

Хочу сказать, что эти все теги обязательно должны закрываться, например если это тег <article> он должен иметь закрывающий тег </article> и так далее.

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

<audio> — данный тег выводит аудио на сайте.

<canvas> — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

<menu> — в этот тег должны входить список меню, например ul li.

<time> — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

<video> — вставляет видео на страницу.

<wbr> — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу <br>.

Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

А вот как он выглядит по новому:

<!doctype html>

Ну как Вам разница? 🙂 По моему существенная. Так же ещё проще стал тег <html>. Он был такой:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">

А стал такой:

<html lang=ru>

Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

Верстка (новая)

Перед тем как приступить к вёрстке нам между тегами <head> и </head> нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

footer, nav, header, section, aside {

display: block

}

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

<!DOCTYPE html>
<html lang="ru">
<head>

<!-- ......... -->

</head>
<body>

<!-- Шапка сайта -->

<header>

<!-- Навигация -->

<nav>
<!-- ......... -->
</nav>
<!-- Конец навигации -->

</header><!-- Конец шапки сайта -->

<section><!-- основной блок -->

<aside><!-- блок там где отображаются посты -->
<!-- Начало поста -->
<article>
<!-- ......... -->
</article>
<!-- Начало поста -->

<aside> <!-- блок боковой колонки -->
<!-- ......... -->
</aside>

</div>
</section>

<footer><!-- Футер сайта -->
<!-- ......... -->
</footer>

</body>
</html>

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

Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div  с классом headerInner — <div id=»headerInner»>. Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 (<header>) можем смело его использовать вместо div  только с таким же классом. Таким образом у нас получилось следующее:

<header>

И не забываем поставить закрывающий тег </header>, а также удалить закрывающий div.

Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом <section>. В старой вёрстке этот главный блок выглядел так <div id=»wrapper»>, а в HTML5 будет выглядеть вот так <section id=»wrapper»>. И опять же не забудьте поставить закрывающий тег и удалить старый div.

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

Вывод

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

Опять рекомендую Вам переходить Вам на новую технологию.

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

HTML5 | Введение

Что такое HTML

Последнее обновление: 08.04.2016

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.

В 2014 году официально была завершена работа над новым стандартом — HTML5, который фактически произвел революцию, привнеся в HTML много нового.

Что именно привнес HTML5?

• HTML5 определяет новый алгоритм парсинга для создания структуры DOM

• добавление новых элементов и тегов, как например, элементы video, audio и ряд других

• переопределение правил и семантики уже существовавших элементов HTML

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).

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

• HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4

• HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.

Кто отвечает за развитие HTML5? Этим занимается World Wide Web Consortium (сокращенно W3C — Консорциум Всемирной Паутины) — независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную спецификацию на английском языке можно посмотреть по адресу https://www.w3.org/TR/html5/. И надо отметить, что организация продолжает работать над HTML5, выпуская обновления к спецификации.

Поддержка браузерами

Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

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

Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com.

Необходимые инструменты

Что потребуется для работы с HTML5? В первую очередь, текстовый редактор, чтобы набирать текст веб-страниц на html. На данный момент одним из самых простых и наиболее популярных текстовых редакторов является Notepad++, который можно найти по адресу http://notepad-plus-plus.org/. К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем я буду ориентироваться именно на этот текстовый редактор.

Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code. Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.

И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из распространенных браузеров — Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

Учебник HTML5

Web-программирование — Учебник HTML5

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

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

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

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

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

Теоретический материал:

• 1. Введение в HTML5

• 2. Веб-формы

• 3. Аудио и видео

• 4. Canvas

• 5. Web Storage API и File API

• 6. Автономные приложения

• 7. Взаимодействие с веб-сервером

HTML5 для начинающих. Учебник по основам HTML

пособие для начинающих и помощь для профессионалов

Приветствую вас на сайте для веб-разработчиков, веб-программистов и веб-дизайнеров –
Уроки по HTML/CSS/JavaScript/SQL/PHP для начинающих!

Данный сайт Уроки по HTML/CSS/JavaScript/PHP для начинающих создан непрофессионалом-любителем из собственным произвольным переводом и своими дополнительно изложенными материалами по теме веб-разработки, в т.ч.: HTML, CSS, JavaScript, SQL, PHP, Bootstrap, Python, W3.CSS, jQuery и др. Так как в сети не существует официальной версии сайта W3Schools на русском языке, но очень большое количество людей совершают запрос именно на сайт W3Schools в поисках информации и изучения курсов для веб-разработчиков, в том числе по HTML, CSS, JavaScript (для frontend) и PHP, SQL, Python (для backend), но при этом не все хорошо знают английский язык, то я решил немного облегчить жизнь этим людям, которые хотели бы получить знания по веб-вёрстке или веб-программированию, и сделал перевод на русский и украинский язык сайта W3Schools. Большая часть материалов и примеров взяты именно с этого сайта.

Вы можете перейти на более полные версии сайта по ссылкам:

Оба этих сайта на данный момент ещё разрабатываются и наполняются материалами. Но уже сейчас основные уроки по HTML, CSS, PHP, Python доступны на русском языке.

W3Schools является обучающим сайтом, созданный специально для целей обучения всех желающих основам веб-разработки, и основанный на материалах Консорциума Всемирной паутины (официальный сайт: https://w3.org/). Именно из этого сайта берётся вся официальная информация и все изменения, которые происходят в действующей спецификации. На данный момент актуальной является спецификация HTML5, на основе которой и создаются большинство новых сайтов в Интернете.

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

Кроме материалов из сайта W3Schools, которые переведены на русский язык, вы можете найти на этом сайте дополнительные материалы по HTML, CSS, JavaScript, PHP, SQL, Bootstrap, Python, W3.CSS, jQuery и др. темы для веб-вёрстки и веб-программирования. Сайт Уроки по HTML/CSS/JavaScript/PHP для начинающих создан только с помощью HTML/CSS и не содержит интерактивных элементов (кроме комментариев от Disqus) как обучающее пособие и пример для тех начинающих любителей, кто только начинает изучать веб-технологии для создания веб-сайтов HTML/CSS. Благодаря чему данный сайт практически невозможно взломать! Сайт на данный момент разрабатывается и наполняется, поэтому некоторые ссылки ещё могут не работать. Поэтому если у вас возникают какие-то трудности или вопросы по поводу выложенных на сайте материалов, рекомендуется перейти на официальный сайт W3Scools для просмотра информации в оригинале на английском языке, а также оставлять свои комментарии и пожелания по наполнению и работе сайта.

Также на сайте Уроки по HTML/CSS/JavaScript/PHP для начинающих вы можете дополнительно просматривать видеоуроки по HTML/CSS, получая более подробное изложение материалов и приведенных примеров, непосредственно видя всё на экране монитора. В дальнейшем видеоуроки по изучению веб-технологий HTML, CSS, JavaScript, PHP также будут добавляться. Кроме того, в разделе Книги вы можете просмотреть подборку учебной литературы, учебники и пособия для веб-разработчиков, в т.ч. по HTML, CSS, JavaScript, PHP. Книги изложены для ознакомления в формате pdf, их можно скачать или читать онлайн непосредственно с Google-диска бесплатно. Все права на книги принадлежат их авторам и не могут быть использованы для коммерческих целей никем, кроме самих авторов.

Для того, чтобы приступить к обучающему курсу по той или иной веб-технологии, выберите необходимый курс, перейдя по соответствующей ссылке на главной странице сайта. Если вы новичок-начинающий и не знакомы с веб-технологиями вообще, то лучше начинать обучение с первого урока и учить все темы в той последовательности, в которой они выложены на сайте. Если же вы уже частично знакомы с веб-технологиями и имеете общее представление о том, как создаются и работают веб-сайты, то можете сразу перейти к той теме, которая вам необходима для ознакомления или изучения. Материалы от школы W3Scools изложены довольно сжато и коротко, но в то же время они охватывают практически все необходимые темы для освоения веб-технологий. Если вы имеете какие-то трудности в восприятии материалов именнно в таком сжатом виде, то вы можете воспользоваться дополнительными ресурсами, которые приводятся на сайте Уроки по HTML/CSS/JavaScript/PHP для начинающих в правом сайд-баре в разделе Полезные ресурсы. В сети существует довольно много разных ресурсов для изучения веб-технологий и вы можете воспользоваться любым из них.

Замечания и предложения по наполнению и функционированию сайта можно оставлять в комментариях от платформы Disqus к любой теме.

Удачи!

Админ сайта Уроки по HTML/CSS/JavaScript/PHP для начинающих

HTML

Язык разметки для создания веб-страниц

Данный курс уроков по HTML5 рекомендуется для начинающих, тех, кто только начинает изучать язык HTML для разметки веб-страниц с нуля.

Пример HTML:

<h2>Это заголовок</h2>
<p>Это параграф.</p>
<p>Это параграф.</p>

</body>
</html>

CSS

Язык для стилизации веб-страниц

Данный курс уроков по CSS3 рекомендуется для начинающих, тех, кто только начинает изучать язык для стилизации веб-страниц (CSS — каскадные таблицы стилей) с нуля.

Примечание. На данный момент учебник на русском языке разрабатывается.

Пример CSS:

h2 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

JavaScript

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

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

Основы HTML5 | Учебник HTML5

Впрочем, почему можно? Такое решение, естественно, уже найдено, причем не одно. Прежде всего это концепция микроформатов, используемая, например, Google в сервисе Google Maps, Yahoo! (в Yahoo! Query Language) или, до недавнего времени, крупнейшим российским поисковым порталом «Яндекс». Давайте посмотрим, что она из себя представляет.

Читать далее →

Еще одно интересное решение по реализации отображения семантических данных — разметка RDFa, основанная на технологии RDF (Resource Description Framework).

Читать далее →

Спецификация микроданных (Microdata) — самая молодая из описываемых здесь. Она создавалась с учетом опыта использования своих предшественников, и именно она стала частью HTML5. Читать далее →

Это совершенно логичный шаг — раз новый формат включен в спецификацию HTML, должен быть и API для доступа к его элементам из сценариев Javascript. Читать далее →

Это, наверное, самое известное новшество языка. Бывает иногда даже некоторая подмена понятий, и, говоря о HTML5, часто подразумевают работу именно с canvas. Читать далее →

Важно понимать: сам элемент canvas является ч астью DOM HTML-документа, но все, что в него загружается, — линии, фигуры, надписи — про DOM ничего не знает. И у них это взаимно.

Читать далее →

Вот такой короткий заголовок, и тем не менее в нем я ухитрился соврать. В canvas API нет примитивов. Есть примитив. Один. И мы его уже рассмотрели во вступительном примере. Читать далее →

Я сознательно не буду (за очень редким исключением) вдаваться в подробности поддержки браузерами различных элементов и API HTML5, и причин тому несколько. Читать далее →

Больше всего новшеств в HTML-разметке появилось в этих самых, всем порядком надоевших HTML-конструкциях. Читать далее →

HTML5 принес довольно много новых элементов гипертекстовой разметки (в народе звучно называемых «тегами»). Это и долгожданная семантика («header», «article», «nav» и т. п.), и новые элементы форм. Читать далее →

Основы HTML для начинающих

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Для изучения урока, скачайте архив с необходимыми файлами.

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

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

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

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

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

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

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

• Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
• HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
• Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
• Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
• Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

Структура документа HTML

Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

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

<!doctype html> 
<html> 
<head> 
	<title>Заголовок</title> 
	<meta charset="UTF-8"> 
	<link rel="icon" href="favicon.ico"> 
	<link rel="stylesheet" href="style.css"> 
	<script src="script.js" type="text/javascript"></script>
</head> 
<body> 
	Тело документа 
</body> 
</html>

Итак, по порядку из примера.

<!doctype html> — тип документа (доктайп)

<!doctype html>

Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.

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

<html> — начало документа

<html>

Первый тег, который мы встречаем после доктайпа, это <html>.

HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

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

Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.

Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.

Тег <head>

<head>

Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

<тег> 
	содержание или другие теги
</тег>

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

Тег <title> — заголовок документа

<title>Заголовок</title>

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

Метатег <meta charset=»UTF-8″ >

<meta charset="UTF-8" >

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

Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.

Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

Фавиконка (favicon)

<link rel="icon" href="favicon.ico" >

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

CSS стили документа

<link rel="stylesheet" href="style.css">

Подключает к документу CSS файл со стилями оформления HTML.

CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.

Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.

Тег <script>

<script src="script.js" type="text/javascript"></script>

Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.

В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.

Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.

</head>

Закрываем тег <head> и шагаем дальше.

Тело aka body

<body>

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

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

<a>

<a href="http://webdesign-master.ru">текст ссылки</a>

<em>,
<strong>

<em>текст курсивом</em>

<strong>жирный (акцентируемый) текст</strong>

<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>

<h2>Заголовок первого уровня</h2> 
<h3>Заголовок второго уровня</h3> 
<h4>Заголовок третьего уровня</h4> 
... и т. д.

<ol>,
<ul>

<ul> 
	<li>Элемент маркированного списка 1</li>
	<li>Элемент маркированного списка 2</li>
</ul> 

<ol> 
	<li>Элемент нумерованного списка 1</li>
	<li>Элемент нумерованного списка 2</li>
</ol> 

<p>

<p>Внешний вид HTML разметки во многом 
определяется CSS стилями.</p> 

<p>Тем не менее, некоторые веб-мастера 
предпочитают не использовать стили на первых 
этапах проекта.</p>

<img>

<img src="путь_до_картинки.jpg" alt="Текст">

<form> 
+ <input> 
+ <textarea>

<form action="ссылка_на_скрипт_обработки_формы"> 
	<input type="text" name="name">
	<input type="text" name="email">
	<textarea name="text">
		Текст сообщения
	</textarea>
	<input type="submit" value="Написать">
</form>

<span>

Изучение HTML, в большинстве случаев, не вызывает
<span>ни каких сложностей</span> у новичков.

<video>,
<audio>

<video src="rolik_chuma.mp4" controls></video> 
<audio src="muzichka.mp3" controls></audio>

<div>

<div> 
	<div> 
		Текст во вложенном блоке 
	</div> 
</div>

<iframe>

<iframe src="http://rtfm.org.ru"></iframe>

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

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

Например, не:

<video src="ролик чума.mp4" controls></video>

а:

<video src="rolik_chuma.mp4" controls></video>

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

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

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.

1. Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
2. Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
3. Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

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

Премиум уроки от WebDesign Master

Другие уроки по теме «HTML и CSS»

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

Основы HTML5

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

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

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

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

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

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

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

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

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

• API: Интерфейс прикладного программирования (Интерфейс прикладного программирования, API-интерфейс)
• CSS3: Каскадная таблица стилей версии 3 (Каскадная таблица стилей), версия 3
• GUI: Графический пользовательский интерфейс (Графический интерфейс пользователя)
• HTML: Язык гипертекстовой разметки (Язык гипертекстовой разметки, язык HTML)
• HTML5: HTML, версия 5
• SQL: Язык структурированных запросов (Язык структурированных запросов)
• UI: Пользовательский интерфейс (Интерфейс пользователя)

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

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

 

     
 Текст заголовка 
 
    
 Сюда можно добавить текст или изображения 
    
 Здесь тоже часто размещают логотипы