Html5

Учебник HTML5

260

Web-программирование — Учебник HTML5

С первого взгляда можно предположить, что HTML5 — это пятая версия языка HTML для создания веб-страниц. Но в действительности все не так просто.

HTML5 — неформал. Его придумала группа вольнодумцев, которые не входили в группу, отвечавшую за официальный стандарт HTML. В стандарте HTML5 разрешаются методы написания страниц, которые были запрещены десять лет тому назад. В нем подробно изложены инструкции браузерам, как обрабатывать ошибки в разметке страниц, чтобы попытаться отобразить эти страницы, вместо того чтобы сразу же забраковывать их.

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

Также в этом стандарте вводится лавина функциональностей, движимых JavaScript, которые могут придать веб-страницам определенные расширенные, интерактивные возможности, встречаемые в программном обеспечении для настольных компьютеров.

Разобраться в HTML5 — задача не из легких. Самой большой проблемой является то обстоятельство, что термин «HTML5» используется для обозначения свыше дюжины отдельных стандартов. (Как мы узнаем, эта ситуация является результатом эволюции HTML5, который начинался как единый стандарт, но впоследствии был разделен на более управляемые части.)

В действительности, термин «HTML5» сейчас означает «HTML5 и связанные стандарты» и, в еще более широком понимании, «следующее поколение технологий разработки веб-страниц». Вот такую версию HTML5 мы и будем рассматривать: все от базового языка HTML5 до новых возможностей, сброшенных в одну кучу с HTML5, хотя они никогда и не были частью этого стандарта.

Теоретический материал:

Наш любимый хостинг

Ни для кого не секрет, что на смену уже устаревающему стандарту HTML 4.01, приходит новый стандарт, который называется HTML5.

Давайте посмотрим, какие новые возможности для нас несет HTML5.

1) Название

Первое, что сразу бросается в глаза – это то, что в названии HTML 4.01 версия «4.01» отделяется от HTML через знак пробела, HTML5 пишется слитно.

Это не случайно. HTML5 – это принципиально новый стандарт, который не имеет отношения к предыдущей нумерации версия HTML.

2) У HTML5 появился новый doctype, который намного проще запомнить.

Теперь он пишется так:

<!DOCTYPE HTML>

Причем, не имеет значения регистр, в котором он написан, можно написать так:

<!doctype HTML>

И так

<!doctype html>

Эта короткая запись заменяет старую и длинную форму:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

3) Теперь кодировку можно указывать новым сокращенным способом:

<meta charset=»UTF-8″>

Вместо старого

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>

3) Добавление новых элементов, которые добавляют логику и семантику на страницу.

Основным конструктивным элементом в HTML4 был элемент div. По сути div – это просто прямоугольная область на странице, которая может содержать в себе все, что угодно.

Проблема в этом и заключалась, что в него можно было размещать все, что угодно и, в некоторых ситуациях, становилось совсем не понятно, какую функцию или роль играет какая-та часть на странице, какой логический смысл она несет. Единственный способ добавить этот самый логический смысл был в добавлении к элементу уникального идентификатора (атрибута id).

В HTML5 div никуда не исчез, но появляются новые элементы, которые сами по себе несут какой-то логический смысл.

О некоторых из них можно почитать здесь.

4) Появились другие новые элементы, которые выполняют какие-то спецефические задачи.

5) Появилась новая технология построения оглавления веб-страницы (outline).

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

6) HTML5 добавляет новые правила, которые делают язык более строгим.

HTML4 был слишком вольным, в плане синтаксиса.

Ко всем урокам курса «Быстрый старт в HTML для начинающих»

HTML5

Уже сейчас в WEB можно разрабатывать приложения, которые успешно выполняются в рамках браузера. Каждый день появляются все новые и новые технологии, которые, в конце концов, позволят нам из злосчастных WEB — страничек сделать мощные инструменты, по возможностям никак не уступающие десктопным программам.

Многие из этих новшеств разрабатываются в рамках образца HTML5.

Интернет устарел, и об этом все знают!

Сначала думали, что все обойдется, но когда в Сети появились толпы людей, которых не интересовали скучные технические отчеты и документация, это стало очевидно. Сеть добивалась красоты и функциональности: изображений, анимации, видео и аудио. Чтобы показать на странице все, что взбредет в голову дизайнера, напрягаться приходится и разработчикам браузеров, и составителям стандартов. Умеренно из обыденного формата разметки текста HTML преобразовывался в довольно сложный идеал, на базе которого делали обыденные нам страницы интернет — магазинов, банковские системы, онлайн игры и сайты для взрослых. Но возможностей образца HTML 4.0 уже не довольно, а если уж говорить совсем на чистоту, то идеал устарел уже в момент его сотворения. Первыми фишку потребностей людей просекли в Macromedia, давно полученной гигантом Adobe, которые выпустили сначала Shockwave, а позднее и Flash. Flash дал то, что всем так хотелось — видео, звук и анимацию, возможности программировать графику и создавать более — менее истинные приложения. Для особо одаренных была реализована возможность соединить JavaScript и Flash (замечу, очень по — уродливому и ненадежно), таким образом дополняя упущения разработчиков браузера. Видео наводнило мир. «YouTube», «Facebook» и «ВКонтакте» стали самыми популярными сайтами, во многом благодаря флешу, потому что без видео и приложений это были бы намного более унылые ресурсы.

Упущенные возможности

Но разработчики образца HTML тоже сообразили свое упущение и решили, что необходимо дать народу новый идеал, чтобы все делали свое дело, не уходя из обычной платформы браузера во всякие Flash, Silverlight, JavaFX.

Дополнительный плагин для отображения страницы — это уже по определению плохо. Пользователям это нужно ставить, обновлять, мириться с дополнительными тормозами. А сам браузер из основного окна в мир Сети стал ненужной прослойкой для запуска приложения на Flash или Silverlight. Интернету срочно потребовался новый идеал взамен устаревшего HTML 4.0. Его и придумали, незатейливо обозвав HTML5. Это уже не только и не столько язык для разметки страниц и их форматирования, сколько управление для разработчиков браузеров, какие возможности они должны предоставлять странице и выполняемому там коду. При всем этом вторгаясь совсем не в область разметки, поручили браузеру дать невиданные возможности скриптам. Отныне работа с видео и звуком, 2D — и 3D — графикой, анимацией, эффектами, сетью на низком уровне — все это должно быть вседоступным в обычном JavaScript.

Основная задача нового образца — расширение образца разметки WEB — страниц для того, чтобы создавать красивые и функциональные сайты стало легче и проще. HTML5 развивается в двух направлениях. Первое — это расширение языка HTML для внедрения новых возможностей, которые ранее делались через грязные хаки и при помощи сплава CSS и JavaScript. В основном это всякие зрительные штуки вроде скругленных уголков, элементы ввода (WEB-формы) и другие украшательства. Второе — добавление в WEB новых возможностей с таким расчетом, чтобы WEB — приложение имело все те же возможности, что и обыденное desktop приложение, при всем этом от пользователя требовался бы только браузер без всяких плагинов или дополнительных библиотек. Самый лучший этому пример — воспроизведение видео (привет, YouTube). Сейчас необходимо на JavaScript и Flash написать плеер, организовать далеко не простую серверную часть, обеспечить все обыденные возможности (проигрывание, остановку, прогрессивную загрузку и тому похожее). Морока еще та. HTML5 тебе говорит, что это все не нужно — пусть браузер этим занимается, а ты просто вставь новый тег «video» и все. Элементы управления проигрывателя, сам код и даже видеокодек — все это стандартно и уже есть в браузере.

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

Дополнительная информация по теме

FTP — что это такое

Информация о том, что же такое протокол FTP, для чего он предназначен и как им воспользоваться

История стандарта SOL

Статья о истории возникновения языка запросов SQL, история стандартизации и появлении различных версий стандарта

Блоги — что это такое

Для чего же нам нужен блог, на какие разделы он разделяется и что же создает его таким уникальным

Разновидности синтаксиса HTML5

Последнее обновление: 08.04.2016

При создании документа HTML5 мы можем использовать два различных стиля: HTML и XML.

Стиль HTML предполагает следующие моменты:

  • Начальные открывающие теги могут отсутствовать у элементов

  • Конечные закрывающие теги могут отсутствовать у элементов

  • Только пустые элементы (void elements) (например, , , ) могут закрываться с помощью слеша

  • Регистр названий тегов и атрибутов не имеет значения

  • Можно не заключать значения атрибутов в кавычки

  • Некоторые атрибуты могут не иметь значений (checked и disabled)

  • Специальные символы не экранируются

  • Документ должен иметь элемент DOCTYPE

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

Документ HTML5 также может быть описан с помощью синтаксиса XML. Такой стиль еще называют «XHTML». Он используется, если заголовок content-type имеет значение . Для данного стиля характерны следующие правила:

  • Каждый элемент должен иметь начальный открывающий тег

  • Непустые элементы (non-void elements) с начальным открывающим тегом также должны иметь конечный закрывающий тег

  • Любой элемент может закрываться с помощью слеша

  • Названия тегов и атрибутов регистрозависимы, как правило, используются в нижнем регистре

  • Значения атрибутов должны быть заключены в кавычки

  • Атрибуты без значений не допускаются ( вместо просто )

  • Специальные символы должны быть экранированы

Сравним два подхода.

Подход HTML5:

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Заголовок</title> </head> <body> <p>Содержание документа HTML5<br> <input type=button value=Нажать > </body> </html>

И аналогичный пример с использованием подхода XHTML:

<!doctype html> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta charset=»utf-8″> <title>Заголовок</title> </head> <body> <p>Содержание документа HTML5<br /> <input type=»button» value=»Нажать» /></p> </body> </html>

При использовании синтаксиса XHTML нам также надо указать пространство имен для данного документа:

Выбор конкретного стиля при написании html-документов зависит от предпочтений программиста или веб-дизайнера. Нередко используется смешенный стиль, который заимствует правила из первого, и из второго стилей.

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

Также заключение значений атрибутов в кавычки поможет избежать потенциальных ошибок. Так, атрибут может принимать несколько значений подряд. Например: . Но если мы опустим кавычки, то в качестве значения будет использоваться «navmenu», а «bigdesctop» браузер будет пытаться интерпретировать как отдельный атрибут.

Если же возникают затруднения, насколько правильной является создаваемая разметка html, то ее можно проверить с помощью валидатора по адресу https://validator.w3.org:

Мы можем вставить в текстовое поле код веб-страницы, и после нажатия на кнопку «Check» внизу валидатор либо отобразит нам ошибки красным цветом, либо зеленым цветом уведомит, что ошибок нет, и код прошел валидацию.

НазадСодержаниеВперед

Добавить комментарий

Закрыть меню