Rus html 5

Михаил Русаков

Учебник по HTML 5

Сайт: http://MyRusakov.ru

Михаил Русаков и сайт http://MyRusakov.ru

Оглавление Об авторе ------------------------------------------------------------------------------ 3 Введение ------------------------------------------------------------------------------- 5 HTML 5 Что нового? --------------------------------------------------------------- 6 HTML 5 Структурные элементы ------------------------------------------------ 7 HTML 5 Элементы уровня блока ----------------------------------------------- 9 HTML 5 Элементы уровня текста ---------------------------------------------- 10 HTML 5 Элементы мультимедиа ----------------------------------------------- 12 HTML 5 Интерактивные элементы -------------------------------------------- 14 Заключение ---------------------------------------------------------------------------- 16 Бонус ------------------------------------------------------------------------------------- 16

Михаил Русаков и сайт http://MyRusakov.ru

2

Михаил Русаков и сайт http://MyRusakov.ru

Об авторе.

Здравствуйте! Мне ОЧЕНЬ приятно, что Вы решили познакомиться со мной! Меня зовут Русаков Михаил Юрьевич, и я являюсь создателем и главным администратором сайта MyRusakov.ru, который полностью посвящён теме Как создать свой сайт. Немного о себе. Где я живу, трудно сказать. Родной город - Обнинск, впрочем, на выходных там и сейчас живу. По будням живу в Москве, так как учусь там. Сам я перешёл на 4-й курс Московского Энергетического Института (Технического Университета). Учусь на факультете Автоматики и Вычислительной Техники. Учусь на бюджетной основе, причём вполне успешно. Одновременно получаю второе высшее образование в Linguae-Centrum при МЭИ (ТУ) по специальности "Переводчик в сфере профессиональной коммуникации". Это уже платное образование. Изучаю, если можно так выразиться, английский язык. А вообще немного знаю ещё и французский язык (учил его в школе). Программированием увлёкся ещё в 10-ом классе. Начинал с Turbo Pascal, который пошёл у меня настолько успешно, что окружающие были очень удивлены, и я понял, что программирование - это моё призвание! В конце 11-го класса занялся языком Java. Вначале было тяжеловато (уж, очень я привык к процедурному стилю Turbo Pascal, а Java чистейшей воды Объектно-Ориентированный язык программирования), но через пару месяцев всё пошло, как по маслу. На 1-ом курсе в институте у нас был Turbo Pascal, где я выполнил все задачи за семестр за 7 часов, и потому получил зачёт и экзамен автоматом уже через пару недель после начала учёбы. Лишний раз понял, что программирование - это то, что получается у меня лучше, чем у других! Весь 1-й курс, да и половину 2-го занимался Java. Одновременно, в этот промежуток познакомился с такими языками, как C++, ActionScript (язык сценариев Flash). Потом увлёкся созданием сайтов. Изучил HTML, CSS, JavaScript, PHP, SQL (пользовался ПО MySQL). Летом 2009-го года занимался разработкой корпоративной сети (по просьбе брата), благодаря чему познакомился с XML, XML Schema, SOAP, WSDL.

Михаил Русаков и сайт http://MyRusakov.ru

3

Михаил Русаков и сайт http://MyRusakov.ru

На 3-ем курсе начал заниматься программирование микроконтроллеров на Assembler. Вот и вся информация обо мне. Полгода назад я решил поделиться своим багажом знаний, который я получал почти 5 лет. И сейчас я вовсю занимаюсь созданием своего видеокурса, посвящённого созданию и раскрутке сайта. В него войдут все необходимые знания для создания 99.9% сайтов: HTML, CSS, JavaScript, PHP, MySQL, XML. Обязательно рассмотрим CMS Joomla! Также на этот диск попадёт вся необходимая информация по раскрутке сайта! Более того, я планирую (и уже начал) записать создание этого сайта, а потом ещё и его раскрутку. Таким образом, Вы сможете увидеть в прямом эфире создание и раскрутку сайта http://myrusakov.ru, на котором Вы сейчас и находитесь. Планирую выпустить свой диск примерно в сентябре-октябре 2010 года. Ещё раз огромное спасибо, что решили познакомиться со мной! С уважением, Михаил Русаков!

P.S. Все свои вопросы (в том числе и по программированию) слать на myrusakov@gmail.com. Либо пишите в ICQ 600038357 (при авторизации напишите, что пришли с http://myrusakov.ru). С удовольствием, отвечу на любые Ваши вопросы!

Михаил Русаков и сайт http://MyRusakov.ru

4

Михаил Русаков и сайт http://MyRusakov.ru

Введение. Первое, что мне хотелось бы сделать, так это поздравить Вас с приобретением этой бесплатной, но очень полезной книги. В данном учебном пособии рассказывается о новой версии самого популярного языка гипертекстовой разметки – HTML 5. Данный стандарт появился не так давно, а уже становится весьма и весьма популярным. И о том, что нового появилось в этом стандарте (а также, что исчезло), и рассказывается в данном учебном пособии. Рассматриваются новые элементы, их назначение и примеры их использования. Также к учебнику приложен справочник HTML-тегов. Если у Вас возникают какие-либо вопросы при изучении или Вы хотите оставить отзыв о моей книге, то смело пишите мне на E-mail: myrusakov@gmail.com. На все письма я с удовольствием отвечу! Напоследок, об авторских правах на эту книгу! Авторские права всецело и полностью принадлежат её автору – Михаилу Русакову. Вы имеете право распространять данную книгу, но только при следующих условиях: 1) Вы НЕ имеете права продавать эту книгу.

2) Вы НЕ имеете права каким-либо образом изменять контент настоящего документа – Вы обязаны сохранить данную книгу как есть! При частичном копировании содержимого данного документа указывайте автора (Михаил Русаков) и сайт http://myrusakov.ru. Уверен, что Вы легко справитесь с данными условиями. С уважением, Михаил Русаков.

Михаил Русаков и сайт http://MyRusakov.ru

5

Михаил Русаков и сайт http://MyRusakov.ru

HTML 5 Что нового?

HTML 5 - это новая версия самого популярного языка разметки. Уже более 10-ти лет язык гипертекстовой разметки HTML практически не менялся, что было очень странно, учитывая огромную скорость развития Web-технологий, и вот, наконец-то, изменение случилось и появился HTML 5. В HTML 5 добавлены несколько новых элементов и атрибутов, а также убраны несколько старых (например, font и center). Добавлены следующие элементы: 1) header.

2) footer.

3) nav.

4) section.

5) article.

6) aside.

7) figure.

8) dialog.

9) m (mark).

10) time.

11) meter.

12) progress.

13) video.

14) audio.

15) details.

16) datagrid.

17) menu.

18) command.

Михаил Русаков и сайт http://MyRusakov.ru

6

Михаил Русаков и сайт http://MyRusakov.ru

В остальном осталось всё без изменений. То есть никаких проблем с освоением HTML 5 не возникнет, при условии, что Вы знакомы со стандартным HTML. Собственно, всё осталось как прежде, только добавились новые возможности. Благодаря нововедениям HTML 5 можно существенно облегчить труд Web-мастеров по созданию веб сайтов, упростив ту же самую разметку. Наверняка, Вы задаётесь вопросом: "А будет ли работать HTML 5 со старыми браузерами?". Ответ таков: "Конечно, да, но новые элементы, разумеется, отображаться не будут". Или другими словами, новые страницы увидят все, но обладатели современных версий браузеров увидят немного больше и по-другому. Я уверен, что в ближайшие время HTML 5 смогут увидеть такой же процент пользователей, как сейчас видят HTML 4, которому уже более 10-ти лет. А об использовании новых возможностей HTML 5 мы поговорим с Вами в следующих статьях.

HTML 5 Структурные элементы

В этой статье мы обсудим возможности HTML 5 по созданию структуры документа. Я уверен, что если Вы занимались вёрсткой HTML-документа, то неоднократно использовали тег <div>, причём этот тег Вам приходилось ставить везде: в начале и в конце страницы, в меню, в различных других частях страницы. Это не очень хорошо, поэтому в HTML 5 для каждой части страницы имеется свой элемент. Вот их список и краткое назначение: 1) section. Назначение - определение секций. Его используют для описания определённого блока текста, например, хорошим применением этого элемента будет при разбиении большой части текста на более малые, как разбиение одной статьи на несколько абзацев.

2) header. Назначение - определение верхней секции на странице.

3) footer. Назначение - определение нижней секции на странице.

4) nav. Назначение - определяет набор ссылок на другие страницы (часто используют для навигации по сайту).

5) article. Назначение - выделить определённую часть текста. Давайте напишем такой HTML-код: <html> <body> Михаил Русаков и сайт http://MyRusakov.ru

7

Михаил Русаков и сайт http://MyRusakov.ru <header> <h1>Заголовок</h1> </header> <section> <article> <h2>Заголовок статьи 1</h2> <p>Какой-то текст...</p> </article> <article> <h2>Заголовок статьи 2</h2> <p>Какой-то текст...</p> </article> <nav> <a href="">Ссылка 1</a> <a href="">Ссылка 2</a> </nav> </section> <footer> <p>Copyright 2010 Михаил Русаков</p> </footer> </body> </html>

Как видите, мы сначала определили заголовок в теге <header>. Затем мы добавили секцию с помощью тега <section>, внутри которого написали два тега <article>, которые выделяют определённую часть текста. После секции поставили набор ссылок с помощью тега <nav>. И, наконец, подвал - нижняя часть страницы, которую создали с помощью тега <footer>. Вы сейчас скажете, а где преимущество? Мы же ведь могли спокойно реализовать тоже самое и с помощью уже знакомого нам тега <div>. А преимущество следующее: структура документа становится более понятной и ясной не только для Web-мастера, но и для поисковых систем, и это два главных преимущества, которые Вы теперь можете смело использовать при разработке своих сайтов. А с другими новыми элементами HTML 5 мы познакомимся в следующих статьях.

C Уважением, Михаил Русаков!

Михаил Русаков и сайт http://MyRusakov.ru

8

Михаил Русаков и сайт http://MyRusakov.ru

HTML 5 Элементы уровня блока

В HTML 5 появились три новых элемента уровня блока. Собственно, вот они: 1) aside.

2) dialog.

3) figure. Элемент aside используют, как правило, для выделения неосновного текста внутри основного, например, для выделения различных примечаний или цитат. Например, так: <html> <head> </head> <body> <h3>Заголовок</h3> <p>Основное повествование...</p> <aside> <p>Например, цитата...</p> </aside> </body> </html>

Можно посмотреть в браузере, но разницы особой не заметите, что с <aside>, что без, что говорит о том, что данный элемент используется лишь для создания структуры. А хорошая структура удобна разработчику и поисковым машинам. Элемент dialog используется для создания диалога между собеседниками. Давайте напишем такой код: <html> <head> </head> <body> <dialog> <dt>Собеседник 1 </dt> <dd>Сообщение собеседника 1</dd> Михаил Русаков и сайт http://MyRusakov.ru

9

Михаил Русаков и сайт http://MyRusakov.ru <dt>Собеседник 2 </dt> <dd>Сообщение собеседника 2</dd> </dialog> </body> </html>

Внутри элемента dialog ставятся два HTML-тега: <dt> и <dd>. Первый тег означает имя собеседника, а второй тег означает его сообщение. Вот и всё, что касается элемента dialog. И, наконец, тег figure в HTML 5 позволяет описать изображение вместе с подписью. Например, так: <html> <head> </head> <body> <figure> <legend>Подпись</legend> <img alt="Изображение" src="image.jpg" width="200" height="200"> </figure> </body> </html>

Здесь внутри <figure> объединяются подпись (внутри тега <legend>) и само изображение в теге <img>. Тем самым, элемент <figure> позволяет связать подпись и изображение в одно целое. Вот и все новые элементы HTML 5 уровня блока в , надеюсь, что для Вас многое прояснилось, а если нет, то с удовольствием отвечу на любые вопросы на форуме или лично на письма. Но, наверняка, Вы поняли новые возможности при создании сайта.

HTML 5 Элементы уровня текста

В HTML 4 существует множество элементов для различного форматирования текста, например, для форматирования программного кода, выделения различных элементов текста. При этом до сих пор не было никаких элементов, которые позволяют выделять, например, время или числа. Чтобы исправить этот недостаток в HTML 5 были введено несколько тегов уровня текста. Вот их список: 1) mark (m).

2) time. Михаил Русаков и сайт http://MyRusakov.ru

10

Михаил Русаков и сайт http://MyRusakov.ru

3) meter.

4) progress. Тег mark используется для выделения определённой части текста по какому-либо критерию, например, выделение особо важного момента в статье. <html> <head> </head> <body> <p>Основное <m>важная часть</m> повествование</p> </body> </html>

Здесь внутри тега <p> включён тег <m>, который выделяет "важную часть". Тег time, как следует из названия, служит для выделения времени и даты. Например, так: <html> <head> </head> <body> <p>Сегодня <time>21 мая 2010 года</time></p> </body> </html>

Тег meter служит для представления чисел в определённом формате, например, зарплаты, результатов голосования и так далее. Вот простой пример использования элемента meter: <html> <head> </head> <body> <p>Прибыль сегодня: <meter>$15000</meter></p> </body> </html>

Также тег meter представляет шесть атрибутов, позволяющие облегчить жизнь, например, тем же самым поисковым роботам: 1) value - отвечает за само значение некой величины.

2) min - отвечает за минимальное значение некой величины.

3) low - отвечает за минимальное значение некой величины, которое было получено.

4) high- отвечает за максимальное значение некой величины, которое было получено.

5) max- отвечает за максимальное значение некой величины.

6) optium - отвечает за оптимальное значение некой величины. Пример применения этих атрибутов:

Михаил Русаков и сайт http://MyRusakov.ru

11

Михаил Русаков и сайт http://MyRusakov.ru <html> <head> </head> <body> <p>Ваша оценка: <meter value="4.2" min="0" max="5.0" low="3.0" high="4.8" optimum="5.0">4.2</meter>.</p> </body> </html>

И, наконец, элемент progress используется для представления какого-либо состояния. Например, процент выполнения какой-либо задачи, как в примере ниже: <html> <head> </head> <body> <p>Выполнено: <progress value="100" max="500">20%</progress> </p> </body> </html>

Как можно видеть из примера выше, у элемента progress имеются два атрибута: value и max. Значение первого атрибута показывает текущее состояние, а значение второго атрибута показывает максимум, которого необходимо достигнуть, чтобы выполнить определённую задачу. Вот и все новые теги HTML 5, касающиеся текста. Как видите, появляется всё больше и больше возможностей для самого разнообразного форматирования HTML-документа, что, разумеется, хорошо для Web-мастера, которому будет проще понимать то, что он написал, а также для поисковых роботов, которым будет гораздо проще понимать, о чём идёт речь на странице. А в следующих статьях мы поговорим и о других новых тегах HTML.

HTML 5 Элементы мультимедиа

В HTML 5 имеются два элемента для работы с мультимедиа: 1) Audio. Михаил Русаков и сайт http://MyRusakov.ru

12

Михаил Русаков и сайт http://MyRusakov.ru

2) Video. Первый элемент, как следует из названия, служит для добавления аудио-файлов. Простейший пример использования элемента audio в HTML 5 приведён ниже: <html> <head> </head> <body> <audio src="http://myrusakov.ru/music.wav" autoplay="autoplay" loop="3"> <p>Сейчас проигрывается мелодия...</p> </audio> </body> </html>

Как можно видеть, у тега <audio> имеются три атрибута: 1) Атрибут src - указывает путь к файлу для проигрывания.

2) Атрибут autoplay - сообщает браузеру о том, что файл необходимо воспроизвести сразу после загрузки страницы.

3) Атрибут loop - указывает, сколько раз необходимо проиграть файл (разумеется, если пользователь не закроет страницу). Обратите внимание, что внутри тега <audio> имеется текст, который служит для информации о мелодии, что является полезным, например, для людей с ограниченными возможностями. Элемент video используется для добавления на страницу видео-файлов. <html> <head> </head> <body> <video src="film.avi">Фильм...</video> </body> </html>

Здесь также всё прозрачно и, думаю, не стоит пояснять, зачем нужен атрибут src. Напоследок, скажу немного о допустимых форматах. На данный момент понятно, что любой браузер будет поддерживать формат wav для музыки, а такие форматы как mp3 или wma будут поддерживать далеко не все. Что касается видео-формата, то здесь ещё всё более непонятно, впрочем, это не столь важно. Для нас главное, что теперь будет очень простой способ добавления элементов мультимедиа, которые при этом будут с лёгкостью индексироваться поисковыми роботами. Таким образом, у нас появились новые возможности и, конкретно, в HTML, и в создании сайта в целом.

Михаил Русаков и сайт http://MyRusakov.ru

13

Михаил Русаков и сайт http://MyRusakov.ru

HTML 5 Интерактивные элементы

В HTML 5 появились несколько различных интерактивных элементов, которые позволяют изменять страницу без её перезагрузки, что очень полезно для создания динамических сайтов. Вот список интерактивных элементов появившихся в HTML 5: 1) menu.

2) command.

3) datagrid.

4) details. Элемент menu в HTML 5 является достаточно любопытным, в том плане, что он был ещё в более старых версиях языка HTML, но потом был признан устаревшим, и вот в HTML 5 он неожиданно вернулся вновь. Элемент menu содержит элементы command (подобно списку и его элементам), каждый из которых способен запускать определённое действие. <html> <head> </head> <body> <menu> <command onclick="alert('Первая команда)" label="Первая команда"/> <command onclick="alert('Вторая команда)" label="Вторая команда"/> </menu> </body> </html>

Соответственно, атрибут label отвечает за заголовок команды, а атрибут onclick обрабатывает событие "Щелчок мыши". Здесь при нажатии, например, по метке "Первая команда" выскочит окно, в котором будет написано: "Первая команда". Благодаря элементам menu и command можно легко делать различные панели инструментов, интересную навигацию по сайту и тому подобное. Элемент datagrid представляет собой таблицу данных, но, в отличии от обычных таблиц, элемент datagrid может легко обрабатываться пользователями, например, они смогут добавлять и Михаил Русаков и сайт http://MyRusakov.ru

14

Михаил Русаков и сайт http://MyRusakov.ru

удалять строки и столбцы, сортировать их или сворачивать. Вот пример использования элемента datagrid: <html> <head> </head> <body> <datagrid> <table> <tr> <td>Имя</td> <td>Фамилия</td> <td>Зарплата</td> </tr> <tr> <td>Василий</td> <td>Васильев</td> <td>15000</td> </tr> <tr> <td>Иванов</td> <td>Иван</td> <td>20000</td> </tr> </table> </datagrid> </body> </html>

Также вместо таблицы дочерним элементом datagrid может быть, например, элемент select. Главный смысл этого элемента, что создаётся массив с данными из дочерних элементов, и это может быть либо таблица, либо даже обычный список. Элемент detaiils используется для указания информации, которые не является обязательной к показу. Различные браузеры по-разному будут обрабатывать данный элемент. Например, какойнибудь браузер сделает просто сноску, а другой браузер сделает всплывающую подсказку. Пример использования элемента details ниже: <html> <head> </head> <body> <p> Основное повествование <details>Детали...</details> </p> Михаил Русаков и сайт http://MyRusakov.ru

15

Михаил Русаков и сайт http://MyRusakov.ru </body> </html>

Вот и все нововведения в HTML 5 относительно интерактивных элементов. С Уважением, Михаил Русаков!

Заключение. Вот Вы и познакомились с новым стандартом языка разметки HTML 5. Надеюсь, Вы остались довольны, и очень надеюсь, что Вы теперь сможете понемногу его использовать в своей практике. И чем раньше Вы начнёте – тем лучше, так как это неизбежно, и если Вы собираетесь стать Web-мастером, Вам придётся использовать новые возможности HTML 5 на полную катушку, тем более, что знания у Вас уже имеются. Для тех же, кто готов продолжать учиться дальше (а впереди ещё очень много, чего предстоит узнать), прошу посетить мой сайт: http://myrusakov.ru. Там содержится куча полезного материала по CSS (для создания дизайна страница), по JavaScript (много для чего используется, но чтобы было сейчас понятнее, скажу, что используется для создания динамических страниц – DHTML), по PHP (язык, без которого немыслим практически любой серьёзный сайт), по MySQL (необходим для работы с базой данных, без которой также немыслим ни один хоть немного приличный сайт). И многое-многое другое. Ладно, не буду у Вас более отнимать время на пустую болтовню. Скажу лишь напоследок, что создание сайтов – это, как правило, огромная работа, которую без знаний просто невозможно осилить. И сейчас у Вас имеется самая минимальная крупица знаний, которая является основой при создании любого сайта, а чтобы стать действительно профессионалом, Вам предстоит ещё многое узнать. И следующий шаг – это познакомиться с материалами моего сайта. Спасибо за внимание! С уважением, Михаил Русаков!

Внимание Бонус! Всем, кто скачал данную книгу, я дарю бонус – 50% скидку на мой видеокурс: «Создание и раскрутка сайта от А до Я». Данный курс выйдет в сентябре 2010-го года, однако, Вы уже сейчас можете записаться и получить скидку в 50%. Теперь немного о самом видеокурсе. Видеокурс посвящён созданию и раскрутке сайта. В него войдут более 50-ти (!!!) часов авторского обучающего видео по HTML, CSS, JavaScript, PHP, MySQL, XML. Обязательно

Михаил Русаков и сайт http://MyRusakov.ru

16

Михаил Русаков и сайт http://MyRusakov.ru

рассмотрим CMS Joomla, процесс размещения сайта в Интернете и, разумеется, раскрутку сайта. Внимание! На диск войдёт запись создания моего сайта http://MyRusakov.ru. Вы в режиме реального времени увидите, как создавался сайт от начала и до конца. Затем Вы увидите его размещение в Интернете и потом ещё и его раскрутку. И это всё в режиме реального времени. Подведём итог, что Вы получите, приобретя данный диск: 1) Научитесь верстать страницы.

2) Научитесь создавать дизайн сайта.

3) Научитесь писать скрипты на языке JavaScript.

4) Научитесь писать скрипты на языке PHP. 5) Научитесь работать с базами данных.

6) Научитесь использовать XML. 7) Научитесь мгновенно создавать сайты на Joomla.

8) Увидите процесс создания сайта http://MyRusakov.ru 9) Увидите процесс размещения сайта в Интернете.

10) Увидите процесс раскрутки сайта http://MyRusakov.ru в Интернете. Напоследок скажу, что знаний, которые даются в данном видеокурсе, хватит на создание 99% сайтов, которые Вы видите в Интернете! Более подробное описание Вы увидите, когда диск выйдет в продажу.

Что нужно для получения скидки в 50%? Всё, что от Вас требуется – это заполнить простую форму вот здесь: http://myrusakov.ru/bonuskurs.html. Разумеется, никто Вас не обязывает потом ничего покупать, а скидка у Вас останется навсегда! Вы ничем не рискуете: Вы просто получаете скидку, которой потом при желании сможете воспользоваться! Думаю, что выбор очевиден в любом случае: http://myrusakov.ru/bonuskurs.html. С Уважением, Михаил Русаков! Срок действия Бонуса Ограничен (Вдобавок, он может меняться)! Более точно о сроках действия Бонуса Вы узнаете, пройдя по той же ссылке: http://myrusakov.ru/bonuskurs.html

По любым вопросам пишите мне на e-mail: myrusakov@gmail.com.

Михаил Русаков и сайт http://MyRusakov.ru

17