Из серии статей «HTML5 и CSS3 – наступает время пользоваться»
Продолжение статьи Чем нас радует CSS3
Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …
Как хорошо, что придумали компьютеры. Вы можете создать себе нужную атмосферу, чтобы в спокойной обстановке начать творить. Собственно этим мы сейчас и займёмся.
Для выполнения заданий вам потребуются (будет повод обновиться):
| Программное обеспечение или ресурс | Требуемая версия |
| Notepad++, или любой текстовый редактор, который не добавляет лишнего в начало файла с кодировкой utf-8 |
— |
| Mozilla Firefox Opera Chrome |
4+ 11.10+ 11+ |
Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5. Пройдите по ссылке http://html5test.com, там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?
В этом тьюториале, мы:
- создадим с вами страницу по стандарту HTML5
- воспользуемся новыми семантическими элементами,
- немного порисуем,
- проверим как выводится видео на нашей странице,
- проверим работу новых элементов формы.
Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css. В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.
Готовим каркас страницы
Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.
Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег <!DOCTYPE HTML>. Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … public … transitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.
Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.
Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.
Всё что мы здесь описали есть в листинге №1:
Листинг 1. Базовая структура документа HTML5
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Инвесторы видят перспективу</title> <link rel="stylesheet" href="styles.css" /> </head> <body> </body> </html>
Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу <html> больше ничего не нужно кроме lang. Для метатега достаточно написать charset. Кроме того, для тега link не нужно указывать type.
Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.
Делаем разметку контента
Разместим на каркасе семантические блоки
Теперь давайте поточнее определимся с тем, что у нас будет размещаться на странице. Будем исходить из следующего: нам нужно по максимуму использовать новые семантические элементы HTML5.
Наша страница будет служить для показа полного текста новости о компании, которой посвящён сайт. На неё будет происходить переход либо с главной страницы, где размещаются последние новости, либо из архива новостей.
Разместим блоки в контейнере <body></body>. Будем придерживаться следующей последовательности этих элементов:
– header
– – hgroup
– nav
– article
– – header
– – “content”
– – section
– – – header
– – – “content”
– footer
В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer, в котором мы разместим дополнительную информацию о контенте наших страниц.
Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами <body> … </body>.
Листинг 2. Размещение семантических блоков HTML5
<header class="mainH"> <hgroup> <h1>ООО Рога и копыта</h1> <h2>Полный текст новости</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Архивы новостей</a></li> </ul> </nav> <article> <header> <time datetime="2011-04-26" pubdate> <span>Апр</span> 26 </time> <h1> <a href="#" title="Ссылка на новость" rel="bookmark"> Инвесторы видят перспективу </a> </h1> </header> <p>Ничто не мешает людям воспользоваться рогами зайцелопа. Однако копыт у него нет.</p> <section> <header> <h1>Что думает общественность</h1> </header> <p>В реальности существует только Ubuntu с таким странным именем "Зайцелоп".</p> </section> </article> <footer> <p>© 2011 ООО Рога и копыта. Свои права мы держим в надёжном месте.</p> </footer>
Теперь страницу можно рассмотреть в браузере. Однако, она пока выглядит невзрачно. Но мы ведь не зря уже позаботились и подключили файл со стилями.
Покрасим фасад
У нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей 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+, они показывают страницу одинаково — проверено.
Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать > в селекторе? Тогда пишите свои вопросы в комментариях.
Далее, в части №2 порисуем, выведем видео и проверим новые элементы формы.
HTML5 и CSS3 – начнём верстать. Часть 2
Хром 11 получил в тесте на поддержку стандарта 278 баллов, больше чем Опера и Mozilla. Почему бы его тоже не добавить в список. ps. пытался вчера зарегистрироваться на сайте, письмо так и не пришло.
В последнее время хром плохо себя вёл — память много кушал, вот я его и обошёл вниманием 🙂
Сейчас я его запустил, посмотрел как он себя ведёт.
И думаю, что соглашусь с вами — теперь он поменьше кушает, и заслуживает место в топе, тем более он самый «балльный» из тройки браузеров.
А мне пришло письмо, что вы зарегистрировались. Странно, что вам не пришло. Может оно попало в спам?
ММ вопрос а когда HTML5 будет поддерживатся всеми браузерами? на все 100?
Мне нужно взглянуть в мой хрустальный шар.
Так … ммм … всё как-то смутно…
ОООО я вижуууу…
А нет, это только хром
ммм…
ну ничего продолжу сеанс завтра 🙂
Привет, если у Вас :
,
то зачем закрывать одиночные тэги (meta, link) "/>" ?
Lex если хочешь написать какие нибудь теги используй расширенные символы.
Пока вопрос не понятен.
например вместо < используй <
Добрый день!
Как я понял, в HTML5 закрытие одиночных тэгов типа meta,link,img,br и т.д. с помощь «/>» не обязательно?
У Вас в примере «/>» есть, у других — нет, а в третих вперемешку. Протестил в валидаторе, ему вроде без разницы, но инетересно Ваше мнение.
Второе, обязательно ли включать в параметры тэга html пространство имен и/или язык: «<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">» или оно и так неявно подключается?
И третье, в css файле у Вас идут конструкции типа: «article > section, article > header time span», хотелось бы узнать, что сие чудо значит? 😯
Наконец-то могу написать ответ, что-то маршрутизаторы расшалились по пути от меня до сайта.
1. На счёт закрывать или не закрывать: здесь сейчас всё завязано на культуру вёрстки, хотя можно ещё добавить что строго закрывая теги вы создаёте XHTML, а оставляя некоторые теги не закрытыми вы создаёте HTML.
2. Читаем «Готовим каркас страницы»
3. article > section правило оформления применяется для дочерних элементов section находящихся непосредственно в контейнере article на первом уровне.
здраствуйте!
подскажите а как мне сделать контент сайта в рамку?к примеру как на этом сайте,только что бы он не выделен был,а просто был как бы в блоке 🙂 голову ломаю немогу сделать)
Александр, я надеюсь ваш любимый браузер не IE 🙂
Если хотите как у меня, то можно и на разметку глянуть.
В хроме F12
вкладка Elements
в ней раскрываете body и div
выбираете div и смотрите на правую колонку (Styles)
для вас будут интересны дивы класса wrapperPage, wrapper, content, sidebar
В head написала все, как у Вас. В body написала: Привет!.
Браузеры (результат теста):
— Chrome 26 (468 баллов),
— Opera 12.15 (404 балла),
— Yandex Browser 1.5 (434 балла),
— Safari 5.1.7 (278 баллов),
— Firefox 20.0 (394 балла),
— Explorer 9.0 (138 баллов).
Все, кроме Оперы показывают крокозябру. Файлы сохранены в кодировке utf-8. В хтмл указано lang=»ru» и в meta charset=»utf-8″ (все, как Вы писали в этом уроке).
❓ Как сделать так, чтоб все браузеры распознавали кириллицу?
Ого, у вас все эти браузеры стоят?
Вовсеоружии 🙂
Даа, кодировка символов это одна из ступеней, которую придётся преодолеть на пути к цели.
Если нутро странички оформлено также как у меня, то нужно копать в сторону текстового редактора.
Чем вы пользуетесь?
Есть вероятность что вы пишете в кодировке win1251.
Кроме этого, если вы пользуетесь локальным веб-сервером, возможна следующая ситуация:
вы написали страничку в utf8, однако сервер в своих заголовках, дезинформирует браузер указывая другую.
Поэтому, что бы решить эту проблему, мне нужно больше информации.
Хороший блог. Плюсую)!
Действительно хорошая статья. И ответы на комменты хорошие. Чувствуется уровень. Только маленькое замечание: в листинге 1 закройте body. С уважением!
Подправил, спасибо.
Начинающий!
застрял на CSS
________________
бал на сайте http://html5test.com,
Your browser scores 467 out of 555 points
________________
все проделал как написано выше
вот как получается, что Css не помогает
http://yadi.sk/d/FSAKQIfIRHMLX
http://yadi.sk/d/Z1pPypwlRHMMW
http://yadi.sk/d/5C67MXR5RHMMr
http://yadi.sk/d/aRjY0kcQRHMbp
http://yadi.sk/d/v-ui4LnjRHMc5
________________________
короче корячился я но так запустить с CSS не получилось 😥
Приветствую!
Замечательно что вы начали осваивать внутренности веба )
Одна из распространенных ошибок — это опечатки.
Постарайтесь сами найти ошибку.
то stule stules чета касяк у тебя.
👿 
Будьте вежливым. (искреннее пожелание)
Спасибо за намёк, исправил.
Хорошая статья для новичка.