Pavel Rumantsev - Html5

Программа:1) История 2) Особенности нового языка3) Переход от HTML 4.01 к HTML54) Новая разметка5) Примеры

W3C или WHATWG?

WHATWG (Web Hypertext Application Technology Working Group) – быстрорастущее сообщество людей, заинтересованных в развитии Интернета. На данный момент Ведет разработку HTML5

W3C (World Wide Web Consortium) – консорциум всемирной паутины, который Разрабатывал HTML 4.01 и давал свет HTML, XHTML, CSS и т.д.

Почему HTML5?

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

• «Чистота» кода• Новые возможности• Язык, который пишется людьми для людей

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

Новые теги:

<video> - возможность воспроизводить видео без скачивания дополнений

<audio> - возможность воспроизводить аудио без скачивания дополнений

<canvas> - уникальный тег, используется для рисования

«Чистота» кода

• Доктайп без адресов (<!doctype html>)

• Теги <html>, <body>, <head> становятся необязательными

• СвобОднЫй сИнтаКсис

• Весь сайт становится структурированным

Новые возможности

Множество новых тегов, дающих уникальные возможности

Язык находится в разработке

Язык, который пишется людьми для людей

Язык пишется командой, которая занимается разработкой сайтов многие года И реально понимает, чего не хватает языку (а что в нем лишнее)

Переход от HTML 4.01 к HTML5• Забудьте длинный не запоминаемый doctype. Обязательно вставляйте в начале <!doctype html>• Если вы разрабатывайте сайт, который должен очень быстро загружаться,

можете не использовать теги <body> и <head>, такой сайт будет грузится и нормально отображаться.

• Привыкайте к новой разметке сайта. Использование <div> желательно только в случае, когда вы не можете использовать теги HTML5 (или их использование неоправданно)

Новая разметка:Верх (HEADER)

Низ (FOOTER)

Контент сайта (ARTICLE, SECTION, etc)

Навигационная панель (NAV)

Примеры:

<!doctype><html lang=en><title>New web-site</title><header> <img src="..."></header><section> <artcile> <p>Some text</p> </article></section><footer> &copy 2010</footer>

Some text

© 2010

Примеры:

<!doctype><html lang=en><title>New web-site</title><header> <nav> <a href=“…”>Text</a> <a href=“…”>Text</a> <a href=“…”>Text</a> </nav></header><section> <artcile> <p>Some text</p> </article></section><footer> &copy 2010</footer>

© 2010

Some text

Text Text Text

Примеры:

<!doctype><html lang=en><title>New web-site</title><header> <nav> <a href=“…”>Text</a> <a href=“…”>Text</a> <a href=“…”>Text</a> </nav></header><section> <artcile> <h1>Some text</h1> <h2>again</h2> </article></section><footer> &copy 2010</footer>

© 2010

Some textagain

Text Text Text

Спасибо за внимание

Pavel Rumantsev - Html5

Technology

Transcript of Pavel Rumantsev - Html5