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

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

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

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

Пример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>, не имеющие парных закрывающих меток.

Пример 2.

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

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

Пример 3.

HTML-документ

Web - документ

<html> <head> <title>Пример 2</title> </head>

<body>

<h2>Минск </h2>

<p>Минск − <b>красивый</b> <I>чистый</I> <tt>город</tt></p>

<p><em>В городе имеются магазины,</em>

<strong>театры, институты и пр. </strong>

<br><h3>Список институтов </h3>

<dl>

<dt> <dd> <ul> <li>БГУ <li>БГТУ </ul> <dt>Список магазинов

<dd><ol> <li>Беларусь <li>гум </ol>

</body>

</html>