Основы HTML

Введение

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

• Что такое HTML
• Как выглядит HTML
• История HTML
• Структура документа HTML
• Синтаксис элементов HTML
• Элементы блочного уровня и строковые элементы
• Символьные ссылки
• Заключение

Что такое HTML

Большинство настольных приложений, которые читают и записывают файлы, используют специальный формат файлов. Например, Microsoft Word понимает файлы ".doc", а Microsoft Excel понимает ".xls". Эти файлы содержат инструкции о том, как восстановить документ, когда вы откроете его в следующий раз, каково содержимое документа, и "метаданные" статьи, такие как автор, дата последней модификации документа, даже такие вещи, как список сделанных изменений, чтобы можно было перемещаться между различными версиями.

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

Здесь используется технический термин "агенты пользователя", а не "браузеры Web". Агент пользователя является любым программным продуктом, который используется для доступа к страницам Web от имени пользователей. Здесь необходимо сделать важное различие — все типы программ браузеров настольных компьютеров (Internet Explorer, Opera, Firefox, Safari, и т.д.) и альтернативные браузеры для других устройств (такие как Интернет-канал Wii и браузеры мобильных телефонов, такие как Opera Mini и WebKit на iPhone) являются агентами пользователей, но не все агенты пользователей являются программами-браузерами. Автоматические программы, которые компании Google и Yahoo! используют для индексирования Web для использования в своих поисковых системах, также являются агентами пользователей, но ни одно человеческое существо не управляет ими непосредственно.

Как выглядит HTML

HTML является просто обычным текстовым представлением содержимого и его общего смысла. Например, код заголовка "Что такое HTML " выше выглядит следующим образом:

<h2>Что такое HTML</h2>

Часть "<h2>" является маркером (который мы называем " тегом "), который означает "то, что следует далее, должно рассматриваться, как заголовок второго уровня". "</h2>" является тегом для указания, где находится окончание заголовка второго уровня (который мы называем "закрывающий тег "). Открывающий тег, закрывающий тег и все, что между ними называются " элементом ". Однако многие люди используют термины элемент и тег взаимозаменяемо, что не совсем строго правильно.

В большинстве браузеров имеется функция "Исходный текст" или "Просмотр исходного текста", обычно в меню "Вид". Если такая функция имеется, выберите ее и уделите некоторое время изучению исходного кода HTML страницы.

История HTML

В "лекции 2" , "История Интернет и Web", вы немного узнали о том, как появилась современная сеть Web. Когда Тим Бернерс-Ли изобрел World Wide Web, он создал первые Web-сервер и Web-браузер и первую версию HTML (http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/MarkUp.html).

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

По мере того как все больше людей начали создавать Web-страницы и альтернативные варианты исходной программы браузера, все больше свойств добавлялось в HTML. Многие были признаны повсеместно (такие как элемент img, используемый для вставки изображения в документ, реализованный впервые в браузере NCSA Mosaic). Некоторые были более частными и использовались реально только в одном или двух браузерах. Возникла настоятельная потребность в стандартизации — чтобы авторы других программ Web-браузеров имели документ (называемый "спецификацией"), который окончательно описывал для них, как выглядит HTML, чтобы они могли оценить, пропустили они или нет при реализации некоторые части HTML.

IETF (Internet Engineering Task Force- орган стандартизации, занимающийся взаимодействием в Интернет) опубликовал черновик предложения по стандарту HTML в 1993. Он утратил силу, не став стандартом в 1994 г., но стимулировал IETF на создание рабочей группы для создания стандарта HTML.

В 1995 г. был написан " HTML 2.0", использовавший идеи из исходного черновика HTML. Дейв Раггетт написал также альтернативное предложение, названное HTML +, которое использовалось в качестве основы для многих новых элементов, реализованных в браузерах (такие как метод вставки изображений в документы, предложенный впервые в браузере NCSA Mosaic).

Черновик HTML 3.0 появился позже в этом же году, но работа над этой версией была прервана, в связи с отсутствием поддержки со стороны производителей браузеров. HTML 3.2 потерял многие новые свойства 3.0, и вместо этого принял многие разработки популярных в то время браузеров Mosaic и Netscape Navigator.

В 1997 консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров, но попыталась также рационализировать и очистить HTML. Это было сделано, помечая различные элементы как исключенные — что означает, что элементы устарели и хотя они еще существуют в этой версии, они будут удалены в последующем. Это должно было стимулировать лучшее и более семантическое использование HTML в документах (что описано более подробно в "лекции 4" , Модель стандартов Web).

Версия HTML 4.01 была опубликована в 1999 г., и с некоторыми исправлениями опечаток в 2001 г. Это самая последняя версия HTML, хотя в настоящее время готовится черновик версии HTML 5.

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

Структура документа HTML

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html>
              <head>
                <title>Example page</title>
              </head>
              <body>
                <h1>Hello world</h1>
              </body>
            </html>

Документ начинается с элемента типа документа, или doctype (описанного более подробно в "лекции 14" , Выбор правильного типа документа … ). Он описывает, какой тип HTML будет использоваться — чтобы агенты пользователя могли определить, как интерпретировать документ, и решить, следует ли он тем правилам, которым собирался следовать по своему заявлению.

После этого можно видеть открывающей тег элемента html. Это оболочка вокруг всего документа. Закрывающий тег html является последним объектом в любом документе HTML.

Внутри элемента html имеется элемент head. Он является оболочкой, содержащей информацию о документе (метаданные). Это описано более подробно в следующей лекции. Внутри head находится элемент title, который определяет заголовок "Example page" в панели меню.

После элемента head следует элемент body, который является оболочкой, содержащей реальное содержимое страницы — в данном случае только элемент заголовка первого уровня ( h1 ), который содержит текст "Hello world". И это, собственно, и есть весь документ.

Как можно видеть, элементы часто содержат другие элементы. Тело документа всегда будет содержать множество вложенных друг в друга элементов.

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

Синтаксис элементов HTML

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

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

<div id="masthead">
              <h1>The Basics of 
                <abbr title="Hypertext Markup Language">HTML</abbr>
              </h1>
            </div>

В этом примере элемент div (раздел страницы, способ разбиения документов на логические блоки) имеет добавленный атрибут id, для которого задано значение masthead. Элемент div содержит элемент h1 (заголовок первого, или самого важного уровня), который в свою очередь содержит некоторый текст. Часть этого текста упакована в элемент abbr (который используется для определения расширения сокращений), который имеет атрибут title, значение которого задано как Hypertext Markup Language.

Многие атрибуты в HTML являются общими для всех элементов, хотя некоторые являются специфическими для данного элемента или элементов. Они всегда имеют форму ключевое_слово="значение". Значение должно быть помещено в одиночные или двойные кавычки (в некоторых ситуациях кавычки могут отсутствовать, но это не слишком хорошо с точки зрения предсказуемости, понимания и ясности — необходимо всегда заключать значения в кавычки).

Атрибуты и их возможные значения определяются в основном спецификациями HTML (http://www.w3.org/TR/html401/index/attributes.html) - нельзя создать свои собственные атрибуты, не сделав код HTML недействительным, так как это может путать агентов пользователей и вызывать проблемы правильной интерпретации Web-страницы. Единственными реальными исключениями являются атрибуты id и class — их значения полностью под вашим контролем, так как они предназначены для добавления в документы вашего собственного значения и семантики.

Элемент внутри другого элемента называют "потомком" этого элемента. Поэтому в примере выше abbr является потомком h1, который сам является потомком div. И наоборот, div будет называться "предком" элемента h1. Концепция предок/потомок является важной, так как она формирует основу CSS и активно используется в JavaScript.

Элементы блочного уровня и строковые элементы

Имеется две основные категории элементов в HTML, которые соответствуют типам контента и структуре, которую представляют эти элементы — элементы блочного уровня и строковые элементы.

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

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

Символьные ссылки

Последним вопросом, который стоит упомянуть о документе HTML, является использование специальных символов. В HTML символы <, > и & являются специальными. Они начинают и заканчивают части документа HTML, а не представляют символы меньше, больше и амперсанд.

Одной из первых ошибок, которую может сделать автор в Web, является использование символа амперсанда в документе и получение в связи с этим чего-то неожиданного. Например, запись "stones&pounds" может в действительности появиться в некоторых браузерах как "stones£s".

Это связано с тем, что литеральная строка "&pound;" является в действительности символьной ссылкой в HTML. Символьная ссылка является способом включения в документ символа, который трудно или невозможно ввести с помощью клавиатуры, или в кодировке конкретного документа.

Символ амперсанда ( & ) вводит ссылку, а точка с запятой ( ; ) заканчивает ее. Однако, многие агенты пользователя могут быть достаточно снисходительны к ошибкам HTML, таким как отсутствие точки с запятой, и интерпретировать "&pound" как символьную ссылку. Ссылки могут быть либо числами (числовые ссылки) или сокращенными словами (объектные ссылки).

Реальный амперсанд должен вводиться в документ как "&amp;", что является объектной ссылкой символа, или как "&#38;", что является числовой ссылкой. Полную таблицу символьных ссылок можно найти на сайте evolt.org (http://www.evolt.org/article/A_Simple_Character_Entity_Chart/17/21234/).

Заключение

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

Об авторе

Марк Норман Френсис работает с Интернет с момента изобретения Web. Он работает в настоящее время в компании Yahoo! в качестве архитектора внешнего интерфейса для крупнейшего в мире Web-сайта, определяя лучшие методы, стандарты кодирования и качества разработки Web.

До Yahoo! он работал в Formula One Management, Purple Interactive и City University на различных должностях, включая разработку Web приложений, серверное программирование CGI и архитектура систем. Он приписывает себе блог по адресу http://marknormanfrancis.com/.

Источник: Andy Budd http://flickr.com/photos/andybudd/98405468/

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.