HTML5 и CSS3 — начнём верстать. Часть 1

Из серии статей «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>. Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … publictransitional или 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>&copy; 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

Понравилась статья? Посоветуйте другу

Количество коментариев: 20

  1. Хром 11 получил в тесте на поддержку стандарта 278 баллов, больше чем Опера и Mozilla. Почему бы его тоже не добавить в список. ps. пытался вчера зарегистрироваться на сайте, письмо так и не пришло.

    • Дмитрий Артанов Дмитрий Артанов

      В последнее время хром плохо себя вёл — память много кушал, вот я его и обошёл вниманием 🙂
      Сейчас я его запустил, посмотрел как он себя ведёт.
      И думаю, что соглашусь с вами — теперь он поменьше кушает, и заслуживает место в топе, тем более он самый «балльный» из тройки браузеров.

      А мне пришло письмо, что вы зарегистрировались. Странно, что вам не пришло. Может оно попало в спам?

  2. ММ вопрос а когда HTML5 будет поддерживатся всеми браузерами? на все 100? :mrgreen:

    • Дмитрий Артанов Дмитрий Артанов

      Мне нужно взглянуть в мой хрустальный шар.
      Так … ммм … всё как-то смутно…
      ОООО я вижуууу…
      А нет, это только хром
      ммм…
      ну ничего продолжу сеанс завтра 🙂

  3. Привет, если у Вас :

    ,
    то зачем закрывать одиночные тэги (meta, link) "/>" ?

  4. Дмитрий Артанов Дмитрий Артанов

    Lex если хочешь написать какие нибудь теги используй расширенные символы.
    Пока вопрос не понятен.
    например вместо < используй &lt;

  5. Добрый день!
    Как я понял, в HTML5 закрытие одиночных тэгов типа meta,link,img,br и т.д. с помощь «/>» не обязательно?
    У Вас в примере «/>» есть, у других — нет, а в третих вперемешку. Протестил в валидаторе, ему вроде без разницы, но инетересно Ваше мнение.
    Второе, обязательно ли включать в параметры тэга html пространство имен и/или язык: «<html xmlns="http://www.w3.org/1999/xhtml&quot; lang="ru">» или оно и так неявно подключается?
    И третье, в css файле у Вас идут конструкции типа: «article > section, article > header time span», хотелось бы узнать, что сие чудо значит? 😯

    • Дмитрий Артанов Дмитрий Артанов

      Наконец-то могу написать ответ, что-то маршрутизаторы расшалились по пути от меня до сайта.
      1. На счёт закрывать или не закрывать: здесь сейчас всё завязано на культуру вёрстки, хотя можно ещё добавить что строго закрывая теги вы создаёте XHTML, а оставляя некоторые теги не закрытыми вы создаёте HTML.
      2. Читаем «Готовим каркас страницы»
      3. article > section правило оформления применяется для дочерних элементов section находящихся непосредственно в контейнере article на первом уровне.

  6. Александр

    здраствуйте!
    подскажите а как мне сделать контент сайта в рамку?к примеру как на этом сайте,только что бы он не выделен был,а просто был как бы в блоке 🙂 голову ломаю немогу сделать)

    • Дмитрий Артанов Дмитрий Артанов

      Александр, я надеюсь ваш любимый браузер не IE 🙂
      Если хотите как у меня, то можно и на разметку глянуть.
      В хроме F12
      вкладка Elements
      в ней раскрываете body и div
      выбираете div и смотрите на правую колонку (Styles)
      для вас будут интересны дивы класса wrapperPage, wrapper, content, sidebar

  7. Анастасия

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

  8. Максим

    Хороший блог. Плюсую)!

  9. Действительно хорошая статья. И ответы на комменты хорошие. Чувствуется уровень. Только маленькое замечание: в листинге 1 закройте body. С уважением!

  10. Сергей

    Начинающий!
    застрял на 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 не получилось 😥

    • Дмитрий Артанов Дмитрий Артанов

      Приветствую!
      Замечательно что вы начали осваивать внутренности веба )
      Одна из распространенных ошибок — это опечатки.
      Постарайтесь сами найти ошибку.

  11. то stule stules чета касяк у тебя. :mrgreen: 👿 :mrgreen:

    • Дмитрий Артанов Дмитрий Артанов

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

  12. Хорошая статья для новичка.

Добавить комментарий



[ Ctrl + Enter ]