- Структура минимальной html-страницы.
- Тег <BODY>
- Заголовки.
- Тег фрагмента документа <DIV>
- Тег фрагмента документа <SPAN>
- Тег <HR> - горизонтальная линия.
- Коментарии
- Тег описания стилей документа <STYLE>
Минимальная структура HTML-страницы:
1 <HTML>
2 <HEAD>
3 <TITLE> Минимальная структура HTML-страницы </TITLE>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; CHARTER=windows-1251">
6 </HEAD>
7 <BODY BGCOLOR="#FFFFFF">
8
9 </BODY>
10 </HTML>
Любая HTML-страница должна быть заключена в пару тегов <HTML>...</HTML> (строки 1 и 10 листинга) и состоять из заголовочной части, органиченной тегами <HEAD>...</HEAD> (строки 2 и 6) и тела документа, ограниченного тегами <BODY>...</BODY> (строки 7 и 9). В нашем случае тело документа пусто (строка 8).
Заголовочная часть документа включает в себя служебную информацию, например, с помощью парных тегов <TITLE>...</TITLE> задается заголовок страницы, который отображается в заголовке окна браузера. Здесь же с помощю тегов <META> можно задать ключевые слова, описание страницы, указать автора, кодировку. В данном случае задана кодировка, соответствующая кодировке кирилицы Windows. Начичие этих тегов необязательно, но в ряде случаев они могут помочь, например, при индексации HTML-документов поисковыми серверами: некоторые из них просматривают прежде всего ключевые слова и заголовки документов.
Тег <BODY>
В теге <BODY>, с которого начинается содержательная часть документа, с помощью атрибута bgcolor задается фоновый цвет. Цвет в HTML обычно задается с помощью шестнадцатеричного триплета, предваряемого символом #, по две шестнадцатеричных цифры для красного, зеленого и синего цвета. #FFFFFF задает белый цвет, черный цвет фона соответствует триплету #000000, а светло-лиловому цвету соответствует #EEEEFF. Таким образом каждый из трех цветов в такой записи имеет 256 градаций от 0 (00 - шестнадцатеричное) до 255 (FF). Действительное цветовое разрешение задается браузером и определяется в свою очередь цветовым разрешением монитора. Другим способом задания цвета в HTML является использование наименование цветов ( cмотрите таблицу цветов ), например темно красно-золотому цвету соответствует darkgoldenrod (#B8860B).
Атрибуты тега <BODY>
| атрибут | описание |
|---|
| BACKGROUND="..." | ссылка на файл с фоновым изображением; |
|---|
| BGCOLOR=... | цвет фона; |
|---|
| TEXT=... | цвет текста; |
|---|
| LINK=... | цвет гиперссылки; |
|---|
| ALINK=... | цвет активной гиперссылки; |
|---|
| VLINK=... | цвет гиперссылки на документ, ранее просмотренный пользователем; |
|---|
В теге <BODY> можно также указать действия, выполняемые при возникновении следующих событий:
| событие | описание |
|---|
| ONLOAD | завершение загрузки документа в браузер; |
|---|
| ONUNLOAD | завершение работы с документом (например, при переходе по гиперссылке к другому документу); |
|---|
| ONCLICK | при щелчке левой кнопки мыши, когда курсор мыши находится над документом; |
|---|
| ONDBLCLICK | при двойном щелчке левой кнопки мыши, когда курсор мыши находится над документом; |
|---|
| ONMOUSEDOWN | при нажатии кнопки (и правой, и левой) мыши, когда курсор мыши находится над документом; |
|---|
| ONMOUSEUP | при отпускании кнопки (и правой, и левой) мыши, когда курсор мыши находится над документом; |
|---|
| ONMOUSEOVER | при появлении курсора мыши над документом; |
|---|
| ONMOUSEOUT | при выходе курсора мыши из области документа; |
|---|
| ONMAUSEMOVE | при перемещении курсора мыши над документом; |
|---|
| ONKEYPRESS | при нажатии и отпускании клавиши клавиатуры; |
|---|
| ONKEYDOWN | при нажатии клавиши клавиатуры; |
|---|
| ONKEYUP | при отпускании клавиши клавиатуры; |
|---|
В качестве обработчика события можно указать произвольную функцию JavaScript. В качестве примера покажем, как получить сообщение о загрузке и выгрузке документа:
<BODY ONLOAD="alert("Документ загружен!")"
ONUNLOAD="alert("Выгрузка документа!")">
Заголовки
Точно так же как в текстовых процессорах, например MS Word, в HTML-страницу могут быть помещены заголовки, ограниченые парными тегами <Hx>...</Hx>, где х цифра от 1 до 6. Единица соответствует заголовку самого высокого уровня:
<H1>Заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
HTML-страница с заголовками всех шести уровней приведена на рис. 1.1:
Рисунок 1.1
Тег фрагмента документа <DIV>
Фракмент документа можно отделить от других фрагментов, заключив его в парный тег <DIV>...</DIV> . Браузеры всегда отображают такие фрагменты с новой строки. Фрагменты документа, заключенные в пару тегов <DIV>...</DIV> , широко используются в качестве основного элемента динамического HTML. Чтобы различить друг от друга в сценариях в теге <DIV> указывают атрибут ID="Уникальный иденфикатор элемента". В идентификаторах элементов могут использоваться только символы латыницы и цыфры, первым должен быть символ латыницы. Идентификатор ID="abc" является допустимым, а ID="#abc" — нет. В теге <DIV> используются также атрибут CLASS для ссылки на класс каскадных таблиц стилей и STYLE для указания свойств стилей, уникальных для данного фрагмента.
Тег фрагмента документа <SPAN>
Фрагмент документа, заключенный в теги <SPAN>...</SPAN> используется для изменения параметров отображения документа. В отличие от тега <DIV> использование <SPAN> не приводит к переходу на новую строку. Изменение параметров отображения осуществляется с помощью таблицей стилей.
Тег <HR> - горизонтальная линия.
Горизонтальная черта (на полную ширину экрана - по умолчанию). До и после тега HR броузер автоматически добавляет тер <P>, поэтому нет необходимости в формировании незаполненного вертикального пространства до и после черты. В речевых программах просмотра тег срабатывает как пауза.
Атрибуты тега <HR>
| имя атрибута | возможные значения | смысл |
|---|
| ALIGN | LEFT, RIGHT, CENTER | горизонтальное выравнивание черты, по умолчанию - CENTER; |
|---|
| NOSHADE | NOSHADE | задает отображение черты в одном цвете (без оттенков), как противоположность обычному двухцветному "желобку"; |
|---|
| COLOR | цвет | цвет черты в шестнадцатеричном либо с использованием наименования цветов ( cмотрите таблицу цветов ); |
|---|
| SIZE | целое | высота черты в пикселях; |
|---|
| WIDTH | целое (в пикселях (px) или процентах (%)) | ширина черты; |
|---|
Коментарии
Элементы, помещенные в коментарий, никак не влияют на то, что отображается в браузере. Коментарии служат для пояснений в исходном тексте документа, а также для отладки. Открывающим тегом комментария служит <!--. Закрывает коментарий -->, например:
<!-- Данный текст не отображается в браузере
и служит коментарием.-->
Тег описания стилей документа <STYLE>
Хотя описание стилей HTML-документа не относится к структуре документа, закончим раздел тегом <STYLE>...</STYLE>, используемым для описания стилей документа. В теге <STYLE> можно указать следующие атрибуты:
| type="..." | тип содержимого; |
| media="..." | определяет для какой среды предназначена таблица стилей, возможные значения: screen - экран, print - печать, projection - проекционное оборудование, speech - устройство воспроизведения речи, all - для любых устройств; |
| title="..." | заголовок таблицы стилей; |
by ktima
|
