Web-дизайн - Первая web-страница, Элемент FONT, Атрибуты тега BODY, Заголовки , Списки

Рассылка

Web-дизайн

Первая web-страница

Элемент 
Атрибуты тега <BODY>
Заголовки
Списки

Элемент 

Теперь вы знаете, что управлять размером выводимого на экран текста можно при помощи тегов <BIG> и . А как программист может изменять другие параметры шрифта? Для этого и существует директива .

Как известно, размер шрифта в стандарте HTML обозначается условными, пунктами, причем всего их насчитывается семь. Однако не все броузеры понимают термин пункт одинаково. Например, при отображении документа в Microsoft Internet Explorer размеры всех шрифтов различны, за исключением пунктов 2 и 3 — они отображаются шрифтом одной высоты, которая равна величине, принятой по умолчанию, и зависит от пользовательских настроек броузера. В Netscape Navigator абсолютно одинаково отображаются пункты 4 и 5, а так же б и 7, они больше по высоте, чем пункт 3, который является нормальным размером шрифта.

ПРИМЕЧАНИЕ Следует помнить, что некоторые броузеры, например Microsoft InternetExplorer, позволяют настраивать параметры текста, отображаемого всоставе документов HTML, путем изменения размера шрифта, подставляемого интерпретатором броузера по умолчанию. Это значит, что параметры элемента , равно как и других тегов, управляющих размером шрифта, могут изменяться в зависимости от пользовательских настроек. По той же причине возможен эффект нарушения компоновки страницы, оптимизированной для просмотра в броузере со стандартными настройками. Избежать этого можно, заключив все элементы документа в невидимую таблицу с фиксированной шириной, заданной в пикселах.

В общем виде синтаксис записи тега выглядит следующим образом:

текст

Значением атрибута FACE является название шрифта, который вы планируете использовать для отображения текста, заключенного в теги . Если, например, вместо параметра "значение!" в приведенном примере вы подставите "Arial", помеченный тегом , текст будет отображаться именно этим шрифтом.

ВНИМАНИЕ Помните, что набор шрифтов, установленных на компьютерах посетите-— " лей вашего сайта, может быть разным, и если вы укажете в атрибуте FACE тега шрифт, отсутствующий в системе пользователя, текстна экране его монитора станет нечитаемым. Для того чтобы избежать ошибок при отображении текста в броузерах конечных пользователей, используйте указания только на стандартные шрифты, имеющиеся в составе большинства броузеров: Arial и New Times Roman. А лучше вообще опускать данный атрибут, позволив броузеру подставлять при интерпретации кода тот шрифт, который используется по умолчанию.

Атрибут SIZE указывает на размер шрифта, которым следует выводить текст. Параметр этого атрибута, обозначенный в нашем примере как "значение2", может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа в диапазоне от 1 до 6, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или -1), — это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого броузером по умолчанию. Так, запись говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа.

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

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

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

ВНИМАНИЕ Помните, что некоторые броузеры старых версий не поддерживают директиву . Среди них — текстовый броузер для UNIX-совместимыхплатформ, который носит название Lynx.

Атрибуты тега <BODY>

О теге <BODY>, обозначающем тело (основную часть) документа HTML, мы уже говорили в начале этого урока. Необходимо добавить лишь то, что данная команда также может иметь атрибуты, использование которых в ряде случаев бывает весьма полезно, а иногда — просто необходимо.

В общем виде синтаксис записи тега <BODY> со всеми допустимыми атрибутами выглядит так:

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

<BODY>

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

СОВЕТ Для того чтобы избежать неадекватности отображения того или иного цвета различными броузерами, например, когда web-дизайнер решил применить на странице заливку какого-либо редко используемого оттенка, рекомендуется следующий подход: создайте в любом подходящем редакторе графический файл нужного цвета размерами 1x1 пиксел, после чего укажите его в качестве фонового изображения, включив URL этого рисунка в параметр атрибута BACKGROUND тега <BODY>.

Атрибут TEXT позволяет задать цвет текста для всего документа в целом. Но не забывайте, что параметр, назначенный данному атрибуту в теге <BODY>, можетбыть изменен в определенном участке текста путем использования команды с атрибутом COLOR.

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

ПРИМЕЧАНИЕАтрибуты BGCOLOR и BACKGROUND не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницыцветом, назначенным в атрибуте BGCOLOR, поверх которой размещается изображение, заданное атрибутом BACKGROUND.

ВНИМАНИЕ Если вы не используете графических изображений в качестве фонового рисунка, а основным цветом html-документа приняли белый, использование атрибута BGCOLOR с параметром "#FFFFFF" в составе тега<BODY> обязательно. Обусловлено это правило следующей причиной: некоторые броузеры (например, Microsoft Internet Explorer) позволяют пользователям произвольно изменять фоновый цвет загружаемых web-страниц, если он не задан явно. Учтите, что пренебрежение явным указанием фонового цвета может вызвать полное нарушение разработанного вами дизайна.

Атрибут LINK дает web-мастеру возможность назначить цвет, которым отображается не посещенная гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение"blue" (IOOOOFF). В свою очередь, атрибут VLINK указывает на цвет посещенной ссылки, значение которой по умолчанию — "purple" (#800080). И наконец, атрибут ALINK определяет цвет активной гиперссылки, то есть цвет, который гиперссылка принимает с момента нажатия на нее курсором мыши до момента загрузки вызываемого ею ресурса. По умолчанию данный атрибут также имеет значение "purple".

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

ПРИМЕЧАНИЕ При выборе цветов документа, текста и гиперссылок следует соблюдать определенную осторожность, поскольку цвета, контрастно отображаемые на цветном мониторе, могут быть неразличимы на черно-белом. Избежать подобных ошибок можно при помощи несложного приема: сделайте снимок экрана (скриншот) в момент, когда ваша web-страницазагружена в броузер (для этого необходимо нажать кнопку Print Screenна клавиатуре компьютера), загрузите полученное изображение в графический редактор и просмотрите его в режиме grayscale (256 оттенков серого). Если выбранная вами цветовая схема по-прежнему выглядит контрастно, ее можно смело применять, если нет — придется использовать другие цвета.

СОВЕТ Подбирая цвета для web-страницы, помните, что используемая вами цветовая схема должна быть корректной. Чтение текста не должно вызывать затруднений, глаза посетителей вашей странички не должны уставать. Пожалейте зрение пользователей, не пишите оранжевым по зеленому.

ВНИМАНИЕ Установив одно из значений цветовых параметров вашей страницы, жестко задавайте и остальные значения. Некоторые броузеры позволяют пользователю произвольно менять цвет фона документа или выводимого на экран текста, если они не указаны явно. В этом случае заданный вами цвет текста может совпасть с цветом фона, установленным в броузере пользователя по умолчанию, в результате чего текст станет нечитаемым. Изменение одного из цветовых параметров без изменения остальных недопустимо. Исключение можно сделать лишь в том случае, когда в качестве фонового цвета web-страницы используется белый.

Вот пример использования тега <BODY> со всеми допустимыми атрибутами:

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

</BODY>

Заголовки

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

Аналогия с файлами Microsoft Word приведена здесь не случайно: она поможет вам понять назначение заголовков, применяющихся в документах HTML. Спецификация HTML позволяет программисту использовать шесть различных стилей, или, как их еще принято называть, логических уровней заголовков. Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n — целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды в общем виде таков:

<Нn АLIGN="параметр">Текст заголовка</Нn>

где n=1...6.

Атрибут ALIGN дает возможность web-мастеру определить расположение заголовка в окне броузера. Параметр этого атрибута может принимать одно из трех возможных значений:

RIGHT — позиционирование заголовка по правой границе документа; LEFT — позиционирование заголовка по левой границе документа; CENTER — позиционирование заголовка по центру документа. По умолчанию заголовки выравниваются по левому краю страницы.Вот пример использования данного тега:

<Н1 ALIGN="CENTER">ДOБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!</Н1>

К сожалению, не существует каких-либо четко сформулированных правил применения заголовков в документах HTML, за исключением одного и вполне очевидного: они должны следовать в порядке приоритета, то есть с 1 по б, но не наоборот. В принципе данное правило диктуется не внутренними законами языка разметки гипертекста, а элементарной человеческой логикой, его нарушение не вызовет появления ошибок. Не рекомендуется также включать в документы заголовки ниже уровня <Н4>, поскольку они отображаются значительно более мелким шрифтом, нежели основной текст web-страницы, что затрудняет восприятие информации. Во всех остальных случаях использование данной команды — дело вкуса и эстетических предпочтений автора проекта.

Списки

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

Вхождение 1
Вхождение 2
Вхождение 3
Вхождение n.

На языке HTML подобный маркированный список можно представить при помощи команды <UL> следующим образом:

<LI> Вхождение 1</LI>

<LI>Вхождение 2</LI>

<LI>Обхождение 3</LI>

<LI>Обхождение n</LI>

</UL>

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

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

CIRCLE — метки отображаются в виде полых окружностей;

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

По умолчанию, то есть в случае, когда в маркированном списке тег <UL> записывается без атрибутов, TYPE="DISC".

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

1. Вхождение 1

2. Вхождение 2

3. Вхождение 3

И т. д.

В документе HTML нумерованный список можно представить с использованием тега <OL>:

<LI> Вхождение 1</LI>

<LI>Обхождение 2</LI>

<LI>Вхождение 3</LI>

</OL>

Атрибут TYPE, так же как и в случае с маркированным списком, позволяет изменять буллет-стиль, то есть определять вид маркеров, которыми будут обозначаться составляющие список значения. В составе атрибута TYPE команды <OL>можно использовать один из следующих параметров:

"1" — обычные арабские числа 1, 2, 3 и т. д.

"I" — римские цифры в заглавном регистре I, II, III, IV и т. д.

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

"А" — символьная маркировка в заглавном регистре А, В, С и т. д.

"а" — символьная маркировка в строчном регистре а, b, с и т. д.

Атрибут START позволяет задавать позицию, с которой следует начать маркировку. Например, если атрибут TYPE задан как "1", а атрибут START —как "5", то нумерация начнется с цифры 5. Если же TYPE имеет значение "А", аSTART — "D", то маркировка начнется с символа D.

ВНИМАНИЕ При использовании атрибута START необходимо внимательно следить,— чтобы его значение соответствовало типу маркировки, указанному в атрибуте TYPE. Запись <OL TYPE="I" START="A"> не допускается. Наоборот, запись <OL TYPE="A" START="I"> вполне допустима.

По умолчанию значение атрибута TYPE принимается как "1", нумерация начинается с первого элемента в каждом из типов маркировки.

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

Вхождение 1

Вхождение 1-а
Вхождение 1-6

Вхождение 2

Вхождение 2-а
Вхождение 2-6

На языке HTML такой список можно представить следующим набором команд:

<OL>

<LI>Обхождение 1</LI>

<UL>

<LI>Обхождение l-a</LI>

<LI>Вхождение 1-б<LI>

</UL>

<LI> Вхождение 2</LI>

<UL>

<LI>Вхождение 2-a</LI>

<LI>Обхождение 2-6</LI>

</UL>

</OL>

Следует отметить, что тег О может включать те же атрибуты, что и теги самих списков <UL> и <OL>. Если, например, вхождения маркированного списка отображаются принятым по умолчанию маркером DISC, но одно из наиболее значимых по контексту вхождений программисту необходимо пометить маркером SQUARE, можно записать тег данного элемента следующим образом: <LI ТYРЕ="SQUARE">Вхождение</1-1>. Аналогично, один из пунктов нумерованного арабскими цифрами списка можно пометить символьным маркером, записав соответствующий тег следующим образом: <LI ТУРЕ="А">Вхождение</LI>. Важно лишь следить за тем, чтобы указываемые в теге О параметры атрибутов совпадали с типом используемого списка.

Помимо нумерованных и маркированных списков язык разметки гипертекста позволяет создавать списки определений, для чего применяются команды <DL>.Внешний вид простого списка определений таков: Заголовок группы вхождений 1

Вхождение 1-а

Вхождение 1-6

Заголовок группы вхождений 2

Вхождение 2-а

Вхождение 2-6

В виде кода HTML этот список можно представить следующим образом:

<DL>

<DТ>Заголовок группы вхождений 1

<DD>Вхождение 1-а

<DD>Вхождение 1-6

<DT>3aголовок группы вхождений 2

<DD>Вхождение 2-а

<DD>Вхождение 2-6

</DL>

Закрывающие теги для команд <ОТ> и <DD> списка определений можно опустить. Данные теги могут использоваться и самостоятельно: <DT> для отображения терминов, выделяемых в тексте шрифтом, a <DD> — для их расшифровки, помеченной отступом. В этом случае наличие соответствующих закрывающих тегов обязательно.

1>>>2>>>3>>>4

<<<<...Назад

Содержание

Вперед...>>>>

Обсудить в форуме...>>>>

	Каталог

Реклама