Введение в HTML5 для вебмастеров
- Новость
- Похожие новости
Admin в 03час. 11мин. пишет:
HTML5 является последней версией самого популярного языка разметки. HTML не претерпел существенных изменений за последние 10 лет. Это отчасти является странным, для быстроразвивающихся веб-технологий, и вот наконец мы получили новенький HTML5.
Для указания типа текущего документа в HTML5 достаточно просто указать:
# вы можете не использовать закрывающие теги;
# не использовать кавычки в значениях атрибута;
# использовать символы верхнего регистра в элементах и атрибутах.
Новые теги HTML5
В HTML5 появились следующие новые теги:
Остальное остается прежним, кроме некоторых тегов которые не являются актуальными и не рекомендуются для использования:
Поэтому если вы знакомы с HTML4 и XHTML, то у вас не возникнет никаких проблем в изучении HTML5. Новые тэги и атрибуты безусловно помогут вам в создании новых и модернизации старых сайтов, благодаря новым возможностям это будет намного легче, чем это было со старым хорошим HTML4.
Хорошо, но будет ли HTML5 работать со старыми браузерами? Ответ - "ДА", кроме новых тегов, естественно. Новые страницы, сделанные в HTML5 будут отображаться во всех браузерах, но пользователи новых браузеров увидят немного больше, а в некоторых случаях страница будет вообще смотреться по-другому.
Структурные теги.
Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги
Теперь нам доступны следующие структурные теги:
Вот к примеру HTML код с новыми тэгами.
Как вы видите, мы поместили название нашего документа в теги
Так и что же здесь особенного? Мы могли сделать тоже самое, используя старый хороший тэг . Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.
Новые блочные теги HTML5.
В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:
...
...
Веб-браузер никак не выделяет текст, заключенный в тэге
Следующий тэг
...
...
В тег
Третий тег
...
...
Мы использовали тэг
Что необходимо учитывать при использовании структурных и блочных тегов HTML5.
Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block; чтобы они должным образом отображались. Что касается старых версий Internet Explorer, то необходимо так же добавить следующее:
Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега
Встроенные теги.
У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:
...
...
Мы вставили определенную важную часть в тэг
Тег
...
...
Тег
...
...
У тега
Например:
...
...
Последний новый тэг
...
...
Тег
Мультимедийные теги.
В HTML5 имеется два новых тэга, предназначенных для вывода мультимедиа
Вот пример применения тега
...
...
У этого тега имеется три атрибута:
autoplay - определяет, начать ли проигрываться файлу сразу после загрузки страницы в браузере;
loop - определяет, сколько раз аудио должно проигрываться.
Тег
Тег
...
...
Атрибут src определяет путь к видео файлу.
Мультимедийные теги позволяют вывести аудио- и видео-файлы непосредственно в HTML документе и способствуют их индексации поисковыми системами.
Интерактивные теги.
В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:
Тег
...
...
Используя эти тэги, мы можем создавать различные интерактивные меню.
Тег
...
...
Тег
...
...
Атрибут ID используется для идентификации тега
Мы можем начать использовать новые возможности HTML5 уже сегодня. Некоторые простые приемы будут работать даже в старых браузерах. Если вы планируете построить новый веб-сайт, вы можете рассмотреть возможность применения HTML5, чтобы сделать для вашего сайта более грамотную и разумную структуру с новыми функциями.
HTML5 является последней версией самого популярного языка разметки. HTML не претерпел существенных изменений за последние 10 лет. Это отчасти является странным, для быстроразвивающихся веб-технологий, и вот наконец мы получили новенький HTML5.
Для указания типа текущего документа в HTML5 достаточно просто указать:
<! DOCTYPE HTML>
В HTML5 не такие строгие правила как у его предшественника XHTML:# вы можете не использовать закрывающие теги;
# не использовать кавычки в значениях атрибута;
# использовать символы верхнего регистра в элементах и атрибутах.
Новые теги HTML5
В HTML5 появились следующие новые теги:
<header>
<footer>
<nav>
<menu>
<section>
<article >
<aside>
<figure>
<dialog>
<m> (mark)
<time>
<meter>
<progress>
<video>
<audio>
<details>
<canvas>
<command>
<footer>
<nav>
<menu>
<section>
<article >
<aside>
<figure>
<dialog>
<m> (mark)
<time>
<meter>
<progress>
<video>
<audio>
<details>
<canvas>
<command>
Остальное остается прежним, кроме некоторых тегов которые не являются актуальными и не рекомендуются для использования:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<isindex>
<noframes>
<s>
<strike>
<tt>
<u>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<isindex>
<noframes>
<s>
<strike>
<tt>
<u>
Поэтому если вы знакомы с HTML4 и XHTML, то у вас не возникнет никаких проблем в изучении HTML5. Новые тэги и атрибуты безусловно помогут вам в создании новых и модернизации старых сайтов, благодаря новым возможностям это будет намного легче, чем это было со старым хорошим HTML4.
Хорошо, но будет ли 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 2010 My Company</p>
</footer>
</body>
</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 2010 My Company</p>
</footer>
</body>
</html>
Как вы видите, мы поместили название нашего документа в теги
<header>
. Затем мы добавили раздел к нашей странице при помощи тэга
<section>
и вложили в него 2 тега
<article>
, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг
<nav>
. И наконец мы создали нижний колонтитул нашей страницы при помощи тега
<footer>
.Так и что же здесь особенного? Мы могли сделать тоже самое, используя старый хороший тэг . Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.
Новые блочные теги HTML5.
В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:
<aside>
<dialog>
<figure>
Тег <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>
<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>Заголовок изображения</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>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('article');
document.createElement('nav');
</script>
Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега
<script>
есть
type="text/javascript"
по умолчанию, поэтому его мы можем не добавлять.Встроенные теги.
У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:
<mark>
<time>
<meter>
<progress>
Тег <m> используется для обозначения какой-то части текста для определенных целей, например, чтобы показать важную часть текста:
<time>
<meter>
<progress>
Тег <m> используется для обозначения какой-то части текста для определенных целей, например, чтобы показать важную часть текста:
...
<p>Некоторая <m>очень важная часть</m> текста...</p>
...
Мы вставили определенную важную часть в тэг
<m>
.Тег
<time>
используется для обозначения времени и даты в каком либо тексте, например:...
Сегодня в ...
...
Тег
<meter />
используется, чтобы показать некоторые числа в определенном формате, например:...
<p>ежемесячный доход<meter>$15,000</meter>...</p>
...
У тега
<meter>
есть 6 полезных атрибутов:
value - задает фактическое значение чего-то;
min - задает минимальное значение чего-то;
low - определяет предел, при достижении которого значение считается низким;
high - определяет предел, при котором значение считается низким;
max - определяет максимальное значение чего-то;
optimum - определяет оптимальное значение чего-то.
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>
<command>
<details>
<canvas>
Тег
<menu>
являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег
<menu>
в HTML5 выполняет роль контейнера для тега
<command>
, который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки....
<menu>
<command onclick="alert('first action')" label=" первое действие"/>
<command onclick="alert('second action')" label=" второе действие"/>
</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>
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, чтобы сделать для вашего сайта более грамотную и разумную структуру с новыми функциями.
Веб-разработка по стандартам нового поколения - HTML5 и CSS3.
Книга поможет вам использовать HTML5 и CSS3 прямо сейчас, применяя все лучшие возможности, появившиеся в новых веб-стандартах. HTML5 и CSS3 - будущее веб-разработки, но не обязательно ждать будущего, чтобы начать применять эти стандарты уже сегодня. Хотя спецификации этих языков еще находятся в разработке, большинство современных браузеров и мобильных устройств поддерживают HTML5 и CSS3.
HTML5 Видео плееры на сайт
Подборка HTML5 видео плееров для вашего сайта и не сколько типов оформления.
Облако тегов для Joomla CMS
Easytagcloud - модуль облако тегов для Joomla CMS, мощный, эффективный и простой в использовании.
Изучаем HTML 5 (2011)
Эта книга посвящена изучению нового стандарта веб-программирования HTML5 и использованию новых функциональных возможностей, предоставляемых веб-разработчикам.
HTML 5
HTML 4 с нами уже довольно длительное время, около десяти лет. И значительных изменений за это время не произошло, не считая XHTML, который только ужесточает правила написания кода. С появлением HTML 5 вводятся новые, упрощающие создание web-сайтов, теги и атрибуты, о которых я бы и хотел рассказать.
Просмотров: 310Дата: 08.11.11
Навигация
Популярное
- Vii Engine CMS (3.0 версия)
- Игровой шаблон для Ucoz
- Видео уроки создание сайтов с платным доступом А.Куртее ...
- Кино шаблон Probest-film на Dle 9.6
- Рейтинг на Dle как на кино поиске
- Рабочий VKUppod-1.4
- Рейтинг в десять звезд на Dle 9.7
- Шаблон для музыкального портала
- Релиз Social Engine 4.2.3 RUS
- Kinonew шаблон под Dle 9.4
