Представляю Вашему вниманию свой новый Видеокурс, который называется «HTML5 и CSS3 с Нуля до Гуру». Разместим на каркасе семантические блоки

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 предоставляет информационно-насыщенные названия, которые однозначно идентифицируют соответствующий контент. Например, широко применявшийся до настоящего времени тег был дополнен тегами и . Кроме того, были добавлены теги , , и , которые обеспечивают более точное описание определенных типов контента.

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 и показывала возможности их использования для создания хорошо оформленного кода и элегантного дизайна страницы.

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

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

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

Logos are frequently placed here too

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

Text or images can be included here

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

• Home
• About Us
• Our Products
• Contact Us

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

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

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

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

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

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

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

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

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

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

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

Your browser does not support the HTML "audio" element.

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

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

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

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

My family and I visited Euro Disney last year.

Besides Euro Disney, there is a Disneyland in California.

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

Copyright 2011 Acme United. All rights reserved.

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

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

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

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

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

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

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

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

• Home
• About Us
• Contact Us

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

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

и
• внутри тега .
  Листинг 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. Эта область, определяемая тегом , содержит свой собственный тег . Тег внутри тега также содержит свой собственный тег (листинг 18).

  Листинг 18. Пример тегов и Article Heading

  Primum non nocere ad vitam Paramus . . .

  This is the first section heading

  Scientia potentia est qua nocent docentp . . .

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

  Листинг 19. Третий пример CSS3 article > header h1 { font-size: 40px; float: left; margin-left: 14px; } article > header h1 a { color: #000090; text-decoration: none; } article > section header h1 { font-size: 20px; margin-left: 25px; } article p { clear: both; margin-top: 0px; margin-left: 50px; }

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

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

  Используется для подсвечивания слов veni, vidi, vici.

  Листинг 20. Пример тегов и Second section with mark, aside, menu & figure

  . . . veni, vidi, vici. Mater . . .

  This is an aside that has multiple lines. . . .

  Clio Thalia Urania Calliope Figure 1. Stonehenge

  CSS3-разметка для данного раздела содержит новое определение тега

  Который имеет уменьшенную ширину по сравнению с заданной нами шириной страницы. Это изменение позволяет боковой панели (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

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

  Листинг 22. Пример тегов и This is a video section

  This video will work in Mozilla Firefox or Google Chrome only.

  В листинге 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. Пример тега

  Copyright: 2011 Acme United. All rights reserved.

  В листинге 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-форм и как структурировать эти формы.

  Меня зовут Михаил Русаков, и я уже около 9 лет занимаюсь программированием и из них последние 5 лет - созданием сайтов. На данный момент у меня больше сотни заказчиков, с некоторыми из которых я работаю постоянно. Так же я веду обучающую деятельность, и сейчас у меня несколько десятков тысяч учеников по всему миру и несколько тысяч клиентов. С отзывами некоторых из моих учеников Вы можете ознакомиться у меня на стене в контакте:
  http://vk.com/myrusakov

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

  А что особенного в HTML5 и CSS3?

  Действительно, ведь обходились же как-то и HTML 4.01, разработанной ещё в 1999 году. То же самое касается и CSS 2.1. Однако, HTML5 и CSS3 внесли огромные возможности по вёрстке страниц сайта, в разы упростив этот процесс.

  Вот лишь некоторые новые возможности HTML5:
  • Возможность вставки аудио и видео без использования Flash. Это стало возможным благодаря новым тегам, добавленным в HTML5.
  • Улучшенные возможности по поисковой оптимизации. В HTML5 страницы не будут создаваться на одних только div-ах. Теперь есть масса элементов, характеризирующих конкретную часть сайта (шапка сайта, подвал, меню навигации, статья и т. д.). Это очень хорошо скажется на оптимизации под поисковые системы.
  • Богатые возможности по работе с формами. Появилась масса новых типов полей. Например, e-mail, tel, url. Благодаря этим типам Вам больше не нужно писать код на JavaScript для проверки формы. Теперь с помощью HTML5 форма автоматически проверяется на корректность заполнения, сразу выдавая все сообщения об ошибках пользователю. Причём всё это сделано очень красиво и аккуратно, впрочем, через CSS можно будет изменить внешний вид всего этого. Также появился элемент datalist, позволяющий создать список вариантов, которые пользователь сможет выбрать при наборе текста. Такой функционал очень часто используется при наборе поискового запроса, когда вводя первые символы, сразу появляются возможные варианты. Никогда такая сложная функциональность не создавалась так легко. В общем, здесь ещё очень долго можно говорить, возможностей по работе с формами стало очень много.
  • Упрощённая реализация drag and drop. Теперь реализовать подобный механизм стало намного проще. Пример использования drag and drop – это, например, перетаскивание мышкой картинку товара в корзину, и он автоматически туда добавляется. Раньше это была достаточно сложная задача, теперь же она делается в течение нескольких минут.
  • Появилась возможность узнать местоположение пользователя. То есть узнать точные координаты, где находится посетитель Вашего сайта. Использование этого механизма вносит такие возможности, что дух захватывает.
  • Появились Canvas, что позволило рисовать прямо на Web-странице через JavaScript. Это позволяет генерировать картинки без перезагрузки страницы. Раньше без использования PHP это было сделать невозможно.

  Это не все возможности HTML5, но и этого достаточно, чтобы Вы поняли, что изучать HTML5 обязательно нужно.

  А что же нового в CSS3?
  • Появились новые селекторы, которые упрощают выборку. Например, простая задача – сделать особый стиль у последнего пункта меню (например, у всех пунктов внизу есть рамка, а у последнего пункта её нет). Раньше нужно было задавать отдельный класс для последнего пункта, а в CSS3 есть новый селектор, который поможет сразу вытащить этот последний элемент. Это сократит время работы и уменьшит размер кода. И таких полезных мелочей в CSS3 очень и очень много благодаря новым селекторам.
  • Богатые возможности по работе с фоном. Наконец-то, в CSS3 появилась возможность задать для одного элемента сразу несколько фонов. Так же их теперь можно растягивать по ширине и высоте.
  • Появилась возможность задать прозрачный цвет, чего сильно не хватало раньше. Так же появилась возможность задать цвет через HSL (оттенок-насыщенность-яркость).
  • Очень легко стало создавать закруглённые рамки. Практически в любом более-менее сложном дизайне присутствуют закругления у различных блоков и элементов формы. Раньше это была целая проблема, а в CSS3 это делается одной строчкой.
  • Теперь можно задать свой шрифт на сайте, и не нужно бояться, что у кого-то он не отобразится. Вы просто скачиваете шрифт, копируете на свой сайт, а через CSS3 его подключаете к странице. В CSS 2.1 не было такой возможности, что сильно ограничивало возможности по дизайну страницы.
  • Необычайно легко стало добавлять тень к элементам. На многих сайтах есть тень у некоторых элементов, и если раньше её делали долго и напряжённо, то сейчас это опять же одна небольшая строчка в файле стилей.
  • Можно создавать линейные и сферические градиенты. Очень часто на страницах встречаются градиенты, и раньше без нарезки картинок, подключения её в качестве фона и повторения по X или по Y не обходилось. В CSS3 же задать градиент очень и очень легко, а возможности там таковы, что можно создать даже очень сложный градиент, где хоть 10 переходов между цветами.
  • Появились трансформации. Теперь очень легко можно, например, повернуть, например, целый блок на определённый угол, или растянуть/сжать его на определённый процент, или подвинуть его (особенно полезно в совокупности с JavaScript).
  • Появилась анимация. Теперь Вам не нужно при наведении курсора мыши на элемент плавно менять его состояние через JavaScript. Огромное количество возможностей, которые встречаются на сайтах, теперь можно сделать через анимацию в CSS3. В некоторых случаях это поможет Вам отказаться от того же jQuery, который весит весьма прилично, тем самым, Вы увеличите скорость загрузки страницы, что так же хорошо скажется на поисковой оптимизации.

  Опять же это не все возможности, появившиеся в CSS3, но даже это уже позволит упростить вёрстку страницу, порой, многократно.

  Таким образом, HTML5 и CSS3 уже надо изучать и можно использовать уже сейчас. Вопрос только один.

  Как изучить HTML5 и CSS3?

  Тут надо всё разбить на 3 этапа.

  1-й и 2-й этапы относительно несложные. Благо, книг достаточно много, в некоторых есть и упражнения. Поэтому можно поискать и что-нибудь найти.

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

  Плюс большой минус книг, что они очень долго издаются. А HTML5 и CSS3 – это новинки, поэтому абсолютно все книги, которые Вы найдёте уже устарели. Отсюда вывод: искать информацию по HTML5 и CSS3 можно в онлайн-справочниках (убедитесь, что там есть постоянное обновление), где упражнений нет, да и покопаться там ещё придётся немало, а пример вёрстки и вовсе не сыскать. Плюс всех этих мучений только один – бесплатно.

  Я предлагаю Вам не только
  самый простой,
  но и самый лучший путь! Представляю Вашему вниманию свой новый Видеокурс, который называется «HTML5 и CSS3 с Нуля до Гуру»:

  
  

  Курс состоит из нескольких разделов, которые Вы можете увидеть на скриншоте главного меню:

  
  

  Что Вы узнаете из этого курса? Начнём с раздела по HTML5.

  
  

  Из этого раздела:

• Вы узнаете очень важные особенности HTML5, которые обязательно необходимо учитывать при использовании этой Web-технологии.
• Вы узнаете, как правильно вставлять видео и аудио на сайт. Тут тоже есть свои нюансы, без учёта которых у некоторых пользователей Ваше видео или аудио просто не запустится. Обо всех этих нюансах Вы узнаете из этого раздела.
• Вы узнаете, как использовать новые семантические теги для грамотной оптимизации под поисковые системы.
• Вы увидите все новые возможности по работе с формами.
• Вы увидите на конкретном примере, как реализуется с использованием HTML5 механизм Drag and Drop.
• Вы узнаете, как можно получить координаты местоположения посетителей Вашего сайта.
• Вы узнаете, как можно рисовать на Web-странице, используя новый элемент Canvas.

Следующий раздел – это CSS3.




Из этого раздела:

• Вы узнаете особенности CSS3, которые обязательно нужно знать, прежде чем его использовать. Без учёта этих особенностей могут возникнуть огромные проблемы с отображением сайта в разных браузерах (кроссбраузерностью).
• Вы увидите, как использовать новые селекторы.
• Вы увидите новые возможности по работе с текстом.
• Вы узнаете все возможности по заданию фона через CSS3.
• Вы узнаете, как создавать прозрачный цвет с помощью CSS3.
• Вы узнаете, как правильно задавать собственный шрифт. В этом разделе разбираются мелкие детали, которые очень многие верстальщики не учитывают, а потом появляются проблемы со шрифтами на сайте. После просмотра соответствующего урока из этого раздела Вы будете знать, что это за проблемы и как их решить очень быстро и легко.
• Вы узнаете, как создаются тени у текста и блоков.
• Вы увидите, как делаются самые различные градиенты.
• Вы узнаете, как трансформировать элементы, например, поворачивать те же изображения на определённый угол.
• Вы узнаете, как сделать анимацию на CSS3. Несколько самых различных и в то же время очень используемых в практике примеров Вы увидите своими глазами. Когда я впервые увидел возможности по анимации в CSS3, то был очень удивлён, уверен, что и Вам всё очень понравится.

После этих 2-х разделов по HTML5 и CSS3 Вы будете обладать всеми необходимыми знаниями для успешной вёрстки страниц.

Однако, крайне важно увидеть пример вёрстки
реальной страницы на HTML5 и CSS3

Поэтому в курсе «HTML5 и CSS3 с Нуля до Гуру» есть ещё один раздел, где показывается вёрстка для моего сайта с использованием HTML5 и CSS3.




Кстати, вот дизайн страницы, которая верстается в курсе абсолютно с нуля:



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

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



А что насчёт вёрстки под мобильные устройства?

Вполне справедливый вопрос, ведь мобильные устройства такие как смартфоны и планшеты давно вошли в нашу жизнь. В 2013-м году мобильный трафик составил в среднем 38% от общего числа. Это очень крупная доля пользователей, о которых не стоит забывать. Поэтому для многих сайтов обязательно требуется создание мобильной версии сайта. И самая главная задача – это сделать правильную вёрстку для мобильной версии сайта.

А как сделать вёрстку для мобильной версии сайта? Для ответа на этот вопрос был записан
Бонусный Видеокурс «Вёрстка под мобильные устройства».



Пройдя этот курс:

• Вы узнаете все особенности вёрстки под мобильные устройства. Эти особенности крайне важно знать перед тем, как делать вёрстку.
• Вы узнаете, как правильно изменить дизайн для вёрстки под мобильные устройства.
• Вы увидите, как верстается главная страница MyRusakov.ru под мобильные устройства.
• Вы сможете самостоятельно создавать мобильные версии своих сайтов, и это самое главное, что Вы получите, изучив этот курс.

И самое главное, что этот курс является бесплатным Бонусом к курсу «HTML5 и CSS3 с Нуля до Гуру».

А нужно ли знать HTML 4.01 и CSS 2.1,
если теперь есть HTML5 и CSS3?

Обязательно! HTML5 и CSS3, несмотря на всю их глобальность, являются лишь расширением базовых возможностей HTML и CSS. Поэтому прежде чем приступать к изучению HTML5 и CSS3, обязательно нужно знать все базовые возможности этих технологий, а также уметь верстать сайты с их помощью.

Всему этому обучает Видеокурс «Вёрстка сайта с нуля».




Пройдя данный курс, Вы сможете сверстать страницы любой сложности. А уже после надо проходить курс «HTML5 и CSS3 с Нуля до Гуру», который упростит Вашу работу и увеличит её качество.

Для тех, кто любит всё по максимуму!

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

1) Комплект «Стандарт» - сюда входит курс «HTML5 и CSS3 с Нуля до Гуру» с Бонусным курсом «Вёрстка под мобильные устройства».

2) Комплект «Вёрстка+». В данный комплект входит всё то, что есть в комплекте «Стандарт», а также курс «Вёрстка сайта с нуля», важность которого была описана немного выше. Если Вы ещё не умеете верстать сайты, или ещё даже плохо знаете HTML или CSS, то обязательно изучите сначала именно курс «Вёрстка сайта с нуля».

3) Комплект «Профи в создании страниц». В данный комплект входит всё то, что есть в комплекте «Вёрстка+», а также курс «JavaScript, jQuery и Ajax с Нуля до Гуру», который позволит Вам «вдохнуть жизнь» в страницы Вашего сайта. Несмотря на богатые возможности HTML5 и CSS3, даже им необходим JavaScript. Например, та же работа с Canvas или механизмом Drag and Drop требует JavaScript, поэтому его знать необходимо, если Вы хотите создавать страницы с любой сложностью и с любым функционалом.

4) Комплект «Профи в создании сайтов». Данный комплект содержит всё то, что есть в «Профи в создании страниц», а также курс «PHP и MySQL с Нуля до Гуру». Данный курс научит Вас создавать весь внутренний функционал сайта: регистрацию, авторизацию, поиск по сайту, динамическую генерацию страниц сайта и многое-многое другое. Комплект «Профи в создании сайтов» научит Вас создавать любые сайты с использованием самых современных Web-технологий.

Видеоотзыв о курсе от ученика

На мой взгляд, никто лучше и честнее не расскажет о курсе, чем те, кто его уже прошёл.

Отзыв от Рустама Садыкова
Подведём итог того, что Вы получаете

Приобретя Видеокурс «HTML5 и CSS3 с Нуля до Гуру»:

• Вы узнаете новые возможности HTML5, а также увидите, как они работают.
• Вы узнаете, что нового появилось в CSS3, и как это используется на практике.
• Вы увидите конкретный пример вёрстки сайта.
• Вы сможете верстать любые сайты с использованием HTML5 и CSS3.
• Вы сможете создавать мобильную версию для своих сайтов.
• Приобретя комплект «Профи в создании страниц», Вы сможете использовать максимум возможностей HTML5 и CSS3 с помощью JavaScript.
• Приобретя комплект «Профи в создании сайтов», Вы сможете не только верстать любые сайты, но и реализовывать весь функционал, который делается на PHP и MySQL.
Вы боитесь, что у Вас ничего не получится?



Вы ничем не рискуете, так как я предоставляю Вам 100% гарантию на возврат денег. Я могу её предоставить, так как уверен в качестве своих курсов, что доказывает масса положительных отзывов обо мне и о моих курсах. Но если вдруг Вам курс не подойдёт, то просто напишите в мою службу поддержки https://support.myrusakov.ru , и я верну Вам все потраченные на курс деньги. Я уже давно известная фигура в Интернете, поэтому Вы можете мне доверять. Срок действия гарантия - 30 суток с момента оплаты.

Сколько стоит?

Цена зависит от выбранного комплекта.

Помните, что Вы на 100% защищены моей гарантией. Поэтому смело выписывайте счёт прямо сейчас, оплачивайте его и сразу приступайте к обучению.

Действуйте, Дорогой Друг!

С Уважением, Михаил Русаков!

P.S. «Чтобы хорошо жить,
надо хорошо работать,
чтобы крепко стоять на ногах,
надо много знать»
Максим Горький

ВОПРОСЫ И ОТВЕТЫ

Выдаётся ли сертификат?

Да, на каждый Видеокурс выдаётся отдельный именной сертификат.

Мне какой-то "Вася" предложил купить этот курс за 500 рублей. Это Ваш партнёр?

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

Куда Вы заливаете курс?

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

Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …

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

Для выполнения заданий вам потребуются (будет повод обновиться):

Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5 . Пройдите по ссылке http://html5test.com , там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?

В этом тьюториале, мы:

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

Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css . В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.

Готовим каркас страницы

Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.

Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег . Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … public … transitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.

Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.

Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.

Всё что мы здесь описали есть в листинге №1:

Листинг 1. Базовая структура документа HTML5

Инвесторы видят перспективу

Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу больше ничего не нужно кроме lang . Для метатега достаточно написать charset . Кроме того, для тега link не нужно указывать type .

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

Делаем разметку контента Разместим на каркасе семантические блоки

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

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

Разместим блоки в контейнере . Будем придерживаться следующей последовательности этих элементов:

– header
– – hgroup
– nav
– article
– – header
– – “content”
– – section
– – – header
– – – “content”
– footer

В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer , в котором мы разместим дополнительную информацию о контенте наших страниц.

Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами … .

Листинг 2. Размещение семантических блоков HTML5

ООО Рога и копыта Полный текст новости

• Главная
• О нас
• Контакты
• Архивы новостей
Апр 26 Инвесторы видят перспективу

Ничто не мешает людям воспользоваться рогами зайцелопа. Однако копыт у него нет.

Что думает общественность

В реальности существует только Ubuntu с таким странным именем "Зайцелоп".

2011 ООО Рога и копыта. Свои права мы держим в надёжном месте.

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

Покрасим фасад

У нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей styles.css Первое, что мы сделаем — это определимся со шрифтом для всего документа. Если кто не знает, то скажем, проводились исследования какой шрифт лучше воспринимается с экрана монитора, выяснилось — тот, у которого нет засечек. Такие шрифты называют sans-serif — без засечек. К ним относятся, например: Arial, Helvetica, Verdana . Идём дальше, будем по порядку определять правила для оформления всех элементов нашей страницы. Для того, чтобы не забегать сильно вперёд, воспользуемся пока несколькими фишками — тенями и закруглёнными краями у блоков.

Большинство из того, что мы здесь накодим было доступно ещё в ранних стандартах CSS. Новенькие фичи мы перечислим.

box-shadow
Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. Первые четыре числа это линейные параметры тени, соответственно указываются либо в пикселах px , либо других линейных единицах (em , pt ), либо без них, в случае нулевого размера. Первое число означает — горизонтальное отбрасывание тени вправо, хотите сделать влево — ставьте отрицательное число. Следующий — вертикальное вниз, чтобы сделать вверх — ставьте отрицательное число. Далее — величина размытия тени, затем — разброс тени. После линейных размеров указывается цвет тени, и если вы хотите внутреннюю тень то ключевое слово inset . Если вам мало одной тени, то реализуйте свои теневые фантазии через запятую.

text-shadow
Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. И вам также никто не мешает фантазировать на счёт количества теней, через запятую.

border-radius (-moz-border-radius, -webkit-border-radius)
Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Указанные в скобке названия параметров, используются в браузерах семейства Mozilla и на движке Webkit (Chrome, Safari). Так что дублируйте в правиле настройки, указанные для border-radius ещё и в эту парочку параметров.

Придуманное и закодированное нами оформление будет выглядеть так, как показано в Листинге №3. Этот код, вам нужно поместить в файл styles.css .

Листинг 3. CSS для новых семантических элементов HTML5

* { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 480px; margin: 0px auto; } header.mainH { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400; padding: 5px; text-align: center; } header h1 { font-size: 36px; margin: 0px; } header h2 { font-size: 18px; margin: 0px; color: #888; font-style: italic; } nav ul { list-style: none; padding: 0px; display: block; clear: right; background-color: #666; padding-left: 4px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } nav ul li { display: inline; padding: 0px 20px 5px 10px; height: 24px; border-right: 1px solid #ccc; } nav ul li a { color: #EFD3D3; text-decoration: none; font-size: 13px; font-weight: bold; } nav ul li a:hover { color: #fff; } article > header time { font-size: 14px; display: block; width: 26px; padding: 2px; text-align: center; background-color: #993333; color: #fff; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; float: left; margin-bottom: 10px; } article > header time span { font-size: 10px; font-weight: normal; text-transform: uppercase; } article > header h1 { font-size: 20px; float: left; margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888; } article > header h1 a { color: #993333; text-decoration: none; } article > section header h1 { font-size: 16px; } article p { clear: both; } footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; } article > section { -moz-border-radius: 6px 0 0 0; -webkit-border-radius:6px 0 0 0; border-radius: 6px 0 0 0; box-shadow: 3px 3px 3px 0 #FFAA88 inset; padding: 5px; color: #665588; margin-top: 40px; }

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

Рисунок 1. Вид стилизованой страницы

Если страница выглядит по-другому, значит вы открыли её не в том браузере. Под “не в том” я подразумеваю браузер отличный от Mozilla4+, Chrome11.0+, Opera11.10+, они показывают страницу одинаково — проверено.

Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать > в селекторе? Тогда пишите свои вопросы в комментариях.

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

Создание html сайта — способ первый.

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

Создание html сайта — способ второй.

Второй же способ это использование HTML5 Boilerplate. Сейчас его можно найти даже на русском языке. У вас наверное возникает вопрос «что же такое HTML5 Boilerplate?».

HTML5 Boilerplate — это набор определенных методик. Его нельзя назвать HTML5 или CSS3 фреймворком. Он представляет из себя html-css-js-шаблон, который можно использовать для создания сайта, при этом все различия браузеров уже учтены. И даже всеми «любимый» IE6 здесь поддерживается.

Вот что находится в архиве с HTML5 Bolilerplate:

Что идет в комплекте с HTML5 Boilerplate:

• Кроссбраузерная совместимость(+IE6)
• Уже оптимизирован для мобильных браузеров
• .htaccess для кэширования статического контента
• Файл сброса CSS стилей(для одинакового отображения во всех браузерах)
• Иконка для сайта(+уже подключена)
• Страница 404
• Подключены, необходимые, js библиотеки для работы
• И много много полезных действий сделаны уже за вас…

Если вы разрабатываете или планируете разрабатывать сайты на HTML5, рекомендую Вам обязательно познакомиться с HTML5 Boilerplate. Она значительно облегчит вам выполнение работы и увеличит скорость создания сайта.

Успехов в изучении HTML5 Boilerplate!

Создание сайта на HTML5 - создание html сайта 4.43 /5 (88.57%) 7 голос(ов)

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

Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой текстовый файл, а в качестве расширения файла указать *.html

Создадим текстовый файл, назовем его index и изменим его расширение на .html .

Затем откроем этот файл в любом текстовом редакторе, например, в Notepad++. Добавим в файл следующий текст:

Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration сообщает веб-браузеру тип документа. указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.

А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа.

Внутри элемента html мы можем разместить два других элемента: head и body . Элемент head содержит метаданные веб-страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они использутся. Элемент body собственно определяет содержимое html-страницы.

Теперь изменим содержимое файла index.html следующим образом:

Документ HTML5 Содержание документа HTML5

В элементе head определено два элемента:

элемент title представляет заголовок страницы

элемент meta определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать кодировку. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.

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

Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM :

После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная кодировка установлена.

Сохраним и откроем файл index.html в браузере:

Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе title заголовок "Документ HTML5", то именно такое название будет иметь вкладка браузера.

Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы.

А весь текст, определенный внутри элемента body мы увидим в основном поле браузера.