Что такое HTML. История создания. Язык HTML

HTML (Hyper Text Markup Language)-это специальный язык разметки документов. Важно отметить, что здесь речь идет об электронных, а не о печатных документах.

Печатный документ имеет строго заданные размеры страницы и полей. В нем точно заданы параметры шрифтов. Электронные документы, Web-страницы предназначены не для печати на принтере, а для просмотра на экране. Заранее неизвестно, на каком компьютере документ будут просматривать. Неизвестен размер окна обозревателя и неизвестно, какие имеются шрифты.

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

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

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

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

Документы, созданные в формате HTML сохраняют в файлах с расширением html или htm.

Теги html

Управляющие конструкции языка HTML называются тегами. Теги – это наборы символов, с помощью которых выполняется разметка текста. Все теги записываются в угловых скобках, которые формируются символами «меньше» (). После открывающей скобки идёт ключевое слово, определяющее тег.

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

Теги бывают парные и непарные . Для воздействия на часть документа (например, на абзац) используют парные теги: открывающий и закрывающий . Открывающий тег создаёт эффект, а закрывающий прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).

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

Если по ошибке в теге записано ключевое слово, отсутствующее в языке, то тег полностью игнорируется.

При просмотре документа в браузере сами теги не отображаются, но влияют на способ отображения документа.

На эффект, создаваемый тегом, могут влиять атрибуты. Атрибуты – это служебные слова, отделённые от ключевого слова тега и друг от друга пробелами. Если требуется указать значение атрибута, то оно записывается после знака равенства и заключается в кавычки. В парных тегах атрибуты добавляются только к открывающему тегу. Закрывающие теги никогда не содержат атрибутов .

Язык HTML позволяет вводить в документ

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

Hyper Text Markup Language - «HTML» (язык разметки гипертекста ) многие уже давно перестали его считать просто языком программирования. Так как само понятие HTML включает в себя различные методы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и много всего другого. Пользователь, освоивший этот язык, приобретает возможность делать серьезные вещи простыми методами и, главное, быстро, что в современном мире считается очень хорошо!

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

• Элемент (element ) - конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.
• Тег (tag ) - начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
• Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
• Гиперссылка - часть текста, которая является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
• Фрейм (frame ) - этот термин имеет два значения. Первое - область документа со своими полосами прокрутки. Второе значение - одно изображение в сложном (анимационном ) графическом файле (похожее на кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка».
• HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.
• Апплет (applet ) - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
• Скрипт или сценарий (script ) - программа, включенная в состав Web-страницы для расширения ее возможностей.
• Расширение (extension ) - элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.
• CGI (Common Gateway Interface ) - общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.
• Код HTML - гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
• Web-страница - документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.
• Сайт (site ) - набор Web-страниц, расположенных в одном месте и связанных между собой.
• Браузер (browser ) - программа для просмотра Web-страниц.
() - копирование файлов с сервера на компьютер-клиент.
• URL (Uniform Resource Locator ) или универсальный указатель ресурса, адрес некоторого объекта в Интернете, т.е. типичный URL для WWW, имеет вид: http://www.название.домен/имя файла.

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

Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями ). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров. Расширения создаются только известными фирмами, которые разрабатывают программное обеспечение для WWW, а рядовые пользователи могут совершенствовать свои Web-страницы при помощи программирования. Аплеты позволяют снять ограничения HTML и дают простор фантазии разработчика.

Версии HTML

Первая версия языка HTML была разработана в начале 90-х годов Тимом БенерсЛи для одного из распространенных в прошлом браузера Mosaic. Но тогда ни для браузера, ни для самого HTML еще не нашлось хорошего применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Но распространение язык HTML получил благодаря версии 2.0, которая появилась в июне 1994 года. И с того момента происходят возрастание популярности WWW по всему миру. Стандарты, включенные в версию 2, настолько прижились что используются и по сей день.

HTML версия 3.0, которая появилась примерно год спустя, в ней была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д. ) при помощи элементов языка. Но развитие этого проекта затормозилось и не получило дальнейшего распространения.

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

Официальная спецификация HTML 4 (Dynamic HTML ) разрабатывалась в 1997 год. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет web-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.

Структура Web-страницы

Ниже представлен код Web-страницы, который выполнен на языке HTML, и на примере этой страницы мы разберем ее структуру, но для начала скопируйте весь код в обычный текстовый блокнот и нажмите «Сохранить как» и сохраняйте уже файл с расширением html, т.е. после названия напишите.html

Структура web документа Переход в Конец документа Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Здесь расположена первая ссылка Здесь должен располагаться
основной текст web страницы.
А я, например, вставлю сюда
несколько переносов,
для того чтобы Вы могли
наглядно наблюдать,
как у Вас работает
ссылки внутри документа,
а то если у Вас будет большое разрешение,
Вы просто не заметите переход по ссылкам

Обозначение документа на языке HTML. Одно из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница. По идеи, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом заканчиваются все подобные документы.

< head >

Область заголовка Web-страницы. Другими словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir.

< title >

Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Данный элемент очень сильно влияет на продвижение в поисковой системе т.к. поисковые системы уделяют особое внимание на тег TITLE. Мой совет: никогда не делаете очень длинный текст в этом теге (65 символов достаточно ).

Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание.

< body >

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

Один из самых полезных атрибутов данного тега, который оказывает свое влияние на дизайн страницы это

background="путь к файлу фона"

Более простое оформление фона сводится к заданию его цвета

bgcolor="#FFFFFF"

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

Так как можно изменить фон страницы можно и изменить цвет текста. Для этого имеется следующий атрибут

text=" #RRGGBB"

Для задания цвета текста гиперссылок используется следующий атрибут

link="#RRGGBB"

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

Элемент заголовка. Различают шесть уровней заголовков, которые обозначаются следующим образом.
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок

Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align="left" align="center" align="right"

Для создания нового абзаца используется тэг

А для перехода на новую строчку без создания абзаца - тэг
т.е происходит перенос. Эти тэги закрывать не обязательно. Конечно, если Вы не используете в тэге

Элемент ALIGN, которым может задавать выравнивание абзаца:

По левому краю

По центру

По правому краю

Текст, находящийся между этими элементами выравнивается по ширине

Горизонтальная линия (horizontal rule ) - очень распространенный элемент. Во-первых, потому что с его помощью очень легко и удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но имеет ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

• align="left"
• align="center"
• align="right"
• align="justify"

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

Произвольный текст

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

Для вставки изображений (картинки ) в HTML документ используется следующий тег (представлено полное описание атрибутов данного тега ):

Списки

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

Самым распространенным является ненумерованный список (unordered list ). Он представлен ниже:

• Пункт 1 списка
• Пункт 2 списка
• Пункт 3 списка

Элемент ul является своеобразным выделением списка. Он позволяет разделять один список от другого. Элемент liобозначает каждый из пунктов.

Таблицы

Являются одним из самых необходимых средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер прорисовку всей таблицы берет на себя. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. По мимо всего прочего, таблицы позволяют решать многие дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и так далее. При создании таблиц применяется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов располагаются элементы для описания каждой ячейки в строке (ТD,ТН).

Для того чтобы разобраться в структуре существующей таблицы или разработать новую таблицу, существует одно правило, что последовательность элементов описывает таблицу сверху вниз и справа налево. Например, если после элемента TABLE указан элемент TR, это указывает на то, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек ), другая таблица и так далее. После того как появится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега ).
Таблицу можно выровнять по горизонтали при помощи атрибута align:

• align="left" - влево;
• align="center" - по центру;
• align=" right" - вправо.

Ширину таблицы можно задать точно в пикселях или в процентном отношении к ширине страницы в окне браузера. Например: width=400 или width=50%

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

Сценарии

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

Сценарий - это программный код, который включается в текст страницы в виде исходного текста и выполняется браузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript ), разработанном фирмой Microsoft.

Данный тег позволяет отделить текст программы-сценария от другой информации страницы. Тег SCRIPT обязательно включает в себя атрибут language, который определяет язык и может принимать следующие значения:

• javascript - код на языке JavaScript;
• vbscript - код на языке VBScript.

Атрибут type тоже может указывать на тип языка, хотя его применение не является обязательным. Чтобы не нарушать все правила, внутри элемента можно поместить такое определение:

type="text/javascript"

Одной из самых прикольных особенностей сценариев является возможность изменения содержимого страницы в результате выполнения программы. Но это только особеность, а не правило. С помощью атрибута defer (который не принимает никаких значений) можно «сказать» браузеру, что таких изменений внесено, не будет. В некоторые случаях это позволяет ускорить загрузку страницы.

Из стандартных атрибутов можно использовать атрибут charset.

Тег SCRIPT (или ряд таких элементов ) может располагаться как внутри элемента HEAD, так и внутри элемента BODY. Если сценарий находится внутри элемента BODY, возможна и такая ситуация, когда какой-нибудь браузер, не поддерживающий элемент SCRIPT, воспримет программный код как обычный текст и выведет его на экран. Чтобы этого не случилось, код сценария вводят как комментарий:

-
-
-

Все современные браузеры распознают этот прием и игнорируют символы комментария. Если в тексте сценария нужно ввести комментарий, то для этого используют иное обозначение: в начале строки вводят два слеша //.
Программный код сценария выполняется в момент загрузки страницы, т.е. когда на экране еще видно ее содержание. Ниже представлен пример простейшего сценария (вывод сообщения в окне ).

-
-
-
- Просто сценарий
-
- alert("Вы написали свой первый сценарий!")
-
-
-
-

Это простая страница, но она включает сценарий из одной строки. С помощью метода alert перед загрузкой выводится сообщение. И оно будет висеть до тех пор, пока пользователь не нажмет на кнопку ОК, загрузка не будет продолжена.
Возможен случай, например страница, будет просматриваться в браузере, не поддерживающем сценариев, для этого предусмотрен элемент NOSCRIPT. Современные программы просмотра игнорируют его содержимое. Этот элемент можно использовать несколькими методами. Для начала, внутри него можно показать объявление наподобие следующего: «Ваш браузер не может выполнить сценарий, необходимый для просмотра этой web-страницы! » Во-вторых, внутри элемента можно разработать упрощенную версию страницы, без скриптов. В-третьих, можно создать ссылку на другой HTML-документ. Элемент NOSCRIPT должен обязательно снабжаться конечным тегом.

Вот мы с Вами и рассмотрели основы такого языка WEB-программирования как HTML. Даже после прочтения этой небольшой статьи Вы уже имеете представление, и даже возможность программировать на этом языке. Желаю удачи!

Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Краткая предыстория

Давным давно, практически на заре цивилизации (до 70-х годов XX века), не было интернета. Вообще не было.

С появлением компьютеров появилось желание и потребность как-то их объединить, и 4 крупных университета США взялись за эту задачу. Примерно 7 лет прошло от создания концепции до исторического момента:

29 октября 1969 года был проведен сеанс связи между двумя первыми узлами сети ARPANET, на расстоянии в 640 км: в Калифорнийском университете и в Стэнфордском исследовательском институте. Ученый из Лос-Анджелеса подключился удаленно к компьютеру в Стэнфорде. Стэнфордский коллега видел, как появляются на экране символы, введенные на расстоянии, и подтверждал по телефону передачу каждой буковки. Таким образом началась эпоха компьютерных сетей.

Долгое время Интернет был предназначен только для специалистов и служил в основном для обмена технической документации и имейлами. Простому пользователю делать там было нечего. И только в начале 90-х прошлого века произошла революция "интернет-народу!" 🙂

1991 год

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

Ах да! Еще Сэр Тим разработал глобальный гипертекстовый проект (сейчас Вы его знаете как Всемирную паутину ). Собственно, HTML и родился в процессе работы над этим проектом.

Язык HTML

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

Как вам понравилась первая веб-страница? 🙂 Думаю, большинству из вас не захотелось её читать и уж тем более оставаться там надолго. Создатели тоже понимали, что это только начало, и пошло поехало:

Июнь 1993 - HTML 1.2

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

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

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

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

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

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

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

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

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

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

• теги для создания таблиц,
• разметки математических формул,
• обтекание изображений текстом и др.

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

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

17 декабря 1996 – CSS

CSS (Cascading Style Sheets ) , а по-русски – иерархические стилевые спецификации. Думаю, понятней не стало?)) Если совсем уж по-русски, то это таблицы стилей, которые присоединяются к документу HTML и служат для визуального оформления тех или иных частей документа.

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

• формально не зависит от HTML,
• у неё свой, отличный от HTML, синтаксис,
• На неё не влияют идеологические ограничения HTML,
• Она позволяет задавать параметры внешнего представления для любого тега HTML.

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

Чтобы наглядно продемонстрировать чудеса, на которые способен CSS, канадец Дейв Ши создал сад CSS дзена – место, где сотни веб-разработчиков медитируют верстая одну и ту же HTML-страницу с абсолютно разными стилями CSS

Влияние Microsoft

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

В августе 1996 была создана версия Internet Explorer 3.0 Браузер предлагал значительные нововведения на то время и обрел популярность, что поделило рынок браузеров пополам между Netscape Communications и Microsoft.

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

14 января 1997 – HTML 3.2

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

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

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

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

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

Версия 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.

28 октября 2014 – HTML 5

• Новая версия сделала синтаксис более строгим по сравнению с предыдущей
• Улучшилась поддержка мультимедиа-технологий
• Появились 28 новых структурных элементов, благодаря которым код стал более понятным
• Исключена еще часть устаревших тегов
• Стало больше внимания уделяться поддержке скриптов, например javascript

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

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

Может, скоро и вы станете одним из них?

И напоследок, минутка юмора:

Оптимист учит английский, Пессимист - китайский, а реалист учит html.

Будьте реалистами 😉

• Перевод

Примечание: это не полный перевод статьи. Я выбрал только самые интересные лично для себя пункты. Статья не претендует на свежесть, но возможно даже люди хорошо знакомые с версткой найдут для себя что-то интересное. Статья затрагивает некоторые аспекты семантики верстки с конкретными примерами.

Под катом много букв! Чтоб не потеряться в их обилии все пункты выделены заголовками.

2. Какие версии HTML существуют? Первая версия HTML (1989) не имела номера версии; это был просто «HTML». Первая стандартизированная версия HTML, выпущенная Internet Engineering Task Force (IETF) в 1995, называлась HTML 2.0.7. Какая разница между Strict, Transitional и Frameset DTD"шками? Разница между этими DTD в том, какие элементы и атрибуты они декларируют и в том, каким образом они позволяют (обязывают) соблюдать вложенность элементов.

• HTML 4.01 Strict DTD - делает ударение на разделении содержимого от презентации и поведения. Эту DTD W3C рекомендует для всех новых документов.
• HTML 4.01 Transitional DTD - является неким промежуточным звеном при переходе от «старой» (old-scool"ьной, доHTMLьной) разметки к современной. Не рекомендуется использовать при написании новых документов. Содержит 11 презентационных элементов (прим. переводчика: не несущих смысловой нагрузки, а используемых исключительно для изменения внешниго вида; например элемент ) и полный набор презентационных атрибутов, которые отменены в Strict DTD. Transitional DTD часто необходима для страниц располагающихся внутри фреймов, т.к. она имеет атрибут target , необходимый для открытия ссылки в другом фрейме.
• HTML 4.01 Frameset DTD - используется для страниц на основе фреймов. Консорциум W3 не рекомендует использовать фреймы. Для современных сайтов более удачным решением будет использование приложений на стороне сервера для решения подобных задач.

8. Какой DOCTYPE выбрать? Если мы создаем новую страницу, W3C рекомендует использовать HTML 4.01 Strict (прим. переводчика: конечно, всем известно, что всё-таки лучше использовать XHTML 1.0 Strict) .

Если мы собираемся переводить старые HTML 2.0 или HTML 3.2 документы, то пока мы не перевели всю презентацию в CSS, а элементы, отвечающие за поведение в JavaScript, мы можем использовать HTML 4.01 Transitional.

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

На протяжении «войны браузеров» в конце 90-х, такие производители браузеров как Microsoft и Netscape соревновались, кто больше придумает «крутых» фич для стилизации и оформления HTML страниц. Проблема была в том, что эти фичи не были стандартизированными и, в большинстве случаев, были не кроссбраузерными.

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

Также были широко распространены нестандартизированные атрибуты. Один из примеров - marginwidth .

13. Что такое BOM?BOM , или byte order mark (отметка последовательности байтов) - используется в некоторых кодировках, которые используют больше 8-ми бит для кодирования данных (например, UTF-8 или UTF-16). Процессор умеет использовать две разные схемы хранения больших целых чисел: «big-endian» (тупоконечная) и «little-endian» (остроконечная). BOM содержит 16 бит, записанных в самом начале файла, которые указывают браузерам, какая схема используется.

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

Единственное решение проблемы - не использовать BOM. Редакторы, которые умеют сохранять документ в UTF-8 обычно позволяют выбрать, использовать или не использовать BOM.

14. Какую кодировку использовать?Прим. переводчика: переводить этот пункт не стал; думаю, всем известно, что UTF-8 - это наше всё. Следует использовать UTF-8 . А при сохранении документа выбирать UTF-8 without BOM . 16. Почему нужно писать & amp; вместо &?Прим.: HTML-последовательности у меня написаны с пробелом после амперсанда, потому что в противном случае парсер Хабра их отображает не так как надо.

Некоторые символы имеют особое значение в HTML: < (меньше), > (больше), & (амперсанд), " (кавычки), " (апостроф). Иногда, когда мы хотим использовать эти значки в обычном тексте, мы должны заменять их HTML-последовательностями.

Для первых четырех указанных выше знаков последовательности будут выглядеть так:

• & lt; (меньше)
• & gt; (больше)
• & amp; (амперсанд)
• & (кавычки)

XML определяет HTML-последовательность для апострофа (& apos; ), но HTML не включает в себя эту последовательность. Апостроф может быть заменен только цифровой последовательностью (& #39; ). Прим. переводчика: ради интереса провел маленький эксперимент. На практике последовательность & apos; в апостроф интерпретируют все браузеры (FF3, Opera 9, Safari 3, Google Chrome) кроме IE (все версии).

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

В большинстве случаев в HTML амперсанд не замененный последовательностью ничего не ломает (но XHTML - это другая история). Но что если нам случится столкнуться с параметром запроса, совпадающим с названием html-последовательности…

21. Что использовать,

Или
? Элемент p используется для выделения абзацев в тексте. Абзац - одно или больше предложений объединенных одной мыслью.

Перенос строки (br ) в основном используется как презентационный инструмент и должен скорее быть реализован на CSS чем на HTML. Впрочем, есть несколько ситуаций, когда перенос строки может иметь семантический смысл, например, при разметке строк в стихах и песнях, при написании почтовых адресов или при разметке примеров кода. В этих случаях использование br оправдано, но использование br для разделения абзацев не допустимо.

С другой стороны p имеет довольно четкое семантическое значение: разметка абзацев. Иногда веб-разработчики склонны рассматривать p как основной блочный для использование в качестве контейнеров, но это не верно. Не редкость увидеть элементы label и input внутри p в формах, но я бы назвал это семантически неверным. Метки и поля ввода не могут являться содержимым абзаца.

23. Стоит ли заменить и на и ? Только если вы действительно хотите подчеркнуть что-то (сделать на чем-то ударение, выделить). Эти теги не являются равноценными.

В Теперешние Не Менее Грустные Времена, авторы используют strong и em для того, чтобы сделать текст жирным или курсивом .

em означает семантическое ударение, усиление значения. Содержимое, к которому применяется такой вид выделения, должно иметь усиление во время прочтения вслух (например, громче или протяжнее). strong означает ещё большее ударение, но часто это считается излишним (можно использовать вложенные em для указания еще большего ударения). Некоторые эксперты советуют использовать strong только для определенных элементов на странице, которые однозначно должны быть выделенными (например, указатель «текущей страницы»), и не должны отмечать слова и фразы внутри основного текста.

b и i не имеют семантической нагрузки; они всего лишь меняют шрифт на жирный или курсив. Они хороши для использования в общепринятых типографских правилах, которые не нашли семантически подходящего HTML элемента. Например, названия кораблей традиционно отображаются курсивом, но в HTML нет элемента . По этому можно записать Титаник.

27. Как правильно использовать элемент ?address используется для указания контактной информации на странице. Это может быть почтовый адрес, номер телефона, любая другая контактная информация. address - блочный элемент, который может содержать только текст и inline-элементы. В большинстве браузеров по умолчанию отображается курсивом, но это легко исправить с помощью CSS.

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

28. Как правильно использовать элемент ?dfn используется для «определения значений терминов». Это типографское соглашение, особенно общепринятое в научных документах, для выделения курсивом нового термина, с которым читатель возможно не знаком, когда определение появляется в тексте первый раз. По умолчанию dfn отображается курсивом.

Общеизвестное заблуждение, что dfn означает «сокращение» и многие авторы используют его также как abbr и acronym (указывая пояснение к термину с помощью атрибута title). Термины должны отмечаться с помощью dfn в документах только один раз (при первом употреблении термина и его пояснении).

29. Как правильно использовать элемент ?var используется для разметки переменных, или заменяемых частей текта. Это типографское соглашение, принятое для выделения переменных курсивом, которые в реальной жизни заменяются другими данными. Например, в руководстве к телефонным коммуникациям, инструкция по перенаправлению входящего телефонного звонка на другой дополнительный номер может выглядеть приблизительно так:

* 21 * дополнительный номер #

Здесь тег var используется для указания «дополнительного номера» (который будет отмечен курсивом). Тот, кто захочет перенаправить звонок на дополнительный номер 942 напишет «21*942# ». Таким образом, var означает не то, что вы должны ввести «д-о-п-о-л-н-и-т-е-л-ь-н-ы-й н-о-м-е-р», а то, что вместо слов «дополнительный номер» будут цифры.

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

31. Какая разница между тегами и ? Никто толком не может дать ответ на этот вопрос! Даже спецификация HTML в какой-то степени противоречит сама себе.

abbr было расширением Netscape для HTML на протяжении «войны браузеров». acronym было Майкрософтовским расширением. Оба варианта означают приблизительно одно и тоже. Оба элемента были включены в спецификацию HTML с разной семантической нагрузкой. Проблема в том, что никто толком не может объяснить, в чем заключается эта семантика.

Давайте обратимся к словарю:
Аббревиатура - сокращенная форма слова или фразы.
Акроним - слово, сформированное из первых букв или нескольких первых букв слов в составе фразы или нескольких слов.

Определение акронима говорит, что это слово, т.е. оно может быть произнесено. Таким образом, «NATO» является акронимом, т.к. состоит из начальных букв в словосочетании «North Atlantic Treaty Organization». Напротив, «FBI» не будет являться акронимом, в соответствии с определением, потому что его нельзя произнести как целое слово, а скорее оно будет звучать как «еф-би-ай». Вот тут то и начинает неразбериха. Технически известно, что «FBI» - это инициализм (прим. переводчика: в оригинале «initialism») , определение которого по словарю звучит так:

Инициализм - 1) название или термин, сформированный из первых букв или из нескольких первых букв слов, которые произносятся как отдельные слова; 2) группа первых букв означающих имя, организацию и т.д., которые произносяться отдельно.

Первое определение почти то же, что и акроним, а второе более отстраненное. Не смотря на это в спецификации нет элемента initialism , и путаница усугубляется тем, что слово «акроним» в простой американской речи используется как синоним слова «инициализм».

Спецификация HTML предлагает следующие определения:

abbr - указывает на сокращенную форму (например, WWW, HTTP, URI, Mass и т.д.).
acronym - указывает на акроним (например, WAC, radar и т.д.).

Похоже на то, что спецификация ссылается на словарные определения, что означает что «FBI» должно быть размечено тегом abbr , т.к. не может быть произнесено как целое слово. Не смотря на это, несколькими абзацами ниже спецификация говорит:

Западные языки широко используют такие акронимы как «GmbH», «NATO», и «F.B.I.», в качестве аббревиатур таких как «M.», «Inc.», «et al.», «etc.»

Вы еще не запутались? Я да. Безопаснее всего всегда использовать abbr , так как все акронимы также являются аббревиатурами, но не наоборот. Не смотря на это, тут есть небольшая проблема. Microsoft были так расстроены решением W3C использовать abbr для абревиатур и инициализмов вместо acronym , что они отказались от поддержки тега abbr ! (Но все же ввели поддержку abbr в Internet Explorer 7.)

Так что же делать бедным веб-разработчикам? И почему мы вообще должны заморачиваться? Конечно, хорошо иметь элемент, к которому можно прилепить атрибут title , но мы же это можем сделать и со span "ом. Суть в том, что размечать акронимы и аббревиатуры хорошо для смежных технологий; в частности для screen reader"ов. Но скрин ридеры в большинстве предпочитают игнорировать теги abbr и acronym , т.к. никто точно не знает, как правильно их использовать и Microsoft не поддерживает тег abbr . Это палка о двух концах.

Вопрос на этот ответ я не знаю! Лично я использую abbr для таких очевидных аббревиатур как «Inc.» и для таких инициализмов как «FBI», и использую acronym для сокращений, которые можно прочесть как слово, например «GIF». Но в соответствии со спецификацией я не могу никого обвинить в разметке «FBI» в качестве акронима. А как на счет «SQL», который некоторые произносят по буквам, а некоторые называют «сикуэл».

32. Почему отменяются определенные фичи? Самая распространенная фича которой интересуются новички - это атрибут target . Этот атрибут запрещен в HTML 4.01 Strict, но до сих пор поддерживается в HTML 4.01 Transitional. Существует много элементов и атрибутов, которые разрешены в Transitional, но запрещены в Strict.

Причина, по которой W3C отменяет некоторые элементы и атрибуты - желает разделить содержимое (HTML), внешний вид (CSS) и поведение (JavaScript). Заставить элемент отображаться по середине - это вопрос презентационный; он должен быть решен средствами CSS, а не с помощью тега center . Открыть ссылку в новом окне - это вопрос поведения; он должен решаться средствами JavaScript, а не с помощью атрибута target .

В основном, отмененные фичи - те, которые появились на протяжении войны браузеров в 90-х. Эти фичи были включены в HTML 3.2, чтобы хоть как-то навести порядок, но это не главная задача, которая стояла перед HTML. С релизом HTML 4, его авторы попытались «переучить Веб» убирая «пагубные» части, которые были включены в HTML 3.2, по крайней мере в Strict DTD.

Другими словами эти вещи отменены не просто так. По возможности старайтесь их не использовать.

37. Как подключить HTML страницу внутри другой страницы? Если вы используете Strict DTD, то у вас есть только один валидный способ - использовать элемент object :

Alternate content here for browsers that don"t support OBJECT.

К сожалению поддержки object "а нет в Internet Explorer"е.

При использовании Transitional DTD можно использовать iframe "ы:

Alternate content here for browsers that don"t support IFRAME.

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

Что такое HTML ?

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

Особое развитие HTML получил вместе с развитием WWW (World Wide Web), поскольку разрабатывался как универсальный язык для всех устройств, независимо от имеющегося на них оборудования. Использование языка дает возможность структурного отображения информации и упрощает ее восприятие. Если сравнивать с печатной продукцией, то это будет соответствовать колонкам и полосам газеты. Заголовки, положение картинок, таблицы – это все необходимо для структурной подачи, поскольку сплошной массив текста читать весьма затруднительно.

Первые версии HTML были разрознены и не имели определенного единства. В результате пришлось выработать определенный единый стандарт. Это было сделано в 1995 году, и стандарт оформлен был в виде официальной версии HTML 2.0. Через 2 года (в 1997) к нему были добавлены некоторые возможности. Новый формат получил название HTML 3.0, и предложен был W3C (World Wide Web Consortium) . Теоретически он включал в себя все функции 2.0, но в те времена возможности браузеров были весьма ограничены, поэтому полной совместимости не получилось. К концу 1997 года после апробирования версии языка 3.2, был принят новый стандарт 4.0. В нем старые дескрипторы были упразднены, и появились новые, в частности, использование каскадных таблиц стилей (CSS ).

Базовая структура документов

Большая часть современных программ для верстки страниц, такие как Dreamweaver и Microsoft SharePoint Designer , автоматически создают базовую структуру документов, но для того, чтобы правильно читать и создавать ее самостоятельно, необходимо познакомиться с простыми правилами.

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

Документ HTML начинается и заканчивается тегами формата документа.

Тут код страницы

Перед тегом документа может указываться стандарт, с использованием которого будет отображаться содержимое (тег DOCTYPE ).

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

Заголовок определяется тегами и , и содержит данные, предназначенные для форматирования документа. В заголовке прописываются также загружаемые скрипты, которые требуются для отображения данных. В тегах < title> и прописывается заголовок страницы который отображается в заголовке окна или вкладки.

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

Структуру HTML документа можно представить следующим образом.

< title> Заголовок страницы (отражается в окне!)

Заголовок документа. Не отображается на экране

Тело документа. Отображается на экране