Файл: Основы программирования на языке HTML (Цветовые спецификации).pdf

1.6 Цветовые спецификации

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

Для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту, теоретические основы которого были разработаны ученым-физиком Г. Гельмгольцем, можно получить абсолютно любой желаемый оттенок путем смешивания всего лишь трех красок: красной, зеленой и синей.

Для обозначения цвета шестнадцатеричным цифровым кодом перед самим кодом ставится символ <#>, далее следует набор из шести знаков в шестнадцатеричной системе счисления. (Табл. 1).

Таблица 1 – Обозначение цветов в шестнадцатеричной системе счисления

Для передачи цветов в html предпочтительнее пользоваться шестнадцатеричным цифровым кодом.

2 СОЗДАНИЕ WEB-СТРАНИЦЫ С ПОМОЩЬЮ ЯЗЫКА HTML

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

Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения элементов кода HTML. Это могут быть угловые скобки, прямые кавычки и т.д. Т. е. необходимо, чтобы символы отображались как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Поэтому существуют escape-последовательности, или их еще называют "нотации символьных объектов". Они начинаются символом & и заканчиваются; а между ними размещается сама команда, записываемая в строчном регистре.

Таблица 2 – Обозначение символов

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

Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> – командой предварительного форматирования. Формат команды:

PRE> предварительно отформатированный текст </PRE>

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

Тег стандартного абзаца.

<P align= аргумент> Текст, заключенный в абзац </P>

Аргументы ALIGN:

1) right – выравнивание текста по правому краю;

2) left – выравнивание текста по левому краю;

3) center – выравнивание текста по центру;

4) justify – выравнивание текста по ширине.

Если при использовании тега <P> не задано никаких атрибутов, по умолчанию используется левое выравнивание.

Для выравнивания текста по центру можно использовать тег:

<CENTER> Текст </CENTER>

Разрывы строк. Для того, чтобы внутри тестового блока браузер отобразил перевод строки, например, для отделения одного абзаца от другого, в конце строки следует поместить тег <BR>. Следующее слово, встречающееся за данным тегом, будет перенесено на новую строку. Возможно использование нескольких тегов <BR> подряд для задания последовательности из нескольких пустых строк. Команда <BR> не имеет закрывающего тега.

Иногда тег <BR> содержит атрибут clear, который может принимать одно из трех значений: left, right, all. Указанные параметры позволяют переносить текст со смещением новой строки соответственно к левой, правой

или обеим границам экрана одновременно. Синтаксис записи этого тега с атрибутом clear:

<BR clear=”значение”>

Некоторые браузеры переносят строки самостоятельно, причем разрывают строку в том месте, где она выходит за границы экрана. Если программисту необходимо отобразить текстовую строку фиксированной длины без переносов, используется тег <NOBR>:

<NOBR> строка без переносов </NOBR>

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

Шрифты. Элемент <FONT> определяет свойства шрифта.

Синтаксис записи тега <FONT>:

<FONT face=”значение1”

size=”значение2”

color=”значение3”>

текст

</FONT>

Значением атрибута face является название шрифта, который используется для отображения текста, заключенного в теги <FONT> </FONT>. Если, например, вместо параметра "значение1" в приведенном примере вы подставите "Arial", помеченный тегом <FONT>, текст будет отображаться именно этим шрифтом. В атрибуте face в качестве значений допустимо указывать несколько гарнитур шрифтов, разделяя их запятой. Для отображения текста браузер применит одну из перечисленных гарнитур, имя которой первой совпадает с имеющимся в его распоряжении набором гарнитур.

<FONT face=”Helvetica, Arial”>

Атрибут size указывает на размер шрифта. Параметр этого атрибута может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или - 1), - это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого браузером по умолчанию (12pt). Так, запись <FONT size="+1"> говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа. Кроме того, размер шрифта можно записывать целыми числами от 1до 7. В этих единицах основному шрифту, используемому по умолчанию, присваивается размер 3. Самый мелкий шрифт имеет размер 1, самый крупный – 7. Каждый шрифт в шкале "1-7" на 20% больше или меньше размера основного шрифта.

Атрибут color определяет цвет шрифта и подставляется либо цифровым кодом, либо символьной меткой.

Очевидно, что при использовании тега <FONT> любой из его атрибутов может быть опущен.

<FONT face=”Arial"

size="+2"

color="#OOOOFF">

отрывок текста

</FONT>

FONT face=”Arial"

size=5

color="olive">

отрывок текста

</FONT>

<Font size=6> текст </Font>

<Font size=+2> текст </Font>

<Font size=-1> текст </Font>

Изменение основного шрифта. По умолчанию текстовое содержимое документа отображается основным шрифтом, заданным в начальных установках браузера. Обычно основной шрифт имеет размер 3 и гарнитуру Times New Roman. Для изменения свойств основного шрифта предназначен одиночный тег <BASEFONT>, который имеет атрибуты size, color и face.

<BASEFONT size=5>

Задание цвета фона. Цвет фона всего документа определяется атрибутом bgcolor тега <BODY>.

<BODY bgcolor=”blue”>

Цвет текста. Для определения цвета шрифта можно пользоваться одним из 3 способов:

1) назначить цвет символов всего документа с помощью атрибута text тега <BODY>

<BODY text=”green”>;

2) если в документе определен основной шрифт с помощью тега <BASEFONT>, можно дополнить этот элемент атрибутом color

<BASEFONT size=5 color=”red”>;

3) для текстовых фрагментов цвет задается с помощью атрибута color в тегах <FONT>, при этом такое задание цвета отменяет действие атрибута text тега <BODY>

<FONT color=”red”>.

Элементы стиля шрифтов.

<B> Выделение текста полужирным шрифтом</B>

<I> Выделение курсивным шрифтом</I>

<U> Выделение текста подчеркиванием </U>

<TT> Моноширинный текст </TT>

<SMALL> Уменьшение размера шрифта на 10-20% относительно текущего размера шрифта </SMALL>

<BIG> Увеличение размера шрифта на 10-20% относительно текущего размера шрифта </BIG>

<STRIKE> Зачеркнутый текст </STRIKE>

<S> Зачеркнутый текст </S>

<SUB> Нижний индекс </SUB>

<SUP> Верхний индекс </SUP>

Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:

<В><I>Текст, выделенный жирным курсивным шрифтом</I></В>

Фразеологические элементы. Фразеологический элемент не указывает точного способа отображения текста, а лишь определяет, что содержимое

элемента несет определенную смысловую нагрузку и должно быть каким-то образом выделено относительно обычного текста.

<EM> Элемент акцентирования. Большинство браузеров воспринимают его как выделение текста курсивом. </EM>

<STRONG> Элемент акцентирования. Этот элемент обычно интерпретируется браузерами как выделение полужирным шрифтом. </STRONG>

<DFN> Термин и его определение. Отображается курсивом. </DFN>

<KBD> “Текст, набранный с клавиатуры”. Отображается шрифтом Courier. </KBD>

<VAR> Задание переменной или ее значения. Содержимое выводится курсивом. </VAR>

<CODE> Воспроизведение специальных символов. Применяется в случаях, когда необходимо показать, что текст является исходным кодом какой-либо программы. </CODE>

<SAMP> Воспроизведение буквенных символов. Указывает, что текст является образцом. </SAMP>

<ACRONYM title=”значение”>

Элемент аббревиатуры. В содержимом располагается сокращенное название аббревиатуры. Расшифровка термина появляется в виде всплывающей подсказки, текст которой задается значением атрибута title. Содержимое ACRONUM появляется обычным текстом. Назначение ACRONUM состоит в подготовке информации для поисковых серверов по расшифровке аббревиатур.

</ACRONYM>

Оформление цитат.

<BLOCKQUOTE cite=”URL”>

Текст длинной цитаты

</BLOCKQUOTE>.

Задает отображение длинных цитат отдельным текстовым блоком. Содержимое элемента выводится с небольшим отступом от левого и правого краев страницы (по умолчанию отступ равен 40px). Перед цитатой и после нее браузер оставляет по одной пустой строке. Атрибут cite предназначен для указания URL-адреса цитируемого документа. Этот атрибут не влияет на отображение цитаты и носит справочный характер.

<Q> Текст короткой цитаты </Q>

Тег применяется для форматирования коротких цитат. Содержимое элемента отображается без разрыва строки.

<CITE> Текст цитаты </CITE>

Цитаты, оформленные с помощью этого элемента, выделяются курсивным шрифтом.

Элемент <ADDRESS>. Используется для размещения в документе контактной информации. Элемент представляет собой блок, содержимое которого отображается курсивом и внутрь которого можно помещать другие элементы, например, разрывы строк, рисунки, гиперссылки и т.д., но нельзя вставлять блоки (разделы, списки, абзацы).

Формат элемента:

<ADDRESS>

Содержимое

</ADDRESS>

Пример:

<ADDRESS>

Екатерина Семенова <BR>

Ведущий менеджер

Телефон 123-123-123

<A href=”URL”>realiz@kdk. com</A>

</ADDRESS>

Атрибуты тега <BODY>. Общий формат записи тега <BODY> со всеми допустимыми атрибутами имеет вид:

<BODY background=”URL”

bgcolor=”значение1”

text=”значение2”

link=”значение3”

vlink=”значение4”

alink=”значение5”>

тело документа HTML

</BODY>

Атрибут background позволяет поместить на web-страницу фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например, "http: // www. server. ru/images/имя_файла. gif"), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ". . /images/имя_файла. gif”). Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне браузера.