- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Добро пожаловать во второй бонусный урок к
видеокурсу по HTML! В этом видеоуроке я решил поговорить о новой версии языка разметки HTML –
HTML 5. На сегодняшний день она активно развивается. Помимо новых тегов, в ней появилась и масса возможностей. Я не ставлю целью охватить все нововведения в этом видеоуроке, но я вам обещаю, что самые главные теги, которые появились в
HTML 5, мы рассмотрим и разберем.
Отличия HTML 5 от HTML 4
Два самых главных отличия HTML 5 от HTML 4:
- Появилось много новых тегов (header, footer, section), благодаря чему структура документа стала более простой.
- Убраны старые теги, которые с появлением CSS3 и HTML5 становятся совсем невостребованными.
Обзор HTML 5. Что нового?
Давайте разберем HTML5 на примере создания новой веб-страницы. Я создал эту страницу и добавил структуру документа.
05 | <title>Страница на HTML 5</title> |
Уже с первого взгляда заметно, что структура на HTML5 стала значительно меньше в объеме. Начнем с первой строчки. Элемент !DOCTYPE: теперь вместо длинной строки кода нам нужно написать лишь html. Далее идет уже знакомый нам тег html, после него идет тег head — голова документа. Потом идет объявление кодировки. Опять же значительно короче. Затем заголовок нашей страницы. Закрываем голову документа. Тег body. Закрываем тег body. И закрываем html. На этом этапе мы заметили лишь то, что текста стало меньше только в элементах !DOCTYPE и head. Но, в течение этого видеоурока, пока мы будем изучать все новые и новые теги, вы заметите, что они позволяют сделать код меньше и проще.
Давайте приступим к изучению. Первый тег — тег header. Когда я начинал записывать курс по html, я вам немного рассказывал, что тег header в HTML5 означает место для шапки нашего сайта. Если вы начнете изучать CSS вместе с HTML4, то там вместо тега header будут использоваться теги divdiv. Отличия как такового нет, однако, согласитесь, что структура документа становится более понятной.
3 | <h1> Страница на <strong>HTML5</strong> </h1> |
Следующие два тега в HTML5 – это теги section и article. Тег section — это раздел нашего документа, в котором находятся теги article. В переводе article – это статья. То есть в разделе section у нас будут находиться статьи. Они имеют свой заголовок и свой текст.
03 | <h1> Страница на <strong>HTML5</strong> </h1> |
07 | <h3> Моя первая статья по <strong>HTML5</strong></h3> |
11 | <h3> Моя вторая статья по <strong>HTML5</strong></h3> |
Следующим мы разберем тег footer. Это подвал нашего сайта, в котором мы можем разместить любую информацию, но чаще всего там размещают копирайт, то есть информацию о том, что все права на сайт принадлежат его автору.
03 | <h1> Страница на <strong>HTML5</strong> </h1> |
07 | <h3> Моя первая статья по <strong>HTML5</strong></h3> |
11 | <h3> Моя вторая статья по <strong>HTML5</strong></h3> |
Давайте теперь сохраним наш документ, но прежде переведем его в кодировку UTF-8 без BOM. Теперь проверяем в браузере (скачать браузеры можно отсюда).
Мы могли бы сделать header и footer красивее и контент как следует оформить, но нашей целью в этом видеоуроке является не оформление сайта, а получение знаний о новых тегах HTML5. Поэтому мы сейчас снова переходим в код и продолжаем изучение.
Следующий тег — тег навигации nav. Он используется, в основном, для создания меню сайта.
2 | <a href = "#" Главная </a> |
3 | <a href = "#" Обо мне </a> |
4 | <a href = "#" Контакты </a> |
Давайте посмотрим, что у нас получается. Получилось горизонтальное меню.
Перейдем в код и выучим еще три новых тега.
05 | <dd> Привет. Отлично! А у тебя? |
07 | <dd> У меня тоже. Что нового? |
09 | <dd>Да вот, <strong>HTML5</strong> изучаю, а ты как? |
Думаю, тут объяснять ничего не надо. Разве что, различие dt и dd: dd — записывается имя человека, участвующего в диалоге, а dd — его текст, сообщение. Сохраняем. Проверим в браузере. Видим, что структура диалога построена за счет тех тегов, которые мы написали.
Тег figure — это тег, позволяющий связать медиа-контент (изображения, аудио, видео) с подписью или заголовком.
2 | <legend> Логотип сайта Info-line.net </legend> |
3 | <img src="img/info-line.png" alt="Info-line.net"> |
Подпись получилась под изображением. Потом это все можно оформить с помощью CSS.
Следующий тег — aside. Применяется для создания цитат.
Поправка: спецификация HTML5 потерпела изменения и теперь тег aside может также использоваться и для блоков связанных с содержимым сайта (пример: блок ссылок на похожие сайты).
Прошу Вас, обязательно прочитать подробный диалог в комментариях на счет данного тега. Это действительно важно!
Тег time служит для выделения даты или времени.
4 | <time> 21 октября 2011 года </time> |
Пожалуй, на этом с тегами, которые относятся к тексту, мы закончим.
Самый главный «БУМ» HTML5 – это теги audio и video. Они позволяют запустить файлы аудио и видео средствами браузера. Также в HTML5 есть специальные API, которыми можно воспользоваться.
1 | <audio src = audio/depeche_mode.mp3" autoplay = "autoplay" loop = "2"> Depeche mode</audio> |
2 | <video src = video/1_urok_po_css.mp4" autoplay = "autoplay" loop = "1"> 1-ый урок по CSS</video> |
В этом видеоуроке я не буду рассказывать, как создать плеер на HTML5, а просто покажу, как работают теги audio и video. Итак, тег audio: атрибут src указывает путь к файлу; autoplay означает, что файл нужно запустить сразу же, как будет открыта страница в браузере; loop указывает на то, сколько раз проигрывать этот файл. Таким образом, при открытии нашей страницы в браузере, у нас должен одновременно запуститься и видеоурок, и песня группы Depeche mode. Давайте сохраним и обновим браузер.
Браузер Opera у меня старой версии и, видимо, не поддерживает теги audio и video. Поэтому давайте запустим нашу страницу в браузере Google Chrome. Мы слышим и видим, что у нас запустились файлы аудио и видео. Это значит, что теги audio и video работают нормально.
Спасибо за внимание. До встречи в следующем видеокурсе под названием CSS! Приступайте к его изучению, я вас уже жду 
Приступить к изучению видеокурса по CSS немедленно!
Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Info-line.net
Добрый день, Олег!
Прослушала все уроки HTML и хочу поблагодарить Вас за столь кропотливо м добросовестно проделанный Вами труд. Вы все очень замечательно и наглядно представили, понятно комментируете и поясняете. Большим плюсом для неискушенного пользователя (как и для тех, кто «мыслит руками», для кого главный вопрос — что и в какой последовательности нажимать), кмк, является наглядный набор тегов «ручками» и наблюдение in real time, как Вы пользуетесь функциональностью используемых программ. Такой вид обучения стимулирует желание учиться и усваивать новое намного больше, чем изучение тегов «с листа» — в чем я убедилась на себе.
Еще раз благодарю Вас!
Добрый день, Надежда! Спасибо за теплые слова)
Привет Олег! Можно я тебе кое-что спрашу? Уменя проблема! я вот хочу чтоб тег стоял в сайте в правом углу сайта и чтоб был горизантально стоял объясни? какие мне теги добываить?
чтоб слово на пример чтоб они стояли на правом углу сайта ?
Для всех элементов можно использовать абсолютное позиционирование, если знакомы с CSS. А вообще вариантов масса, не вижу никакой проблемы.
Если мой предыдущий ответ не помог, то расскажи подробнее, что тебе надо. Будет лучше, если еще вышлешь исходные коды.
спасибо помогло а не подскажите а можно мне учить с++ я уже выучил html и css а ещё буду учить php я хочу главное освоить язык С++
Можно все, никто вам не может запретить что-то изучать)
не подскажите где я могу изучить с++
К сожалению, я не владею знаниями языка C++. Поэтому и совета вам дельного не дам. В будущем сам хочу изучать C#. Воспользуйтесь поиском в Google.
а вы неподскажите примерно скоко надо учить один язык программирование !
Чем больше учите — тем лучше знаете. Естественно важно еще качество обучения. Здесь слишком много переменных, чтобы можно было сказать однозначно.
Если ваша цель освоить основы, то я думаю вы справитесь и за месяц. Если цель быть знающим в какой-либо области — то вам нужно будет поддерживать свои знания на уровне, а это значит — изучать материал. Если вы останавливаетесь — вы падаете. То есть, чтобы стоять на месте — нужно поддерживать свои знания. А чтобы расти вверх — нужно изучать новые знания в области.
Я думаю как-то так *CRAZY*
спасибо
Почему не появляються новые уроки ?
По нескольким причинам:
1. Я немного обленился
2. Создавался новый дизайн оформления для видеоуроков
3. Редактирование следующего видеоурока, который завтра будет опубликован на сайте заняло целых 5 суток, так как понадобилось применять очень много разных и в то же время нужных эффектов.
Завтра на сайте появится видеоурок. Обещаю. Ну а так как первый блин всегда комом, то теперь редактирование и подготовка слайдов для видео будет занимать значительно меньше времени. А то получилось, что 1 видеоурок готовился неделю
С этого дня, обещаю изо всех сил стараться выкладывать 2-3 видеоурока в неделю. Спасибо, что остаетесь на связи)
Немогу скачать дополнительные материалы, пишет-Download path is invalid!
Большое спасибо, что сообщили! Ошибка исправлена. Теперь все материалы и видеоуроки можно скачать.
А будут ли добавлены уроки по РНР ?
Пока только в планах. Обещать ничего не буду
Доброго времени суток Олег.
Исправьте ошибки пожалуйста в перовм бонусном уроке:
— глобальный элемент <aside></aside> используется далеко не для цитат, для них есть свой элемент <q>Цитата</q>;
— а вот элемент <aside></aside> определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель».
Ссылка на официальный драфт HTML5 —
P.S. Да, надпись — оповещать о новых комментариях по почте — съехала у Вас, поправьте. Мой браузер Pale Moon.
И Вам доброго
Благодарю Вас за внимательность и сообщение. Я обязательно внесу поправки в статью.
Однако, это не ошибка. Тег
<aside></aside>используется для цитат до сих пор, и нет в этом ничего ошибочногоПоясню, в чем дело. Все дело в изменении спецификации HTML5.
Изначально тег
<aside></aside>разрешено было использовать только в рамках тега<article></article>. И предназначался данный тег для выделения информации, связанной со статьей, но не являющейся частью этой статьи.Например: цитаты, сноски, списки ссылок на источники, какая-либо дополнительная информация.
С конца 2009 года в спецификации произошли изменения и появилась возможность использовать тег
<aside></aside>вне тега<article></article>. А это повлекло и изменения в общей сфере веб-мастеринга.С того момента, как тег
<aside></aside>можно использовать отдельно от тега<article></article>, данный тег получил популярность и стал использоваться для задания структуры документа, а именно, как Вы сказали — для «сайдбаров» или боковой панели (не стоит путать с навигационной панелью, для навигации в HTML5 есть тег<nav></nav>).Несмотря, на все эти изменения, тег
<aside></aside>можно и даже полезно использовать для цитат в статье (в теге<article></article>)!Как работает данный тег? — вот самый главный вопрос.
А вот работать он может по-разному. В первом — случае, он может быть цитатой (как я и сказал в уроке). Во втором случае — он может быть сайдбаром, как отметил SjAlan.
1. Если тег используется в теге
<article></article>, то он должен содержать в себе контент, касающийся содержимого статьи (пример: цитата).2. Если тег используется за пределами тега
<article></article>, то в таком случае, содержимое данного тега должно являться второстепенным к сайту в целом (пример: блок ссылок на похожие сайты).Следует помнить, что стандарт HTML5 до сих пор не «устоялся» в интернете и может принимать различные изменения, поэтому следует время от времени следить за изменениями данного стандарта.
Или, подписываться на RSS комментариев моего сайта и следить за новыми комментариями, потому что нас таких много
P.S. Спасибо еще раз SjAlan, за вашу внимательность, но пока еще не дошли руки поправить надпись оповещения о новых комментариях по почте (сайт находится в стадии доработки)