Оформление основной части страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

.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>

<!--

.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=layer1>Style</div>

</body>

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

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

Оформление основной части страницы

<BODY> </body> Теги означающие основную часть Web-страницы, содержимое которого будет сгенерировано программой-броузером и выведено на экран. Внутри начального тега можно использовать атрибуты, обеспечивающие установки для всей страницы целиком.

Атрибут	Описание	Пример задания значения
BGCOLOR	Цвет фона	BGCOLOR=#0000FF или BGCOLOR=”BLUE”
BACKGROUND	Задание рисунка для фона	BACKGROUND=”URL”
TEXT	Цвет текста	TEXT=#0000FF или TEXT=”BLUE”
LINK	Цвет ссылки	LINK=#0000FF или LINK =”BLUE”
VLINK	Цвет уже посещенной ссылки	VLINK=#0000FF или VLINK =”BLUE”
ALINK	Цвет активной ссылки	ALINK=#0000FF или ALINK =”BLUE”

URL – задание адреса. Путь к файлу может быть задан абсолютно и относительно (пример задания относительных/абсолютных адресов также как и для тега <base>).

Цвет задается обозначением, принятым для модели RGB (подробнее смотри в приложении 1) или английским названием цвета.

Форматирование текста

<P> </p> Теги для обозначения начала абзаца <P> и конца </p>. Используются атрибут выравнивания: Align. Принимающий значения: left, center, right. Пример использования:

<P> Текст первого абзаца </p>

<P align=”center”>Выравнивание по центру</p>

<BR> Принудительный переход на новую строку.

<NOBR></nobr> Текст, заключенный в этих тегах, будет выведен в одну строку. Если длинная строка не уместится на экране, для ее просмотра придется использовать полосу прокрутки. Противоположность тегу <BR>.

<PRE> Текст заключенный в эти теги выводиться в том виде в котором был подготовлен автором. В тексте учитываются символы конца строки, а также позволяется использовать при наборе специальные символы без применения заменяющих их комбинаций.

Пример:

<PRE> Посмотри

на

экран! </pre>

Атрибут	Описание	Пример задания значения
WIDTH	Задает ширину блока в символах.	WIDTH=”25”

<H1> </h1> Заголовок первого уровня.

<H2></h2> Заголовок второго уровня. Чем меньше уровень заголовка, тем крупнее шрифт текста. Существует шесть уровней заголовков, которые обозначаются H1…H.

<HR> Горизонтальная линия. Элемент не имеет конечного тега, но допускает ряд атрибутов.

Атрибут	Описание	Пример задания значения
WIDTH	Длина в пикселях или в процентах	WIDTH=”25” или WIDTH=25%
COLOR	Цвет линии	COLOR=”RED” или COLOR=#FF0000
ALIGN	Выравнивание влево, вправо, по центру, по ширине.	Align=”left” (right, center, justify)
SIZE	Толщина в пикселях	Size=40

 Текст заключенный внутри воспринимается броузером как комментарий и игнорируется.

Пример:

В тег комментариев часто заключают теги которые не воспринимаются ранними версиями броузеров, для предотвращения вывода кода. Старшие версии броузеров воспринимают данные теги правильно и игнорируют комментарии.

Теги управления шрифтом

<B></b> Текст заключенный в этот тег выделяется полужирным шрифтом.

<I><i> Текст заключенный в этот тег выделяется курсивом.

<U></u> Подчеркнутое начертание текстазаключенный в этот тег.

<S></s> ~~Зачеркнутое~~ начертание текста.

<BIG></big> Увеличение размера шрифта текстазаключенный в этот тег.

<SMALL></Small> Уменьшениеразмера шрифта текстазаключенный в этот тег.

<SUB></sub> Эффект нижнего индекса.

<SUP></sup> Эффект верхнего индекса.

<BDO></bdo> Позволяет изменить направление текста. Он используется совместно с атрибутом dir, которому может быть присвоено одно из значений: LTR (слева направо) или RTL (справа налево). Например: <BDO dir=”RTL”> Направление текста справа налево </bdo>

<CENTER></center> Центрирует содержимое тега.

<INS></ins>

<DEL></del>

<BASEFONT> Базовый размер шрифта для всей страницы. Внутри элемента необходимо указать атрибут size и указать его значение.

<FONT></font> Определяет тип, размер и цвет шрифта. Все эти характеристики определяются при помощи соответствующих атрибутов.

Атрибут	Описание	Пример задания значения
COLOR	Цвет текста	COLOR=#0000FF или COLOR=”BLUE”
SIZE	Размер шрифта от 1 до 7	SIZE=7
FASE	Задает один или несколько шрифтов для отображения содержимого тега. Если в системе не установлен ни один из перечисленных шрифтов, точно с таким же названием, то броузер использует свой стандартный шрифт из числа назначенных по умолчанию.	FASE=”Arial; Courier; Tahoma”

Специальные символы

Комбинации символов, начинающиеся со знака «&» (амперсант) и заканчивающийся точкой с запятой, служит в языке HTML для задания символов, которые отсутствуют на клавиатуре или не могут включаться в текст документа согласно спецификации языка HTML (например, символы «<», «>»).