| Предыдущая глава |
↓ Содержание ↓
↑ Свернуть ↑
| Следующая глава |
Во втором случае, мы задаем размер шрифта относительно базового размера. Этот самый базовый размер = 3. Впрочем, можно легко его изменить. Вот так:
<basefont size="5">
Тэг <basefont> прописывается сразу после <body>. Так же легко можно задать базовый вид шрифта и его цвет. Но не все браузеры это понимают.
<basefont size="5" color="#A972E2" fасе="Courier">
Вот небольшая табличка соответствия абсолютных и относительных размеров, при условии, что базовый размер шрифта = 3, как и бывает по умолчанию.
1
-2
2
-1
3
+0
4
+1
5
+2
6
+3
7
+4
Обратите внимание на третью строку, там написано: +0. Можно написать: -0. Значение параметра size="0" будет воспринято так – size="1". Надеюсь, все понятно? Естественно, при относительном размере size="+0" шрифт не изменится.
На практике относительный размер очень удобен. Допустим, писали мы, писали – и вдруг потребовалось увеличить (уменьшить) шрифт. Не просто выделить участок текста шрифтом побольше (поменьше), а именно относительно того размера, который был раньше.
В случае увеличения (уменьшения) на ±1, гораздо легче и быстрей (и правильней!) будет воспользоваться тегами <big> и <small>. Как они работают?
обычный текст <big>текст чуть больше</big> обычный текст
обычный текст текст чуть больше обычный текст
обычный текст <small>текст чуть меньше</small> обычный текст
обычный текст текст чуть меньше обычный текст
Если же вы хотите поменять в выделенном фрагменте не только размер, но и цвет с начертанием, то смело пользуйтесь тэгом <font>.
Поговорим о цвете. Задается он шестнадцатеричным значением в RGB-системе (Red Green Blue). Причем, сначала ставится знак "решетка".
color="#00AAFF"
Каждая пара цифр – это интенсивность соответствующего цвета (красного, зеленого и синего). Также допустим укороченный вариант записи:
color="#1В9"
Браузер поймет это так: color="#11BB99". Можно некоторые цвета (они входят в таблицу базовых цветов) записывать словами. Например: red, yellow, green и пр. Всего базовых цветов шестнадцать. А также множество их производных, которые тоже имеют мнемоническое обозначение. В основном их названия образуются путем присоединения слов dark или light к названию основного цвета. Однако не все основные цвета имеют те или иные производные. Но лучше всего цвет задавать циферками. Так как разные браузеры немножко по разному понимают, что такое "red" и что такое "green", и немножко по разному отображают.
Таблица базовых цветов
Цвет
Мнемообозначение
Шестнадцатеричный
код
Цвет
Мнемообозначение
Шестнадцатеричный
код
Black
#000000
Navy
#00007F
Gray
#7F7F7F
Blue
#0000FF
Silver
#C0C0C0
Aqua
#00FFFF
White
#FFFFFF
Green
#007F00
Red
#FF0000
Lime
#00FF00
Fuchsia
#FF00FF
Teal
#007F7F
Maroon
#7F0000
Yellow
#FFFF00
Purple
#7F007F
Olive
#7F7F00
Дополнительные цвета
Цвет
Мнемообозначение
Шестнадцатеричный
код
Цвет
Мнемообозначение
Шестнадцатеричный
код
DarkGreen
#006400
LightGreen
#90EE90
DarkRed
#8B0000
LightYellow
#FFFFE0
DarkBlue
#00008B
LightBlue
#ADD8E6
DarkViolet
#9400D3
Violet
#EE82EE
DarkTurquoise
#00CED1
Turquoise
#40E0D0
DarkOrange
#FF8C00
Orange
#FFA500
Gold
#FFD700
Beige
#F5F5DC
Brown
#A52A2A
Braun
#B0A000
Crimson
#DC143C
SkyBlue
#87CEEB
Cream
#C0EA00
BlueGray
#B0E0E0
Различные оттенки серого
Цвет
Мнемообозначение
Шестнадцатеричный
код
Цвет
Мнемообозначение
Шестнадцатеричный
код
#333333
#444444
#555555
#666666
#777777
#888888
#999999
#AAAAAA
#BBBBBB
#CCCCCC
#DDDDDD
#EEEEEE
Возможен еще один способ задания цвета, в процентном соотношении его составляющих. Вот так:
color="20%50%30%"
Красный – 20%, зеленый – 50%, синий – 30%. Этим способом пользуются тайные извращенцы и мазохисты. Дико неудобно, непонятно, непрактично, плюс никогда не представляешь, что же получится.
Существует такое понятие, как безопасные цвета, то есть цвета, отображаемые даже в 256-цветном режиме работы видеокарты. Их 216.
Вот ссылки на полные таблицы безопасных цветов (таблицы абсолютно одинаковые, а разные ссылки даны на всякий случай, вдруг ресурс будет в дауне или вообще прекратит существование):
http://foodcomp.narod.ru/avia.files/HTML.htm
http://scriptic.narod.ru/html/color2.htm
http://choozone.fromru.com/graph/for_web/shtuks/shtuka_2.htm
А вот ссылка на zip-архив (85 Kb), это таблица допустимых цветов фона и шрифта с наложением друг на друга. Очень наглядно.
http://igal-igal.narod.ru/Colors/Colors.zip
Пример изменения цвета шрифта:
<font color="#066298"> наш текст </font>
наш текст
Пример изменения фона документа будет дан в разделе таблицы.
Совет: не разукрашивайте свою страничку подобно радуге. Нескольких цветов или оттенков одного цвета вполне достаточно. Цвета должны гармонировать, либо контрастировать друг с другом. Вариантов множество, но очень многие дают неудобоваримые результаты.
[к оглавлению]
<div>, выравнивание текста
Закончим разговор о цветах и шрифтах. Займемся выравниваем текста. Откройте книжку в третий раз. Какое там выравнивание? Правильно, по всей ширине страницы. А если нет, то либо издатель учудил (типа нарочно), либо наборщик в типографии вусмерть напился.
Выравнивать будем с помощью тэга <div>, который отделяет один блок текста от другого. Сам по себе он ничего не делает, если, конечно, не использовать стили (CSS). Параметр у него один – align. Тэг <hr> помните? Все то же самое.
Align может принимать значения left, right, center и justify. Стоп, что еще за justify? Вот то самое выравнивание по ширине и есть. Старые версии браузеров не понимают значения justify. Но кто ими пользуется, старыми версиями? В крайнем случае, пользователь увидит текст, выровненный по левому краю.
Текст, обрамленный тэгом <div> ... </div>, браузер выводит с новой строки. Элемент, следующий за этим блоком, также выводится с новой строки.
Вот еще что, эта конструкция – <center> ... </center> работает подобно <div align="center"> ... </div>.
Кстати, с помощью тэга абзаца <p> можно выравнивать текст аналогичным образом. О недостатках этого тэга мы уже говорили. По умолчанию, абзац, как и текстовый блок, выравнивается по левому краю.
Как же выровнять текст на практике? Заключаем его в тэг <div> ... </div>. Целиком. Вообще весь. Все! А если делать это с помощью тэга <p>, то придется задавать выравнивание для каждого абзаца, потому что действие тэга <p> может быть прервано некоторыми другими блочными тэгами.
<Div>, <p>, <br>, <hr> являются блочными элементами. Рассмотрим и другие текстовые блоки.
[к оглавлению]
<Hn>, заголовки
Делятся на шесть уровней (<H1> ... <H6>).
<H1> – заголовок первого уровня (самый большой, соответствует размеру шрифта равного шести).
<H6> – заголовок шестого уровня (самый маленький, соответствует размеру шрифта равного единице).
Браузер выводит заголовки жирным шрифтом, оставляя сверху и снизу заголовка некоторый отступ. Единственный параметр тэга <Hn> – align (выравнивание). Может принимать значения: left, right, center и justify. По умолчанию, align="left".
Не совсем понимаю, для чего заголовку нужно выравнивание по всей ширине окна (justify). Если текст мал (а заголовки большими и не бывают), он прижмется к левому краю, как и при align="left". И только если заголовок будет настолько длинен, что перехлестнет на вторую строку, вы увидите это выравнивание по ширине.
Никогда не используйте тэг <Hn> просто для выделения чего-либо на странице. Его назначение – структурирование документа, выделение смысловых уровней и подуровней. Кстати, этот тэг любят поисковые машины. <H1> О-о!!! Пример:
<H4>Заголовок четвертого уровня</H4>
Заголовок четвертого уровня
<H5 align="center">Заголовок пятого уровня</H5>
Заголовок пятого уровня
[к оглавлению]
<blockquote>, цитаты
Этим тэгом оформляют большие цитаты. Работает так же как тэг абзаца <p>, плюс добавляет небольшой отступ слева и справа. Сверху и снизу тоже имеется некоторый отступ. Подобно абзацу всегда выводится с новой строки. Элемент, следующий за <blockquote>, выводится с новой строки. Использовать не по назначению не возбраняется. С его помощью элементарно делаются поля в документе. Пример:
<blockquote> Вокруг лес – березки, сосенки, заросли крапивы возле рассыпавшейся поленицы. Дятел с красным встопорщенным хохолком долбит трухлявое дерево: ищет короедов. Частый, дробный перестук. Листья трепещут на ветру; колышутся, пригибаясь к земле, травинки. Тени ложатся на хвойный ковер ажурными узорами. Солнышко в небе пухлое, желтое. Летнее. Этакий ароматный блинчик на сковородке. Шкворчит, пышет жаром, кокетливо прячется в мягкий пух облаков. Воздух свежий, душистый: пахнет смолой и нагретой почвой. Ку-ку – раздается в глубине леса. Ку-ку. </blockquote>
Что получится: Вокруг лес – березки, сосенки, заросли крапивы возле рассыпавшейся поленицы. Дятел с красным встопорщенным хохолком долбит трухлявое дерево: ищет короедов. Частый, дробный перестук. Листья трепещут на ветру; колышутся, пригибаясь к земле, травинки. Тени ложатся на хвойный ковер ажурными узорами. Солнышко в небе пухлое, желтое. Летнее. Этакий ароматный блинчик на сковородке. Шкворчит, пышет жаром, кокетливо прячется в мягкий пух облаков. Воздух свежий, душистый: пахнет смолой и нагретой почвой. Ку-ку – раздается в глубине леса. Ку-ку.
[к оглавлению]
<pre>, предварительно отформатированный текст
Тэг преформатирования. Берем какой-нибудь заранее отформатированный текст (со всякими там пробелами, табуляцией и переводами строк) и вставляем его в тег <pre>. Что видим? Браузер выводит текст таким, какой он есть, но:
1) моноширинным шрифтом. Что, впрочем, легко исправить, написав после <pre>: <font fасе="...">. Только, пожалуйста, помните о том, что на Самиздате не нужно брать название шрифта в кавычки. Если возьмете, параметр face будет выкинут. Также вы не сможете задать шрифт, название которого состоит из более чем одного слова. Так как по правилам HTML кавычки здесь обязательны. Впрочем, один шрифт вы сможете задать наверняка. Это Times New Roman, он используется по умолчанию (если дефолтные настройки не были изменены пользователем). Естественно браузер посчитает параметр face со значением Times New Roman (без кавычек) за ошибку. Но – в таком случае будет показан шрифт по умолчанию. Тот же Times. Вот такой извращенный способ.
2) текст будет жестко фиксирован по ширине. И если уменьшить окно браузера, то появится полоса прокрутки, потому что текст не уместится.
Вряд ли стоит оформлять что-либо тэгом <pre>, кроме стихов. Пример:
<pre>
А космос смеется
оранжевым солнцем
нам прямо в лицо.
</pre>
Текст, будет выведен с новой строки. Элемент, следующий за <pre>, выводится с новой строки. Сверху и снизу, как и в случае абзаца, имеется некоторый отступ.
Еще раз повторю: сколько бы не было пробелов в тексте, браузер отобразит лишь один. Сколько бы не было пустых строк, браузер их вообще проигнорирует, заменив одним пробелом. А заметит только в том случае, когда они включены в тэг <pre>.
[к оглавлению]
 , неразрывный пробел и другие спецсимволы
Что же делать, если позарез необходимо включить в текст несколько пробелов? Используйте неразрывный пробел – ( ).
Вот такой пример
Вот такой пример
Точка с запятой (;) ставится после знака неразрывного пробела с целью отделения его от следующего слова. Вот еще несколько символов, которые могут нам пригодится (на самом деле их о-очень много):
Название
Знак
Мнемоническое обозначение
Код
Амперсант
&
&
&
Знак "меньше"
<
<
<
Знак "больше"
>
>
>
Параграф
§
§
§
Знак копирайта
©
©
©
Знак градуса
°
°
°
Левая парная кавычка
"
«
«
Правая парная кавычка
"
»
»
Среднее тире
–
–
Длинное тире
—
—
Плюс-минус
±
±
±
Номер
№
№
Внимание! Все буквы, входящие в мнемообозначение спецсимвола должны быть маленькими. Большие буквы недопустимы.
Не для всех специальных знаков есть мнемоническое обозначение. И не во всех браузерах конкретное мнемообозначение будет работать. В таком случае, можно написать цифровой код – &#... Однако предпочтительнее пользоваться мнемоникой, в связи с различными языковыми кодировками, потому что цифровой код просто-напросто определяет место конкретного символа в кодовой таблице.
А сейчас прямо противоположный совет – на СИ необходимо использовать цифровые коды. Почему? Если вы редактируете свой текст с помощью кнопки "Textedit", то система сервера выдаст в окне редактирования не сами мнемообозначения, а те символы, которые они обозначают, и при сохранении заменит их на совершенно непонятные знаки. Коды сохраняются без изменений. Но я бы вообще не советовал пользоваться кнопкой "Textedit", т.к. СИ ненароком может еще что-нибудь поменять в тексте. Лучше перезалить отредактированное произведение поверх старого, тогда вы будете точно уверены, что текст в сети до единой буковки соответствует оригинальному тексту.
| Предыдущая глава |
↓ Содержание ↓
↑ Свернуть ↑
| Следующая глава |
