HyperText Markup Language +

 

 

Основные понятия

 

HTML (Hypertext Markup Language) - язык разметки гипертекста. 

 

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

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

 

Разметка - вставка в текст дополнительных служебных символов.

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

HTML – не является языком оформления гипертекстовых документов. Форматирование документа с помощью HTML - устаревшая порочная практика. Но... популярная :-(

 

 

Что не есть HTML

 

HTML не является языком программирования, это компьютерный язык разметки.

 

HTML – не является языком оформления гипертекстовых документов.

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

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

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

 

Способы оформления гипертекстовых документов:

 

на основе установок браузера "по умолчанию"

оформление неприемлемо скудное

с помощью тегов HTML

устаревшая порочная практика, затрудняющая структурирование документов в Сети, не имеющая перспектив, но все еще популярная :-(

c помощью CSS (cascading style sheet)

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

 

 

 

 

Тимоти Джон Бернерс-Ли

 

 

HTML создан Тимом Бернерсом-Ли, как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.

Тимоти Джон Бернерс-Ли (Timothy John «Tim» Berners-Lee) — британский учёный, изобретатель, автор множества разработок в области информационных технологий.

В 1989 году, работая в CERN (Европейском совете по ядерным исследованиям, Женева), Тим Бернерс-Ли предложил проект WWW (World Wide Web, Всемирная паутина), который  подразумевал публикацию гипертекстовых документов, связанных между собой гиперссылками.

Для осуществления проекта Тим Бернерс-Ли разработал идентификаторы URL, протокол HTTP и язык HTML (1991-1992 годы), которые легли в основу Интернета.

Тим Бернерс-Ли написал первый в мире веб-сервер «httpd».

В октябре-декабре 1990 года Тим Бернерс-Ли написал первый в мире гипертекстовый веб-браузер, называвшийся «WorldWideWeb», который был одновременно и WYSIWYG-редактором (WYSIWYG от What You See Is What You Get, «что видишь, то и получишь»).

Первый в мире веб-сайт Тим Бернерс-Ли создал 6 августа 1991 года по адресу http://info.cern.ch/ c описанием Всемирной паутины и процесса установки веб-сервера.

Этот сайт являлся первым в мире интернет-каталогом, т.к. Тим Бернерс-Ли позже разместил на нем и поддерживал список ссылок на другие сайты.

 

Тим Бернерс-Ли - автор концепции семантической паутины, которую активно разрабатывает.

Семантическая паутина (Semantic Web) — это надстройка над WWW, которая призвана сделать размещённую в сети информацию понятной для компьютеров.

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

 

 

 

Развитие HTML

 

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

С течением времени HTML получил много новых возможностей: 

  • поддержка таблиц,

  • «обтекания» изображений текстом,

  • отображение сложных математических формул,

  • использование кодировки UNICODE,

  • использование каскадных таблиц стилей (CSS, STYLE SHEET),

  • поддержка интерактивных элементов управления и т.д.

Актуальной версией является HTML 4.1

 

12.01.2008  W3C опубликован черновой вариант  HTML 5.

 

В HTML 5 (HTML пятой версии):

  • Появились элементы <audio>, <video> и <source> для вставки ссылок на аудио- и видеофайлы в альтернативных форматах которые браузер сможет выбрать из имеющихся в системе кодеков.

  • Появился мультимедийный тег <canvas> для рисования динамической 2D-графики непосредственно в браузере средствами специального API.

  • Появились логические теги: <header> это общий заголовок сайта, <nav> для навигационных ссылок, <article> определяет основной контент страницы, <aside> для вспомогательных материалов, <footer> - аналог нижнего колонтитула для страницы "бумажного" документа.

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

  • Исключаются элементы и атрибуты, отвечающие за отображение элементов, которое можно реализовать средствами CSS (<center>, <font> и др.). Но теги <b> и <i> оставлены.

  • Не будет фреймов и, соответственно, элементов <frame>, <frameset>, <noframes>.

  • Жёсткое соответствие XML-синтаксису. В html-документе всё должно быть без ошибок, все теги должны быть обязательно закрыты.

 

Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (Extensible Hypertext Markup Language, расширяемый язык разметки гипертекста), с большей привязкой к XML.

XML -  (Extensible Markup Language, расширяемый язык разметки) - метаязык, определяющий другие языки разметки для специфических целей.

Всё будет XML

 

 

 

Теги HTML

 

HTML  — это теговый язык разметки документов.

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

 

Тег (tag) - особый набор символов, имеющий в HTML особое значение. Теги начинаются со знака <, за которым следует ключевое слово, и заканчиваются знаком >.

Например, тег <B> означает переключение на полужирный шрифт.

 

Начальные и конечные теги

 

Теги делятся на две категории. Начальный тег открывает действие некоторого эффекта, а конечный тег - отменяет его. Конечный тег всегда выглядит как ключевое слово, перед которым стоит символ / (слэш, косая черта).

Пример 1: тег <TITLE> обозначает начало заголовка документа, а тег </TITLE> - его конец: <TITLE>Домашнее задание</TITLE>.

Пример 2: текст, отображаемый полужирным шрифтом, заключается между начальным тегом <B> и конечным тегом </B>.

 

Пишем в HTML-редакторе: Всё будет <B>очень</B> хорошо.

Получаем результат в браузере:  Всё будет очень хорошо.

 

Теги можно вкладывать внутрь других тегов. Например, теги <B> (для полужирного шрифта) и <I> (для курсива) можно скомбинировать:

 

Пишем: Этот текст <b>будет полужирным,<i>а этот - ещё и курсивом</i></b>

Получаем: Этот текст будет полужирным, а этот - ещё и курсивом

 

Начальный и конечный тег курсивного начертания полностью содержатся внутри пары тегов для полужирного начертания.

 

Атрибуты тегов

 

Многие начальные теги обладают атрибутами, влияющими на поведение данного тега.

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

 

Например:

 

<HR> (тег рисует горизонтальную линию).

<HR align=left> (тег рисует горизонтальную линию, выровненную по левому краю)

<HR width="120"> (тег рисует горизонтальную линию, шириной 120 пикселов)

 

В браузере отображаются не сами теги, а их эффект. Неизвестные теги и атрибуты игнорируются.

 

 

 

 

 

Основные теги

 

<html></html>

Указывает программе просмотра страниц что это HTML документ.

<head></head>

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

<body bgcolor=? text=? link=? vlink=? alink=?>

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

<title></title>

Помещает название документа в оглавление программы просмотра страниц

<h1></h1> или<h6></h6>

Создает САМЫЙ БОЛЬШОЙ или самый маленький заголовок

<b></b>

Создает жирный текст

<font size=?></font>

Устанавливает размер текста в пределах от 1 до 7.

<font color=?></font>

Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

<a href="URL"></a>

Создает гиперссылку на другие документы или часть текущего документа.

<a name="NAME"></a>

Отмечает часть текста как цель для гипперссылок в документе.

<a href="#NAME"></a>

Создает гиперссылку на часть текущего документа.

<p>

Создает новый параграф

<p align=?>

Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center

<br>

Вставляет перевод строки.

<ol></ol> или <ul></ul>

Создает нумерованный или маркированный список

<li>

Определяет каждый элемент списка и присваивает номер или маркер

<img src="name">

Добавляет изображение в HTML документ

<img src="name" align=?>

Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

<img src="name" border=?>

Устанавливает толщину рамки вокруг изображения

<hr size=?, color=?, width=?>

Добавляет в HTML документ горизонтальную линию и устанавливает ее толщину, цвет  и ширину линии

 

 

 

HTML-документ

 

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

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

 

После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Любой HTML-документ открывется тегом <HTML> и им же закрывается.

Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа.

Пример самого короткого HTML-документа:

  <HTML>
    <HEAD>
    <TITLE>Заголовок документа</TITLE>
    </HEAD>
<BODY>
Текст документа
</BODY>
 </HTML>

 

Таким образом, документ состоит из двух основных блоков – "заголовка" и "тела документа".

Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (элемент TITLE).

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

 

 

 

 

Extensible Hypertext Markup Language

 

XHTML (Extensible Hypertext Markup Language, расширяемый язык разметки гипертекста) — язык разметки веб-страниц созданный на базе XML и HTML.

XHTML одобрен W3C (Консорциумом Всемирной паутины) 31 мая 2001 года.

Основные особенности XHTML:

  • Все элементы должны быть закрыты. Не имеющие закрывающего тега (<img>, <br>) должны иметь на конце / (<br />).
  • Булевы атрибуты записываются в развёрнутой форме (<option selected="selected"> или <td nowrap="nowrap">).
  • Имена тегов и атрибутов должны быть записаны строчными буквами (<img alt="" /> вместо <IMG ALT="" />).
  • Недопустимы ошибки в коде.
  • Кодировкой по умолчанию является UTF-8 (в HTML- ISO 8859-1).

В разработке XHTML 2.0.  (синтаксис еще больше приближен к XML).

 

 

 

Dynamic HTML

 

XHTML (Extensible Hypertext Markup Language, расширяемый язык разметки гипертекста) — язык разметки веб-страниц созданный на базе XML и HTML.

XHTML одобрен W3C (Консорциумом Всемирной паутины) 31 мая 2001 года.

Dynamic HTML (DHTML) — технология создания интерактивного веб-сайта, используя сочетание  HTML,  JavaScript, CSS и DOM (объектной модели документа).

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

 

 

 

Document Object Model

 

DOM (Document Object Model , объектная модель документа) — программный интерфейс позволяющий программам и скриптам изменять содержимое, структуру и оформление документов.

DOM не зависит от платформы и языка.

DOM представляет любой документ известной структуры в виде дерева узлов: элементы + атрибуты + объекты (текстовые, графические...).

Узлы связаны между собой отношениями родительский-дочерний.

Различные браузеры имеют собственные модели документов (DOM), не всегда совместимые с остальными.