Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> HTML

Основы верстки HTML5


HTML5 давно гуляет по просторам западного интернета, он стал популярным, но в России почему то не все хотят попробовать его в деле. Допустим у вас во дворе стоят два черешневых дерева, у одного мощный ствол, удобное расположение веток и ягодок на ней, а на другом дереве, мало того что оно царапает ноги когда вы поднимаете, так ещё и достаточно трудно добраться до ягод, которые окажутся ещё и не такими вкусными. Так на какое дерево, ягодками полезете вы?

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

<!DOCTYPE html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  Видите как просто?
  Продолжая сравнение, давайте посмотрим на то, как раньше мы должны были задавать кодировку страницы:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  И как сделать это можно сейчас:

<meta charset=utf-8>

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

<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">

  Вы можете написать эту:

<html lang=ru>

  Вставка на страницу стилей и скриптов так же упростилась, было так:

<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"  type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css" />

  Стало так:

<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">

  То есть явно указывать type в <script> и <link> теперь не обязательно, HTML5 делает это автоматически. Но в случае если конечно rel не однозначный, к примеру rel=alternate.
  Мы должны понимать, что IE был, есть и наверное будет, вместе со всеми своими… рвениями всё сделать по своему. Для того чтобы он начал понимать то что мы ему напишем на HTML5, применим скрипт понимаемости, в народе просто хак.

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

  Это научит его видеть мир в наших красках.
  Но, мы идём дальше и следующий шаг, это определение новых элементов блочными. В .css файле пишем:

aside, nav, footer, header, section { display: block }

  С этим всё. Для примера, я выбрал конструкцию шаблона для блога. Приведу пример его написания в HTML4 и HTML5, затем поясню различия.

  HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">
     <head></head>
     <body>
          <div id="header"> Шапка
               <div id="navigation">Навигация</div>
          </div>
 
          <div id="content">
               <div id="post">Пост</div>
               <div id="sidebar">Боковая колонка</div>
          </div>
 
          <div id="footer">Подвал</div>
     </body>
</html>

  И… что называется видим разницу.

  HTML5

<!DOCTYPE html>
    <html lang=ru>
    <head></head>
    <body>
        <header> Шапка
             <nav>Навигация</nav>
        </header>
 
        <section id="content">
             <article>Пост</article>
             <aside>Боковая колонка</aside>
        </section>
 
        <footer>Подвал</footer>
    </body>
</html>

  Чистый код, не правда ли? С HTML5 всё упростилось, а так же появились новые теги, которые более ясно отображают содержимое страницы как для нас, так и для поисковых роботов, для которых жизнь упростилась в разы. И так, рассмотрим новые теги по одному:

<header> — шапка сайта.
<nav> — меню или блок навигации. Лучше всего подходит для списка главных навигационных ссылок.
<aside> — боковая колонка (например, для формы авторизации или рекламы)
<article> — независимый текст, статья, обзор, урок, комментарий.
<section> — основной раздел документа.
<footer> — футер сайта (подвал)

  Как мы можем увидеть, тег section в большинстве случаев служит заменой тега div
  Использовать тег section следует зная данные правила:

  •   Не встраивайте в него скрипт и не используйте как декоративный блок.
  •   Не используйте его вместо тегов больше подходящий по смыслу, например nav или aside
  •   Без заголовка так же не рекомендуется использовать. Зато теперь в каждом теге section может быть свой заголовок H2, и таких блоков может быть несколько на странице.

  Дополнить список тегов можно ещё не столь важными, но тоже очень полезными тегами:
  <figure> — используется для группирования любых элементов, например, изображений и подписей к ним.
  <hgroup> — блок заголовков. Используется для группирования заголовков веб-страницы или раздела
  <mark> — выделение важного слова (<mark> в действии).
  <output> —определяет область вывода результата вычислений скриптов/программ.
  <time> — время. Пишется так <time>2013-01-29</time>

  Title у картинок исчез, остался только alt. 
  Для обозначения того что следует вводить в то или иное поле, появился атрибут placeholder и если его установить, то до клика по форме ввода, будет видна надпись, например «Введите пароль», если начать вводить данные, то надпись исчезнет, а если очистить, то атрибут снова покажется, хорошая замена скриптам, вот пример:

<input type="text" name="s" placeholder="Искать" >

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

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

  Конечный результат HTML5 верстки шаблона блога:

<!doctype html>
<html lang=ru>
  <head>
      <meta charset=utf-8>
      <title>HTML5</title>
      <link rel="stylesheet" href="style.css" />
      <!--[if IE]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
 </head>
 <body>
      <header> Шапка
           <nav>Навигация</nav>
      </header>
 
      <section id="content">
           <article>Пост</article>
           <aside>Боковая колонка</aside>
      </section>
 
      <footer>Подвал</footer>
   </body>
</html>

Просто загляденье. 


Дата публикации: 29.01.2013
Опубликовал: Сергей Кашурин
Просмотров: 663
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
чистка бойлера киев
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

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

Быть в курсе всех событий: