Все страницы в системе 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 - документ | ||
<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> |
