Файл: Основы программирования на языке HTML (Цветовые спецификации).pdf
Добавлен: 01.04.2023
Просмотров: 108
Скачиваний: 1
СОДЕРЖАНИЕ
1 ОСНОВНЫЕ ПОНЯТИЯ - СОЗДАНИЕ WEB-САЙТА
1.4 Структура HTML - документа
2 СОЗДАНИЕ WEB-СТРАНИЦЫ С ПОМОЩЬЮ ЯЗЫКА HTML
2.2. Разделы, заголовки и горизонтальные линии
2.3 Форматы и общие параметры таблиц
2.4 Параметры заголовка, строк и ячеек таблицы
2.5 Группирование строк и столбцов таблицы
2.6 Представление графики на Web-страницах
Атрибут text позволяет задать цвет текста для всего документа в целом. Однако он может быть изменен в определенном участке текста путем использования команды <FONT> с атрибутом color.
Атрибут bgcolor используется для задания фонового цвета всему документу. Атрибуты bgcolor и background не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницы цветом, назначенным в атрибуте bgcolor, поверх которой размещается изображение, заданное атрибутом background.
Атрибут link задает цвет, которым отображается не посещенная гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение "blue" (#0000FF). В свою очередь, атрибут vlink указывает на цвет посещенной ссылки, значение которой по умолчанию – "purple" (#800080).
Атрибут alink определяет цвет гиперссылки в момент нажатия. По умолчанию данный атрибут также имеет значение "purple".
Применение многоязычного текста. Указание языка, на котором составлен документ или его фрагмент выполняется атрибутом lang. В качестве значения этого атрибута представляется код языка (en – английский, en–US – английский США, de – немецкий, ru – русский, uk – украинский). Например,
<HTML lang=”de”> – документ составлен на немецком языке,
<Q lang=”uk”> – цитата на украинском.
Направление чтения текста. Задается атрибутом dir, принимающим значения: ltr – слева направо, rtl – справа налево. Атрибут задается для текстов на арабском языке или иврите.
2.2. Разделы, заголовки и горизонтальные линии
Разделы. Формат задания раздела:
<DIV> HTML-код или текст </DIV>
или
<SPAN> HTML-код или текст </SPAN>
Разделы используются для задания параметров текста и его расположения. К разделу можно применять любые атрибуты стиля. Теги <DIV> и <SPAN> отличаются тем, что при использовании тега <DIV> браузер производит перенос раздела на новую строку и перед ним автоматически устанавливается пустая строка. При использовании тега <SPAN> переноса не возникает.
Заголовки. Заголовки позволяют разделить web-страницу на логически законченные блоки и помогают ориентироваться в содержимом документа.
Спецификация HTML позволяет программисту использовать шесть различных стилей, или, как их еще принято называть, логических уровней заголовков.
Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n - целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды:
<Нn аlign="параметр"> Текст заголовка </Нn>
Атрибут align дает возможность web-мастеру определить расположение заголовка в окне браузера. Параметр этого атрибута может принимать одно из трех возможных значений:
1) right – позиционирование заголовка по правой границе документа;
2) left – позиционирование заголовка по левой границе документа;
3) center – позиционирование заголовка по центру документа.
По умолчанию заголовки выравниваются по левому краю страницы. Высоты заголовков относятся как 2: 1,5: 1,17: 1,33: 0,83: 0,67. Заголовки как блоковые элементы отделяются от текста пустыми строками.
Пример:
<Н1 align=”center”>
ДОБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!
</Н1>
Горизонтальные линии. Чтобы визуально отделить часть объектов документа от других, применяются горизонтальные линии. Горизонтальная линия – это графический элемент, имеющий длину, толщину и цвет для создания таких линий в HTML используется непарный тег <HR> (сокращение от Horizontal Ruler). В спецификации HTML для отображения вертикальных линий не предусмотрено специальных тегов.
Формат создание стандартной линии (по умолчанию стандартная линия занимает всю ширину окна браузера, а её толщина составляет 2px, верхняя часть линии несколько темнее нижней):
<HR>
Формат сплошной темной линии без тени:
<HR noshade>
Формат горизонтальной линии с указанием свойств:
<HR align=”значение”
width=”значение”
size=”значение”
color=”значение”>
Атрибут align задает выравнивание линии и может принимать значения center, left или right. По умолчанию линии выравниваются по центру страницы.
Атрибут width задает длину линии в пикселях или процентах. Например, тег <HR width=25> определяет горизонтальную линию шириной 25 пикселей. Если значение атрибута задается в процентах (ставится символ %), то ширина линии вычисляется относительно ширины окна, например <HR width=”25%”>. Задание длины линии в относительных единицах предпочтительнее.
Толщина линии задается атрибутом size. Значение этого атрибута задается в пикселях в диапазоне от 1 до 175. Присвоение больших значений игнорируется. По умолчание size=2px.
Цвет линии определяется атрибутом color.
2.3 Форматы и общие параметры таблиц
Для создания таблиц применяется тег <TABLE>. Состав таблицы по строкам и ячейкам задается с помощью следующих элементов:
1) TR – элемент, формирующий отдельную строку;
2) TD – элемент, определяющий содержимое ячейки данных;
3) TH – элемент, задающий ячейку заголовка;
4) CAPTION – элемент названия таблицы.
Структура записи тега <TABLE> в общем виде следующая:
<TABLE аlign=”значение”
width=”значение”
height=”значение”
background=”URL”
bgcolor=”значение”
border=”целое число”
borderсolor=”значение”
borderсolordark=”значение”
borderсolorlight=”значение”
cellpadding=”целое число”
cellspacing=”целое число”
cols=”значение”
frame=”значение”
rules=”значение”>
<CAPTION align=”значение”
valign=”значение”>
Название таблицы:
</CAPTION>
<TR align=”значение”
valign=”знaчeниe”
width=”значение”
height=”целое число”
bgcolor=”значение”
borderсolor=”значение”
borderсolordark=”значение”
borderсolorlight=”значение”>
<TH align=”значение”
valign=”знaчeниe”
width=”значение”
height=”целое число”
background=”URL”
bgcolor=”значение”
borderсolor=”значение”
borderсolordark=”значение”
borderсolorlight=”значение”
colspan=”целоe число”
rowspan=”целое число”
nowrap>
Ячейка заголовка таблицы:
</TH>
</TR>
<TR>
<TD align=”значение”
valign=”значение”
width=” значение”
height=”целое число”
background=”URL”
bgcolor=” значение”
borderсolor=” значение”
borderсolordark=” значение”
borderсolorlight=” значение”
colspan=”целоe число”
rowspan=” целое число”
nowrap>
Содержимое ячеек
</ТD>
</TR>
</TABLE>
Общие параметры таблицы определяются значениями атрибутов тега <TABLE>:
1) align – задает горизонтальное позиционирование всей таблицы в целом, может принимать значения left, right или center;
2) width определяет ширину всей таблицы и может принимать значение целого числа, если ширина таблицы указывается в пикселях, либо в процентах от ширины экрана пользователя. Если этот атрибут не задан, то он определяется на основе содержимого таблицы;
3) height устанавливает высоту таблицы;
4) background определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы;
5) bgcolor устанавливает цвет фона таблицы;
6) border указывает на толщину рамки и пикселях. Если border=0, таблица становится «невидимой»;
7) bordercolor устанавливает цвет рамки таблицы;
8) bordercolordark, bordercolorlight – используются для задания объемной границы таблицы. Такой эффект достигается за счет разных цветов верхней и нижней линий, образующих рамку. Атрибут bordercolordark определяет цвет затененной части рамки, bordercolorlight задает цвет освещенной рамки;
9) cellpadding определяет расстояние в пикселях между границей ячейки и её содержимым;
10) cellspacing задает расстояние между внешними границами ячеек в пикселях;
11) cols указывает количество столбцов в таблице;
- frame определяют параметры внешних границ таблицы. Чтобы этот атрибут влиял на отображение рамок, должен быть установлен атрибут border с ненулевым значением. Атрибут frame может принимать следующие значения:
- border (или box) – устанавливает все линии внешней рамки;
- void – внешняя рамка не отображается;
- above (или below) – выводит только верхнюю (или нижнюю) границу таблицы;
- hsides – выводит только верхнюю и нижнюю линии рамки;
- vsides – выводит только левую и правую линию рамки;
- lhs – устанавливает только левую линию рамки;
- rhs – устанавливает только правую линию рамки.
13) rules определяют параметры внутренних границ таблицы. Чтобы этот атрибут влияли на отображение рамок, должен быть установлен атрибут border с ненулевым значением. Атрибут rules может принимать следующие значения:
а) none – все внутренние линии не отображаются;
б) groups – отображает горизонтальные границы между группами строк и столбцов;
в) rows – определяет отображение только горизонтальных линий между строками;
г) cols – устанавливает отображение только вертикальных линий между столбцами;
д) all – все внутренние рамки отображаются.
2.4 Параметры заголовка, строк и ячеек таблицы
Параметры заголовка определяются следующими значениями атрибутов тега <CAPTION>:
1) align – определяет выравнивание названия относительно границ таблицы и может принимать значения: left (выравнивание по левой границе, название располагается над таблицей), right (выравнивание по правой границе, название располагается над таблицей), center или top (выравнивание по центру, название располагается над таблицей), bottom (выравнивание по центру, название располагается под таблицей);
2) valign – используется для выравнивания названия при размещении его над или под таблицей. Атрибут align не выполняет выравнивания названия вправо или влево при значениях top и bottom. Для такого выравнивания нужно применять оба атрибута valign и align: атрибут valign будет задавать расположение названия над или под таблицей, а атрибут align – определять его выравнивание по левой или правой границе таблицы.
Параметры строк таблицы задаются значениями атрибутов тега <TR>, а параметры ячеек – значениями атрибутов тегов <TD>, <TH>:
1) align – задает выравнивание содержимого ячейки по горизонтали и определяется значениями left, right, center;
2) valign – задает выравнивание содержимого ячейки по вертикали и определяется значениями top (по верхнему краю), bottom (по нижнему краю), middle (посредине), baseline (по базовой линии);
3) width задает ширину ячейки;
4) height устанавливает высоту ячеек таблицы. Если значение height меньше содержимого ячейки, этот параметр игнорируется;
5) background определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы;
6) bgcolor устанавливает цвет фона ячейки таблицы;
7) bordercolor устанавливает цвет рамки ячеек таблицы;
8) bordercolordark, bordercolorlight – используются для задания объемной границы ячеек таблицы. Атрибут bordercolordark определяет цвет затененной части рамки, bordercolorlight задает цвет освещенной рамки;
9) colspan – устанавливает число ячеек, которые должны быть объединены в одну по горизонтали;
10) rowspan – устанавливает число ячеек, которые должны быть объединены в одну по вертикали;
11) nowrap – запрет переноса слов внутри ячейки. Текст отображается одной сплошной строкой.
2.5 Группирование строк и столбцов таблицы
Для удобства форматирования содержимого таблицы её удобно разбить на заголовочную, основную и нижнюю части. Группирование позволяет присваивать каждой группе элементов общие свойства (выравнивание, гарнитуру, размер шрифта и т.д.).
Группирование строк задается с помощью трёх тегов:
<THEAD>
Заголовочная часть таблицы:
</THEAD>
<TBODY>
Основная часть таблицы:
</TBODY>
<TFOOT>
Нижняя часть таблицы:
</TFOOT>
В таблице может быть только один элемент TBODY и FOOT, но несколько элементов TBODY. Допустимыми атрибутами этих тегов являются:
1) align и valign - для горизонтального и вертикального выравнивания;
2) title – для формирования всплывающей подсказки;
3) lang и dir – для задания языка и направления чтения документа.
Для группирования элементов столбцов используется тег COLGROUP. Формат записи тега:
<COLGROUP span=значение
width=”значение”
align=”значение”
valign=”значение”>
Строки, для которых сгруппированы столбцы: