WEB-Дизайн

Основы WEB-дизайнаИнформационная архитектураВизуальная концепция сайтаПроектирование эффективных WEB-страницНаписание текстов для интернетаРазработка навигацииПринципы гипертекстовой разметки Структура WEB-документовБазовые теги HTMLТеги тела WEB - документаТеги списковГипертекстовые ссылкиСтруктура ссылок в HTML-документеДобавление стилейТаблицы в HTMLФормы в HTMLЗадание по таблицам и формамЭкзаменационные заданияПримеры решения заданий по WEB-дизайнуИнструменты для построения сайтовLorem ipsumЗаказать сайт

Предметы

WEB-ДизайнМетрология и СтандартизацияSEO оптимизацияМаркетингМаркетинговые исследованияТеория организацииОрганизация маркетинговой деятельности на предприяУправление проектамиУправленческие решенияИнформатикаИнформационные системы и Базы данныхТелекоммуникационные и компьютерные технологии в СИнтернет-маркетингМенеджментИстория МенеджментаПерсональный менеджментИнформационный менеджментМеждународный маркетингМировые Информационные РесурсыПланирование карьерыE-learn

Получите в подарок бесплатный видеокурс по созданию сайта своими руками

 

getsuprize.fw

 

Начни зарабатывать деньги в Интернете!!!

Подпишись на бесплатный курс

Ваш e-mail: *
Ваше имя: *
Подписчиков:

Добавление стилей

В настоящее время оформление WEB- страниц производится с использованием каскадных таблиц стилей (CSS). Здесь под добавлением стилей подразумеваем форматирование текста с помощью инструментов HTML.

Форматы символов

Сначала рассмотрим простое форматирование текста - возможности, аналогичные предлагаемым большинством текстовых процессоров.

Обычный текст достаточно поместить внутри парного тега <body> и </body>. Web-обозреватель просто покажет его в окне.

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

 

 

<B>...</B>

Полужирный текст

 <BIG>...</BIG>

Увеличенный текст

<BLINK>...</BLINK>

Мерцающий текст

<I>...</I>

Курсив

<SMALL>...</SMALL>

Уменьшенный текст

<STRIKE>...</STRIKE>

Зачёркнутый текст

<U>...</U>

Подчёркнутый текст

 <SUB>...</SUB>

Нижний регистр

 <SUP>...</SUP>

Верхний регистр

 <TT>...</TT>

 

 

Моноширинный текст

 

 

Несколько примеров использования этих тегов:

<В>Полужирный текст</В>

<BIG>Великое</BIG> и <SMALL>малое</SMALL> Химическая формула воды - H<SUP>2</SUP>0

Несколько особняком стоят теги <font> и </font>. Здесь мы столкнемся с таким понятием, как атрибуты.

Теги  <font>  и  </font> позволяют настроить начертание,  размер  и  цвет шрифта. Они имеют следующий вид:

<FONT [FACE="{Имя шрифта}"] [SIZE="{Размер шрифта}"] [COLOR="#(Код цвета}|{Имя цвета}"]>

</FONT>

Вы видите, что этот тег имеет дополнительные параметры, так называемые атрибуты. Атрибутов тега <font> довольно много, но пока мы рассмотрим три главней­ших. Эти атрибуты и задают нужные параметры шрифта. Заметьте, что они указываются только в открывающем теге, но не в закрывающем. Атрибут face задает начертание шрифта, например, "Arial" или "Courier New". Имя начертания подставляется в кавычках после знака равенства. Можно задавать сразу несколько начертаний через запятую; в этом случае Web-обозреватель при отсутствии шрифта, указанного в шрифте первым, подставит один из последующих. Если же на компьютере клиента вообще нет шрифта, заданного в атрибуте face, Web-обозреватель использует шрифт по умолчанию.

Отсюда следует правило: не употребляйте в теге <font> редких и экзотиче­ских шрифтов, имеющихся только на вашем компьютере. Атрибут size задает размер шрифта. Но не в пунктах! Дело в том, что Web-обозреватель может отображать всего семь размеров любого шрифта; эти , размеры пронумерованы от 1 до 7 в порядке увеличения. Размер по умолча­нию имеет номер з. Вы можете задать либо номер размера (без кавычек), либо относительный размер в виде +2 (т. е., шрифт с размером, большим на две позиции, чем размер по умолчанию) или -3 (соответственно, меньше на три позиции).

Атрибут color позволяет расцветить ваш текст... нет, не всеми цветами ра­дуги. Дело в том, что клиенты, которые будут просматривать ваши Web-страницы, могут использовать разную аппаратуру с совершенно различными параметрами. В том числе, у них могут быть разные видеокарты. И для того, чтобы Web-документ одинаково сносно просматривался на всех компьюте­рах, W3C сформулировал так называемую безопасную таблицу цветов. Эта таблица является частью спецификации HTML и содержит 216 цветов, рекомендованных к использованию Web-дизайнерами. Применяя безопас­ные цвета, вы можете быть уверенными, что они не сведут с ума ни одну видеокарту. Познакомиться с таблицей безопасных цветов можно в прило­жении 1.

Как задаются цвета? Либо RGB-кодом, либо символическим именем. RGB-код представляет собой шестнадцатеричное число, задающее долю в цвете соответственно красной, зеленой и голубой составляющей. Например, крас ный цвет будет иметь RGB-код #ffoooo (знак "решетки" "#" обязателен), бе­лый - #ffffff, а черный - #оооооо. Те же цвета можно задать символиче­скими именами: red, white и black. Значения цветов задаются в кавычках.

И еще. Ни один из этих атрибутов не является обязательным. То есть, хотя бы один из них должен присутствовать. Но указывать их все совершенно не надо - только те, которые действительно вам нужны.

Теперь пример:

<FONT  COLOR="#00FF00">зеленый</FONT> 

Или так:

<FONT size=7><FONT COLOR="green">зеленый</FONT> ТЕКСТ</FONT>

Здесь мы вложили одну пару тегов <font> и </font> в другую. В результате Web-обозреватель отобразит весь текст самым большим размером шрифта, а слово зеленый - еще и зеленым цветом.

Другие форматы символов

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

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

 

 

Теги

 

Описание

<ACRONYM>...</ACRONYM>

Акроним (сокращение) Цитата. Отображается курсивом

<CITE>...</CITE>

Пример исходного текста программы. Отображается моноширинным шрифтом

 

<CODE>...</CODE>

Пример исходного текста программы. Отображается моноширинным шрифтом

 

<DFN>...</DFN>

 

Определение   термина.   Отображается   курсивом   и поддерживается только Internet Explorer

 

<CITE>...</CITE>

Цитата. Отображается курсивом.

Добавление стилей в ваш HTML-документ

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

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

Стиль

Элемент или тэг

Результат

Bold

<B> Этот текст жирный </B>

Этот текст жирный

Italic

<I> Этот текст наклонный </I>

Этот текст наклонный

Mono spaced

<TT> Этот текст с непроп. шрифтом </TT>

Этот текст с непроп. шрифтом