Статьи

HTML5 та CSS3 - почнемо верстати. Частина 1

  1. Із серії статей «HTML5 та CSS3 - настає час користуватися» продовження статті Чим нас радує CSS3
  2. Готуємо каркас сторінки
  3. Робимо розмітку контенту
  4. пофарбуємо фасад

Із серії статей «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> & 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

Сподобалася стаття? порадьте другу


240. Цікаво, що у вас?
Примітка: Якщо комусь незрозумілі записи правил в лістингу, наприклад, вам незрозуміло навіщо потрібно використовувати> в селекторі?

Новости