Скрипты

coincompare-v1-4-мониторинг-статистики-криптовалют CoinCompare - это веб-приложение PHP, которое отображает общую информацию, интерактивные исторические диаграммы для более чем 1700 криптовариантов. Он...
josh-шаблон-для-разработки-на-laravel Josh Admin - это шаблон для разработчика, основанный на Laravel 5. Создайте ваш следующий проект на Laravel. Используйте эту тему и сохраните свое...
social-network-система-социальных-сетей Социальная сеть - PHP Social Networking System - мощный PHP-скрипт, разработанный, чтобы позволить вам создать свою собственную социальную сеть! Он...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Знакомство с HTML5. Что нового?

HTML5

HTML5 представляет собой последнюю версию основного языка разметки web – страниц.  За последние 10 лет HTML не имел серьёзных изменений, что является немного странным в соответствии с тем как стремительно развиваться web-технологии.  И вот наконец нам переставлен HTML5, и что же нового мы получили в этой версии, расскажет эта статья.

У HTML5 в сравнении с предыдущим XHTML не такие строгие правила, теперь вы можете:

  • Вы можете не использовать закрывающие теги.
  • Не использовать кавычки в значениях атрибута.
  • Использовать символы верхнего регистра в элементах и атрибутах.

Новые теги.
И так в HTML5 появились новые теги.

<header> 
<footer> 
<nav> 
<menu> 
<section> 
<article > 
<aside> 
<figure> 
<dialog> 
<time> 
<meter> 
<progress> 
<video> 
<audio> 
<details> 
<canvas> 
<command>

Есть также исключённые теги, которые являются неактуальными и не рекомендованы для использования.

<acronym> 
<applet> 
<basefont> 
<big> 
<center> 
<dir> 
<font> 
<frame> 
<frameset> 
<isindex> 
<noframes> 
<s> 
<strike> 
<tt> 
<u>

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

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

Структурные теги.

Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги <table> и <div>, чтобы создать структуру всей страницы, независимо от того с какой частью страницы мы работаем: шапкой, футером, меню или с другими общими разделами. Это не очень хороший способ построения структуры страницы, именно поэтому в HTML5 введены новые тэги для каждой части документа.

Теперь нам доступны следующие структурные теги:

<section> Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.

<header> Цель его состоит в том, чтобы определить верхнюю часть HTML документа.

<footer> Этот тег применяется для того, чтобы определить нижнюю часть документа.

<nav> Цель его в том, чтобы определить список ссылок на другие HTML страницы.

<article> Этот тег применяется для того, чтобы определить некоторую часть тестового содержимого документа.

Вот к примеру HTML код с новыми тэгами.

<html> 
<body> 
<header> 
<h1> Заголовок </h1> 
</header> 
<section> 
<article> <h2> Заголовок 1 </h2> <p> Некоторый текст... </p> </article> 
<article> <h2> Заголовок 2 </h2> <p> Некоторый текст.. </p> </article> 
<nav> 
<a href="/someURL"> Ссылка 1 </a> 
<a href="/someURL"> Ссылка 2 </a> 
</nav> 
</section> 
<footer> 
<p>Copyright 2011 My Company</p> 
</footer> 
</body> 
</html>

Как вы видите мы поместили название нашего документа в теги <header>. Затем мы добавили раздел к нашей странице при помощи тэга <section> и вложили в него 2 тега <article>, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг <nav>. И наконец мы создали нижний колонтитул нашей страницы при помощи тега <footer>.

Так и что же здесь особенного? Мы могли сделать тоже самое используя старый хороший тэг <div>. Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.

Новые блочные теги HTML5.

В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:

<aside>

<dialog>

<figure>

Тег <aside> используется для обозначения какой-то части текста, в пределах основного текста, например цитаты или сноски.

<section> Основной текст... <aside> Цитата ... </aside> </section>

Веб-браузер никак не выделяет текст заключенный в тэге <aside>, он используется для создания хорошей структуры HTML документа. Это по достоинству смогут оценить разработчики поисковых систем.
Следующий тэг <dialog> используется для создания диалогов между пользователями:

<dialog> 
<dt>Пользователь 1 </dt> 
<dd>Сообщение пользователя 1</dd> 
<dt>Пользователь 2 </dt> 
<dd>Сообщение пользователя 2</dd> 
</dialog> 

В тег <dialog> мы вложили еще два тэга: <dt> - содержащий имя пользователя и <dd>для отображения сообщения пользователя.

Третий тег <figure> используется для того чтобы указать название изображения.

<figure> 
<legend>Заголовок изображения</legend> 
<img alt="Некоторое изображение" src="/image.jpg" width="200" height="200"> 
</figure> 

Мы использовали тэг <legend> чтобы указать название изображения, тег <img>, чтобы вставить определенное изображение и тэг <figure> чтобы связать их вместе.
Что необходимо учитывать при использовании структурных и блочных тегов HTML5.
Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block; чтобы они должным образом отображались. Что касается старых версий Internet Explorer то необходимо так же добавить следующее:

<script> 
document.createElement('header'); 
document.createElement('footer'); 
document.createElement('section'); 
document.createElement('aside'); 
document.createElement('article'); 
document.createElement('nav'); 
</script>

Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега <script> есть по умолчанию, поэтому его мы можем не добавлять.

Встроенные теги.

У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:

<mark>

<time>

<meter>

<progress>

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

<p>Некоторая <m>очень важная часть</m> текста...</p>

Мы вставили определенную важную часть в тэг <m>.

Тег <time> используется для обозначения времени и даты в каком либо тексте, например:

<p>Сегодня в<time>18:30 24 ноября 2010 </time> ...</p>

Тег <meter> используется чтобы показать некоторые числа в определенном формате, например:

<p>ежемесячный доход<meter>$15,000</meter>...</p>

У тега <meter> есть 6 полезных атрибутов:

  • value - задает фактическое значение чего-то;
  • min - задает минимальное значение чего-то;
  • low - определяет предел, при достижении которого значение считается низким;
  • high - определяет предел при котором значение считается низким;
  • max - определяет максимальное значение чего-то;
  • optimum - определяет оптимальное значение чего-то.

Например:

<p> Концентрация сахара: <meter value="8.2" min="0" max="10.0" low="5.0" high="9.0" optimum="8.0">8.2</meter>. </p>

Последний новый тэг <progress> используется чтобы показать некоторую точку некоторого прогресса, например, процент завершения чего-то:

<p>Завершение: <progress value="100" max="500">20%</progress> </p>

Тег <progress> имеет два атрибута value - текущее значение прогресса и max - максимально значение прогресса.

Мультимедийные теги.

В HTML5 имеется два новых тэга, предназначенных для вывода мультимедиа <audio> и <video>.

Вот пример применения тега <audio>:

<audio src="/music.mp3" autoplay="autoplay" loop="1"> <p>Сейчас играет  ...</p> </audio>

У этого тега имеется три атрибута:

  • src - путь к звуквому файлу;
  • autoplay - определяет начать ли проигрываться файлу сразу после загрузки страницы в браузере;
  • loop - определяет сколько раз аудио должно проигрываться.

Тег <audio> позволяет разместить внутри себе другие тэги, содержащие некоторую информацию.
Тег <video> используется для того, чтобы вывести на страницу видео файлы.

<video src="/clip.avi">Клип...</video>

Атрибут src определяет путь к видео файлу.
Мультимедийные теги позволяют вывести аудио и видео файлы непосредственно в HTML документе и способствуют их индексации поисковыми системами.

Интерактивные теги.

В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:

<menu>

<command>

<details>

<canvas>

Тег <menu> являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег <menu> в HTML5 выполняет роль контейнера для тега <command>, который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки.

<menu> 
<command onclick="alert('first action')" label=" первое действие"/> 
<command onclick="alert('second action')" label=" второе действие"/> 
</menu> 

Используя эти тэги, мы можем создавать различные интерактивные меню.
Тег <details> используется чтобы показать некоторую дополнительную информацию, например поле справки.

<p> Некоторый контент <details>Информация справки</details> ... </p>

Тег <canvas> используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.

<script> 
var example = document.getElementById('sample'); 
var context = example.getContext('2d'); 
ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); 
</script>

<canvas id="sample" width="300" height="300"> Ваш браузер не поддерживает HTML5. </canvas> 

Атрибут ID используется для идентификации тега <canvas> как объекта DOM (Document Object Model). Далее указываются атрибуты ширины и высоты. Текст заключенный между тегами <canvas>будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.

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

  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...