2018-01-21
418
Как мы уже знаем, содержимое Web-страницы располагается между тегами <body> и </body>. В самом простейшем случае, это может быть обыкновенный текст. Программа правильно интерпретирует его и отобразит. Например:
<!DOCTYPE HTML PUBLIC "-//W3G//DTD HTМL 4.01//EN"
"http;//www.w3.org/TR/htral4/strict.dtd">
<html>
<head>
<title> Моя первая Web-страница</title>
</head>
<body>
Здесь отображается текст, который имеет по всем параметрам базовые настройки.
</body>
</html>
Не следует забывать, что при сохранении файла, следует установить дли него расширение htm или html. Если после этого запустить его на выполнение, то автоматически будет запущен браузер, установленный по умолчанию в операционной системе, и в него уже будет загружен HTML-документ.
Как выглядят наша первая Web-страница в браузере Internet Explorer видно на рисунке ниже.
Но следует отметить, что тег <body> может содержать дополнительные параметры. Мы уже говорили немного ранее, что параметры включаются в состав стартового тега конструкции. Теперь пришло время увидеть, как это происходит на самом деле.
Чаще всего параметр представляет собой пару "наименование—значение". Рассмотрим на простом примере. Параметр bgcolor позволяет задавать цвет фона, на котором будет отображаться содержимое Web-страницы. Например, если мы хотим использовать зеленый фон, то мы должны использовать следующую конструкцию:
<body bgcolor="green">
Необходимо отметить, что все текстовые значения параметров обычно заключаются в кавычки, хотя не будет синтаксической ошибкой и не указывать их.
Но это далеко не все параметры, которые могут быть применимы к данному тегу. Ниже приведены ещё ряд важных элементов, которые часто используются, при оформлении страниц.
Параметр background позволяет использовать в качестве фона какое-либо графическое изображение. Значением параметра является адрес этого изображения, т.е. его URL. Может быть задан относительным или явным способом.
Параметр text задает цвет шрифта, которым будет отображаться текстовое содержимое Web-страницы.
Параметр link позволяет устанавливать цвет, которым будут отображаться в окне просмотра браузера текстовые гиперссылки, внедренные в содержимое Web-страницы.
Параметр viink задает цвет гиперссылок, которые пользователь уже проходил в текущем сеансе работы.
Параметр aiink указывает, какой цвет будет использоваться для отображения гиперссылок, выделенных пользователем.
Помимо вышеперечисленных параметров тег <body> может обладать двумя идентифицирующими параметрами id и class, но на практике они к этому тегу почти никогда не применяются.
В языке программирования HTML почти всегда используются метаданные. Метаданные – это неотображаемая информация о документе. Она применяется для идентификации документа и указания режима отображения Web-страницы. Для внедрения метаданных в Web-страницу используется тег <meta>. Чаще всего он имеет следующий вид:
<meta name="имя переменной" content = "значение переменной">
Таким образом, если мы хотим указать авторство какой-либо Web-страницы, достаточно вставить в блок ее заголовка следующую конструкцию:
<meta name="Author" content = "It's me!!!">
Однако, установка собственных переменных необходима только в том случае, если Web-страницы обрабатываются при помощи какого-либо специализированного Интернет-приложения. Но такая необходимость возникает достаточно редко.
В Интернете Web-страницы достаточно часто обновляют. Принцип передачи данных в курсом не рассматриваются, но немного внимания уделить этому вопросу нужно. Для быстроты отображения информации и обеспечении меньшего объема трафика, программы создают копию информации в операционной системе, откуда и берут её. Поэтому, пользователь может получить устаревшую копию. Конечно, существуют способы настройки правил работы с кэшем, но далеко не все их используют. Поэтому лучше подстраховаться, и указать "срок годности" Web-страницы. Если он прошел, то браузер вместо использования копии из кэша все-таки запросит документ из Сети.
Тег <meta>, приспособленный для указания срока годности Web-страницы, выглядит приблизительно следующим образом:
<meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
Из примера видно, что для указания наименования стандартной переменной HTTP-протокола используется параметр http-equiv, а для установки значения этой переменной — уже знакомый нам параметр content. Также легко заметить, что установка срока последнего использования документа производится при помощи переменной Expires, а значение ее должно быть указано в определенном текстовом формате со временем, указанным по гринвичскому меридиану.
Но, данной проблемы нет в электронных изданиях, созданных при помощи компиляторов. Так как они не используют подгрузку на системные диски. Как правило, информация, для большей надежности от кражи, помещается в оперативную память по мере её обработки. Однако, сами компиляторы могут создать такую проблему, например часто по умолчанию установлена опция, запоминать сеанс, т.е. запоминать расположение информации, открытые категории на момент закрытия книги. В результате пользователь увидит ту же информацию, что была ранее без изменений.
Впрочем, может случиться и такое, что информация на страничке обновляется настолько быстро, что ее необходимо несколько раз перезагружать в процессе одного сеанса работы. Такие страницы с информацией, обновляемой в реальном времени, — достаточно частое явление, например, в чатах или при отображении изменений котировок ценных бумаг во время операционного дня на фондовой бирже. В этом случае необходимо использовать переменную с наименованием Refresh. Значение этой переменной указывается в секундах. Тогда рассматриваемый нами тег <meta> приобретет следующий вид:
<МЕТА http-equiv-"Refresh" cpntent=10>
Страница с подобной конструкцией в блоке заголовка будет автоматически перезагружаться каждые десять секунд.
Элемент <BODY>
Вся отображаемая в окне просмотра браузера информация размещается между тегами <body> и </body>. О том, какие возможности по указанию правил отображения содержимого Web-страницы нам предоставляет.язык HTML, мы узнаем в следующих двух лекциях этой главы. Здесь мы рассматриваем лишь общую структуру HTML-документа.
HTML предоставляет нам возможность для каждого применяемого тега задать уникальный идентификатор. Скажем, если текст разбит на абзацы, то для каждого абзаца мы можем задать свое специфичное наименование, а затем, при помощи некоторых дополнительных средств языка HTML, управлять отображением этих абзацев. Мы можем делать некоторые из них невидимыми, менять цвет шрифта, т.е. изменять правила их отображения. Причем, это относится не только к абзацам, а ко всем частям содержимого, которые заключены в, те или иные теги.
Для идентификации какого-либо тега применяется параметр id. Вернемся к примеру с абзацами текста. Забегая немного вперед, можно сказать, что абзацы указываются при помощи пары тегов <р> и </р>. Таким образом, создание абзацев, которые мы сможем потом отличать, производится при помощи приблизительно следующей конструкции:
<р id="р1">Первый абзац</р>
<р id="p2">Bторой абзац</р>
Значения всех параметров id в HTML-документе обязаны быть уникальными. Если встречается пара одинаковых значений, то эти идентификаторы просто игнорируются. Естественно, применение параметра id не является обязательным. Имеет смысл использовать его только в тех случаях, когда конструкция с идентифицируемым тегом будет подвергнута стилевой обработке (которую мы изучим позже), или этот тег будет являться закладкой в документе, на которую будет указывать какая-либо гиперссылка, либо идентифицируемая конструкция будет обрабатываться динамически, при помощи инструкций DHTML, о которых мы узнаем в еще позже.
Также идентификаторы применяются в тех случаях, когда HTML-документ обрабатывается специализированными приложениями (JavaScript, PHP и другие).
Также к вопросам структуры HTML-документа можно отнести использование различных заголовков в тексте. Для заголовков в HTML отведены собственные теги. Всего в HTML-документах применяется шесть уровней текстовых заголовков. Самый старший уровень — первый. И для каждого заголовка существует свой тег и свои правила отображения.
Теги для обозначения заголовков чрезвычайно просты. Для заголовка первого уровня применяется тег <h1> с его закрывающей парой </h1>, заголовок второго уровня реализуется при помощи пары <h2> - </h2>, и так далее, вплоть до заголовка шестого уровня с тегом <h6>.
Окно браузера с результатом отображения различных заголовков
На этом можно закончить рассмотрение общей структуры документа и перейти к изучению непосредственно синтаксиса и описанию элементов.
