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

      Комментарии к записи Оформление основной части страницы отключены

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

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

Теги обозначают область заголовка Web-страницы. В области заголовка размещаются теги: , , , , , , .

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

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

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

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

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

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

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

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

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

Фрагмент «путь1» не является обязательным и при формировании полного адреса будет отброшен. Если в документе есть ссылка вида:

текст ссылки то полный адрес будет соответствовать адресу:

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

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

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

В данном примере описана метка next отсылающая к файлу glava.htm Метку next можно использовать с тегом ссылки текст ссылки в теле документа.

Используя данную конструкцию можно указать на файл с таблицами стилей. В атрибуте href указывается собственный URL к вашему файлу CSS. Таблица стилей – это, по существу, описание правил, задающих параметры представления отдельных элементов на экране на языке HTML. Эти правила легко описать, используя комбинации тегов, названий и свойств переменных.

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

Здесь для абзаца выбран размер шрифта, курсив и синий цвет букв. В отличие от атрибутов имя свойства и значение разделяется двоеточием, а свойства отделяются друг от друга точкой с запятой. Атрибут 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}

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

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

.Base

{ color: red;

weight: medium;

margin-top: 10 px;

font-size: 250 px;

line-height: 250 px;

font-family: Times }

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

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

Пример использования класса

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

Можно создавать подкласс, который будет наследовать свойства родительского класса. Например:

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

H3.second {color: #ff00000}

Шрифт Монако красного цвета

Шрифт Монако синего цвета

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

My

Style

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

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

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

Теги означающие основную часть 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 – задание адреса. Путь к файлу может быть задан абсолютно и относительно (пример задания относительных/абсолютных адресов также как и для тега ).

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

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

Теги для обозначения начала абзаца

и конца

. Используются атрибут выравнивания: Align. Принимающий значения: left, center, right. Пример использования:

Текст первого абзаца

Выравнивание по центру

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

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

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

Пример:

Посмотри

на

экран!

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

Заголовок первого уровня.

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

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

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

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

Пример:

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

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

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

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

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

Зачеркнутое начертание текста.

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

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

Эффект нижнего индекса.

Эффект верхнего индекса.

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

Центрирует содержимое тега.

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

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

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

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

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

Статьи к прочтению:

Осенний альбом Мастер-класс разворот 1/ Скрапбукинг оформление страниц


Похожие статьи: