<< Пред. стр.

стр. 22
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>



Рис. 40.4. Используйте теги <address>
для маркировки контактной информации,
относящейся к вам или к вашей организации
ГЛАВА 41.
Правильное использование элементов фраз
Элементы фразы — это серия HTML-тегов для идентификации определенной струк-
туры сегмента текста внутри более крупных элементов, таких, как абзац.
Элементы фразы обычно создают специальные текстовые эффекты, например, полу-
жирное и курсивное начертание. Именно таким образом дизайнеры склонны исполь-
зовать их для своих нужд, а не по прямому назначению. В главе 40 вам встретился со-
вет о более ответственном подходе к кодированию. Сейчас каскадные таблицы сти-
лей предоставляют надежную технологию во многих браузерах, и этот аргумент спра-
ведлив и для данной главы. Выполняйте HTML-разметку надлежащим образом, рас-
ставляя правильные теги. Если требуется получить дополнительные текстовые эф-
фекты или если нужны специальные эффекты, которые не предоставляются тегами
по умолчанию, создавайте эти эффекты с помощью каскадных таблиц стилей.



Определение
Элемент фразы — это HTML-тег, который определяет структуру сег-
мента текста внутри более крупного элемента, такого, как абзац.



Не забывая о вышесказанном, ознакомьтесь с полным списком элементов фраз, при-
водимом в таблице 41.1.
Назначение большинства элементов фраз ясно из их названия, но некоторые теги в
виде аббревиатур и акронимов нуждаются в дополнительных пояснениях.
Сначала кое-что напомним. Аббревиатура — это группа букв, которая заменяет слово
или несколько слов. Каждая буква в некоторых аббревиатурах произносится отдель-
но, даже если аббревиатура в целом удобна для произношения. Хорошим примером
аббревиатуры является ООН, которая расшифровывается как Организация Объеди-
ненных Наций. Эта аббревиатура произносится не <он», а «о, о, н».
Табл. 41.1. Элементы фразы в HTML

Тег Стандартный
Определение Пример
вид

Текст, на котором ак- Курсив <ет>Что</ет> вы сказали?
em
центируется внимание

strong Действительно выде- Вы не можете быть
Полужирный
ленный текст <strong>cepbe3HbiM!</strong;

Цитата; ссылка или Курсив Что случилось, док? < c i t e > -
cite
источник Багз Банни< / с i t e >
ГЛАВА 4 1 . Правильное использование элементов фраз 211


Определение
Тег Стандартный Пример
вид

Курсив
dfn Термин, который <dfn>Ter</dfn> является в
определяется в HTML элементом разметки
следующем тексте
code Компьютерный Моноширинный Тег <code>em</code> иденти-
текст (с одинако- фицирует выделенный текст
код
вой шириной
букв)
samp Выходные данные Моноширинный Когда это происходит, компью-
тер выводит сообщение
из компьютерной текст
<затр>Ошибка: Перезагрузи-
программы, функ-
ции и т. д. тесь.</ватр>
Клавиши, нажима- Моноширинный Для продолжения нажмите кла-
kbd
емые пользовате- текст вишу <kbd>BBOA</kbd>
лем или вводимый
им текст
Прежде чем продолжить, про-
Курсив
Переменная в
var
верьте значение <var>x</var>.
компьютерной
программе, урав-
нении и т. д.
abbr Ваш сайт выглядит фантастичес-
Обычный текст
Аббревиатура
ки, но консорциум <abbr
title="World Wide Web
Consortium">W3C</abbr> не
одобрит, как обычно
acronym Акроним Обычный текст Пошлите свой протест в
ocronym t i t l e = " N a t i o n a l
Aeronautics and Space
Administration">HA-
CA</acronym>.

В браузере Netscape аббревиатура отображается с пунктирным подчеркиванием. Ког-
да указатель мыши находится над термином, появляется совет, предоставляющий пол-
ный эквивалент из атрибута заголовка. Браузер Internet Explorer не содержит подобной
функции.
Некоторые аббревиатуры не произносятся вообще, вместо этого они заменяются ре-
альными словами, которые представляют. Рассмотрите аббревиатуру для штата Кали-
форния — СА. Обычно, когда встречается эта аббревиатура, произносят «Калифор-
ния» вместо «си, эй».
Акроним, наоборот, является аббревиатурой, которая произносится, как целое сло-
во. Когда встречается акроним NASA (National Aeronautics and Space Administration —
Национальное агентство по аэронавтике и исследованию космического простран-
ства), он не произносится по буквам «эн, эй, эс, эй», а читается как одно слово «наса»,
Строим Web-сайты
212

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


Определение
Аббревиатура — это группа букв, которая заменяет слово или серию
слов. Акроним — это аббревиатура, которая произносится так, как
если бы она была отдельным словом.




Часто задаваемые вопросы
Как можно добавить новое слово в мой родной язык?
Предложите действительно удачный акроним. Некоторые акронимы
функционируют настолько хорошо как слова, что они превратились а
реальные слова, особенно акронимы, описывающие технические по-
нятия, которые большинство людей и не пытается расшифровать. Ла-
зер (laser), радар (radar) и скуба (scuba) были когда-то акронимами.


В чем проявляется различие между маркировкой акронимов и аббревиатур для по-
сетителей сайтов? Абсолютно ни в чем. Как видно из таблицы 41.1, теги abbr и
acronym не добавляют специального шрифтового форматирования к размеченному
тексту (по крайней мере, в Internet Explorer, наиболее популярном браузере на сегод-
няшний день). Большинство посетителей сайта никогда не узнает, что вам приш-
лось набирать National Aeronautics and Space Administration для всех встречавшихся
акронимов NASA. Но посетители, использующие устройства чтения с экрана и дру-
гие специальные средства, будут благодарны вам за проявленную заботу.
Устройства чтения с экрана и подобные им устройства не понимают, когда считы-
вается аббревиатура, а когда акроним, поэтому это сообщается им с помощью раз-
метки. Когда устройству чтения с экрана встречается фраза, размеченная как акро
ним, оно пытается воспроизвести текст как одно слово. Когда встречается аббреви-
атура, устройство чтения с экрана воспроизводит его побуквенно или подставляет
полный текст, который присутствует в атрибуте t i t l e этого тега. Некоторые по-
исковые механизмы каталогизируют страницы в соответствии со словами в атрибу-
те t i t l e и по аббревиатуре или акрониму, так что сайт будет найден как теми, кто
ведет поиск по ключевой фразе «HTML», так и теми, кто ищет строку «HyperTest
Markup Language».
ГЛАВА42.
Добавление каскадных таблиц стилей
Каскадные таблицы стилей (CSS - Cascading Style Sheets) описывают стиль или внеш-
ний вид элементов на Web-странице. Каскадные таблицы стилей могут использовать-
ся для переопределения способа отображения браузером HTML-тега или серии тегов,
либо с их помощью можно создать полностью новые стили и применить их к любым
частям содержимого страниц. С этой точки зрения каскадные таблицы стилей чрез-
вычайно удобны для разделения структуры документа — чисто технического описа-
ния Web-страницы, которое определяет отдельные части содержимого как конкрет-
ные элементы или типы объектов: абзацы, изображения, заголовки, цитаты и так да-
лее — от представления документа — внешнего вида всех элементов в браузере.


Определение
Каскадные таблицы стилей описывают стиль или внешний вид эле-
ментов на Web-странице. Структура страницы — это ее техническое
описание, определяющее отношения между частями содержимого и
типами так называемых элементов. Представление страницы опре-
деляет внешний вид страницы в браузере. Теоретически, HTML об-
рабатывает структуру страницы, а каскадные таблицы стилей опре-
деляют представление, хотя HTML содержит ряд тегов представле-
ния, которые ничего не делают со структурой. Это приводит к недо-
вольству Web-разработчиков, ориентированных на полное кодиро-
вание тегами.

Когда HTML появился впервые, предполагалось, что это будет структурный язык,
причем внешний вид элементов должен был определяться программным обеспечени-
ем браузера. Роль Web-разработчика сводилась к определению того, к каким типам
объектов относились те или иные части содержимого — т.е. к описанию структуры
страницы — а браузер отвечал за представление данных. Для разбирающихся в графи-
ке Web-разработчиков этот способ работы был неприемлем. Они требовали все боль-
ше и больше управления видом Web-страниц, пока сам код HTML не становился непо-
нятной смесью из структурных элементов и элементов представления, которые не
имели вообще ничего общего со структурой. Для Web-разработчиков, погруженных в
кодирование, как и для рафинированных специалистов в консорциуме W3C, этот спо-
соб работы был одинаково неприемлемым.
Вводите ^каскадные таблицы стилей, которые, по крайней мере, теоретически удов-
летворяют требованиям обоих типов специалистов, занятых Web-разработками. Голо-
вы, озабоченные графикой, получают расширенный и улучшенный набор вариантов
разработки для управления видом Web-страниц на уровне пикселов, а головы, занятые
исключительно кодированием, получают способ использовать HTML как чисто струк-
турный язык. Обратная сторона такого подхода заключается в том, что хотя каскад-
ные таблицы стилей существуют уже несколько лет, они по-прежнему остаются не до
конца развитой технологией. «Графические» головы медленно осваивают ее, посколь-
ку каскадные таблицы стилей в большой степени используют кодирование, они инту-
итивно менее понятны, и их труднее использовать, чем HTML-разметку. Каскадные
таблицы стилей предполагают определенный уровень технического понимания,
Строим Web-сайты
214

которого многие люди, ориентированные на визуальное восприятие, не имеют я не
желали приобретать в бурные дни возникновения интернет-компаний. Более того,
создатели браузеров, такие, как корпорация Microsoft и компания Netscape, не утруж-
дались обеспечением согласованной и полной поддержки каскадных таблиц стилей.


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



Совет
Когда таблица стилей содержится в своем собственном файле, не
требуется расставлять теги стилей до и после CSS-кода. Используй-
те теги стилей только в тех случаях, когда таблица стилей встраива-
ется в HTML-документ.


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



Написание каскадных таблиц стилей
Существует два способа добавления каскадных таблиц стилей на Web-страницу: напи-
сание таблицы стилей или помещение CSS-кода в атрибут стиля тега, который тр<о/-
ется отформатировать.


Написание таблицы стилей
Таблица стилей — это блок CSS-кода. Она располагается в HTML-документе между те-
гами стилей или существует в качестве отдельного файла, который импортируется в
HTML-документ. Таблица стилей содержит одно или несколько правил стилей, или
инструкций презентации, предназначенных для браузера, и определения стиля, пре-
доставляющего пары атрибут/значение, которые сообщают браузеру, как надо отоб-
ражать селектор.
ГЛАВА 42. Добавление каскадных таблиц стилей 215

Таблица стилей выглядит во многом как приводимый ниже пример кода:
<style type="text/ess">


hi {
font-family: Arial;
font-weight: bold;
font-size: 24px;




P{
font-family: "Times New Roman";
font-size: 16px;



</style>
Эта таблица стилей содержит два правила стилей: одно для селектора hi, другое для
селектора р. Помните, что селекторы - это элементы, к которым применяется стиль.
В данном случае стиль применяется к тегам hi и р для заголовков первого уровня и аб-
зацев, соответственно. Код между фигурными скобками ({}), следующими после каж-
дого селектора, является определением для этого селектора.
Определение стиля содержит пары атрибут/значение. В HTML пары атрибут/значе-
ние принимают следующий вид:
имяатрибута="значение"
где имя атрибута представляется одним словом, атрибут отделяется от значения с по-
мощью знака равно ( = ) и значение заключается в кавычки. В каскадных таблицах сти-
лей соглашение по кодированию отличается от принятого в HTML:
имя-атрибута: значение;
где части имени атрибута разделяются символом тире (-) вместо их совмещения в од-
ном слове; для отделения атрибута от значения используется двоеточие (:), а не знак
равенства; и в конце каждой строки ставится знак точки с запятой (;). Обычно значе-
ние не требуется заключать в кавычки, хотя из этого правила существует несколько
исключений, например, когда имя шрифта содержит более одного слова, как Times
New Roman в предыдущем примере.
Пусть этот стиль кодирования не путает вас. Просто, знакомясь с определением, вы
можете догадаться, что заголовки первого уровня отображаются полужирным шриф-
том Arial с размером 24 пиксела, тогда как для отображения текста абзацев использу-
ется шрифт Times New Roman, 16 пикселов. Результат применения этих стилей похож
на изображение в браузере на рисунке 42.1.
Строим Web-сайты
216




This is a first-level head
TTus is a paragraph.

This is another paragraph




Рис. 42.1. Данный HTML-документ содержит таблицу стилей,
в которой определяются стили для тегов hi up
Если таблицу стилей изменить следующим образом:
<style type="text/css">


hi {
font-family: "Times New Roman";
font-weight: bold;
font-size: 96px;




font-family: Verdana;
font-size: 8px;




</style>
представление Web-страницы изменится и будет выглядеть, как на рисунке 42.2.
Определения стилей могут быть сложными или простыми в зависимости от решае-
мых задач. Другими словами, нет необходимости указывать значения для всех возмож-
ных атрибутов в определении. В предыдущих примерах определения не содержат ука-
заний об интервалах или цвете текста, которые, конечно же, могут задаваться в кас-
кадных таблицах стилей. При пропусках информации в определении браузер запол-
няет их своими параметрами, используемыми по умолчанию. Поэтому, если специаль-
но не указано, что текст абзаца должен отображаться красным шрифтом, браузером
ГЛАВА 42. Добавление каскадных таблиц стилей 217

будет выводиться черный шрифт, используемый по умолчанию. Подобным образом,
если в предыдущих примерах браузеру не сообщить специально о том, что надо ис-
пользовать шрифты Verdana или Arial, браузером будет подставляться шрифт по умол-
чанию.




This is a first-
level head

Рис. 42.2. При изменении определения стиля
внешний вид Web-страницы изменяется

Таблицы стилей называются каскадными благодаря тому, что дочерние элементы нас-
ледуют стили своих родителей, также, как человеческие дети наследуют гены своих
родителей.
Родительский элемент — это HTML-тег, содержащий другой HTML-тег. Дочерний
элемент'— это HTML-тег, который содержится в родительском элементе. Возьмем
данный блок HTML-кода:


Welcome b a c k , my f r i e n d s t o t h e <em>Show That Never Ends</em>!
</p>
Тег абзаца (<р>) является родительским, а тег выделения (<em>) — дочерним, посколь-
ку тег выделения находится между открывающим и закрывающим тегами абзаца. А в
этом случае:
<body>


Welcome b a c k , my f r i e n d s t o t h e <em>Show That Never Ends</em>!


</body>
тег выделения по-прежнему является дочерним тегом абзаца, но теперь и тег абзаца и
тег выделения являются дочерними элементами тега основного текста (<body>).
Каскадирование действует следующим образом: дочерний элемент наследует стиль
родительского элемента. Таким образом, любой стиль, присвоенный тегу <body>:
Строим Web-сайты
218

<style type="text/css">


body {
font-family: Arial;
}


</style>
автоматически применяется ко всем его дочерним элементам, которыми, как покяза-
но на рисунке 423, в данном примере являются тег абзаца и тег выделения. Даже ес-
ли по умолчанию в браузере используется шрифт Times New Roman, не надо сообщи ь
браузеру о необходимости использовать шрифт Arial из родительского тега <body>.


Совет
Некоторые атрибуты каскадных таблиц стилей не переходят от ро-
дительских элементов к дочерним, но это нормально, поскольку не
требуется, чтобы дочерние элементы наследовали эти свойства.
Возьмем атрибут верхнего поля, который определяет размер верх-
него поля страницы. Этот атрибут обычно указывается в теге
<body>. Вряд ли вы захотите, чтобы все абзацы, заголовки, изобри -
жения и другие дочерние элементы тега <body> имели одинаковое
верхнее поле или чтобы содержимое страницы скучивалось вверуу
окна браузера.



<< Пред. стр.

стр. 22
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>