Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

История развития HTML

Содержание:

Введение

С появлением компьютерных сетей и тем более «всемирной паутины», появилась необходимость передачи информации для разных платформ. Ведь необходимо, чтобы все элементы документа на всех компьютерах, не зависимо от используемой системы, отображались одинаково. Для этого используется специальный язык – HTML.

Впервые применение этого языка описания страниц было применено для отображения научной информации в Европейском центре ядерных исследования (Женева), и применялся для возможности отображения информации для всех компьютеров локальной сети. Сегодня HTML служит неотъемлемой частью большинства программ, и прежде всего – для отображения интернет страниц.

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

Тема работы: Основы программирования на языке HTML

Цель работы: изучить основы программирования на языке HTML

Задачи работы:

Изучить литературу

Составить обзор источников

Изучить историю создания языка HTML

Изучить структуру HTML – документа

Изучить основные теги языка HTML

Обзор литературы

Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди- Символ-Плюс, 2008 г. 

"HTML и XHTML. Подробное руководство" - самая полная и современная книга по языкам HTML и XHTML, разъясняющая работу и взаимодействие каждого их элемента Описаны стандарты HTML 4.01, XHTML 1.0 и CSS2, приведен обзор еще не вступивших в силу стандартов XHTML 2 и CSS3. Уделено внимание к новейшим инициативам разработчиков XHTML (XForms, XFrames и модуляризации), а также основам XML.

Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.

Кроме описания основ HTML и CSS, присутствуют в книге рекомендации по созданию списков, таблиц, фреймов, форм, встраиванию картинок любого рода и дополнительные примеры каскадных таблиц стилей. Книгу завершает обзор команд HTML и CSS, поэтому она будет полезна.

HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год

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

Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.

Самоучитель содержит последовательное изложение процесса создания веб-страниц с помощью языка HTML. Подробно рассмотрены процесс создания изображений для размещения на веб-странице (в программе Adobe Photoshop) и общие вопросы веб-дизайна.

Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.

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

Изложение материала сопровождается наглядными примерами, даются советы по планированию и созданию Web-сайтов. 

Джон Д. "HTML, XHTML. Основы веб-программирования с использованием " 2-е издание./ Д. Джон. - Эксмо, 2010 г.

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

Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г. 

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

Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. 

Книга посвящена технологии Dynamic HTML, предназначенной для создания интерактивных Web - страниц.

Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.

Эта книга для тех, кто хочет изучить язык HTML, основные правила web-дизайна, освоить способы конструирования гипертекстовых страниц в соответствии с современным уровнем развития этой области информационных технологий. 

Глава 1. История развития HTML

1.1 Появление языка HTML

Британец Тимоти Джон Бернерс-Ли в Женевском ЦЕРНе изобрел язык гипертекстовой разметки, он же HyperText Markup Language, он же HTML, предназначенный для разметки и оформления документов World Wide Web.

Язык HTML

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

Простота - за счет небольшого набора структурных элементов – дескрипторов (они же «теги»). Все теги пишутся в угловых скобках, напр. <img> и несут какую-то смысловую нагрузку [Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.].

Возможность форматировать документ без привязки к средствам отображения (будь то монитор компьютера, экранчик телефона, или ридер)

И как вы уже, наверное, догадались, первый в мире веб-сайт создал тоже Тим Бернерс-Ли И если точная дата изобретения HTML не известна (т.к. это был долгосрочный проект), то день рождения первого сайта очень даже - это было 6 августа 1991 года. Кстати, его можно увидеть и сегодня, правда уже в архиве.

Полагаю, все веб-разработчики с полным правом могут считать именно 6 августа своим профессиональным праздником

Июнь 1993 - HTML 1.2

В этой версии, из её сорока с копейками тегов уже появилось аж 3 тега, которые намекали на какое-то визуальное оформление документа (например, полужирный курсив). Остальные же теги служили исключительно для логической разметки.

1994 год - основание W3C

Сэр Тим Бернерс-Ли основал Консорциум Всемирной Паутины (World Wide Web Consortium, W3C). Миссией W3C было и остается

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

Огромная заслуга этих ребят принадлежит в том, что HTML был выпущен с единым базовым набором тегов и атрибутов и веб-страницы стали такими, какими мы их знаем сейчас [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.]. Только представьте, в середины девяностых, несколько крупнейших производителей ПО планировали выпустить свои версии HTML со своими названиями тегов. Какая каша была бы сейчас в сфере веб-разработки! Например объявления о работе: «Ищем верстальщика для создания сайтов в Mozilla Firefox», «Срочно требуется верстальщик для Edge», «Нужен верстальщик для Kindle»… словом, спасибо W3C

22 сентября 1995 – Версия 2.0

Процесс разработки и утверждения новой версии был очень неспешным, а единственным заметным улучшением новой версии стали:

Запросы: например поиск по ключевым словам.

Формы для передачи данных с компьютера на сервер: например ввести дату рождения или выбрать один из нескольких вариантов в опроснике.

Март 1995 – начало работы над HTML 3.0

Первый вариант стандарта включал в себя много интересностей:

теги для создания таблиц,

разметки математических формул,

обтекание изображений текстом и др.

Авторы вдруг вспомнили, что по своей идее HTML должен только размечать структуру документа и не должен содержать параметры графических стилей отображения элементов в браузере[Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. ].

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

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

1.2 Появление CSS

17 декабря 1996 – CSS

CSS (Cascading Style Sheets), а по-русски – иерархические стилевые спецификации. Думаю, понятней не стало?)) Если совсем уж по-русски, то это таблицы стилей, которые присоединяются к документу HTML и служат для визуального оформления тех или иных частей документа [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].

Итак, система CSS:

формально не зависит от HTML,

у неё свой, отличный от HTML, синтаксис,

На неё не влияют идеологические ограничения HTML,

Она позволяет задавать параметры внешнего представления для любого тега HTML.

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

Чтобы наглядно продемонстрировать чудеса, на которые способен CSS, канадец Дейв Ши создал сад CSS дзена – место, где сотни веб-разработчиков медитируют верстая одну и ту же HTML-страницу с абсолютно разными стилями CSS [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

Влияние Microsoft

Microsoft заметил стремительный взлет компании Netscape на продаже браузеров Navigator и конечно же, не мог стоять в стороне. В MS слегка переработали браузер Mosaic и начали выпускать свои эксплореры, которые поначалу не очень полюбились пользователям (да и не только поначалу;)).

В августе 1996 была создана версия Internet Explorer 3.0 Браузер предлагал значительные нововведения на то время и обрел популярность, что поделило рынок браузеров пополам между Netscape Communications и Microsoft [HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год].

И в это же время Microsoft взял под свою опеку W3C.

14 января 1997 – HTML 3.2

Версия 3.2 вышла спустя месяц после утверждения CSS, и была уже полностью приспособлена к взаимодействию с таблицами стилей.

В ней были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Internet Explorer 3.

18 декабря 1997 – HTML 4.0

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

Новая версия включала поддержку фреймов, скриптов, общую процедуру внедрения разных объектов. Также в ней были усовершенствованы таблицы и формы, что кроме прочих плюсов обеспечивало большую доступность для людей с физическими недостатками [Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. ].

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

24 декабря 1999 – HTML 4.01

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

Рабочая группа WHAT

2004 год: Швейцарский программист Ян Хиксон (на тот момент разработчик в Opera) и несколько представителей таких компаний как Mozilla, Google и Apple, основал рабочую группу под названием WHATWG (Web Hypertext Application Technology Working Group).

Поводом для создания подобного сообщества стал тот факт, что W3C на тот момент потерял интерес к HTML и занялся развитием XML, а на его основе - расширяемого языка гипертекстовой разметки XHTML. Не будем углубляться в детали, т.к. на данный момент этот язык перестал развиваться.

Два года W3C и WHAT Working Group работали каждый над своим проектом. Но позже стало видно, что WHAT Working Group достигает каких-то результатов, тогда как XHTML 2 так и не реализовался.

И в 2006 году Тим Бернерс-Ли объявил, что W3C и WHATWG будут вместе работать над дальнейшим развитием HTML.

1.3 Появление HTML5

28 октября 2014 – HTML5

C этого дня W3C официально рекомендует использовать HTML5 [HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год].

Новая версия сделала синтаксис более строгим по сравнению с предыдущей

Улучшилась поддержка мультимедиа-технологий

Появились 28 новых структурных элементов, благодаря которым код стал более понятным

Исключена еще часть устаревших тегов [Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.].

Стало больше внимания уделяться поддержке скриптов, например javascript

На данный момент развитие HTML продолжается…

HTML5 Актуальным на 2018 год является пятый стандарт HTML, черновик которого появился в конце 2007 года. Им было введено много новых элементов и атрибутов, сделан особый акцент на семантичность веб-страниц и их доступность для пользователей с ограниченными возможностями. Язык продолжает активно развиваться и улучшаться[Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Глава 2. Описание языка HTML

2.1 Основные термины, которые употребляются в HTML:

Аббревиатура HTML расшифровывается как HyperText Markup Language. То есть HTML – это язык гипертекстовой разметки размещенных в интернете документов. Благодаря его использованию браузеры получают информацию о том, как отображать различные элементы веб-страниц. Некоторые пользователи путают HTML с языками программирования, однако с его помощью нельзя выполнить какие-либо действия – к примеру, открыть всплывающее окно [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г.]. Это всего лишь разметка – подобная той, с которой сталкивался каждый пользователь программы Microsoft Word.

С ее помощью можно создавать таблицы, форматировать текст, добавлять ссылки на фотографии и т. д.

Рассмотрим основные термины, которые употребляются в HTML:

Элемент (element) - конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов [ Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.].

Тег (tag) - начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

Гиперссылка - часть текста, которая является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

Фрейм (frame) - этот термин имеет два значения. Первое — область документа со своими полосами прокрутки. Второе значение — одно изображение в сложном (анимационном) графическом файле (похожее на  кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка» [Джон Д. "HTML, XHTML. Основы веб-программирования с использованием " 2-е издание./ Д. Джон. - Эксмо, 2010 г. ].

HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.

Апплет (applet) - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт или сценарий (script) - программа, включенная в состав Web-страницы для расширения ее возможностей.

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

CGI (Common Gateway Interface) - общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.

Код HTML - гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.

Web-страница - документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Сайт (site) - набор Web-страниц, расположенных в одном месте и связанных между собой.

Браузер (browser) - программа для просмотра Web-страниц.

Загрузка (downloading) - копирование файлов с сервера на компьютер-клиент.

URL (Uniform Resource Locator) или универсальный указатель ресурса, адрес некоторого объекта в Интернете, т.е. типичный URL для WWW, имеет вид: http://www.название.домен/имя файла.

Все элементы языка можно условно разделить на три группы. К первой относятся элементы, которые создают структуру гипертекстового документа. Использование таких элементов - необходимая формальность, которой нельзя пренебрегать [HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год].

Ко второй группе можно отнести элементы, создающие эффекты форматирования. Их использование диктуется конкретными требованиями к документу, фантазией и компетенцией разработчика, К третьей группе относятся элементы, которые позволяют управлять программными средствами, установленными и работающими на компьютере-клиенте [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.]. Часто такие элементы создаются автоматически, когда разработчик использует для вставки некоторого объекта в документ гипертекстовый редактор или подобную программу.

2.2 Структура веб-страницы

Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.

DOMРис.1 Простейшая структура веб-страницы

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д. [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ]

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html> [Джон Д. "HTML, XHTML. Основы веб-программирования с использованием " 2-е издание./ Д. Джон. - Эксмо, 2010 г. ].

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1>, <h2> и <p>являются между собой сестринскими.

2.3 Основные теги языка HTML

HTML-код включает в себя тэги – специальные команды, при помощи которых задается разметка каждой страницы сайта. Тэги могут быть открывающими и закрывающими и отвечать каждый за свою задачу. Например, с помощью тэга <p> можно выделить абзац из текста, а при помощи команд<table>, <tr> и <td> создается таблица [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.].

Выполнить создание сайта на html можно в текстовом редакторе Блокнот, написав соответствующие тэги, не забыв про открытие и закрытие тега и изменив расширение .txt на .html. Для тех, кто не знаком с программированием HTML, были разработаны специальные редакторы, позволяющие создавать сайт из готовых блоков и автоматически генерирующие код. Самыми распространенными из них считаются FrontPage, Dreamweaver и HomeSite [HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год]. Она облегчают работу по созданию сайта, на засоряют код ненужными элементами. Поэтому даже многие неопытные разработчики стараются осваивать язык гипертекстовой разметки и составлять HTML-код самостоятельно.

Все документы HTML имею соответствующее расширение, такое как, Index.html. это сделано для работы браузера и правильного отображения нужной страницы. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. При создании документа HTML требуется строго следовать структуре документа. Открывается документ специальным тегом , который содержит актуальную на данный момент версию HTML. В настоящее время используется пятая версия языка гипертекстовой разметки. Затем следуют открывающие и закрывающие теги, которые образуют основу документа. [Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.].

Внутри специального тега находится специфическая информация, которая является важной частью страницы и HTML. Именно там закладываются основы построения сайта, производится настройка кодировки и вставляется название сайта. Оно находится внутри обязательного тега . название сайта пользователь может видеть в верхней части браузера, там же может находиться и иконка. Для правильного отображения сайта следует сначала грамотно настроить кодировку[Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE> [ Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.].

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.].

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.].

Метатеги отображают данные о структуре страницы и обычно находятся между <head> и <\head> .

Элемент <meta>

Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию [Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.].

<meta name="description" content="Описание содержимого страницы">

<meta name="keywords" content="Ключевые слова через запятую">

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

С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

<meta http-equiv="refresh" content="30">

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

<meta http-equiv="refresh" content="0; url=http://yandex.ru/">

Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также ‎глобальные атрибуты [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Атрибуты тега <META>

charset Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8">

content Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:

default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы".

Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:

<meta http-equiv="refresh" content="30">

Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:

<meta http-equiv="refresh" content="0; url=http://mail.ru/">

name Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop.

application-name указывает название веб-приложения, используемого на странице.

author указывает имя автора документа в свободном формате [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.].

description определяет краткое описание к содержимому страницы, например:

<meta name="description" content="Описание содержимого страницы">

generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:

<meta name="generator" content="WordPress 4.0"> .

keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:

<meta name="keywords" content="Ключевые слова через запятую">.

Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято.

Владение знаниями по HTML также подразумевает применение каскадных стилей оформления, или css. Они задают свойства элементов, отображаемых на каждой странице. Преимущества данного подхода состоят в том, что задание таких параметров как шрифт, цвет и так далее выносится в отдельный файл. Для запуска css-файла применяется тег link . В готовом виде это выглядит примерно вот так: <link rel="stylesheet" href="style.css">, где тег href определяет положение файла, а type – объявляет тип данного файла [Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. ].

<body> <\body> между этими тегами расположена отображаемая для пользователя часть сайта. Всё, что расположено между тегами <body> <\body>, отображается при запуске сайта. В <body> применяется множество тегов HTML. в основном это работа над форматированием текста, применение ссылок и разработка веб-страницы при помощи основных инструментов [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].

АТРИБУТЫ ТЕГА <BODY>

onafterprint

Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.

onbeforeprint

Событие, срабатывающее перед отправкой страницы на печать.

onbeforeunload

Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

onhashchange

Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.

onmessage

Событие происходит, когда сообщение получено через источник события.

onoffline

Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.

ononline

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

onpagehide

Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.

onpageshow

Событие происходит, когда пользователь переходит на веб-страницу, после события onload.

onunload

Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

Перед началом работы в HTML, требуется изучить основные конструкции языка и уметь применять полученные знания. Далее указаны наиболее применяемые теги HTML [ Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.].

<span> используется при выделении подстроки, к которой применяется специальный стиль, прописанный в css; 

<a>- делает переход на веб-странице; адрес которого определяется атрибутом href;

<div> один из наиболее известных тегов; его изучению следует уделить наибольшее внимание , так как это основной элемент, который применяется для создания основных блоков для сайтов (параметры для блоков определяются в css, и внутри этого тега могут находиться другие блоки);

<p> определяет абзац текста; содержимое абзаца находится между открывающим и закрывающим тегами;

<ol> нумерованный список, элементы которого заключаются в парный тег;

<ul> маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом li;

<h1>-<h6> заголовки документа (цифра обозначает уровень заголовка, то есть <h1>- главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней,

<strong> - жирный текст; 

<em> курсив;  

<img> добавляет рисунок на страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения) [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].

Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.

Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне.

Развитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал запутанным и громоздким, возникли проблемы с его изменением или добавлением каких-либо новых элементов. Так же сложно сохранять единый стиль и цветовую гамму для всех страниц сайта. С разработкой стилей оформления, или css выполнение данных функций намного упростилось, да и читать HTML-код теперь намного проще [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.]

Например:

#main_div {

width: 75%;

display: inline–block;

float: left;

}

.right_sidebar {

position: relative;

width: 20%;

float: right;

margin–right: 40px;

}

.right_sidebar img {

box–sizing: border–box;

border–radius: 10px;

width: 100%;

height: 100%;

}

Для работы веб-дизайнером требуется знание HTML и CSS, так как в настоящее время без их освоения невозможно создать сайт . с их помощью определяются атрибуты для элементов страниц, которые действуют для всего документа. Таким образом, при помощи одного правила можно задать параметры для всех страниц на сайте [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

В настоящее время к внешнему виду страниц прелъявляются высокие требования, поэтому применение каскадных таблиц стилей является обязательным. Для подключения файла css к документу, применяется тег link.

АТРИБУТЫ ТЕГА <LINK>

crossorigin

Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: *(или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true, то загрузка изображения будет заблокирована [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

href

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

hreflang

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

media

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

nonce

Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.

rel

Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.

alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),

<link rel="alternate stylesheet" type="text/css" title="small_font" href="small-font.css">.

<link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml">
<link rel="alternate" type="application/atom+xml" title="News" href="/atom.xml?type=news">
archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

author ссылка на страницу об авторе документа или на страницу с контактными данными автора.

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

external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.

first указывает ссылку, ведущую на первый документ из последовательности документов.

help ссылка на документ со справкой.

icon определяет путь к иконке, которая будет использована для текущего документа.

last указывает ссылку, ведущую на последний документ в последовательности документов.

license ссылка на сведения об авторских правах для документа.

next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.

<link rel="next" href="/next.html" type="text/html" title="Следующая страница">

nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер [HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год].

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

prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.

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

<link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница">

search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.

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

stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.

tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.

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

sizes

Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", и может принимать следующий значения:

Ширина высота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширина высота (размеры иконки задаются в пикселях), например:
<link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">;
any — иконка может масштабироваться до любого размера [Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. ].

title

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

type

Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css".

Элемент <script>

Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type, а также ‎глобальные атрибуты.

АТРИБУТЫ ТЕГА <SCRIPT>

async

Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).

charset

Определяет кодировку символов

crossorigin

Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).

anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].

use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен.

defer

Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.

nonce

Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.

src

Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.

type

Используются для объявления языка сценария, использованного при составлении содержимого тега.

Гиперссылки создаются с помощью парного тега <a></a>. Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Обязательным параметром тега <a> является атрибут href, который задает URl-адрес веб-страницы.

<a href="http://site.ru">указатель ссылки</a>

Ссылка состоит из двух частей — указателя и адресной части. Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

метод доступа://имя сервера:порт/путь

Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:

Путь содержит имя папки, в которой находится файл.

Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный [Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. ].

absolute-relative-path

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:

1) протокол, например, http (опционально);

2) домен (доменное имя или IP-адрес компьютера);

3) папка (имя папки, указывающей путь к файлу);

4) файл (имя файла).

absolute-relative-path

Рис.2 Пример структуры папок

Существует два вида записи абсолютного пути — с указанием протокола и без него [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.]:

http://site.ru/pages/tips/tips1.html

//site.ru/pages/tips/tips1.html

Если файл находится в корневой папке, то путь к файлу будет следующим:

http://site.ru/index.html

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

http://site.ru/

Обычно в качестве индексного файла выступает документ с именем index.html. Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

Относительный путь описывает путь к указанному документу относительно текущего.

Путь для относительных ссылок имеет три специальных обозначения:

/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки

./ указывает на текущую папку

../ подняться на одну папку (директорию) выше

Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

3. Якоря

Якоря, или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега <a> с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак # [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ]

.

Если нужно сделать ссылку с одной страницы сайта на определенный раздел другой страницы, то необходимо задать id для этого раздела страницы, а затем добавить его к абсолютному адресу ссылки:

<th id="about-color">color</th>

<a href="https://html5book.ru/css-shrifty/#about-color" class="site" target="_blank">color</a>

Чтобы сделать кликабельное изображение, необходимо поместить элемент <img> внутрь тега <a>. Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target="_blank" для ссылки.

<a href="http://www.fast-torrent.ru/film/gran-za-granyu-tv.html" target="_blank"><img src="//html5book.ru/wp-content/uploads/2014/07/Fringe.jpg" alt="Fringe"></a>

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

ссылка на телефонный номер

<a href="tel:+74951234567">+7 (495) 123-45-67</a>

ссылка на адрес электронной почты

<a href="mailto:example@mail.ru">example@mail.ru</a>

ссылка на скайп (позвонить)

<a href="skype:имя-пользователя?call">Skype</a>

Заключение

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

Интернет-бизнес стремительно развивается, растет конкуренция, появляются новые сервисы и сайты.

Сегодня знание программирования на языке HTML, актуально как никогда..

В процессе работы были решены следующие задачи:

Изучена литература

Составлен обзор источников

Изучена история создания языка HTML

Изучена структура HTML – документа

Изучены основные теги языка HTML

Цель работы- изучить основы программирования на языке HTML достигнута

Список литературы

Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г.

Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.

Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г.

Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.

Джон Д. "HTML, XHTML. Основы веб-программирования с использованием " 2-е издание./ Д. Джон. - Эксмо, 2010 г. 

Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.

Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.

HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год

Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.