Тема 4. Язык гипертекстовой разметки документов html
Язык HTML (язык гипертекстовой разметки) является основой создания Web-страниц, хранящихся в отдельных файлах (документах), поэтому Web-страницы можно называть и HTML-документами. Множество взаимосвязанных между собой таких HTML-документов образуют Web-сайт. Разместив такой Web-сайт на одном компьютере, настроенном как сервер, он становится доступным для просмотра на других компьютерах, находящихся с компьютером-сервером в одной сети. По такому принципу и реализован просмотр информации на различных сайтах в Интернет.
Документ, написанный на языке HTML, представляет собой текст, в который вставлены инструкции по обработке, называемые тэгами. Тэги помогают программе просмотра разобраться, каким шрифтом и как должен быть отформатирован на экране текст с заголовком, где в тексте должны быть вставлены рисунки и таблицы и многие другие элементы, позволяющих качественно оформить HTML-документ. С помощью тэгов формируются связи с другими Web-сайтами и ресурсами Интернета. Текст с тэгами называется исходным кодом. Просмотреть готовый документ, написанный на языке HTML, можно в программах просмотра (Microsoft Internet Explorer, Netscape Navigator и т. д.), называемых браузерами. Там мы уже не увидим исходного кода, а увидим готовый отформатированный документ с текстом, со вставленными рисунками, таблицами и т. д.
Браузер Microsoft Internet Explorer, с которым мы будем работать, входит в состав операционной системы WINDOWS. Основная задача браузера – по запросу пользователя найти требуемый документ в сети и без искажений отобразить его. Сначала браузер анализирует инструкции, написанные на языке HTML, а затем, пользуясь этими инструкциями, отображает информацию, находящуюся на Web-странице. Отсюда вывод – для создания собственных качественных Web-страниц необходимо знание языка HTML. Существует множество редакторов Web-страниц. Однако, при создании HTML-кода эти редакторы в некоторых случаях вставляют избыточный код, а иногда просто не удается добиться именно того результата, который необходим. Поэтому для лучшего понимания и освоения языка HTML, при создании Web-страниц мы будем пользоваться обычным текстовым редактором БЛОКНОТ, также входящим в состав операционной системы WINDOWS.
4.1. Структура html-документа
Тэги – это определенные последовательности символов, заключенные между знаками “<” и “>”. Символ “<” обозначает начало тэга, а символ “>” – конец тэга. Большинство тэгов парные и второй тэг прекращает действие первого. Наименования тэгов могут быть написаны в любом регистре как заглавными символами, так и строчными. Все, что заключено между тэгами “<html>” и “</html>” является HTML-документом. Любой HTML-документ состоит из двух частей. Первая часть – заголовок, который находится между тэгами “<head>” и “</head>”. Вторая часть – тело документа, располагаемое между тэгами “<body>” и ”</body>”. Таким образом, структура любого HTML-документа выгладит следующим образом:
<html>
<head>
Заголовок документа
</head>
<body>
Тело документа
</body>
</html>
В заголовок может входить тэг “<title>”, при помощи которого задается наименование HTML-документа, отображаемого в самой верхней строке браузера при загрузке данного документа. Структура HTML-документа с таким заголовком будет иметь вид
<html>
<head>
<title>Наименование HTML-документа</title>
</head>
<body>
Тело документа
</body>
</html>
Заголовок отображается еще до того, как произойдет окончательная загрузка содержимого документа, поэтому он должен быть кратким и отображать его суть Тело документа, заключенное между тэгами “<body>” и ”</body>”, в простейшем случае представляет собой обыкновенный текст. В листинге 1.1 представлен первый простейший HTML-документ.
<html>
<head>
<title>Структура HTML-документа</title>
</head>
<body>
Обычно HTML-документ заключен между парными тэгами html
</body>
</html>
Листинг 1.1
При сохранении листинга 1.1, созданного в текстовом редакторе БЛОКНОТ, нужно предлагаемое расширение файла txt изменить на htm или html. Если дважды щелкнуть левой клавишей мыши по такому файлу, то он автоматически раскроется в браузере и буде иметь вид, представленный на рисунке 47.
Рисунок 47. Результат просмотра в браузере файла, приведенного в листинге 1.1.
Один из парных тэгов без косой черты называется стартовым. Такие тэги могут иметь параметры (атрибуты), которые уточняют правила отображения содержимого, расположенного между стартовым тэгом и закрывающим тэгом (с косой чертой). Чаще всего параметр представляет собой пару “наименование параметра=значение”. Рассмотрим простой пример. Параметр “bgcolor” в тэге “<body>”позволяет задавать цвет фона, на котором буде отображаться содержимое HTML-документа. Например, если мы хотим использовать зеленый фон, то необходимо применить следующую конструкцию:
<body bgcolor=”green”>
Все текстовые значения параметров обычно заключаются в двойные или одинарные кавычки. Ниже приведены остальные параметры, используемые в тэге “<body>”.
Параметр “background” дает возможность использовать в качестве фона какое-либо графическое изображение. В качестве значения данного параметра в кавычках нужно указать путь к файлу с изображением.
Параметр “text” задает цвет шрифта, которым будет отображаться текстовое содержимое HTML-документа.
Параметр “link” позволяет устанавливать цвет, которым будут отображаться в окне просмотра браузера текстовые гиперссылки, внедренные в содержимое HTML-документа.
Параметр “vlink” задает цвет гиперссылок, которые пользователь уже просматривал в текущем сеансе работы.
Параметр “alink” определяет, какой цвет будет использоваться для отображения гиперссылок, выделенных пользователем.