Html макет: Макеты | htmlbook.ru

HTML Макет

---

---

Пример Макета HTML

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

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

Редактор кода »

---

Элементы Макета HTML

Сайты часто отображает контент в несколько колонок (подобно журналу или газете).

Спецификация HTML5 предлагает новые семантические элементы, которые определяют разные части веб-страницы:

<header> — Определяет заголовок документа или раздела <nav> — Определяет контейнер для навигационных ссылок <section> — Определяет раздел в документе <article> — Определяет независимые самодостаточные статьи <aside> — Определяет содержание кроме содержания (такие как боковая панель) <footer> — Определяет нижний колонтитул в документе или разделе <details> — Определяет дополнительную информацию <summary> -Определяет заголовок для элемента <details>

---

Макеты Компоновки HTML

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

• Модель table HTML
• Модель float CSS
• Модель framework CSS
• Модель flexbox CSS

---

Какой выбрать?

Модель table HTML

Элемент <table> не был разработан, для инструмента макет! Задача элемента <table> отображать табличные данные. Так что лучше, не нужно использовать таблицы для разметки макета! Они внесут беспорядок в коде. И представьте, как трудно будет перестроить свой сайт через пару месяцев.

Совет: Не используйте таблицы для разметки макета!

---

Модель framework CSS

Если вы хотите создать свой макет быстро, вы можете использовать фреймворк, как W3.CSS или Bootstrap.

---

Модель float CSS

Он является общим, чтобы сделать весь веб-макетов, используя CSS свойства float.

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

Подробнее о float в нашей главе CSS Float и Clear.

Пример Макета Float

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

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

Редактор кода »

---

Модель flexbox CSS

Модель flexbox — новый режим макета в CSS3.

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

Узнать больше о спецификации flexbox в нашей главе CSS Flexbox.

Пример Макета Flexbox

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

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

Copyright © SchoolsW3.com Редактор кода »

---

HTML Макеты

---

---

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

Макеты на основе таблиц

В недалеком прошлом таблицы были самым простым и самым популярным способом создания многоколоночных макетов в HTML. Вся веб-страница помещалась внутри большой таблицы (<table>). Однако элемент <table> разработан не для создания макетов страниц, его цель — отображение табличных данных.
Следующий макет создается с помощью таблицы, состоящей из 3-х строк и 2 столбцов, где строки содержащие контент заголовка и футера охватывают обе колонки, используя атрибут colspan:

Пример: Макет на основе таблицы

Макет на основе таблицы

Основной контент…

<!DOCTYPE html>
<html>
<head>
<title>Макет на основе таблицы</title>
    <style>
        table {
            width: 100%;
            border: 0;
        }
        td.header {
            background-color: #b5dcb3;
        }
        td.sidebar {
            background-color: #dddddd;
            width: 30%;
            vertical-align: top;
            padding:5px;
        }
        td.sidebar>ul {
            list-style: none;
            padding:5px;
        }
        td.article {
            background-color: #eeeeee;
            height: 200px;
            width: 70%;
            vertical-align: top;
            padding:5px;
        }
        td.footer {
            background-color: #b5dcb3;
            text-align: center;
            padding:5px;
        }
    </style>
</head>
<body>
  <table border="0">
    <tr>
      <td colspan="2"><h2>Шапка сайта</h2></td>
    </tr>
    <tr>
      <td>
        <b>Главное меню</b>
            <ul>
                <li>HTML Элементы</li>
                <li>HTML Атрибуты</li>
                <li>HTML Таблицы</li>
                <li>...</li>
            </ul>
      </td>
      <td>Основной контент...</td>
    </tr>
    <tr>
      <td colspan="2">Copyright © 2017 wm-school.ru</td>
    </tr>
  </table>
</body>
</html> 
 

	Совет: Не используйте таблицы для разметки страницы! W3C осуждает использование таблиц для разметки.

Макеты на основе DIV-элементов

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

<div> и используют атрибуты class или id, чтобы указать назначение конкретной части страницы.

Ниже приведена визуализация макета с использованием тегов <div> для группировки элементов на странице:

<div=»header»>

<div>

<div>

<div>

Пример: Макет на основе DIV-элементов

Главное меню HTML Элементы HTML Атрибуты HTML Таблицы …	Основной контент…
Copyright © 2017 wm-school.ru

<!DOCTYPE html>
<html>
<head>
<style>
#page {
    width: 100%;
}
#header {
    background-color:#808000;
}
#sidebar>ul {
    list-style: none;
    padding:5px;
}
#sidebar {
    background-color:#dddddd;
    height:200px;
    width:30%;
    float:left;
    padding:5px;        
}
#content {
    background-color:#eeeeee;
    height:200px;
    width:70%;
    float:left;
    padding:5px;    
}
#footer {
    background-color:#808000;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<div>
<div>
<h2>Шапка сайта</h2>
</div>

<div>
<b>Главное меню</b>
<ul>
  <li>HTML Элементы</li>
  <li>HTML Атрибуты</li>
  <li>HTML Таблицы</li>
  <li>...</li>
</ul>
</div>

<div>
<p>Основной контент...</p>
</div>

<div>
Copyright © 2017 wm-school.ru
</div>
</div>

</body>
</html> 

Новые элементы макета в HTML5

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

<article>, чем содержимому <header> или <footer>.

Новые элементы разметки в HTML5

Элемент	Значение / описание
<header>	Определение заголовка страницы или раздела.
<nav>	Определение области навигации страницы или раздела.
<section>	Определение логической области страницы или группировка контента.
<article>	Определение статьи (логически завершенного блока контента).
<aside>	Определение вторичного или связанного контента.
<footer>	Определение завершителя страницы или раздела.
<details>	Определяет дополнительные детали.
<summary>	Определяет заголовок для элемента <details>.

Следующий пример имеет такую же структуру, как рассмотренный пример с применением тегов <div>. Однако многие из элементов <div> в нем заменены новыми элементами HTML5. Например заголовок помещен внутри элемента <header>, меню навигации — в элементе <nav>, а статьи — в отдельных элементах <article>.

Ниже приведена визуализация макета с использованием тегов HTML5 для раметки страницы:

<header>

<nav>

<section>

<footer>

Пример: Макет на основе элементов HTML5

Главное меню HTML Элементы HTML Атрибуты HTML Таблицы …	Основной контент…
Copyright © 2017 wm-school.ru

<!DOCTYPE html>
<html>
<head>
<style>
#page {
    width: 100%;
}
header {
    background-color:#0095B6;
}
nav>ul {
    list-style: none;
    padding:5px;
}
nav {
    background-color:#dddddd;
    height:200px;
    width:30%;
    float:left;
    padding:5px;        
}
section {
    background-color:#eeeeee;
    height:200px;
    width:70%;
    float:left;
    padding:5px;    
}
footer {
    background-color:#0095B6;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<div>
<header>
<h2>Шапка сайта</h2>
</header>

<nav>
<b>Главное меню</b>
<ul>
  <li>HTML Элементы</li>
  <li>HTML Атрибуты</li>
  <li>HTML Таблицы</li>
  <li>...</li>
</ul>
</nav>

<section>
<h2>Заголовок</h2>
<p>Основной контент...</p>
</section>

<footer>
Copyright © 2017 wm-school.ru
</footer>
</div>

</body>
</html>

---

---

Типовые макеты | htmlbook.ru

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

Макеты по ширине

Различают пять типов макетов, связанных с шириной:

• фиксированные;
• резиновые;
• эластичные;
• адаптивные;
• комбинированные.

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

Альтернативные названия: фикс (жарг.), fixed (англ.), фиксированный дизайн.

Макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах (рис. 5.1).

Рис. 5.1. Фиксированный макет в браузере

Преимущества

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

Недостатки

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

Сайты

Резиновый макет

Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.

Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них (рис. 5.2).

Рис. 5.2. Резиновый макет в браузере

Преимущества

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

Недостатки

• На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Здесь помогает ограничение ширины контента с помощью свойства max-width. Опять же некоторые владельцы больших мониторов уменьшают окно браузера до комфортных для них размеров.
• Резиновые макеты сложнее верстать и отлаживать в разных браузерах.

Сайты

Эластичный макет

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

Преимущества

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

Недостатки

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

Сайт

Адаптивный макет

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

Преимущества

• Этот тип макета наиболее удобен для пользователя, поскольку не зависит от разрешения и ширины окна браузера, приспосабливаясь под них.
• Макет комфортно можно смотреть на любом устройстве.

Недостатки

• Это самый сложный тип из всех макетов, ведь, по сути, вместо одного требуется сделать несколько макетов со своей графикой и CSS, а также прописать механизм определения разрешения монитора или ширины окна браузера.
• За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.

Сайт

• Вид сайта http://www.w3.org показан на рис. 5.3. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта сменится (рис. 5.4).

Рис. 5.3. Сайт W3C при обычной ширине

Рис. 5.4. Сайт W3C при узкой ширине

Комбинированный макет

Альтернативные названия: гибрид, hybrid (англ.).

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

Рис. 5.5. Комбинированный макет

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

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

Сайт

Макеты по колонкам

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

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

Макеты — HTML Academy

Макеты и проекты

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

Макет для тренировки «Кошачий питомник»

Сложность:

Большой и пушистый макет

Макет для тренировки «Здоровая мама»

Сложность:

Сервис доставки здорового питания

Макет для тренировки «Дизайнерская мебель»

Сложность:

Сайт по продаже дизайнерской мебели

Макет для тренировки «Магазин косметики Maroon»

Сложность:

Интернет-магазин косметики Maroon

Макет для тренировки «Школа английского языка»

Сложность:

Школа английского языка CleverBaby

Макет для тренировки «Детский планетарий»

Сложность:

Лендинг современного планетария

Макет для тренировки «Blade Agency»

Сложность:

Сайт fashion-эвента

Макет для тренировки «Магазин запчастей»

Сложность:

Интернет-магазин запчастей

Проект на JavaScript «Счётчик калорий»

Сложность:

Приложение для расчёта нормы калорий

Релиз в 2020 году

Проект на JavaScript «Бесконечная карусель товаров»

Сложность:

Виджет для пролистывания картинок с товарами

Релиз в 2020 году

Проект на JavaScript «Канбан-доска»

Сложность:

Доска для управления планами и задачами

Релиз в 2020 году

Проект на JavaScript «Конструктор сайтов»

Сложность:

Приложение для быстрого создания страниц сайтов

Релиз в 2020 году

Проект на JavaScript «Конструктор планировки квартиры»

Сложность:

2D-планировщик квартиры

Релиз в 2020 году

Проект на JavaScript «Заказ доставки в интернет-магазине»

Сложность:

Страница заказа доставки

• проект сделан на основе тестового задания компании-работодателя
• эталонное решение одобрено нанимающим техлидом

Релиз в 2020 году

Проект на JavaScript «Прогноз погоды»

Сложность:

Приложение с прогнозом погоды в российских городах

• проект сделан на основе тестового задания компании-работодателя
• эталонное решение одобрено нанимающим техлидом

Релиз в 2020 году

Проект на JavaScript «Интернет-магазин»

Сложность:

Каталог товаров в интернет-магазине

• проект сделан на основе тестового задания компании-работодателя
• эталонное решение одобрено нанимающим техлидом

Релиз в 2020 году

Макет сайта | htmlbook.ru

Чтобы получить подробное представление о вёрстке на HTML5 пройдем весь процесс работы, начиная с получения графического макета и заканчивая публикацией сайта. В качестве примера сверстаем страницы сайта lionindesert.ru представленные на рис. 6.1.

а. Главная страница сайта

б. Внутренняя страница

Рис. 6.1. Макеты сайта lionindesert.ru

Дизайнер подготовил макеты в программе Adobe Illustrator и одновременно экспортировал их в формат PSD (Adobe Photoshop), так что все необходимые начальные изображения у нас имеются. Здесь надо учесть, что вёрстка это процесс творческий и возможно несколько решений одной задачи, поэтому с графикой придётся работать активно, готовя изображения под своё решение. Один большой PSD-файл надо превратить в набор небольших рисунков, которые будут выводиться в браузере с использованием HTML и CSS. Предполагаем, что верстальщик владеет программой Photoshop и может в ней выполнить какие-то типовые действия вроде вырезания фрагмента картинки и сохранения его в подходящем для веба формате. Либо верстальщик работает в паре с дизайнером и чётко указывает ему, что надо получить.

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

Рис. 6.2. Задачи для вёрстки

Макет комбинированный, шапка и подвал занимают всю ширину веб-страницы, а основная часть имеет фиксированную ширину 760 пикселов.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как поймать льва в пустыне?</title>
  <link rel="stylesheet" href="http://htmlbook.ru/lion.css">
  <!--[if lt IE 9]> 
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  <![endif]-->
 </head>

Базовый HTML5 шаблон для любого проекта

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

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

<!doctype html> <html lang=»en»> <head> <meta charset=»utf-8″> <title>The HTML5 Herald</title> <meta name=»description» content=»The HTML5 Herald»> <meta name=»author» content=»SitePoint»> <link rel=»stylesheet» href=»css/styles.css?v=1.0″> <!—[if lt IE 9]> <script src=»//html5shiv.googlecode.com/svn/trunk/html5.js»></script> <![endif]—> </head> <body> <script src=»js/scripts.js»></script> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!doctype html>   <html lang=»en»> <head>   <meta charset=»utf-8″>     <title>The HTML5 Herald</title>   <meta name=»description» content=»The HTML5 Herald»>   <meta name=»author» content=»SitePoint»>     <link rel=»stylesheet» href=»css/styles.css?v=1.0″>     <!—[if lt IE 9]>     <script src=»//html5shiv.googlecode.com/svn/trunk/html5.js»></script>   <![endif]—> </head>   <body>   <script src=»js/scripts.js»></script> </body> </html>

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Doctype

Первая часть — Document Type Declaration (объявление типа документа) или doctype. Это просто способ сказать браузеру, или любому другому парсеру, какой тип документа рассматривается. Для HTML файлов необходимо указывать версию HTML. Doctype всегда объявляется первым в самом верху HTML документа. Давным-давно объявление типа документа было трудно запоминаемым и сложным занятием. Пример строгого объявления XHTML 1.0:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»    «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Переходной HTML4:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»    «http://www.w3.org/TR/html4/loose.dtd»>

Эти длинные строки текста не влияют на производительность (загружается всего-то пара лишних байт), но в HTML5 вообще решили избавиться от такой сложности. Теперь объявление типа документа выглядит так:

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

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

Тег html

Следующий по списку в любом HTML документе – тег html. В HTML5 он несильно изменился. В нашем примере выше в этом теге мы добавили атрибут lang со значением en, что означает, что наш документ будет на английском языке. При использовании синтаксиса XHTML необходимо добавлять атрибут xmlns. В HTML5 этого делать больше не нужно, и даже атрибут lang стал необязательным. Документ пройдет валидацию и без этого атрибута. На данный момент мы имеем:

<!doctype html> <html lang=»en»> </html>

<!doctype html> <html lang=»en»>   </html>

Тег head

Следующая часть страницы – секция head. Первая строка внутри тега задает кодировку символом документа. Данный метатег был упрощен и на данный момент опциональный, но рекомендуемый. Раньше нужно было записывать что-то типа:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

В HTML5 объявление кодировки свели к минимуму:

Почти в 100% случаев вы будете использовать значение utf8. Подробное объяснение различий в кодировках выходит за рамки данной главы, да и оно, скорее всего, будет вам неинтересно. Но если же вам все-таки интересно, можете почитать о кодировках на W3C или WHATWG.

Обратите внимание: Объявление кодировки

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

<title>The HTML5 Herald</title> <meta name=»description» content=»The HTML5 Herald»> <meta name=»author» content=»SitePoint»> <link rel=»stylesheet» href=»css/styles.css?v=1.0″>

<title>The HTML5 Herald</title> <meta name=»description» content=»The HTML5 Herald»> <meta name=»author» content=»SitePoint»>   <link rel=»stylesheet» href=»css/styles.css?v=1.0″>

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

Самое главное в коде выше это объявление стилей, которые задаются через обычный тег link. Кроме href и rel тегу link не нужны больше никакие атрибуты. Атрибут type необязателен, да и раньше он не нужен был для объявления типа контента стилей.

Поддержка старых браузеров

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

Данный документ, естественно, не пройдет валидацию и в нем будут проблемы с доступностью, зато отрисуется он нормально почти во всех браузерах – за исключением старых версий IE. В версиях до IE9 к нераспознанным тегам стили не применяются. Движок их видит как «unknown elements», так что вы не сможете присвоить им стили или как-то изменить их поведение. Это относится не только к тегам, которые мы придумали, но и ко всем тегам, которые были разработаны после выхода данных версий браузера. А значит, ко всем новым тегам в HTML5.

Хорошая новость в том, что на момент написания статьи большая часть людей, кто еще пользуется IE, сидят на IE9 и выше. Так что для большинства разработчиков данная проблема отпадает сама собой. Однако если большой процент ваших пользователей сидит на IE8 и старше, вам просто придется сделать что-то, чтобы дизайн не развалился на части.

К нашему счастью есть выход из этой ситуации, и это небольшой код на JavaScript, написанный John Resig. Вдохновленный идеей Sjoerd Visscher, John Resig написал код, с помощью которого можно стилизовать HTML5 теги в старых версиях IE.

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

<!—[if lt IE 9]> <script src=»//html5shiv.googlecode.com/svn/trunk/html5.js»></script> <![endif]—>

<!—[if lt IE 9]> <script src=»//html5shiv.googlecode.com/svn/trunk/html5.js»></script> <![endif]—>

Также стоит отметить, что если вы используете JS библиотеки, которые работают с HTML5 свойствами или новыми API, то они уже могут содержать в себе скрипт, активирующий HTML5. Если это так, то ссылку на этот скрипт нужно удалить. Один из примеров – JS библиотека Modernizr, которая определяет поддержку современных HTML тегов и свойств CSS. На сайте Modernizr можно выбрать вариант библиотеки с кодом поддержки HTML5 тегов в старых версиях IE. Более подробно Modernizr мы рассматриваем в Appendix A.

Обратите внимание: HTML5 Shiv не решает всех проблем

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

В результатах исследования, опубликованных в 2013 году сайт UK Government Digital Service показал, что число людей, пользующихся государственными веб-сервисами с отключенным JS составляет 1.1%. По результатам другого исследования, проводимого на сайте Yahoo Developer Network (опубликовано в октябре 2010) количество пользователей с отключенным JS составляет 1% от мирового трафика.

Все остальное уже история

В оставшейся части нашего шаблона располагается открывающий и закрывающий тег body, закрывающий тег html, а также ссылка на скрипт. Как и с тегом link, тегу script не нужен атрибут type. Если вы писали на XHTML, то должны помнить, как там записывался скрипт:

<script src=»js/scripts.js» type=»text/javascript»></script>

<script src=»js/scripts.js» type=»text/javascript»></script>

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

<script src=»js/scripts.js»></script>

<script src=»js/scripts.js»></script>

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

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

Автор: Louis Lazaris

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Шаблоны HTML5 | htmlbook.ru

Оригинал: http://html5doctor.com/html-5-boilerplates

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

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

HTML5 за 5 секунд

Уберпросто получить разметку, которая определяется как HTML5 — достаточно изменить ваш DOCTYPE с имеющегося на этот:

<!DOCTYPE html>

Вот и все! Больше ничего не требуется.

Google уже это сделал. Проверьте его домашнюю страницу, где всё написано в одну строку:

<!doctype html><head><title>HTML5 - Поиск в Google</title><script>...

Самое смешное, что сама страница Гугла и с результатами поиска не проходит валидацию, потому что содержит ряд ошибок, но это нормально. Они всё равно получают преимущества (например, нет атрибута type элемента <script>) за счёт корректного DOCTYPE.

Минимизация HTML5

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

<!DOCTYPE html>
<title>Маленький HTML5</title>
<p>Привет, мир</p>

Возникли некоторые разногласия по поводу валидации этого шаблона при удалении тега <title>. Обозреватель DOM от Хикси говорит что всё в порядке, валидатор W3C тоже, при вводе разметки вручную. Но валидатор Хенри Сивонена сообщает об ошибке без тега <title>. Валидатор W3C также говорит об ошибке, когда вы указываете URL. Надеюсь с этим разберутся в ближайшее время.

Прим. пер. Разобрались. Теперь <title> является обязательным элементом.

HTML5 законченный и совместимый

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

Мы также включили HTML5 shiv, чтобы можно было добавлять стиль к элементам в IE. Обратите внимание, что вы должны включить этот скрипт в элемент <head>.

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

Вот он — валидный и полный шаблон документа на HTML5.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>HTML5</title>
  <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <style>
   article, aside, details, figcaption, figure, footer,header,
   hgroup, menu, nav, section { display: block; }
  </style>
 </head>
 <body>
  <p>Привет, мир</p>
 </body>
</html>

Если вы хотите экспериментировать с HTML5, JS Bin по умолчанию предоставляет шаблон HTML5, с которым можно играть.

HTML Layout Элементы и методы

---

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

---

Пример

Лондон — столица Англии. Это самый густонаселенный город в Соединенном Королевстве с населением более 13 миллионов человек.

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

Попробуй сам »

---

HTML Layout Elements

HTML имеет несколько семантических элементов, которые определяют различные части веб-страницы:

— определяет заголовок для документа или раздела