Использование цветовых спецификаций

Дата: 2025-05-25; Просмотры: 4
Оценка:
0.00 из 5.00 — оценок
Скачиваний: 0

при создании web -страницы

 

Цветовые спецификации призваны определить цвет при создании WEB-страницы и могут быть заданы двумя способами: посредством задания специальных цветовых меток или с помощью шестнадцатеричного цифрового кода, заменяющего метки (рис. 1.3).

 

 

Рис. 1.3. Вид HTML-документа при использовании цветовой палитры

 

Для вывода цветных изображений применяется палитра RGB (табл. 1.3).

 

Таблица 1.3

Способы задания цвета

Цвет Значение RGB Символьная метка Цифровой код
Белый 255 255 255 white #FFFFFF
Черный 0 0 0 black #000000
Зеленый 0 128 0 green #008000
Светло-зеленый 0 255 0 lime #00FF00
Серый 128 128 128 gray #808080
Светло-серый 192 192 192 silver #C0C0C0
Темно-бордовый 128 0 0 maroon #800000
Синий 0 0 255 blue #0000FF
Темно-синий 0 0 128 navy #000080
Голубой 0 255 255 aqua #00FFFF

Окончание табл. 1.3

 

Цвет Значение RGB Символьная метка Цифровой код
Изумрудный 0 128 128 teal #008080
Красный 255 0 0 red #FF0000
Пурпурный 128 0 128 purple #800080
Розовый 255 0 255 fushia #FF00FF
Оливковый 128 128 0 olive #808000

 

<BODY BGCOLOR="#c0c0c0", TEXT="blue">

 

В данном теге BODY атрибут BGCOLOR задает цвет фона страницы светло-серый (#c0c0c0), который задан шестнадцатеричным значением, и атрибут TEXT задает синий цвет (blue) текста на странице (см. рис. 1.3). Предпочтительнее все же использовать шестнадцатеричный цифровой код.

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

 

В работе с текстом в HTML используется большое количество всевозможных тегов, которые можно разделить на две основные группы: теги логического и физического форматирования.

Теги логического форматирования. В данную группу входят теги, отображающие на экране монитора элементы документа таким образом, как установлено по умолчанию в спецификации разметки языка HTML. Переопределить их параметры или свойства нельзя, за исключением стилевых шаблонов CSS и обособления тегами физического форматирования. Основное назначение этих тегов заключается в логическом акценте отдельных элементов (табл. 1.4).

 

Таблица 1.4

Теги логического форматирования

 

Тег Назначение Примечание
<ACRONYM> </ACRONYM> Расшифровка аббревиатур Реализуется через параметр TITLE и отображается в браузере при наведении курсора на слово-аббревиатуру (рис. 2.1)
<CITE> </CITE> Указание цитаты Текст, помещенный между тегами, выделяется курсивом
<BLOCKQUOTE> Определяет текст как цитату большого размера Используется через атрибут CITE
<CODE> </CODE> Указание фрагмента программного кода Код отображается моноширным шрифтом

 

Окончание табл. 1.4

 

Тег Назначение Примечание
<DEL> </DEL> Обозначение удаленной инфор-мации Текст, заключенный между тегами, отображается зачеркнутым и аналогичен тегам <S> <STRIKE>
<EM></EM> Выделение курсивом Текст, помещенный между тегами, выделяется курсивом
<H1></H1>- <H6></H6> Создание заголовков Указание определенного размера заголовка (1-й самый большой)
<STRONG> Выделение жирным начертанием Аналогичен тегу <B>

 

Приведем пример программного HTML-кода, который иллюстрирует применение тегов логического форматирования (рис. 1.4).

 

<!DOCTYPE HTML PUBLIC "-//W3C// HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Теги логического форматирования </TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=Windows-1251">

</HEAD>

<BODY >

<ACRONYM TITLE="Hypertext">

HTML</ACRONYM> - один из наиболее популярных и

распространенных на сегодня языков разметки текста.

<BR><BR><BR>

<CITE>Будьте внимательны к своим мыслям – они начало

поступков

</CITE>

<BR><BR>

Программа начинается строкой<CODE> !DOCTYPE HTML

PUBLIC -"//W3C// HTML 4.01 Transitional // EN"</CODE>

<BR><BR>

Из вашего текста я вычеркнула следующие строки<DEL>Когда

множатся законы и приказы, растет число воров и разбойников

</DEL>

<BR><BR>

Мудрость – <EM>родная мать счастья</EM>

<BR><BR>

<H1>Глава 1</H1>

<BR>

<STRONG>Любое препятствие преодолевается настойчивостью

</STRONG>

</BODY>

</HTML>

 

Здесь также используется тег <BR>, который мы еще не рассматривали, его назначение – перевод строки.

 

 

Рис. 1.4. Логическое форматирование текста

 

Для оформления заголовков в тексте на web-странице используется тег <Hn>текст заголовка</Hn>, где n – уровень заголовка, который выражается числом от 1 до 6. Причем 1-й – самый старший уровень.

Тег <Hn> использует атрибут выравнивания внутри окна ALIGN, который может принимать одно из значений: right, left, center. По умолчанию заголовки выравниваются по левому краю страницы.

Например,

 

<H1 ALIGN="center"> заголовок </H1>

 

помещает заголовок 1-го уровня в центре страницы.

Теги физического форматирования позволяют разработчику HTML-документа визуально изменить текст, варьируя его параметры и значения. Другими словами, теги физического форматирования предназначены для выделения отдельных текстовых фрагментов различными способами, установленными автором документа (табл. 1.5).

Для правильного отображения текста HTML-документа важное значение имеет выбор шрифтов. Шрифты различаются гарнитурой (стиль оформления). Условно шрифты можно разделить на две группы: шрифты с засечками (такие как Times) и рубленые (такие как Arial). В одной и той же гарнитуре обычно существуют несколько начертаний шрифта: обычный (Normal), полужирный (Bold), курсив (Italic) и полужирный курсив (Bold Italic).

 

Таблица 1.5

Теги физического форматирования

Тег Назначение Примечание
<B></B> Выделение жирным начертанием

Начертание шрифта
<I></I> Выделение курсивом
<U></U> Выделение подчеркиванием
<TT></TT> Имитация телетайпа или моноширного шрифта
<SUB></SUB> Создание нижнего индекса

Нижние и верхние индексы
<SUP></SUP> Создание верхнего индекса
<FONT></FONT> Определяет свойства шрифта Размер – size Цвет – color Гарнитура – face
<BASEFONT></BASEFONT> Определение свойства шрифта для всего документа Аналогичен тегу <FONT>
<BIG> Увеличивает размер шрифта на один пункт

Относительное

изменение размера шрифта
<SMALL> Уменьшает размер текста на один пункт

 

Еще одним важным параметром шрифта является размер. Под размером шрифта понимают высоту его символов (букв). Для определения высоты шрифта используют типографические единицы – пункты (1 pt = 0,353 мм). Для нормального отображения на экране браузера HTML-документа обычно используют шрифт размером 12 пунктов.

Для изменения вида, размера и цвета шрифта предназначен тег <FONT>текст </FONT> с атрибутами FACE, SIZE, СOLOR.

FACE – название шрифта, например, FACE="arial". Лучше опускать данный атрибут, позволив браузеру представлять при интеграции кода тот шрифт, который используется по умолчанию, во избежание ошибок при отображении текста.

SIZE – размер шрифта. Значение этого атрибута может быть описано абсолютной или относительной величиной. Абсолютное обозначение – целыми числами от 1 до 7, относительная величина – цифра со знаком «+» или «–». Это количество пунктов, которые следует прибавить или отнять от размера шрифта (по умолчанию шрифт имеет размер 3 пункта).

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

Например,

 

<FONT FACE="arial" SIZE="16 "СOLOR="olive">текст</FONT>

 

задает тип шрифта – arial, размер – 16 пунктов и цвет – оливковый.

 

<FONT FACE="arial" SIZE="+2" СOLOR="olive">текст</FONT>

 

В этом написании тега атрибут SIZE="+2" задает размер шрифта на 2 пункта больше, чем стандартный, т. е. 5 пунктов. При определении размера шрифта может оказаться, что вычисляемое значение равно нулю или отрицательно. Тогда шрифту назначается размер 1. Если же вычисляемый размер оказывается больше 7, то размер шрифта все равно считается равным 7. Любой атрибут тега <FONT> может быть опущен.

Чтобы увеличить размер шрифта более чем на один пункт или уменьшить, можно использовать последовательность из нескольких тегов <BIG> или <SMALL>.

Например, <BIG><BIG> текст </BIG></BIG> – увеличивает размер букв текста на 2 пункта; <SMALL> текст </SMALL> – уменьшает размер букв текста на один пункт.

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

Для контекстного выделения текста используются теги:

 

<B>текст</B> – выделение жирным шрифтом;

<I>текст</I> – выделение курсивом.

 

Например,

 

<B>Стыд </B>–<I> это страх перед людьми, </I><B>совесть</B> – <I>страх перед Богом</I>

 

Данные пары можно вкладывать друг в друга, если необходимо сделать начертание букв жирным курсивом (рис. 1.5).

 

 

Рис. 1.5. Различие представления текста в двух примерах

 

<B><I>Стыд</I> </B>–<I> это страх перед людьми, </I><B><I >совесть</I></B> – <I>страх перед Богом</I>

 

1.3. Структурное форматирование

 

Структурное форматирование в HTML представляет собой разбиение электронного документа на логические блоки, которым соответствуют определенные элементы: абзац, текстовый блок, центрирование, отступы и перенос строк, горизонтальный разделитель, комментарии и предварительно форматированный текст (табл. 1.6.).

Форматирование абзаца. Формирование абзаца осуществляется с использованием тега <P>текст абзаца</P>.

 

Для выравнивания текста абзаца на страничке используется атрибут ALIGN, который может принимать одно из значений: right (выравнивание справа), left (выравнивание слева), jastify (выравнивание по ширине) или center (выравнивание по центру).

 

<P ALIGN="right">текст абзаца</P>

 

Значения right, left, jastify или center можно использовать как отдельный тег, например, <RIGHT>текст</RIGHT >.

Внутри тега <P> могут находиться только теги форматирования текста: логические и физические (табл. 1.6).

Таблица 1.6

Теги структурного форматирования

 

Тег Структурный элемент Примечание
<P></P> Абзац ALIGN – выравнивание (left, right, center, jastify)
<DIV></DIV> Текстовый блок ALIGN – выравнивание (left, right, center)
<CENTER></CENTER> Центрирование Горизонтальное выравнивание
&nbsp Создание отступа Представляет собой обычный пробел
<BR> Разрыв строки –
<NOBR></NOBR> Запрет разрыва строки –
<HR> Горизонтальный разделитель ALIGN – выравнивание, WIDTH – длина, SIZE – щирина, COLOR – цвет
<PRE></PRE> Предварительное форматирование текста –
<!-- --> Комментарии Включение дополнительной информации о документе

Форматирование текстового блока. Формирование текстового блока осуществляет тег <DIV>. Блоки <DIV> удобны тем, что они позволяют выровнять любой фрагмент текста, задать его размеры и расположить в нужном месте. К данным блокам можно применить любые атрибуты стиля и обращаться к ним как к объектам таблиц стилей (см. гл. 5).

 

<DIV ALIGN="center" STYLE="color: green; ">текст</DIV>

 

Блок текста будет отображен зеленым цветом и размещен в центре страницы.

Центрирование. Для центрирования любых элементов в HTML-документе используется тег <CENTER>, он представляет собой аналог значения ALIGN="center" того тега, результат отображения которого будет отцентрирован на экране монитора. Например, результат отображения фрагментов кода таблицы

 

<CENTER>

<TABLE><TR><TD></TD></TR></TABLE>

</CENTER>

 

и

 

<TABLE ALIGN="center" ><TR><TD></TD></TR></TABLE>

 

будет абсолютно одинаков.

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

Пустая строка. Для вставки пустой строки на страничке используется тег <BR>. Данный тег относится к одиночным тегам, т. е. не имеет закрывающего тега.

Строка без переносов. Для отображения строки без переносов используется тег <NOBR>строка</NOBR>.

Горизонтальный разделитель. Для горизонтального разделения HTML-документа на части используют тег <HR>. Если тег используется без атрибутов, то браузером отображается стандартная линия на всю ширину окна, а ее толщина составляет 2 пиксела. Верхняя часть такой линии несколько темнее, чем нижняя ее часть. Для создания горизонтальной линии, отличающейся от стандартной, применяются теги: ALIGN – выравнивание, WIDTH – длина, SIZE – ширина, COLOR – цвет.

 

<HR SIZE="5" COLOR="red">

 

В окне браузера отображается линия красного цвета толщиной 5 пикселов и длиной 80 % от ширины окна экрана.

Тег <HR> не имеет закрывающегося тега.

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

 

<!-- Комментарий -->

 

Предварительно отформатированный текст. Для отображения отформатированного текста в том виде, как он выглядит в окне текстового редактора, используют тег <PRE></PRE>. Этот тег применяется к тексту, для которого важно сохранить все пробелы, табуляции или переводы строк. Например, если вы набрали стихотворение в каком-либо текстовом редакторе и хотите его перенести на Web-страницу, то проще всего это сделать с помощью тега <PRE>, заключив это стихотворение в теговый контейнер.

1.4. Списки

 

Текст на страничке может быть отформатирован в виде списков: маркированных (<UL></UL>), нумерованных (<OL></OL>) и списков определений (<DL></DL>). Списку может предшествовать заголовок (<LH></LH>), который является не обязательным элементом.

Маркированный список. Для маркированного списка применяют тег <UL></UL>, а для вхождения пунктов в список тег <LI> пункт списка </LI>. При оформлении маркированного списка используется вид маркера, который можно задать с помощью атрибута TYPE. Данный атрибут может принимать следующие значения: disc, circle, square.

Disc – метки отображаются в виде заполненных черным цветом окружностей.

Circle – метки отображаются в виде полых окружностей.

Square – метки отобразятся в виде заполненных черным цветом квадратов.

По умолчанию (т. е., когда опускаем параметр TYPE), используется значение disc.

Например,

 

<UL>

<LH>Заголовок списка</LH>

<LI> пункт списка 1 </LI>

<LI> пункт списка 2 </LI>

<LI> пункт списка 3 </LI>

<LI> пункт списка 4 </LI>

</UL>

 

отобразит в браузере маркированный список (рис. 1.6).

 

Рис. 1.6. Пример оформления маркированного списка в HTML

 

 

Вместо стандартных HTML-маркеров можно использовать собственные графические изображения. Для этого внутри тега контейнера <UL> вместо указателя элемента <LI> размещается конструкция описания графических объектов <IMG>, где атрибут SRC задает имя файла:

 

<UL>

<IMG SRC="marker.gif"> пункт списка 1

<IMG SRC="marker.gif"> пункт списка 2

<IMG SRC="marker.gif"> пункт списка 3

……………………………………………

<IMG SRC="marker.gif"> пункт списка n

</UL>

В качестве маркера будет представлено изображение, находящееся в файле marker.gif.

Нумерованный список. Для нумерованного списка используется тег <OL></OL>, а для вхождения пунктов в список также используется тег <LI> пункт списка </LI>. В этом теге значение атрибута TYPE может принимать следующие значения:

1 – обычные арабские числа 1, 2, 3;

I – римские цифры в заглавном регистре;

i – римские цифры в строчном регистре i, ii, iii и т. д.;

A – символьная маркировка в заданном регистре A, B, C;

a – символьная маркировка в строчном регистре a, b, c.

Атрибут START – позволяет задавать позицию, с которой следует начать маркировку. Например, START="5" – нумерация начинается с 5, START="D" – нумерация начинается с D.

 

<OL TYPE="1" START="4">

<LI> пункт списка 1 </LI>

…………………………………

<LI> пункт списка n </LI>

</OL>

 

В данном примере нумерация списков будет осуществляться арабскими цифрами и начнется с цифры 4.

Список определений. Список определений <DL></DL> представляет собой более сложную структуру, представленную двумя типами элементов <DT> </DT> (задает термин) и <DD> </DD> (задает определение термина и отображается новым абзацем).

 

<DL>

<DT>Треугольник </DT>

<DD> Многоугольник с тремя сторонами</DD>

<DT>Равнобедренный треугольник </DT>

<DD> Треугольник, в котором две стороны равны</DD></DL>

 

Результат отображения данного примера показан на рис. 1.7.

 

Рис. 1.7. Пример оформления списка определений

 

* * *

 

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

 

 

Практическое задание

 

СОЗДАНИЕ WEB-СТРАНИЦЫ

 

1. Создание простейшей web-страницы. Откройте текстовый редактор «Блокнот». Наберите в нем структуру HTML-документа.

 

<HTML>

<HEAD>

<TITLE>Студенческая жизнь</TITLE>

</HEAD>

<BODY>Первая домашняя страничка</BODY>

</HTML>

 

Сохраните файл на диске в папке под своей фамилией, задав ему имя index.htm. Откройте созданный файл в браузере Internet Explorer. Вы увидите, как выглядит созданный вами файл в окне браузера. Закройте браузер.

2. Настройка страницы.

Параметры тега <BODY>. Вернитесь к исходному файлу в редакторе «Блокнот». Введите атрибуты для тега <BODY>: цвет фона – светло-серый, цвет текста – темно-синий (BGCOLOR="silver" TEXT="navy"). Сохраните изменения в файле и вновь просмотрите его в браузере.

Форматирование текста. Текст Первая домашняя страничка сделайте заголовком первого уровня (тег <H1></H1>). Затем ниже введите ваши фамилию, имя и отчество (в родит. падеже) и выделите этот текст жирным шрифтом, оформите как абзац с выравниванием текста по центру и с переводом строки (теги <P></P>, <B></B>, <BR>). Сохраните изменения в исходном файле и вновь просмотрите его в браузере. Вы видите, что заголовок на вашей странице выровнен по левому краю. Измените выравнивание и сделайте его по центру (атрибут ALIGN для тега заголовка первого уровня).

Пропустите несколько строк после текста с фамилией и введите текст, оформленный как маркированный список (теги <UL> и <LI>):

– Немного о себе;

– Мои любимые предметы;

– Мое хобби.

Сохраните исходный текст файла и вновь просмотрите его в браузере.

Далее на вашей страничке увеличьте размер шрифта текста с вашей фамилией на два пункта и измените вид маркера на полую окружность (теги <FONT> с атрибутом SIZE и <UL> с атрибутом TYPE).

Через несколько строк от списка используйте горизонтальный разделитель, после которого введите свои координаты (почтовый адрес, и телефон). Для этого используйте тег <HR>. Сохраните изменения и вновь просмотрите его в браузере.

Создайте еще три страницы. В качества заголовка на странице используйте строки вашего списка: Немного о себе, Мои любимые предметы, Мое хобби. Заполните содержимое этих страниц. Используйте различные цвета для фона и текста, а также различные шрифты и виды их выделения. Текст первой страницы должен содержать как минимум два абзаца. Когда будете набирать содержимое второй страницы Мои любимые предметы, в тексте предусмотрите их перечень, а ниже – пояснения для каждого предмета. Сохраните содержимое этих страниц в файлах с соответствующими названиями page1.htm, page2.htm, page3.htm в каталоге, где был сохранен первый ваш файл с индексной страницей.