2. Основные средства htmL.
2.1. Простейшее форматирование текста (Часть 2)
Управление шрифтом
Чтобы изменить
размер шрифта, можно использовать тег <FONT>
с атрибутом
SIZE=. Вообще говоря, WWW-консорциум не особенно рекомендует использовать тег
<FONT> в HTML 4.0. Мы считаем, что злоупотреблять им действительно не нужно,
когда есть возможность использования каскадных таблиц стилей CSS, о чем мы
поговорим в главе 4. Однако иногда для мелких корректив этот тег бывает очень
удобен. Например, если мы поставим перед вступительным текстом тег
<FONT SIZE="+1">
f поcле него —
закрывающий тег </FONT>, то весь текст, оказавшийся между этими тегами,
будет отображен шрифтом на один “уровень” круп-нее обычного.
Возникает вопрос: а
каков размер “обычного” шрифта? В языке HTML для тега <FONT>
были определены
семь основных размеров шрифта, измеряемых не в пунктах, а в некоторых условных
единицах — от 1 до 7. Как правило, обычный шрифт имеет размер “З”, если не
определено иное с помощью тега <BASEFONT> (например, так: <BASEFONT
SIZE="6">) .
В послед- нее время такое определение размеров не рекомендуется, поскольку с
помощью CSS можно определить размеры шрифта в любых привычных единицах.
Необходимо
различать записи <FONT SIZE="+1" и <FONT SIZE="1"> . В пер- вом случае
указывается относительный размер шрифта, а во втором — абсолютный.
Соответственно, для временного уменьшения размера шрифта можно использовать
запись <FONT SIZE="-1"> . Можно использо- вать также
значения "+2", "-2", "+3" и т. д. Кстати, для увеличения или уменьшения шрифта
на одну единицу можно использовать также теги <BIG>
и <SMALL>
(они
используются с закрывающими тегами).
Теперь давайте
выделим еще некоторые элементы нашей страницы. Чтобы отобразить подзаголовки
рассказов курсивом, их можно поместить между тегами <I>
и </I>
:
<Н2><Р АLIGN+"center">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВК>
<I>сказка</I></Р></Н2>
Такой же результат,
как тег <I> , дает тег <ЕМ> . Отличие их в том, что тег
<ЕМ> определяет лишь логически выделенный фрагмент, который броузеры обычно
отображают курсивом, а тег <I>
— это явное
указание на кур сив. Впрочем, это уже несущественные детали.
Мы можем также
выделить фамилию нашего героя во вступительном тексте полужирным шрифтом,
используя тег <В> :
<В>Сергей Сергеев</В> - писатель-авангардист, автор 20
рассказов.
Такой же результат
даст использование тега <STRONG>
. Более гибко
управлять выделением можно с помощью CSS
Для выделения
какой-либо части текста можно использовать подчеркивание, поместив текст между
тегами <U> и </U> . Однако злоупотреблять этим не следует, поскольку подчеркнутый текст в
WWW ассоциируется с гиперссылками и читатель будет весьма разочарован, когда
щелчок мыши по подчеркнутому тексту ни к чему не приведет.
Иногда требуется
также зачеркнуть отдельные слова в тексте (например, при снижении цен на товары
обычно указывают старую цену в зачеркнутом виде). Для этого служит тег
<STRIKE>:
Старая цена: <STRIKE>168 рублей </STRIKE> Новая цена:
<FONT SIZE="+1">102 рубля</FONТ>
Результат
представлен на рис. 2.3. Некоторые броузеры понимают также сокращенное написание
этого тега — <S> . Однако для хорошей
совмести мости пользуйтесь лучше тегом <STRIKE>
(пока возможно,
совместимость
со всеми броузерами
все же лучше поддерживать, тем более что на данном этапе это совсем несложно).
Рис.
2.3. Применение зачеркнутого текста
Однако вернемся к
нашему герою Сергею Сергееву. В таком виде страничка смотрится уже неплохо. Но
вы, наверное, обратили внимание на то, что в Интернете почти не встречаются
странички, написанные черными буквами на и белом фоне. Встретив такую страницу,
пользователь, скорее всего, решит, что это что-то очень скучное. Кроме того,
белый фон слишком ярок, а его контраст с черными буквами слишком велик, что
быстро утомляет глаза. Поэтому давайте попытаемся изменить цвет фона и текста.
Цветовое оформление
Для этого проще
всего установить соответствующие атрибуты тега <BODY>
. Атрибут ТЕХТ=
определяет цвет текста на страничке, а атрибут BGCOLOR= — цвет фона. Названия
цветов можно вводить по названиям, например: "black" (черный), "white" (белый),
"yellow" (желтый), "green" (зеленый), "fuchsia" (сиреневый) и т. д. Существует
довольно много названий цветов, которые можно использовать в HTML, однако можно
получить любой из цветов, введя его шестнадцатеричный номер. Причем это не так
сложно, как может показаться.
Шестнадцатеричный
номер цвета должен состоять из шести цифр. Первые две означают интенсивность
красной составляющей, вторые две — зеленой и последние две — синей. Таким
образом, красный цвет обозначается как FFOOOO, зеленый — OOFFOO и синий —
OOOOFF. Цвет с номером 000000 — чер- ный (нет ни одной составляющей), a FFFFFF —
белый. Если это понятно, то можно поэкспериментировать с интенсивностью каждой
составляющей отдельно. Если FFOOOO — это красный цвет, то 880000 — уже
темно-красный, а 440000 — красно-коричневый; 220000 похож на коричневый, а
110000 — черный с красноватым оттенком. Точно так же OOFFOO — это яркий зеле
ный, ООААОО — приятный лиственно-зеленый, 007700 — темно-зеленый,
003300 — очень
темный зеленый и 001100 — черный с зеленоватым оттенком. Немного
поэкспериментировав с интенсивностью каждой составляющей, можно попробовать
смешивать цвета. Таким образом, можно научиться быстро вводить цвет в цифровом
виде. Конечно, в различных HTML-редакторах можно выбирать цвет из палитры
обычным способом, “на глаз”, но всегда лучше знать точно, что происходит в коде.
Кстати, если кому-то не по душе шестнадцатеричные числа, то с помощью CSS он
сможет определять цвет и с помощью обычных, десятичных чисел.
Перед
шестнадцатеричным номером цвета необходимо поставить знак #. Например, для нашей
странички цвета можно определить так:
<BODY BGCOLOR="#BABAAO" TEXT="#1D1D18">
Это даст при
просмотре одинаковый коричневатый оттенок и цвета, и фона, однако цвет фона
будет более тяготеть к серебряно-белому, а цвет текста — к темно коричневому.
Давайте посмотрим, что у нас получилось.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Домашняя страница Сергея Cepreesa</title>
</head>
<body bgcolor="#babaa0" text="1d1d18">
<h1><DIV aling="center">Домашняя страница Сергея Сергеева
</div></h1>
<br> Сергей Сергеев - писатель-авангардист, автор 20 рассказов.
<br>
В
жизни большой любитель собак и компьютерных игр. <br> <br>
Некоторые его рассказы вы можете прочитать прямо здесь. <br>
<HR WIDTH="75%"> <H2><P ALIGN="center">ИBAH-ЦАРЕВИЧ И
СЕРЫЙ ЗАЯЦ <br>
сказка</p></H2>
<p
align="right">Hy, погоди!.. <BR>(Из мультфильма)</Р>
<p
align="justify"> Жил
да
был
Иван-Царевич, и все у него было: и злато-серебро, и невест
полный дворец, и книжек много умных, и тренажерный зал огромный...
<br>
Долго ли,
коротко ли ... <br>
И они жили
долго и счастливо
и
умерли в один день.</Р>
<HR WIDTH="75%">
<h2><p align="center">MOЛOTOK <br>
рассказ</p></h2>
<p
ALIGN="right">Mы кузнецы, и дух наш молод. <br> (Из песни)</P>
Это
случилось очень давно, уж и не помню в каком году, в каком веке
и в
каком тысячелетии... (Здесь располагается текст рассказа)
</BODY>
</HTML>
Он все более и
более становится похожим на нормальную веб-страницу, которую можно вполне
адекватно воспринять, случайно наткнувшись на нее в WWW. Однако пока что это
только отформатированный текст, в котором отсутствуют самые главные элементы,
являющиеся основой структуры WWW - гиперссылки. О них пойдет речь в следующем
разделе, а пока давайте рассмотрим еще несколько редко Используемых возможностей
форматирования текста в HTML.
Дополнительные варианты оформления
отображают текст,
находящийся между тегами <CITY></CITY> курсивом. Например, если вы
напишете следующее"
А.С.
Пушкин сам говорил,
что
он <CITY>лиру посвятил народу
своему</CITY> по этому есть все основания считать, что судьба
русского народа
была
для него не безразлична.
то большинство
броузеров отобразят это так. как показано на рис 2.5(ниже)
Об этом хорошо
сказал С.С.Сергеев в своей бессмертной повести "Обыкновенный обрыв":
Мечтая об
освобжденном времени и свернутом пространстве, мы иногда плохо представляем
себе, что же будем делать, если вдруг сможем позволить себе распоряжаться ими.
Если мне сегодня вечером скажут, что я могу свернуть пространство вокруг себя
нажатием одной клавиши компьютера, я либо не буду знать, что же мне с этим
делать, либо от радости наделаю чего-нибудь такого, что придется потом очень
долго расхлебывать.
Но еще лучше ни о
чем не мечтать, а спокойно почитать научные статьи и трезво оценить ситуацию.
Рис.
2.5. Применение длинной цитаты
также отобразить и
обычные типографские кавычки (“? ”) вместо машинописных (" "). Запись Книга
« Путеводитель по Атлантиде &raquо; отобразится в броузере так:
Книга “Путеводитель
по Атлантиде”
Теперь давайте
представим себе, что нам надо воспроизвести на веб-страничке фрагмент кода-HTML
и проиллюстрировать его отображение. Причем код HTML мы хотим выделить
моноширинным шрифтом (как это обычно и делается, например, в этой книге). Для
этого можно применить тег <CODE>
, как показано
ниже.
Если вы напишете
следующий код: <br>
<code> <hr WIDTH="80%" SIZE="15">,
</code><br> то это отобразится так:
<HR WIDTH="80%" SIZE="15">
Нa рис. 2.6
показано, как это отобразится в броузере. Помимо тега <CODE>
, обратите
внимание на употребление специальных символов < и > для
отображения угловых скобок,
Вместо тега
<CODE> можно также употребить и тег <ТТ>
. Разница между
ними такая же, как между тегами <ЕМ>
и <I>
. То есть, тег
<CODE> определяет логический фрагмент, который обычно выводится моноширинным!
То есть шрифтом, в
котором все символы имеют одинаковую ширину, на манер пишущей машинки.
Рис.
2.6. Отображение исходного кода программ в броузере
шрифтом, как код, а
тег <ТТ> просто применяет к фрагменту моноширинный шрифт. Разница, прямо скажем,
небольшая.
Для отображения
больших фрагментов кода существует еще один тег — <LISTING> . Весь текст, заключенный между ним и его закрывающим тегом, отображается
не просто моноширинным шрифтом, а еще и с пропуском строки до и после кода, и
обычно более мелким шрифтом. Кроме того, в этом тексте сохраняется исходное
форматирование (как при использовании тега <PRE>
). Однако
использование этого тега уже давно не рекомендовано WWW-консорциумом.
| 
Главная 
