Исправьте значение заказного атрибута

view sourceprint?

1.var theDiv = document.getElementById('myDiv');

2.var attr = theDiv.getAttribute('data-custom-attr');

3.alert(attr); // My Val

Это также может быть использовано в вашем CSS, подобно этому глупому тексту, исправляющему примеру.

view sourceprint?

01.<!DOCTYPE html>

02.

03.<html lang="en">

04.<head>

05.<meta charset="utf-8">

06.<title>Sort of Lame CSS Text Changing</title>

07.<style>

08.

09.h1 { position: relative; }

10.h1:hover { color: transparent; }

11.

12.h1:hover:after {

13.content: attr(data-hover-response);

14.color: black;

15.position: absolute;

16.left: 0;

17.

18.}

19.</style>

20.</head>

21.<body>

22.

23.<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1>

24.

25.</body>

26.</html>

Вы можете просмотреть демо этого примера на JSBIN.

Элемент Output

Как вы, вероятно, предположили, элемент output используется для отображения своего рода вычислений. Например, если вы хотите отобразить координаты позиции курсора или сумму чисел, эта информация должна быть помещена в элемент output.

Как простой пример, давайте, используя JavaScript, вставим сумму двух чисел в пустой output, когда будет нажата кнопка подтверждения форы (submit).

view sourceprint?

01.<form action="" method="get">

02.<p>

03.10 + 5 = <output name="sum"></output>

04.</p>

05.<button type="submit"> Calculate </button>

06.</form>

07.

08.<script>

09.(function() {

10.var f = document.forms[0];

11.

12.if ( typeof f['sum'] !== 'undefined' ) {

13.f.addEventListener('submit', function(e) {

14.f['sum'].value = 15;

15.e.preventDefault();

16.}, false);

17.}

18.else { alert('Your browser is not ready yet.'); }

19.})();

20.</script>

Испытайте это непосредственно.

Пожалуйста, отметьте, что поддержка этой технологии, всё ещё работает плохо. На момент написания этой статьи, я был в состоянии заставить это работать только в Opera, что и отражено в коде выше. Если браузер не распознаёт этот элемент, он просто выведет сообщение об ошибке. В противном случае, он выведет значение под именем "sum", и установит его равным 15, соответственно, после того, как форма подтверждена.

Исправьте значение заказного атрибута - student2.ru

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

Создание бегунков с Range Input

HTML5 вводит новый тип input – range.

view sourceprint?

1.<input type="range">

Особенно, это получает атрибуты min, max, step и value среди других. Хотя, кажется, только Opera поддерживает этот элемент полностью прямо сейчас, это будет фантастически, когда мы сможем полностью использовать эти функции!

Для быстрой демонстрации, давайте сделаем датчик, который позволит пользователям решить насколько удивителен "Total Recall". Мы не будем встраивать реальное решение для последовательного опроса, но мы сделаем обзор того, как это могло быть сделано весьма легко.

Шаг 1: Разметка

В первую очередь мы сделаем разметку.

view sourceprint?

1.<form method="post">

2.<h1> Total Recall Awesomness Gauge </h1>

3.<input type="range" name="range" min="0" max="10" step="1" value="">

4.<output name="result"> </output>

5.</form>

Исправьте значение заказного атрибута - student2.ru

Обратите внимание, что в дополнение к настройке min и max, мы всегда можем определить, какой шаг будет для каждого перехода. Если step установлен как 1, будет 10 значений для выбора. Мы также используем в своих интересах новый элемент output из предыдущего совета.

Шаг 2: CSS

Затем мы добавим немного стилей. Мы также используем :before и :after, чтобы сообщить пользователю, каковы наши минимальное и максимальное значения.

view sourceprint?

01.body {

02.font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;

03.text-align: center;

04.}

05.input { font-size: 14px; font-weight: bold; }

06.

07.input[type=range]:before { content: attr(min); padding-right: 5px; }

08.input[type=range]:after { content: attr(max); padding-left: 5px;}

09.

10.output {

11.display: block;

12.font-size: 5.5em;

13.font-weight: bold;

14.}

Выше мы создаём контент до и после range input, и делаем значения равными минимуму и максимуму соответственно.

Исправьте значение заказного атрибута - student2.ru

Шаг 3: JavaScript

Наконец, мы:

Определяем, знает ли текущий браузер, что такое «range input». Если нет, мы сообщаем пользователю, что демонстрация не будет работать.

Динамически обновляем элемент output, поскольку пользователь перемещает бегунок.

Следим, когда пользователь уводит курсор от бегунка, захватываем текущее значение и сохраняем его в местной памяти.

Тогда, в следующий раз, когда пользователь обновит страницу, «range» и «output» автоматически будут установлены так, как они были выбраны в последний раз.

view sourceprint?

01.(function() {

02.var f = document.forms[0],

03.range = f['range'],

04.result = f['result'],

05.cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;

06.

07.// Determine if browser is one of the cool kids that

08.// recognizes the range input.

09.var o = document.createElement('input');

10.o.type = 'range';

11.if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');

12.

13.// Set initial values of the input and ouput elements to

14.// either what's stored locally, or the number 5.

15.range.value = cachedRangeValue;

16.result.value = cachedRangeValue;

17.

18.// When the user makes a selection, update local storage.

19.range.addEventListener("mouseup", function() {

20.alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");

21.localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");

22.}, false);

23.

24.// Display chosen value when sliding.

25.range.addEventListener("change", function() {

26.result.value = range.value;

27.}, false);

28.

29.})();

Исправьте значение заказного атрибута - student2.ru

Готовы к реальному миру? Вероятно, ещё нет; но это всё ещё развлечения и подготовка!

Скачайте исходный код, и используйте его непосредственно для себя. Но используйте Opera.

Теги div и span

<div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа. Тег широко используется для включения таблиц стилей </div>. Устаревший атрибут align отвечает за выравнивание содержимого внутри блока: left - по левому краю; right - по правому краю; center - по центру; justify - выравнивается по содержимому. Атрибут Title позволяет создавать всплывающий текст над надписью. Style стандартный набор атрибутов стилей. Пример

<div ALIGN="LEFT">По левому краю</DIV>

< div ALIGN="RIGHT">По правому краю</DIV>

< div ALIGN="CENTER">По центру краю</DIV>

< div ALIGN="JUSTIFY">По содержимому краю</DIV>

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

Примеры:

<div style="background: #ff0000;"> Блок красного цвета</div>

<div style="text-align:center;">Выравниваем текст по центру</div>

Чтобы не описывать стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей. Затем создается класс с именем селектора, а для тега <div> добавляется параметр class или id.

<div class="block1">текст</div>

Стандартные атрибуты тега div:

<div class = имя_класса> Определяет имя класса для элемента </div>

dir = rtl , lt> Определяет направление текста для контента в элементе</div>

<div id = id > Определяет уникальный id для элемента</div>

<div lang =код_языка>Определяет код языка для контента в элементе</div>

<div style =опред_стиля>Определяет инлайновый стиль для элемента</div>

<div title = текст > Определяет дополнительную информацию об элементе</div>

Тег <span> предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Синтаксис <span>...</span>

Метатеги

Информация, расположенная в заголовочной части Web-страницы, предназначена главным образом для поисковых систем. Ее назначение — максимально точное сжатое описание страницы, которое позволило бы правильно позиционировать страницу в каталоге поискового сервера и в списке ссылок, выданных пользователю в ответ на запрос. Среди главных элементов заголовочной части следует отметить название страницы, помещаемое между дескрипторами <title> и </title>, а также аннотацию и список ключевых слов, вводимые с помощью мета-записей keywords и description.

Любой метатег размещается в заголовке HTML-документа между тегами <head> и </head> и состоит из следующих атрибутов:

Метатеги с атрибутом HTTP-EQUIV управляют действиями браузеров. В качестве параметра “имя” могут быть использованы следующие аргументы:

Expires – дата устаревания: если указанная дата прошла, то запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением "0" заставляет браузер каждый раз при запросе проверять – изменялся ли этот документ. Например:

9 05:45:15 gmt">

Pragma – контроль кэширования. Значением должно быть “no-cache”.

Content-Type – указание типа документа. Может быть расширено указанием браузеру кодировки страницы (charset). Например:

Content-language – указание языка документа. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

Refresh – определение задержки в секундах, после которой браузер автоматически обновляет документ. Дополнительная возможность – автоматическая загрузка другого документа.

Window-target – определяет окно текущей страницы; может быть использован для прекращения появления новых окон браузера при применении фреймовых структур.

Ext-cache – определяет имя альтернативного кэша

Управление индексацией страницы для поисковых роботов осуществляется с использованием атрибута name.

Возможные значения: all, none, index, noindex, follow, nofollow.

Description – краткая аннотация содержания документа. Используется поисковыми системами для описания документа.

Keywords – используется поисковыми системами для индексирования документа. Обычно здесь указываются синонимы к словам в заголовке title или альтернативный заголовок.

Document-state – управление индексацией страницы для поисковых роботов. Определяет частоту индексации – или один раз индексировать, или реиндексировать документ регулярно.

Возможные значения: static, dynamic.

URL – управление индексацией страницы для поисковых роботов. Определяет частоту индексации – или один раз индексировать, или реиндексировать документ регулярно.

Author – обычно имя автора, формат произвольный.

Generator – обычно название и версия редактора, с помощью которого создана эта страница.

Resource-type – текущее состояние данного файла. Важен для поисковых систем: если его значение document, то поисковая система приступает к индексированию.

Новое в HTML 5

HTML5 был создан в результате кооперации между World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В 2006 они скооперировались и создали новую версию HTML. HTML5 базируется на HTML, CSS, DOM, and JavaScript и содержит ряд улучшений

В HTML5 добавлены новые элементы:

• canvas для рисования

• video и audio для мультимедия

• storage-для хранения данных

• like article, footer, header, nav, section-новые элементы для контента

• like calendar, date, time, email, url, search-новые формы

Первая задача HTML 5 - правильно интегрировать мультимедийный контент. В отличие от HTML 4.01 где для этой цели используются плагины типа Adobe Flash Player, в HTML 5 предполагается использоваться специально введенные теги video и audio.

Тэги <audio> и <video> позволяют браузеру обрабатывать аудио- и видеопотоки без использования дополнительных плагинов.

Поддержка аудио

Больше мы не должны полагаться на плагины от сторонних производителей для того чтобы отобразить аудио. HTML5 теперь предлагает элемент <audio>. Хорошо, по крайней мере, в конечном счёте мы не будем волноваться об этих плагинах. В настоящее время только новые браузеры предоставляют поддержку HTML5 аудио. Сейчас, это – всё ещё хорошая практика, чтобы предложить некоторую форму обратной совместимости.

view sourceprint?

1.<audio autoplay="autoplay" controls="controls">

2.<source src="file.ogg" />

3.<source src="file.mp3" />

4.<a href="file.mp3">Download this file.</a>

5.</audio>

Mozilla и Webkit ещё не полностью сходятся, когда дело доходит до звукового формата. Firefox захочет увидеть .ogg файл, в то время как браузеры Webkit будут работать только с .mp3. Это означает, что, по крайней мере, пока вы должны создавать две версии файла.

Когда Safari загрузит страницу, он не распознает формат .ogg и, соответственно перейдёт к версии mp3. Пожалуйста, помните, что IE, обычно, не поддерживает это, а Opera 10 и ниже работает только с файлами .wav.

Поддержка видео

Кроме элемента <audio>, у нас, естественно, есть и HTML5 видео в новых браузерах! Фактически, только недавно, YouTube анонсировал новое внедрение видео в HTML5 для своего видео и для браузеров, поддерживающих это. К сожалению, опять же, потому что спецификация HTML5 не определяет специальный кодек для видео, это оставляют браузерам. В то время, как Safari и Internet Explorer 9 поддерживают видео в формате H.264 (который обычно могут проигрывать Flash плееры), Firefox и Opera придерживаются открытых форматов Theora и Vorbis. Так, отображая HTML5 видео, вы должны предложить оба формата.

view sourceprint?

1.<source src="cohagenPhoneCall.ogg" type="video/ogg; codecs='vorbis, theora'" />

2.<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />

3.<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>

4.</video>

«Chrome может корректно отображать видео как в формате "ogg", так и "mp4"»

Здесь есть несколько ценных замечаний:

1. Мы технически не обязаны устанавливать атрибут type; однако, если мы не делаем это, браузер должен выяснить тип непосредственно. Лучше, установите его сами.

2. Не все браузеры понимают HTML5 видео. Ниже исходного элемента мы можем дать ссылку на загрузку файла или внедрить Flash-версию видео. Решать вам.

3. Атрибуты controls и preload будут обсуждаться в следующих двух советах.

Атрибут Preload

Атрибут preload делает именно то, что вы предположили. Хотя, вы должны сначала решить, хотите ли вы, чтобы браузер делал предварительную загрузку видео. Действительно ли это необходимо? Возможно, если посетитель обращается к странице, которая сделана специально для отображения видео, вы определённо должны сделать предварительную загрузку и немного сократить время ожидания для посетителя. Видео может быть предварительно загружено при помощи preload="preload", или просто добавлением preload. Я предпочитаю последнее, этого вполне достаточно.

view sourceprint?

1.<video preload>

Атрибут Controls

Если вы работаете с каждым из этих советов, вы, наверное, заметили, что с кодом выше, видео выглядит как обычное изображение, без каких-либо элементов управления. Чтобы отобразить эти элементы, мы должны определить атрибут controls внутри элемента video.

view sourceprint?

1.<video preload controls>

Исправьте значение заказного атрибута - student2.ru

Заметьте, что каждый браузер отображает свой проигрыватель по-своему.

Для работы с медиаданными, формами и динамической 2D-графикой больше не требуются многочисленные плагины. Необходимые элементы включены в состав HTML 5

Тэг <canvas> обеспечивает динамическую перерисовку изображения в зависимости от действий пользователя или изменяемых данных.Он будет описывать размеченную на веб-сайте область, а движок браузера будет отображать в реальном времени графический контент - чертежи, графики, небольшие игры и даже 3D. Для этого разрабатываеься стандарт WebGL. Для того, чтобы скрипты "Canvas" не тормозили браузер, предусматривается поддержка многопоточности. Эта опция носит название "Web Workes", она выполняет скрипты и веб-приложения параллельно.

Меняется способ хранения информации на клиенте. Сейчас ее можно сохранить только в маленькие файлы cookies. А по новой технологии WebStorage на стороне клиента будут храниться до 10 Мбайт данных в специальной базе данных. С её помощью можно даже хранить специальные веб-приложения и работать с ними без подключения к интернету.

HTML 5 обеспечивает безопасность компонентов. Самая большая угроза в сети исходит из тегов iFrame (в этой области отображается содержимое стороннего сайта). Если в этой области содержится вирус, то он может проникнуть на компьютер. В новом стандарте в теги iFrame добавлен фильтр Sandbox, который будет ограничивать действие скриптов с внешних сайтов.

Ещё одна новинка - технология Web Forms 2.0. Она более эффективно выполняет обработку введенных пользователем данных, что также обеспечивает более высокую скорость. Новые формы: like calendar, date, time, email, url, search

В HTML5 введено несколько тегов для улучшения структуры документа:

— section: тег относится к описанию части документа, и может использоваться с тегами h1-h6, а также быть частью статьи;

— article: в теге лучше всего описывать запись в блоге или новостную заметку;

— aside: в этом теге предлагается описывать некие данные, которые в целом не связаны с основным контентом страницы;

— header: в этом теге, конечно, лучше размещать заголовок секции;

— footer: футер(подвал);

— nav: для навигации появился отдельный тег;

— dialog: этим тегом может быть отмечен какой-либо разговор или интервью;

— figure: в этом теге рекомендовано заключать встраиваемый контент – к примеру, видео, графику или аудио.

Таблица тегов HTML 5

Теги	Описание
<!-- -->	Определяют комментарии
<!DOCTYPE>	Определяет тип документа
<a> </a>	Определяют гиперссылку
<abbr> </abbr>	Определяют аббревиатуру
<acronym> </acronym>	Не поддерживаются в HTML 5
<address> </address>	Отображают текст в формате адреса
<applet> </applet>	Не поддерживаются в HTML 5
<area />	Определяeт активную область навигационной карты
<article> </article>	Новые HTML теги – oпределяют внешний контент
<aside> </aside>	Новые HTML теги – дополнительный контент
<audio> </audio>	Новые теги – определяют фоновый звук
<b> </b>	Отображают часть текста полужирным шрифтом
<basefont>	Не поддерживается в HTML 5
<bdo> </bdo>	Определяют направление текста
<big> </big>	Не поддерживаются в HTML 5
<blockquote></blockquote>	Определяют блочную цитату
<body> </body>	Определяют тело документа
<br />	Осуществляет перенос строки
<button> </button>	Создают кнопку
<caption> </caption>	Определяют надпись над таблицей
<center> </center>	Не поддерживаются в HTML 5
<cite> </cite>	Преобразуют текст в курсивный
<code> </code>	Преобразуют текст в моноширинный
<col />	Определяет свойства колонок таблицы
<colgroup> </colgroup>	Группируют колонки таблицы
<command> </command>	Новые теги – добавляют команду к кнопке
<datalist> </datalist>	Новые HTML теги – определяют допустимые значения
<dd> </dd>	Определение списка определений
<del> </del>	Отображают перечеркнутый текст
<details> </details>	Новые теги – определяют детали документа
<dialog> </dialog>	Новые теги – определяют диалог
<dfn> </dfn>	Преобразуют шрифт в наклонный
<dir> </dir>	Не поддерживаются в HTML 5
<div> </div>	Определяют секцию документа
<dl> </dl>	Создают список определений
<dt> </dt>	Oпределяют определяемый термин
<em> </em>	Преобразуют текст в курсивный
<embed />	Новый тег – внедряет интерактивный объект
<fieldset> </fieldset>	Объединяют элементы формы
<figure> </figure>	Новые HTML теги – группируют элементы страницы
<font> </font>	Не поддерживаются в HTML 5
<footer> </footer>	Новые теги – нижняя часть документа
<form> </form>	Определяют HTML форму
<frame />	Не поддерживается в HTML 5
<frameset> </frameset>	Не поддерживаются в HTML 5
<h1> </h1> – <h6> </h6>	Определяют заголовки
<head> </head>	Содержат информацию о документе, инструкции
<header> </header>	Новые теги – верхняя секция документа
<hgroup> </hgroup>	Новые теги – определяют группу заголовков
<hr />	Создает горизонтальную линию
<html> </html>	Определяют HTML документ
<i> </i>	Преобразуют текст в курсивный
<iframe> </iframe>	Создают документ внутри документа
<img />	Определяет изображение
<input />	Создаeт поля для ввода данных, кнопки
<ins> </ins>	Преобразуют текст в подчеркнутый
<kbd> </kbd>	Преобразуют текст в моноширинный
<label> </label>	Определяют лeйбу для тега <input />
<legend> </legend>	Заголовок для тегов <fieldset> </fieldset>
<li> </li>	Определяют элемент (пункт) списка
<link />	Определяет ссылку на внешний источник
<map> </map>	Определяют навигационную карту
<mark> </mark>	Новые теги – определяют важную часть текста
<menu> </menu>	Определяют список-меню
<meta />	Содержит информацию о документе
<nav> </nav>	Новые теги – определяют группу ссылок
<noframes> </noframes>	Не поддерживаются в HTML 5
<noscript> </noscript>	Предупредят если браузер не читает скрипты
<object />	Внедряет объекты в web-страницу
<ol> </ol>	Определяют упорядоченный (нумерованный) список
<optgroup> </optgroup>	Определяют группу элементов <option> </option>
<option> </option>	Определяют элемент выпадающего списка
<p> </p>	Определяют параграф
<param />	Определяет проигрыватель
<pre> </pre>	Определяют отформатированный текст
<q> </q>	Определяют короткую цитату
<s> </s>	Не поддерживаются в HTML 5
<samp> </samp>	Преобразуют текст в моноширинный
<script> </script>	Определяют скрипт
<section> </section>	Новые HTML теги – определяют секцию документа
<select> </select>	Определяют выпадающий список
<small> </small>	Преобразуют текст в более мелкий
<span> </span>	Определяют линейную секцию в документе
<strike> </strike>	Не поддерживаются в HTML 5
<strong> </strong>	Преобразуют шрифт в полужирный
<style> </style>	Определяют стилевые описания
<sub> </sub>	Преобразуют обычный текст в текст в нижнем индексе
<sup> </sup>	Преобразуют текст кверхнему индексу
<table> </table>	Определяют таблицу
<tbody> </tbody>	Определяют тело таблицы
<td> </td>	Определяют ячейку таблицы
<textarea> </textarea>	Определяют текстовое поле
<tfoot> </tfoot>	Определяют нижнюю часть таблицы
<th> </th>	Определяют заголовок таблицы
<thead> </thead>	Определяют верхнюю часть таблицы
<time> </time>	Новые теги – определяют дату/время
<title> </title>	Определяют основной заголовок документа
<tr> </tr>	Определяют табличный ряд
<u> </u>	Не поддерживаются в HTML 5
<ul> </ul>	Определяют ненумерованный список
<var> </var>	Определяют переменную
<video> </video>	Новые теги – внедряют видео в страницу

Список атрибутов HTML5

В таблице ниже приведен список основных атрибутов HTML 5. Новые атрибуты и их значения выделены.

Таблица. Справочник атрибутов HTML5
Атрибут	Значение	Краткое описание

class	classname	Определяет имя класса для элемента в таблице стилей
contenteditable	true false	Определяет, может ли пользователь редактировать содержимое (контент)
contextmenu	menu_id	Определяет контекстное меню элемента
dir	ltr rtl	Определяет направление текста контента в элементе
draggable	true false auto	Определяет, может ли пользователь перетащить элемент
id	id	Определяет уникальный идентификатор элемента
irrelevant	true false	Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается
lang	language_code	Определяет код языка содержимого
ref	URL / id	Определяет ссылку на другой документ
registrationmark	reg_mark	Определяет зарегистрированный знак элемента
style	style_definition	Определяет встроенный стиль элемента
tabindex	number	Определяет порядок перехода элемента
template	URL / id	Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу
title	text	Определяет дополнительную информацию об элементе

В XHTML все теги и атрибуты должны быть набраны в нижнем регистре, кроме тега <!DOCTYPE>.

Необходимо закрывать любые теги, в том числе одиночные, кроме <!DOCTYPE>:

<option> </option>, <br />, <hr />, <img />, <input />, <link />, <meta />.

Запрещается использование сокращений для булевых атрибутов, – значения вписываются полностью, например, <hr noshade="noshade" />, <input type="checkbox" checked="checked" />, вместо <hr noshade>, <input type="checkbox" checked>

Рекомендуется максимально семантически использовать теги: блок <div> </div> – для верстки, а таблицы – для табличного представления данных.

HTML 5 дополняет язык XHTML новыми элементами и атрибутами и исключает старые элементы. Подробнее о различиях:

В HTML5 убраны теги: basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir.

Добавлены новые теги HTML5:

<!DOCTYPE html> section, article, aside, header, footer, nav, figure, audio, video, source, embed, meter, time, canvas, Output, datagrid, details, datalist, datatemplate, progress.

Валидация документов

Валидацией называется проверка документа на соответствие стандартам и выявление ошибок. Код веб-страницы должен подчиняться определенным правилам (www.w3c.org), которые называются спецификацией. Валидация широко применяется для проверки XML – документов, однако может быть использована и для XHTML - документов.

Способы проверки веб-страниц на наличие ошибок делятся на онлайновые и локальные. Онлайновые предназначены для проверки страниц с помощью браузера через Интернет, а локальные используются для проверки документов на текущем компьютере.

По адресу http://validator.w3.org располагается распространенный инструмент для проверки отдельных страниц на валидность. Этот сайт предлагает три способа проверки: по адресу, локального файла и введенного в форму кода.

Если сайт уже опубликован в Интернете, то любую страницу можно проверить, вводя в текстовое поле ее адрес. Так, вводя http://htmlbook.ru в форме «Validate by URI» (валидация по адресу) и нажав кнопку Check (проверить) получим сообщение о том, валидный документ или нет. Хотя в текстовом поле вводится адрес сайта, проверяется не сайт целиком, а только одна главная страница. Адрес http://htmlbook.ru равнозначен вводу http://htmlbook.ru/index.php. Валидатор проверяет HTML-код страницы и в случае отсутствия ошибок докладывает о валидности документа. При обнаружении ошибок выводится уведомление и список ошибок.

Документы, еще не выставленные в Интернете, можно проверить с помощью формы, озаглавленной «Validate by File Upload» (валидация загруженных файлов. Вначале следует указать путь к HTML-файлу, после чего нажать кнопку Check . Файл будет загружен на сервер и проверен на ошибки.

В некоторых случаях требуется проверить код без сохранения его в отдельный файл. В этом случае пригодится форма для прямого набора текста и отправки его на сервер для валидации.

Для браузера Firefox может использоваться расширение HTML Validator. Эта программа построена по той же технологии, что и валидатор W3C, но не требует подключения к Интернету и работает прямо «на лету». Где скачать http://users.skynet.be/mgueury/mozilla/

После скачивания файла установить расширение можно несколькими способами.

1. Через менеджер расширений

Запустите Firefox и откройте меню Инструменты > Расширения . Перетащите мышью загруженный файл (он имеет

расширение xpi) в открывшееся окно. Далее расширение будет установлено автоматически.

2. С помощью открытия файла

Выберите в меню Firefox пункт Файл > Открыть файл... и укажите путь к файлу с расширением, дальнейшие действия

браузер выполнит сам.

3. Копирование файла в папку extension

Откройте папку на диске, где установлен Firefox (к примеру c:\Program Files\Mozilla Firefox) и найдите в ней подпапку extension, в которую скопируйте расширение. После запуска браузера дальнейшая установка пройдет самостоятельно. прочитать обо всех возможных методах установки расширений по адресу

http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Использование HTML Validator

При открытии веб-страницы HTML Validator начинает сразу же свою работу, и результат проверки отображается в строке состояния, в ее правом нижнем углу в виде небольшой картинки.

Вопросы и задания

1. Перевод текста с кириллицы на транслит.

2. Перевод текста с транслита на кириллицу.

3. Перевод сайта на английский / с английского языка.

4. Сайт на белорусском языке. Какую кодировку использовать.

5. Кодировка UTF-8.

6. Встраивание MathML в HTML.

7. Что такое text/html.

8. Что такое валидность.

9. Как добавить статьи или новости не переделывая страницу. CMS.

Задания для выполнения

1. визитка для ученого