Язык гипертекстовой разметки HTML

Все страницы в системе World Wide Web созданы с помощью специального языка, который называется языком гипертекстовой разметки документов – Hyper Text Markup Language (HTML).

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

Создание документа. HTML-документ – это текстовый файл с расширением *.html или *.htm. Документ может быть подготовлен в любом текстовом редакторе, например в приложении Блокнот.

Пример25.1.

HTML-документ

Web-документ

<html> <head> <title>Пример 1</title> </head> <body> <H1>Минск</H1> <P>Минск – столица Беларуси.</P> </body> </html>

Минск Минск – столица Беларуси

Как видно из примера, информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками < и >. Такой фрагмент (например, <head>) называется тэгом.

Большинство HTML-тэгов − парные, т. е. на каждый открывающий тэг вида <tag> есть закрывающий тэг вида </tag> с тем же именем, но с добавлением слеш (/).

Тэги можно вводить как большими, так и маленькими буквами. Многие тэги, помимо имени, могут содержать атрибуты − элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. Рассмотрим основные тэги языка.

<html> ... </html> − тэг <html> должен открывать HTML-документ, а тэг </html> − завершать.

<head> ... </head> − эта пара тэгов указывает на начало и конец заголовка документа. Кроме наименования документа, сюда может включаться служебная информация.

<title> ... </title> − все, что находится между этими тэгами, толкуется браузером как название документа. Название текущего документа отображается обычно в заголовке окна и печатается в левом верхнем углу каждой страницы при выводе на принтер.

<body> ... </body> − эта пара тэгов указывает на начало и конец тела HTML-документа.

<h1> ... </h1> − <h6> ... </h6> − тэги вида <hi> (где i − цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня − самый крупный, шестого − самый мелкий.

<p> ... </p> − такая пара тэгов описывает абзац.

Тэги <hi> и <p> могут содержать дополнительный атрибут align, например:

<h1 align = center>Выравнивание по центру </h1> или

<p align = right> Выравнивание по правому краю </p>

Сохранение HTML-документа. В редакторе Блокнот после набора документа надо сохранить его, выполнив в пункте меню Файл команду Сохранить как…. В появившемся окне следует набрать имя файла с расширением *.html или *.htm, указать место сохранения и нажать кнопку Сохранить.

Просмотр созданных web-страниц.Чтобы просмотреть результат работы, нужно перейти в браузер Internet Explorer или в другой браузер,выполнить команду Открытьиз пункта меню Файл, нажать кнопку Обзор и выбрать созданный файл.

Тэги оформления страниц. Рассмотрим некоторые тэги языка HTML, применяемые при оформлении страниц.

<br> используется, если необходимо перейти на новую строку, не прерывая абзаца.

<hr> описывает горизонтальную линию. Тэг может дополнительно включать атрибуты size (определяет толщину линии в пикселах) и/или width (определяет размах линии в процентах от ширины экрана).

Между тэгами  размещаются комментарии.

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

При использовании логических стилей тэги <em> ... </em> обозначают акцент (обычно курсив), <strong> ... </strong> − сильный акцент (обычно жирный шрифт). <code> ... </code> рекомендуется использовать для фрагментов исходных текстов. <samp> ... </samp> используются для демонстрации образцов сообщений, выводимых на экран программами. <kbd> ... </kbd> обычно применяются для указания того, что нужно ввести с клавиатуры. <var> ... </var> используются для написания имен переменных.

Текст, расположенный между тэгами <ul> и </ul>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с тэга <li>, у которого нет парного закрывающего тэга. Например, чтобы создать список:

- Минск;

- Витебск;

необходим такой текст:

<ul><li> Минск; <li> Витебск; </ul>

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

<ol> <li> Минск; <li> Витебск; </ol>

получится список:

1. Минск;

2. Витебск.

В списках определений вместо тэга <li> используются <dt> и <dd>, не имеющие парных закрывающих меток.

Пример 25.2.

Фрагмент HTML-текста	Вид на экране
<dl> <dt>html <dd> Язык HTML разработал сотрудник <br> Европейской лаборатории физики <br> элементарных частиц Тим Бернерс-Ли. <dt>HTML-документ <dd>Текстовый файл с расширением *.html </dl>	HTML Язык HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. HTML-документ Текстовый файл с расширением *.html

Текст, заключенный между тэгами <pre> и </pre>, выводится браузером на экран так, как он есть − со всеми пробелами, символами табуляции и конца строки.

Пример 25.3.

HTML-документ

Web-документ