Поиск

Использование спецсимволов

В HTML и, соответственно, в броузерах реализована возможность прорисовки символов по их кодам. Символы могут быть общепринятыми, вводимыми с кла виатуры, нестандартными и используемыми в HTML в качестве служебных. Все их будем называть спецсимволами. Первый способ ввода спецсимвола заключает ся в указании его кода. Например, латинскую букву А можно задать так: &#65. Для некоторых символов предусмотрена мнемоническая кодировка. В табл. 2.1 приве ден набор часто используемых спецсимволов (по стандарту ISO 88591). Для от деления кода символа от последующего текста надо вводить точку с запятой.

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


640×480

Двойная кавычка, угловые скобки и амперсанд (", <, >, &) являются служебными в HTML. Если их надо использовать в обычном тексте на Webстранице, то они должны быть указаны только при помощи кодов.

Интересно, что кириллица тоже может быть реализована в виде набора спецсимво лов. Русские буквы расположены (при кодировании Windows1251) в том месте кодовой таблицы, где первоначально располагались латинские буквы с тильдами, умляутами и т. д. Поэтому англоязычные редакторы HTML при переключении клавиатурного регистра часто записывают кириллицу в виде кодов. Эта особен ность рассмотрена в разделе «HoTMetaL PRO 5.0» главы 8.

Таблицы спецсимволов расположены в файле Spec.htm на прилагаемой дискете. Вы можете проделать эксперимент с этим файлом. Создайте его копию и удалите из текста указание на кодовую страницу (charset=windows1251). Затем откройте страницу в броузере и посмотрите, как изменятся образцы символов. Например, вместо русских могут появиться символы европейских алфавитов (буквы с тильда ми, умляутами и т. д.). Может измениться и вид кириллицы, набранной при помо щи мнемокодов. Изменив вид кодировки в броузере, можно увидеть самые разные буквы. Если же вид некоторых спецсимволов не зависит от выбранной кодиров ки, то эти символы можно с уверенностью использовать в своих Webстраницах.

Типы данных

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

Числовые данные требуются только для указания значений атрибутов и записы ваются без кавычек.

Гиперссылки (координаты переходов) обычно состоят из двух частей: текста под сказки и адреса, который определяет координату перехода. Текст подсказки или заменяющий его рисунок располагается внутри элемента А, а адрес задается при помощи атрибута href. Гиперссылка обычно выделяется на фоне обычного текста цветом или подчеркиванием. Кроме того, вид указателя мыши обязательно измЪ няется, когда пользователь помещает его над гиперссылкой.

На Webстраницах используются и другие формы ссылок. Так, графические дан ные хранятся в отдельных файлах, и для указания места расположения этих фай лов служит элемент IMG с атрибутом src. Для указания Webстраниц, размещае мых внутри фреймов, служит элемент FRAME с атрибутом src.

Существуют правила для определения размеров элементов. Размер, заданный обычным числом, выражается в пикселах. Так, например, задается длина горизон тальной линии в 100 пикселов:

<HR w.idth=100>

Горизонтальный размер может быть задан и в процентном отношении к ширине окна броузера:

<HR width=50%>

Если размер окна будет изменен, то изменится и длина горизонтальной линии. Символ * может использоваться для разделения пространства страницы в опреде ленных пропорциях. Ниже показаны два способа определения фреймов (атрибут cols создает фреймы с вертикальным делением), причем левый фрейм в данном случае всегда будет в три раза уже, нежели правый.

<FRAMESET cols="25%, 75%">
<FRAMESET cols="1*. 3*">
Управление цветом

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

color="red"

В табл. 2.2. представлены все допустимые названия цветов. Но в общем случае цвет определяется так называемым RGBкодом, шаблоны которого уже упомина лись выше. Любой цвет представляется в этом случае как комбинация красного (R), зеленого (G) и синего (В) цветов, взятых в определенных пропорциях

Доля каждой цветовой составляющей определяется интенсивностью цвета и вы ражается двуразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255. Легко подсчитать, что комбинируя интенсивности трех базовых цветов, разработчик Webстраницы имеет возмож ность запрограммировать любой из 16 777 216 доступных оттенков. В Windows 95 это соответствует цветовому режиму монитора True Color (24разрядное двоич ное кодирование цвета). Это наилучший на сегодняшний день режим цветопере дачи. Таким он, видимо, останется и в дальнейшем, так как возможности цветово го зрения человека и возможности мониторов в смысле точного воспроизведения цветовых нюансов подходят здесь к своему пределу. Таким образом, пользовате ли и разработчики Webстраниц нисколько не ущемлены в своих «цветовых пра вах» по сравнению с остальным компьютерным миром.

Если вы внимательно посмотрите на коды, приведенные в табл. 2.2, то обнаружи те, что для формирования стандартных цветов часто используются или крайние значения интенсивности базового цвета 00 и FF, или среднее значение 80. Многие современные приложения имеют средства для работы с цветом, предоставляя пользователю возможность, выбрав в палитре цвет, увидеть его численные ха рактеристики. И наоборот, задав численные значения получить новый оттенок. Нельзя, правда, сказать, что все подобные программы совместимы между собой в смысле генерации цвета. Создав некоторый цвет в одной программе и задав его RGBкод в другой, вы не обязательно получите тот же самый оттенок. Цветовые нюансы для Webстраниц лучше всего проверять на самих страницах. В файле Color.htm на прилагаемой дискете приведен пример подбора оранжевого цвета. Он труднее всего воспроизводится на компьютере и требует визуального тестиро вания. Подобную страницу можно использовать и для подбора других оттенков. Фрагмент HTMLфайла для этого приведен ниже:

<TABLE border=3 width=200>
<TR>
<TD align="cerrter" bgcolor="white" ><В>Код</Ь>
<TD align="center" bgcolor="white" ><В>Цвет</Ь>
<TRXTD>#FFBOOO <TD bgcolor=#FFBOOO >1
<TRXTD>#FFA800 <TD bgcolor=#FFA800 >2
<TRXTD>#FFAOOO <TD bgcolor=#FFAOOO >3
<TR><TD>#FF9800 <TD bgcolor=#FF9800 >4
<TRxTD>#FF9000 <TD bgcolor=#FF9000 >5
<TRxTD>«FF8800 <TD bgcolor=#FF3800 >6
<TRxTD>#FF8000 <TD bgcolor=#FF8000 >7
<TRxTD>#FF7800 <TD bgcolor=#FF7800 >8
<TRXTD>#FF7000 <TD bgcolor=#FF7000 >9
<TRXTD>#FF6800 <TD bgcolor=#FF6800 >10
<TR><TD>#FF6000 <TD bgcolor=#FF6000 >11
<TR><TD>#FF5800 <TD bgcolor=#FF5800 >12
</table>

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

bgcolor=#/?/?GGfl6

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

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

<HR color="lime" size=20 width=18 align="left">

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

<FONT color="red"> РАДУГА </font>
<TABLE border=0 width=100% >
<TR><TD bgcolor=#FF3030 Ж
<TR><TD bgcolor=FFDOOO >0
<TR><TD bgcolor=#F3FF5F >Ж
<TR><TD bgcolor=#OOFFOO >3
<TR><TD bgcolor=#6FD3F7 >F
<TR><TD bgcolor=f}5F72FDF >C
<TRXTD bgcolor=#B568F4 >Ф
</table>

Можно сделать вывод, что «раскрашивание» Webстраницы — хороший способ при дать ей современный, профессиональный вид. Но в данном случае большое значение имеют не только изобретательность и вкус, но особенно чувство меры. Цветовая проработка Webстраницы является альтернативой использованию многочислен ных рисунков и позволяет обеспечить более быструю загрузку документа. Так уж повелось, что многие мелкие детали (например, маркеры) представляют собой фай лы формата GIF, и часто приходится долго ждать, пока загрузятся все кружочки, квадратики, черточки и другая графическая мелочь. Солидные фирмы могут себе это позволить, так как заинтересованному клиенту не остается другого выхода, как ждать окончания загрузки нужной страницы. Если вы создаете личную страницу, то есть резон сделать ее быстро загружаемой. Иначе ваши потенциальные читатели, не дождавшись прорисовки всех деталей, уйдут «бродить» по другим уголкам Сети. Я думаю, не будет большой ошибкой утверждать, что разработчики HTML серь езно просчитались, не включив в язык элементы, позволяющие строить примитив ные графические объекты. Это практически безграничное ноле деятельности для совершенствования гипертекста. Важность графики, поддерживаемой броузером, явно недооценили, а теперь, видимо, слишком поздно наверстывать упущенное, так как признание завоевали другие подходы.

ПРИМЕЧАНИЕ К сожалению, данный раздел по технологическим соображениям невозможно дополнить цвет ными иллюстрациями, но такие иллюстрации можно найти в примерах в файле Color.htm на прилагаемой дискете.