HTML (HyperText Markup Language)

Материал из Национальной библиотеки им. Н. Э. Баумана
Последнее изменение этой страницы: 17:25, 29 ноября 2016.

HTML (англ.  HyperText Markup Language) представляет собой набор символов разметки или кодов, вставленных в файл, предназначенный для написания гипертекстовых документов на странице Web-браузера. Разметка сообщает веб-браузеру, как отображать слова и изображения на веб-странице для пользователя. Каждый индивидуальный код разметки упоминается как элемент. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами. Гипертекстовый документ — это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла па экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок — специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа[1]. HTML не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

Общее представление

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компнннki> предназначен для создания в документах таблиц, но часто используется и для оформления размещения элементов на странице. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.

Основные компоненты HTML

  • Тег (tag) -специальная конструкция языка HTML, используемая для разметки документа и управления его отображением. Теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Это компонент, который командует Web- браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения htm или html.
  • Атрибут (или аргумент). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.
  • Значение. Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.

Теги представляют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше).  Закрытие тега отличается от открытия только наличием символа '/'. Например,есть гипотетический атрибут форматирования текста, управляемый кодом <X>, применю его к словам "Это мой текст". HTML-последовательность кодов и собственно текста будет выглядеть так:

 <X>Это мой текст</X>

Теги могут вкладываться друг в друга иерархически, но без пересечений, то есть допустимо вложение вида <teg1><teg2></teg2> </teg1>, но не<teg1><teg2> </teg1></teg2>. Действие вложенных тегов объединяется. Например, если внутрь тега, создающего жирное начертание шрифта, вложен тег курсива, то в результате получится жирный курсив. При написании HTML-программ возникает необходимость вставки комментариев - поясняющих текстов, которые невидны при загрузки документа в браузер. Для этой цели служит тег <!>. Все, что заключено между символами <! и > считается комментарием и не отображается в браузере. Еще один тег, который очень важен в HTML-программе, но так же не предназначается для отображения какого-либо объекта в браузере - тег<META>. Этот тег служит специальным целям, а именно - указания языка, на котором написан документ, его кодовой страницы, ключевых слов, используемых поисковыми системами для классификации этого документа и т.п. Теги <META> обычно вставляются в HTML-программу на заключительном этапе создания Web-страницы -публикации. Для вставки в HTML-программу фрагмента программ, написанных на языке JavaScript или Viual Basic Script сценариев используют теги<SCRIPT> и </SCRIPT>[2].

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

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

<html>
     <head> Заголовок документа </head>
     <body> Тело документа </body>
</html>

Чаще всего в заголовок документа включают парный тег <title> ... </title>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами. Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и</body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.

Заголовки

Каждый пользователь компьютера, работающий в текстовом редактором Microsoft Word знаком с понятием стиля заголовка. В HTML тоже применяется это понятие для структурирования документа и выделения важности заголовка. Всего существуют 6 стилей заголовка. Каждый из них обозначается в HTML-документе парными тегами <Hi> и </Hi> Здесь i обозначает важность стиля. H1 обозначает самый важный стиль заголовка, H2 - стиль заголовка второго уровня, а H6 - стиль заголовка самого нижнего уровня. В подавляющем большинстве случаев для заголовков Web-страниц используют три первых уровня заголовков H1, H2 и H3. Объясняется это тем, что размеры шрифтов оставшихся заголовков теги H4 - H5 меньше размера обычного шрифта Web-страницы. Вот как в документ можно добавить очень важный заголовок.

   <H1>An important heading</H1>
Вот что получится
    <H1>An important heading.</H1>

Абзацы

Понятие абзаца в HTML-документе также аналогично понятию абзаца в Microsoft Word. Абзац обозначается в документе парными тегами <P> или </P>. Впрочем, применение закрывающего тега не является строго обязательным.

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

    <P ALIGN="CENTER"><B><I><FONT FACE="Arial" SIZE=6 COLOR="#С07080">My greetings to you!

Результат:

   <P ALIGN="CENTER"> <B> <I> <FONT FACE="Arial" SIZE=6 COLOR="#С07080"> My greetings to you!  </FONT FACE="Arial" SIZE=6 COLOR="#С07080"></I></B></P ALIGN="CENTER">

Разрывы строк

Если в середине строки появилась необходимость ее разорвать - используйте одиночный тег переноса строки <BR>.

Это соответствует нажатию клавишной комбинации [Shift]-[Enter] в текстовых процессорах Word. Код BR не означает конца логического абзаца, и за строкой с этим кодом дополнительная пустая строка не появится. Вот и нарушено первое правило! Кроме тега BR не требует закрытия тег добавления изображения <IMG>. Использование закрывающего тега абзаца </p> также не является строго обязательным.

HTML довольно "демократичен": неправильный тег или неправильное вложение тегов обычно не приводят к "зависаниям" браузера, а только вызывает сообщение об ошибке в строке состояния окна браузера вашего Интернет-читателя. Разумеется ошибки могут привести к неправильному форматированию HTML-документа. Примером использования тега BR может служить написание почтового адреса или стихотворения[3].

Возврат на главную страницу сайта

Браузеры показывают текст в своем окне, автоматически осуществляя перенос слов. Поэтому, если вы считаете необходимым запретить разрыв блока текста с пробелами между словами - воспользуйтесь специализированным символом & n b s p ; - символом неразрывного пространства (non-breaking space). Например:

Освежающий и бодрящий напиток Coca & n b s p ; Cola,
приобрел широкую популярность в нашей стране.

Результат: Освежающий и бодрящий напиток Coca Cola, приобрел широкую популярность в нашей стране.

Выделенный текст

В тех случаях, когда необходимо обратить особое внимание пользователя на тот или иной фрагмент текста, следует использовать стандартные средства форматирования. Стандартные средства форматирования представлены специальными тегами, которые обязательно являются парными (т.е. имеются открывавающий и закрывающий теги). Чтобы увеличить размер шрифта на один пункт, используется тег <big>. Чтобы выделить текст полужирным шрифтом, надо пользоваться одним из тегов <b> или <strong>.

Чтобы выделить текст курсивом, используются следующие теги <i> или <em> Шрифт пишущей машинки можно имитировать с помощью тега tt. С помощью тега small размер шрифта можно уменьшить на один пункт. Существуют и другие теги, которые также предназначены для выделения текста. Кроме того, в HTML включена поддержка математических символов и научных обозначений. Для построения простейших равенств и выражений вам могут пригодиться два тега sub (нижний индекс) и sup (верхний индекс). Например:

A2+B2=C2

CO2=углекислый газ

В HTML-коде это записано так:

A2+B2=C2

CO2=углекислый газ

Примечания

  1. Википедия [Электронный ресурс]: HTML — материал из Википедии — свободной энциклопедии: Версия 79094304, сохранённая в 14:23 UTC 20 июня 2016 / Авторы Википедии // Википедия, свободная энциклопедия. — Электрон. дан. — Сан-Франциско: Фонд Викимедиа, 2016. — Режим доступа: https://ru.wikipedia.org/wiki/HTML
  2. The 'text/html' Media Type [Электронный ресурс] / Дата обращения: 31.10.2016. — Режим доступа: http://www.rfc-editor.org/rfc/rfc2854.tx
  3. HTML 4.0 Specification [Электронный ресурс] / Дата обращения: 31.10.2016. — Режим доступа: https://www.w3.org/TR/REC-html40-971218/