Краткий курс HTML 5

1. Введение

Этот курс познакомит вас с языком разметки текста HTML. Вместе с необходимым знанием таблиц стилей CSS вы сможете верстать валидные (соответствующие стандартам W3C) веб-страницы. HTML и CSS не являются языками программирования, поскольку не способны принимать команды от человека и производить вычисления. Их предназначение — только разметка и оформление текста.

Почему HTML 5?

Исторически так сложилось, что HTML является основным языком веб-страниц. XHTML, считавшийся перспективной альтернативой этому стандарту, по ряду причин не был должным образом поддержан интернет-сообществом. Организация W3C, занимавшаяся его разработкой, в конце 2009 года прекращает развитие проекта и концентрирует силы на HTML 5. Параллельно с ними разработкой занимается WHATWG, которая и положила начало стандарту с рабочим названием Web Applications 1.0 (он же HTML 5). Ведущие интернет-компании, в частности Google и Microsoft, заявили о своей поддержке HTML 5, что еще более утвердило позиции этого стандарта и фактически сделало его основным наследником HTML 4 и XHTML.

HTML 5 учитывает опыт XHTML, XForms и других веб-стандартов; одновременно с этим он лишен некоторых недостатков предыдущих версий HTML. Синтаксис языка упрощен, однако благодаря механизму представлений реализована обратная совместимость с HTML/XHTML. Семантика дополнена и уточнена — появились новые полезные теги, исчезли устаревшие и т. д.

В идеологию HTML 5 входит отделение логической структуры документа и самой информации от способов ее отображения (стилей оформления). Таким образом, теги призваны обозначать каркас документа и указывать на его отдельные конструкции, в то время как правила их отображения должны определяться в CSS или других таблицах стилей. Это позволит корректно обрабатывать код таким интерпретаторам, как, например, аудио-браузеры.

Курс будет полезен…

Какие нужны программы?

В первую очередь, браузеры. На практике различными браузерами страница может отображаться по-разному, поэтому в целях достижения кросс-браузерности (идентичного отображения документа в различных браузерах) принято визуально проверять качество верстки в нескольких из них. В частности, Chrome, Internet Explorer, Mozilla и Opera.

В Opera встроена возможность проверить, соблюдены ли на странице веб-стандарты (валидность кода). Для этого достаточно нажать Ctrl+Alt+Shift+U или вызвать соответствующую команду из контекстного меню. В Mozilla аналогичная функция реализуется с помощью плагина «Html Validator». Internet Explorer позволяет проверить код с помощью встроенных средств разработчика, доступных по нажатию F12. Валидность кода не зависит от браузера, поэтому достаточно одного из этих вариантов. Вам также понадобится интернет-подключение.

Для редактирования HTML и CSS подойдет даже «Блокнот», хотя можно воспользоваться специализированными программами (например, Notepad++ «понимает» синтаксис HTML, CSS, PHP и многих других языков, что очень удобно). В отличие от WYSIWYG-редакторов, которые сразу отображают набранный текст с учетом оформления (цвета, шрифты, изображения и т. п.), в случае с обычными, или WYSIWYM-редакторами, необходимо сохранить HTML-код документа в файл с расширением .html (.htm), после чего можно посмотреть в браузере конечный результат. Используйте именно такой редактор, поскольку если не набирать код вручную, то это может стать большим препятствием обучению.