Элементы определяющие параметры страницы.

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

2.6.1 Для установки параметров фона элемента существует несколько свойств, задающих значения индивидуальных параметров фона, и свойство background, в котором можно установить одновременно все значения параметров фона.

Цвет фона определяется значением свойства background-color, а изображение, используемое в качестве фона, задается свойством background-image. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения.

Например,

BODY {background-color: lightsteelblue;

       background-image: url(/image/image.gif); }

< P> {background-image: none}

В приведенном примере задается адрес файла изображения для фона тела документа и явно указывается отсутствие фона для абзацев документа.

Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no-repeat (изображение не повторяется).

Например,

BODY {background-color: lightsteelblue;

             background-image: url(/image/image.gif);

              background-repeat: repeat-y; } /*задается повторяемость изображения фона по вертикали */

Свойство background-attachment определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке.

Пример закрепленного в окне браузера изображения фона:

BODY {background-color: lightsteelblue;

              background-image: url(/image/image.gif);

              background-repeat: repeat-y;

              background-attachment: fixed; }

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

Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.

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

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

< BODY BGCOLOR=”#FFFFFF”  TEXT=”#000000”>

При таком варианте описания раздела < BODY> явно указываются только цвета фона и основного текста.

Таблица З.2 - Базовые цвета HTML-страниц

Название	Код RGB	Имя	Цвет	Название	Код RGB	Имя	Цвет
черный	#000000	black		серебряный	#C0C0C0	silver
темно-бордовый	#800000	maroon		красный	#FF0000	red
зеленый	#008000	green		известь	#00FF00	lime
оливковый	#808000	olive		желтый	#FFFF00	yellow
темно-синий	#000080	navy		синий	#0000FF	blue
фиолетовый	#800080	purple		фуксия	#FF00FF	fuchsia
чирок	#008080	teal		аква	#00FFFF	aqva
серый	#808080	gray		белый	#FFFFFF	white

 

Для установки в качестве фонового изображения картинки используется следующий тэг:

< BODY BACKGROUND=”URL” >,

где URL- электронный адрес картинки.

Например, < body background=" Н: \Лабораторные по информатике\Закат.jpg" >.

Задание шрифтов.

Для управления шрифтовым оформлением WEB-страниц предназначен дескриптор < FONT>. Этим тегом указываются параметры шрифта, такие, как размер, цвет и название. Параметры шрифта в теге < FONT> указываются в кавычках в любом порядке.

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

Свойство font-family.

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

Например,

BODY {font-family: TimesDL, " Times New", serif}

При интерпретации HTML-страницы браузер сначала ищет на компьютере пользователя шрифт TimesDL. Если такой шрифт отсутствует, то браузер пытается применить шрифт Times New, а если и он не найден, то используется любой шрифт из семейства шрифтов serif— одного из типовых семейств шрифтов компьютера.

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

1. serif (например, Times)

2. sans-serif (например, Helvetica)

3. cursive (например, Zapf-Chancery)

4. fantasy (например, Western)

5. monospace (например, Courier)

Имена шрифтов, состоящих из нескольких слов, должны заключаться в кавычки.

Например,

BODY {font-family: " Times New Roman", serif}

Свойство font-style.

Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).

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

Обычно в базе шрифтов браузера все шрифты, в именах которых встречаются слова Oblique, Slanted или Incline отмечены как наклонные (oblique) шрифты. Шрифты, в названиях которых присутствуют слова Italic, Cursive или Kursiv, отождествляются браузером с курсивными (italic).

Например,

HI {font-style: italic} /* курсивный стиль шрифта заголовка первого уровня*/

HI EM {font-style: normal}/* нормальный, прямой шрифт выделенных частей заголовка*/

Свойство font-variant.

Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства — капитель (small-caps). В шрифте этого стиля все строчные буквы выглядят как прописные, но меньшего размера и с немного измененными пропорциями.

Значение normal свойства font-variant не изменяет вида шрифта, а значение small-caps выбирает вариант капитель шрифта. Рекомендации по каскадным таблицам стилей допускают создание шрифта капитель простой заменой строчных букв масштабированными символами верхнего регистра.

Например,

Н4 {font-variant: small-caps}/* отображение заголовка четвертого уровня капителью*/

EM {font-style: oblique} /* наклоннfz капитель в выделенных частях */

Свойство font- weight.

Это свойство выбирает из заданного семейства шрифт определенной жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому " бледному" шрифту, тогда как 900 — самому " жирному".

Для задания нормального шрифта используется ключевое слово normal, что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания шрифта и его цифровым эквивалентом является 700.

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

Свойство font-size.

Это свойство определяет размер шрифта. Его значение может быть абсолютным или относительным.

Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large, которые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне 1 каскадных таблицах стилей определялся как 1.5, а в уровне 2 его значение рекомендовано равным 1.2. Это означает, что шрифт размера large в 1.2 раза выше шрифта medium и в 1.2 ниже шрифта x-large. По умолчанию браузер использует значение medium.

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

Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины.

Например,

P {font-size: 10pt)

ЕМ {font-size: 120%}

ЕМ {font-size: 1.2em}

Два последние правила для выделенного в абзаце элемента ЕМ определяют одинаковую высоту шрифта 12pt.

Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции.

Например,

< P> {color: blue}       

< ЕМ> {color: rgb(0, 0, 255)}

Оба правила в примере устанавливают синий цвет текста соответствующих элементов.

Стандартными шрифтами, использующимися в WWW, являются Times New Roman,  Courier New и Arial. Строка, указывающая, что данный фрагмент текста необходимо будет отображать с установленным по умолчанию шрифтом размером 6 единиц и буквами фиолетового цвета, будет выглядеть:

< FONT SIZE=”6” COLOR=”#8080C0”> Текст.< /FONT>

Если вы желаете использовать для текста нестандартный шрифт, в теге < FONT> необходимо будет указать параметр FACE, т. е. для отображения той же строки шрифтом Arial тег будет выглядеть:

< FONT FACE=”Arial” SIZE=”6” COLOR=”#8080C0”> Текст.< /FONT>

В параметре FACE можно указывать несколько шрифтов в порядке предпочтения. Текст будет отображаться тем шрифтом, который установлен на компьютере пользователя, в порядке предпочтения, указанном вами.

< FONT FACE=”Verdana, Tahoma, Arial”> Текст.< FONT>

Если на компьютере пользователя, просматривающего вашу страничку, не найден ни один из указанных вами шрифтов, текст будет отображаться шрифтом, указанным в настройках браузера пользователя, и, скорее всего, им станет Times New Roman.  

Изменение размера шрифта. В большинстве случаев можно считать справедливым соотношения размеров шрифтов и их обозначений по шкале от 1 до 7, приведенные в таблице З.3.

 

Таблица З.3 - Размеры шрифтов

Размер 1	8 пунктов
Размер 2	10 пунктов
Размер 3	12 пунктов
Размер 4	14 пунктов
Размер 5	18 пунктов
Размер 6	24 пунктов
Размер 7	36 пунктов

Задание размеров полей страницы.

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

Поля позволяют придать странице аккуратный и внятный внешний вид. Microsoft Internet Explorer допускает использование специальных атрибутов LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN, предназначенных для задания величины соответствующих полей страницы.

В теле тега < BODY> введите один из атрибутов LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN. Далее после знака равенства наберите число, выражающее величину поля в экранных пикселях.

< BODY LEFTMARGIN =”100” RIGHTMARGIN =”100” >

Связывание.

Сокращение HTML означает " язык маркировки гипертекстов". Что такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа. В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:

< A HREF=" [адрес перехода]" > выделенный фрагмент текста< /A>

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:

< A HREF=" pr.htm" > Перейти к оглавлению< /A>

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

⇐ Предыдущая12345678

Поделиться: