Оформление основной части страницы
Анатомия 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=”ключевые слова, перечисляемые через запятую”>
<BASE>Элемент для задания базового адреса (URL) для ссылок. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. В данном теге указывается общий начальный фрагмент пути. Это позволяет опускать начальную часть адреса в ссылках документа.
<BASE href=”http://адрес/путь1”> Фрагмент «путь1» не является обязательным и при формировании полного адреса будет отброшен. Если в документе есть ссылка вида:
<A href=”путь2/документ.htm”>текст ссылки<a> то полный адрес будет соответствовать адресу:
http://адрес/путь2/документ.htm
При задании базового адреса для локального диска, используется конструкция:
<BASE href=”file://C:\путь\”>
<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. Эти правила легко описать, используя комбинации тегов, названий и свойств переменных.
<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.
Подробней о стилях смотри главу «Создание и применение стилей».
Оформление основной части страницы
<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 (например, символы «<», «>»).