3.2. Основы html Первое знакомство с тэгами

Основным понятием языка HTML является "тэг" (англ.: tag - ярлычок, этикетка).

Тэги - это заключенные в угловые скобки "<,>" последовательности букв, (образованные, как правило, сокращением английских слов).

Код любого HTML-документа начинается тегом <html> и завершается тегом </html>.

Пара "открывающий - закрывающий" тэги называется контейнером.

Каждый документ имеет контейнер <head>...</head>, содержащий вспомогательную информацию, и контейнер <body>...</body>, содержащий сам текст документа.

Контейнер <title>...</title>, расположенный в секции <head>...</head>, содержит текст, отображаемый в верхней строке окна браузера.

Большинство тэгов предназначено для форматирования документов:

Код	Вид
Шампунь для <b>жирных</b> котов	Шампунь для жирных котов
<i>Спагетти, пицца, капуччино </i>	Спагетти, пицца, капуччино
<strike>Вычеркнуть из памяти</strike>	Вычеркнуть из памяти
<u>Я подчеркиваю, что</u>	Я подчеркиваю, что
A<sub>i,j</sub>	Ai,j
A<sup>2</sup>	A2
<big>БОЛЬШОЙ</big> ТЕАТР	БОЛЬШОЙ ТЕАТР
<small>Маленький</small> Мук	Маленький Мук
<center>ЦЕНТР</center>	ЦЕНТР
неразрывный     пробел	неразрывный     пробел
перевод<br>строки	перевод строки

В HTML -документах часто используются списки: ненумерованные или нумерованные.

Ненумерованный список	Нумерованный список
· бананы · анансы · апельсины · яблоки	тетради авторучки карандаши ластики

Элементы списков выделяются с помощью тега <li> (list item).

Нумерованный список должен находиться в контейнере <ol>...</ol> (ordered list),

ненумерованный список может находиться в контейнере <ul>...</ul> (unordered list) (наличие контейнера необязательно).

Так, для создания приведенного выше списка фруктов был использован код:

<li>бананы <li>анансы <li>апельсины <li>яблоки

С тем же успехом мы могли использовать код:

<ul> <li>бананы <li>анансы <li>апельсины <li>яблоки </ul>

Заменив контейнер <ul>...</ul> на <ol>...</ol>, мы получили бы список с номерами при каждом элементе. В частности, вот так выглядит код для списка канцелярских принадлежностей:

<ol> <li>тетради <li>авторучки <li>карандаши <li>ластики </ol>

Атрибуты тэгов

Большинство тэгов имеет атрибуты, т.е. свойства, которые могут принимать различные значения. Например, если мы хотим, чтобы текст документа находился на желтом фоне, нам нужно использовать следующий код:

<html> <head> ... </head> <body bgcolor='yellow'> Наш документ на желтом фоне </body> </html>

Посмотрите на HTML-код и найдите название этого цвета. Нередко документ размещают на фоне некоторого рисунка. Сам рисунок должен находиться в файле графического формата (gif или jpg), а связь документа с ним обеспечивается атрибутом background тэга <body>:

<html> <head> ... </head> <body background='sky.gif'> Наш документ на фоне неба </body> </html>

Возможно, у Вас возник вопрос: "какого размера должен быть фоновый рисунок?"

Дело в том, что если размер рисунка меньше размера окна браузера, то рисунок будет дублироваться по всему окну. Этот принцип лежит в основе создания текстур для background'а. В качестве примера посмотрим на файлы 'О пакете' и 'Задания'. (Они вызываются из главного меню). Обратите внимание - текст в файле 'О пакете' словно скользит над неподвижным фоном, в 'Заданиях' же он прокручивается вместе с ним. Эффект "скольжения" достигается еще за счет одного атрибута тэга <body>:

<html> <head> ... </head> <body background='адрес изображения' bgproperties='fixed'> Наш документ 'скользит' по фоновому рисунку </body> </html>

Итак, Вам уже знакомы:

Атрибуты тэга <body>
background	адрес фонового изображения
bgcolor	цвет фона
bgproperties	fixed - для достижения эффекта скольжения текста по фону