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

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

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

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как "Untitled Section" (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как "Navigation" (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

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

Связанные посты.

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

Элемент Article

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

XHTML

2010

16apr

Sample Post 1

38

Curabitur ut congue hac, diam turpis[…]

2010 16 apr Sample Post 1 38 Curabitur ut congue hac, diam turpis[…]

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации ) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

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

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

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

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

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

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

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

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

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

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

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

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

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

Новое в HTML5 и CSS3

Решил проверить, можно ли(?) сверстать адаптивный ко всем устройствам сайт, БЕЗ использования технологий HTML5 и CSS3 .

Пробую!

Верстал в кодировке "ANSI" , и с полной служебной записью: "HTML 4.01 Transitional" , вместо положенной по правилам HTML5:

Новые тэги: header, section, article не использовал. Оказалось, достаточно блочной вёрстки, как обычно на тэгах div .

Новый атрибут формы у тэгов input "placeholder" (подсказка) в браузере IE8 НЕ сработал. В остальных - работает .

Аналогично. Новый атрибут "типа" у тэгов input type="email" срабатывает только в современных браузерах.

Атрибут "value" использовал по-прежнему для внесения значений в формы.

Самое главное! Сначала сайт верстается на обычном мониторе, а уже потом в тэг head вносится строчка кода:

Такая запись говорит браузеру (**так объясняется в курсе! ), чтобы он правильно масштабировал контент страницы под используемое устройство .
Хотя, на самом деле, такая запись браузеру ровным счётом ничего не говорит . Это "обращение" к поисковикам .
А вот они уже о-о-очень "ревностно" относятся к наличию/отсутствию подобной записи в тэге head , особенно в последнее время. Проверено!

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

**К примеру. Проводя испытания такой строчки кода, я внёс её в неадаптированную страницу сайта, и... ... ... . И тут же быстро убрал!

Проверив на смартфоне её отображение, увидел, что браузер смартфона выдал "жуть", т.е. показал ПОЛНЫЙ РАЗМЕР страницы, снабдив возможностью длиннющего горизонтального скролла .

Новый атрибут для тэгов img "srcset" в испытываемой версии "HTML 4.01" не работает!

Напомню, и особо выделю, что я никаких медиа-запросов НЕ делал . Испытания же!

Примеры записей в таблице CSS

Прежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.

Свойство background-size: cover; лучше НЕ использовать . Рисунки "режутся", т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.

И напротив!

Свойство background-size: contain; работает ОТЛИЧНО! Во всех браузерах! Оптимально для "центровых " рисунков . Оно их великолепно масштабирует под любой размер монитора.

Аналогично.

Это же свойство background-size: contain; сработало ОТЛИЧНО и для "боковых " рисунков , т.е. левых/правых. Пробовал!

Боковые рисунки выводил через тэги span , прописав им float: left или right , но ГЛАВНОЕ!
Главное , что выводил рисунок, как фоновый на 2 символа неразрывного пробела , дав тексту размер, равный высоте фонового рисунка (** уменьшив размер текста, рисунок уменьшается пропорционально, без искажений) .

Схемы вывода ниже.

  <— это HTML

Span#proba8 {   <— здесь CSS
background: url(images/proba8.jpg) no-repeat;
float: left;
font-size: 240px;
background-size: contain;
margin: 0 20px;
padding-bottom: 0;
}

Пробный рисунок, выводимый по данной выше схеме, имел реальный размер 210х240px . Он хорошо адаптировался, и полностью отображался на мониторе с разрешением 120х150 .

Всё работает! НО!

Проверив использование такой схемы вывода на своём "Полигоне" , обнаружил появление значительных пустот до и после рисунков , при просмотре страницы на смартфоне. Особенно это было заметно при вертикальном просмотре . Даже!
Даже несмотря на то, что в правилах CSS ей было прописано: верхние/нижние отступы убрать!

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

Тем более, что размер самого большого бокового рисунка позволял такое сделать.

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

**И последнее. Файл "обнуления" стилей "reset.css" к этой странице не подключал. Для таких простых сайтов он не нужен. Да, и... ... не люблю я его. Пропи-и-сываешь потом всё заново.

Ну, а серьёзно - скорость загрузки . Каждый дополнительный файл - это обращение к серверу .

Теперь несколько строк об адаптации.

Сначала привёл пример записи кода для уменьшения двух полей ввода (имя и е-мейл) в тэгах формы до размеров в 200px (в случае их просмотра на мобильных устройствах) так, как это давалось в мини-курсе . Странная запись!

media screen and (max-width:900px) {

width:200px;}}

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

@media (max-width:900px) {
.subscribe input, .subscribe input {
width:200px;}}

*Prim. Используя фиксированную ширину , лучше указать её максимальный размер .

Оптимальным для фиксированной ширины считается размер 1200px±

Эти "медиа-запросы" мне напомнили конструкцию if (условие) {выполнить} из языков: PHP и JavaScript . Ими мы перестраиваем стили сайта в зависимости от размеров экранов.

Справка

Для корректной работы со шрифтами, советуют указывать их размеры не в "px" , а в "em" , и ещё сами шрифты брать из так называемых "безопасных шрифтовых стеков CSS" .

Сделал в фотошоп специальный рисунок, из которого можно узнать, какие именно шрифты относятся к "безопасным" , а главное - почему(?!):

1em = 16px

Правда, нужно сказать, что такой перевод довольно "условен", хотя в мини-курсе об этом - ни слова!

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

Проба единиц для адаптивной вёрстки

Попробовал. Некоторые размеры шрифтов прописывал через эти единицы. Работает! Но мне привычнее иметь дело с пикселями. Вот ими и пользовался при вёрстке этой страницы.

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

Другими словами, размер пикселя у каждого устройства будет свой , и, если не "дёргаться" от одной единицы к другой, а всё выражать в одних единицах измерения, результат будет положительным!

Что, собственно, Вы и видите на своём устройстве, просматривая эту страницу.

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

Поэтому, потренировавшись немного на этой, пробной странице, "плюнул" на всякие адаптивные вёрстки, и стал верстать обычным, привычным для меня способом. Надоело!

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

Кому адаптивность всё ж таки нужна, следует обратить внимание на инструменты, уже встроенные в браузеры.

Полезные инструменты веб-разработки

Для разработки адаптивной вёрстки, в браузере Firefox есть отличные(!) инструменты.

Такая вкладка открывается, при нажатии клавиши F12

Кнопка "адаптивный дизайн" позволяет просмотреть, как страница будет выглядеть в разных размерах мониторов, и при их разной ориентации (вертикально/горизонтально).

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

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

Тем же, у кого нет такой возможности проверять свои веб-страницы, могу посоветовать интересный ресурс для проверки адаптивности: "Quirktools" (откроется в новом окне) .

**НО! Нужно помнить!
Он показывает лишь страницы, уже загруженные в интернет .
Кроме того - его сервер очень часто "падает" (т.е. недоступен).

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

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

Заключение, выводы

Как уже писал, потренировавшись немного здесь, на этой странице, "плюнул" на адаптивность, и стал верстать обычным способом. И это вовсе не случайно!

Во-первых: в разы возрастает сложность вёрстки, а вместе с этим и размер CSS-кода.
Чем такое плохо, подробно здесь: "Создание сайтов" (в новом окне) .

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

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

В-четвёртых: часто вижу сайты, лишь считающиеся адаптивными , а у самих контент обрезается так, что приходится их вид уменьшать в 2-3 раза!

В-пятых: вытекает из четвёртого пункта. Так, какая разница(?!) , что мои неадаптивные странички на смартфонах приходится раздвигать пальцами до нужного размера. Да, и то! Исключительно ради удобства просмотра. Контент-то целёхонек!

Да, кстати, для моего сайта смартфоны и не критичны. Поскольку, более 97% посетителей приходят на него с нормальных компьютеров и планшетов, и менее 3% со смартфонов .

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

А зачем?!

Зачем делать сложнее то, что можно проще?! Без всяких "шаманских адаптивных плясок".

Вывод - незачем!

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

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

К тому же, стараться "угнаться" в коде (постоянно его увеличивая) за всеми возможными размерами существующих устройств - УТОПИЯ!

К примеру, на днях мой племянник показывал своё новое приобретение. Часы-смартфон , размером чуть больше спичечной коробочки.
И, что?!
Бросаться теперь "сломя голову" писать код под габариты спичечного коробочка?! А потом появится (а может, и уже появился) компьютерик размером с брошку. И, что?!
Снова код изменять?! Да, ну на фиг, такие "сайты-заморочки" делать! Проще... ...

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

Впрочем, это моё личное мнение. Кому всё же непременно хочется этим заниматься, пусть смотрит дальше.

Важное дополнение

Для желающих лучше разобраться в разных типах вёрсток, очень рекомендую сначала (прежде, чем изучать мини-курс) скачать, и почитать две хорошие, интересные статьи: "Адаптивная вёрстка или мобильная версия" и "Адаптивный дизайн" .

И кроме этого!

Обязательно почитайте статью и из нижнего приложенного архива.

Почему обязательно?!

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

Но самое главное(!) - по другой причине.

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

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

За шесть шагов мы с вами пройдем курс обучения по созданию адаптивной страницы в html и css3 для начинающих. Это будет подписная адаптивная страница.

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

Для редактирования файлов Вы можете использовать любой текстовый редактор, как простой блокнот, входящий в состав вашего набора Windows, так и более удобный Notepad++. Но конечно лучше для этого использовать Adobe Dreamweaver. Смотрите это на ваше усмотрение.

Вот содержимое файла index:

Создание адаптивной страницы в html5 и css3 для начинающих!

Получить Видеоурок "Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов!"

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

* Никакого спама, я вам гарантирую!

"Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов!"

Все шаги создания адаптивной страницы в html5 и css3:

Шаг первый: Создание разметки страницы в html5 и css3

Шаг второй: Назначение общих CSS стилей для создания адаптивной страницы в html5 и css3

Шаг третий: Назначение стилей для header в создании адаптивной страницы на html5 и css3

Шаг четвертый: Описание стилей CSS для формы подписки в создании адаптивной страницы на html5 и css3

Шаг пятый: Описание стилей основного контента в создании адаптивной страницы на html5 и css3

Шаг шестой: Делаем страницу адаптивной в html5 и css3

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

Чтобы получить этот видеурок вам нужно просто ввести свои имя и е-майл в поля которые расположены ниже или выше, как вам будет угодно!