Что такое HTML и XHTML? История. Начало рубрики «Создаем сайт с нуля»

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

Сначала я раскрою понятия HTML, XHTML, а также сопутствующие термины (не все конечно), а затем мы начнем осваивать все знания на практике — сделаем одну страничку (не сайт).

Что такое HTML и HTML документ (интернет-страничка)

Для начала расшифруем эти 4 буквы, из которых состоит любая страничка в интернете — HTML. Аббревиатура расшифровывается как HyperText Markup Language, а в переводе на русский — Язык Гипертекстовой Разметки. А вот значение каждой из букв:

• H — Hyper в переводе с английского — «Гипер». Но Hyper вовсе не означает приставку. Раньше все компьютерные программы работали построчно, то есть сначала выполнялась одна строка, затем другая и так далее (кстати по такому же принципу работали и старые телевизоры — сначала на экран выводилась одна строка, затем другая и т.д.), В данном случае Hyper означает, что компьютерная программа может перейти в любое место в любое время.
• T — Text — тут все предельно ясно. Это сам текст, содержащийся на странице.
• M — Markup — в переводе с английского «Разметка». Это все действия, совершаемые с текстом — изменение размера, цвета текста, выделение заголовков, форматирование текста (жирный, курсив, перечеркнутый текст и т.д.)
• L — Language — в переводе с английского «Язык». HTML — это язык в интернете, как C++ в программировании.

Немного истории. Язык гипертекстовой разметки — HTML — создал британский ученый Тим Бернерс Ли примерно в 1986—1991 годах. Официально, версии 1.0 не существует, потому что сразу же после ее выхода появилась куча неофициальных версий и чтобы хоть как-то отличить эти версии, создали HTML 2.0.

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

Что такое XHTML? Каковы отличия от HTML и используемые версии

Помимо HTML, о котором я рассказал выше, существует еще XHTML. Расшифровывается как Extensible Hypertext Markup Language и на русском  — Расширяемый язык разметки гипертекста.

Обратите внимание не расширенный, а расширяемый. Это значит, что данный язык пополняется (расширяется) до сих пор.

Основным отличием XHTML от HTML является способ обработки документа (интернет-странички). Стоит ввести еще одно определение. Парсер — программа или часть программы, которая выполняет синтаксический анализ.

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

В XHTML эти ошибки уже не исправлялись. Например, при ошибке в каком-либо теге, он просто выводился с остальным текстом.

Еще одно отличие заключается в том, что все элементы должны быть закрыты, а одиночные теги должны после символов иметь знак /, например: <br />. Про тэги я напишу отдельную большую статью, также напишу про каждый тэг отдельно. Кодировка в XHTML — UTF-8 (наиболее распространенная сейчас), в HTML же использовалась   ISO 8859-1.

Версий XHTML меньше, чем HTML.

• Версия 1.0 была разработана и принята в 2000 году, вторая редакция этой же версии вышла двумя годами позднее;
• Версия 1.1 отличалась тем, что авторы и разработчики смогли добавлять свои элементы в разметку;
• Затем вышли две мобильные версии — XHTML Basic и XHTML MobileProfile (MP). Облегченные версии XHTML 1.0, разработанные специально для мобильных устройств;
• И, наконец, последняя версия — 2.0. Но ее как таковой не существует, т.к. разработка остановилась в конце 2010 года, а все что успели сделать передали разработчикам HTML 5.

Что такое <!DOCTYPE> в начале каждой страницы, какие типы документов бывают в XHTML и HTML

Версия 1.0 имеет 3 типа документов:

• XHTML-1.0-Strict — основной тип, позволяющий использовать все элементы (теги) и графические атрибуты (от цвета и размера текста до вставки изображений), основной тип документов. Также этот тип называют строгим;
• XHTML-1.0-Transitional — фактически то же самое, что и Strict, но можно использовать определенные элементы, которые рекомендованы при необходимости. А этот тип называют переходным, так как он предназначен для перехода от HTML к XHTML. Используется на большинстве сайтов;
• XHTML-1.0-Frameset — тип, благодаря которому в Transitional возможно использование фреймов (frame). Этот тип логично называть фреймовым.

Если открыть код практически любой страницы интернета, то можно увидеть строку, начинающуюся с тега <!DOCTYPE>. Вообще, <!DOCTYPE> не является тегом как таковым, а называется эта конструкция — декларация. Она отвечает за распознавание версии HTML или XHTML, узнав которую браузер начинает разбирать код в соответствии с версией.

Это называется работа по стандартам (standart mode). Если же версии не указано, то большинство браузеров определят версию и опять же начнут работать в стандартном режиме. Если же все-таки браузер не определит версию, то браузер перейдет в работу в режиме уловок (quirks mode).

Режим уловок означает, что браузер будет работать как очень очень старый, однако Google Chrome (мой любимый браузер кстати) никогда не был старинным. Так что страница без указания декларации будет обрабатываться как будто вы используете Internet Explorer 5.5.

Вариантов <!DOCTYPE> не мало, все можно найти на странице валидатора W3C. Но так как там все на английском и ничего не разъяснено, попытаюсь донести до вас суть всего написанного. Итак, как только вы попадете на страницу, указанную выше, вы увидите следующее:

Это пример странички в интернете. Видите первую строку? Это и есть та самая декларация. Прокрутив страницу чуть ниже, вы увидите сами варианты <!DOCTYPE> для разных версий HTML и XHTML. Так как сейчас используется в основном только HTML 4.01 и XHTML 1.0 (не забыли что HTML 5 еще в разработке?), рассмотрим только их.

Типы документов в HTML 4.01 такие же, как и в XHTML 1.0. Начнем с первого. Первые три слова всегда одинаковы как в HTML 4.01 так и в XHTML 1.0. В первых кавычках мы видим версию HTML,применимую к данному варианту <!DOCTYPE>. Во вторых кавычках, в конце, мы видим тип документа. В данном случае это Строгий тип — Strict:

Второй тип документов HTML 4.01 — переходный (Transitional):

А вот это <!DOCTYPE> для фреймового типа HTML 4.01. Он встречается очень редко, так как фреймы сейчас не актуальны:

Как мы видим, отличия только лишь в двух словах у всех трех типов. Вот только во втором типе в конце стоит не Transitional, а loose. Роли это не играет, Loose с английского — «свободный», т.е. тот же переходной тип.

Далее на той же страничке следует XHTML 1.0, для которого, как уже было сказано, характерны те же типы документов, что и в HTML 4.01, поэтому я просто подряд напишу варианты < !DOCTYPE> для 1 (Strict), 2 (Transitional) и 3 (Frameset):

1. 1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. 1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. 1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Как вы видите, отличие опять же в конце — теперь к каждому слову приписано xhtml и вместо HTML 4.01 в первых кавычках написано XHTML 1.0.

Если есть вопросы по данной теме, спрашивайте в комментариях, постараюсь ответить (хотя экспертом в этом деле не являюсь). А вот страничку (про которую я писал в начале) в следующей статье — эта вышла довольно большой.