Анатомия web страницы

<HTML></html>

Тег <HTML> обозначает начало HTML документа, соответственно тег </html> - обозначает конец этого документа.

<HEAD></head>

Теги обозначают область заголовка Web-страницы. В области заголовка размещаются теги: <BASE>, <META>, <TITLE>, <LINK>, <OBJECT>, <SCRIPT>, <STULE>.

<TITLE></title>

Элемент для размещения заголовка Web-страницы. Текст расположенный внутри этих тегов, отображается в заголовке окна броузера. Строка заголовка должна достаточно точно отражать назначение страницы и не быть слишком длинной.

<META>

Этот тег используется для указания подробной информации о документе. Вся необходима информация, указывается с помощью атрибутов данного тега.

<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html”; CHARSET=Windows-1251”>

Атрибут CONTENT указывает броузеру, что содержанием документа является HTML документ. Атрибут CHARSET, указывает броузеру, кодировку CP-1251(Windows).

Данные о кодировке документа нужны броузеру, чтобы сгенерировать конечный файл с тем набором символов, который принят в операционной системе пользователя. Если кодировка загружаемого документа отличается от системной, то броузер конвертирует текст документа, иначе — оставляет нетронутым.

<META HTTP-EQUIV=”refresh” CONTENT=”20; URL=http://www.demo.ru/index.htm”>

Значение атрибута HTTP-EQUIV=”refresh” – указывает программе просмотра, что нужно загрузить страницу, указанную в параметре URL, по прошествии промежутка времени указанного в параметре CONTENT.

Общая структура тега <META> такова:

<META NAME=”Имя определяемого параметра” CONTENT=”значение параметра”>

Атрибут NAME содержит имя определяемого параметра, а CONTENT — значение параметра, определенного атрибутом NAME. Например, если вы хотите дать сведения об авторе документа, это можно сделать следующим образом:

<META NAME=”Author” CONTENT=”имя создателя странички”>

Ключевые слова необходимы для индексации вашей странички в поисковых системах. Можно разместить ключевые слова в теге <META>.

<META NAME=”Keywords” CONTENT=”ключевые слова, перечисляемые через запятую”>

<META NAME="Content-Type"  CONTENT="Описание страницы">

Описание типа и характеристик документа

<META NAME="Generator"  CONTENT="Название HTML-редактора">

Указание приложения, в котором был создан документ

<BASE>

Элемент для задания базового адреса (URL) для ссылок. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. В данном теге указывается общий начальный фрагмент пути. Это позволяет опускать начальную часть адреса в ссылках документа.

<BASE href=”http://адрес/путь1”> Фрагмент «путь1» не является обязательным и при формировании полного адреса будет отброшен. Если в документе есть ссылка вида:

<A href=”путь2/документ.htm”>текст ссылки<a> то полный адрес будет соответствовать адресу:

http://адрес/путь2/документ.htm

При задании базового адреса для локального диска, используется конструкция:

<BASE href=”file://C:\путь\”>

Атрибут target=”значение”, указывает в каком окне будет отображен объект на который указывает ссылка <a>. Атрибут предназначен для переадресации ссылки в другие кадры. Существует четыре специальных значения: _blank, _self, _parent, _top:

target=_blank - Обозначенный ссылкой документ всегда загружается во вновь открытое окно

target=_self - Документ загружается в этот же кадр или окно как исходный

target=_parent - Загрузка документа в родительское окно или набор кадров, содержащий кадр с гипертекстовой ссылкой. Если ссылка находится в окне или кадре верхнего уровня, это эквивалентно значению _self

target=_top - Загрузка документа в окно, содержащее гипертекстовую ссылку, с заменой всех кадров, отображенных в окне в данный момент

<LINK>

Указывает ссылку на что либо.

<LINK rel=”next” href=”glava2.htm”> В данном примере описана метка next отсылающая к файлу glava.htm Метку next можно использовать с тегом ссылки <A href=”#next”>текст ссылки</a> в теле документа.

<link rel=stylesheet type="text/css" href="/css/forum.css"> Используя данную конструкцию можно указать на файл с таблицами стилей. В атрибуте href указывается собственный URL к вашему файлу CSS. Таблица стилей – это, по существу, описание правил, задающих параметры представления отдельных элементов на экране на языке HTML. Эти правила легко описать, используя комбинации тегов, названий и свойств переменных.

Пример содержимого файла format.css:

H1 {color: maroon; font-style: italic; text-align: center; font-size: 14pt}

P {font-family: Arial, Verdana; font-weight: bold; text-indent: 25}

<STYLE></style>

Предназначен для задания стилей оформления. Простейшим способом определения стиля является задание его непосредственно для выбранного элемента:

<P style=”font-size: 10pt; font-style: italic; color: blue”> Здесь для абзаца выбран размер шрифта, курсив и синий цвет букв. В отличие от атрибутов имя свойства и значение разделяется двоеточием, а свойства отделяются друг от друга точкой с запятой. Атрибут style можно использовать со многими командами.

Для изменения свойств одного или нескольких тегов требуется в разделе HEAD указать их новые свойства. Например:

<STYLE type=”text/css”>

H1 {color: maroon; font-style: italic; text-align: center; font-size: 14pt}

P {font-family: Arial, Verdana; font-weight: bold; text-indent: 25}

</style>

В данном примере заданы стиль для тега заголовка первого уровня: цвет текста, начертание шрифта, выравнивание текста, размер шрифта. Для абзаца: наименование шрифта, полужирный шрифт, отступ для абзаца. При использовании тегов H1 и P по умолчанию будут приняты свойства указанные в теге STYLE.

Можно создать стиль для класса объектов. Класс создается для использования указанных в нем свойств к нескольким тегам одновременно.

<STYLE type=”text/css”>

.Base <!—Название класса задается Вами-->

{ color: red;

weight: medium;

margin-top: 10 px;

font-size: 250 px;

line-height: 250 px;

font-family: Times } </style>

Точка перед словом base означает, что мы создаем новый класс и определяем его свойства.

Для того чтобы применить данный класс к тексту используем атрибут CLASS тега <DIV>:

<DIV class=base>Пример использования класса</div>

Аналогичное использование данного класса и в других тегах.

Можно создавать подкласс, который будет наследовать свойства родительского класса. Например: <STYLE type=”text/css”>

H3 {font-size: 14pt, font-family: Monaco, color: #0000ff}

H3.second {color: #ff00000}</style>

<H3 class=second>Шрифт Монако красного цвета</h3>

<H3>Шрифт Монако синего цвета</h3>

Пример наложения строк на экране:

<HTML>

<HEAD>

<STYLE type="text/css">

<!--

.base {color: red;

weight: medium; ширина изображения элемента

margin-top: 10 px; верхний отступ

font-size: 250 px; размер шрифта

line-height: 250 px} настояние между соседними строками

.layer1 {color: blue;

weight: medium;

margin-top: -130 px;

font-size: 65 px;

line-height: 45 px}

-->

</style>

</head>

<BODY>

<DIV class=base>My</div>

<DIV class=layer1>Style</div>

</body>

Стили используемые более чем для одной страницы обычно выносятся в отдельный файл. Ссылка на такой файл должна находиться в элементе LINK.

Подробней о стилях смотри главу «Создание и применение стилей».