Главная | Обратная связь | Поможем написать вашу работу!

Теги, применяемые для форматирования шрифта.

ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА

На большинстве сайтов информация представлена в форме текста. Даже на сайтах, посвященных музыке, фото или живописи, текст присутствует в виде всякого рода пояснений. А текст мы привыкли видеть оформленным так, чтобы его было удобно читать: с полями, абзацами, заголовками и пр., т.е. отформатированным. Но, дело в том, что если мы поместим в тело HTML-документа прекрасно оформленный текст (например, скопируем готовый документ из Word-a), и посмотрим это творение в окне браузера, то увидим просто набор предложений, довольно неудобных для чтения. Объяснить браузеру, как он должен показывать людям наш текст, нужно при помощи тегов.
Начнем с того, о чем я уже упоминал. Предположим, что у нас есть прекрасно оформленный в каком-либо текстовом редакторе документ, и мы хотим в таком виде его показать. Для этого существует тег-контейнер <PRE>...</PRE>. Весь текст, помещенный в этот тег, выводится браузером "как есть", со всеми элементами форматирования. Казалось бы, что еще нужно? Но не все так просто. Во-первых, сохраняются только признаки форматирования: пробелы, перенос строки, табуляция и т.д. А если у нас в документе красивые заголовки, выделенные особо значимые куски текста и пр.? И, во-вторых, браузер не сможет оптимизировать преформатированный текст под разрешение экрана нашего читателя, т.к. будет поставлен в жесткие условия тега <PRE>...</PRE>, а это доставит неудобства этому самому читателю. А мы этого не хотим, потому что и писали то все это именно для этого конкретного человека. Так, что одним тегом не обойтись, нужно идти дальше.
Из всех элементов, применяемых для форматирования текста, браузеры безо всяких подсказок понимают только один: пробел. Причем, только один пробел. Поэтому, если Вы хотите написать что-то с красной строки, Вам придется употребить специальный, так называемый, символьный объект или, по другому, эскейп-последовательность: знак неразрывного пробела  . Сколько таких последовательностей поставите, столько пробелов сделает браузер. Еще этот знак удобно употреблять в случаях, когда нужно обозначить, что в этом месте рвать строку нежелательно. Браузер ведь сам определяет, в зависимости от разрешения экрана и шрифтов, применяемых хозяином, где заканчивается одна строка и начинается другая. И если, например, фраза "Мой вес 73 кг" будет выглядеть таким образом: "Мой вес 73
кг" - это будет как-то не очень... Поэтому в окне редактора ее стоит написать так "Мой вес 73 кг". Эскейп-последовытельности существуют для всех символов из второй половины ASCII-таблицы, и при желании Вы их найдете в спецификации HTML-4, которую я Вам советовал скачать. Но все нам употреблять не придется, а вот некоторые, например, заменяющие угловые скобки < и > (< и >), иногда приходится.
Тег-контейнер ... - тег параграфа. Закрывающий элемент не обязателен, но если он отсутствует, браузер не оставляет после абзаца пустую строку. Браузеры выделяют текст, помещенный в этот тег, пустыми строчками. Имеет один параметр: ALIGN=, который может принимать значения:

LEFT - выравнивание по левому краю,
CENTER - выравнивание по центру,
RIGHT - выравнивание по правому краю и
JUSTIFY - выравнивание по ширине

По умолчанию принимается выравнивание по левому краю. Пример использования этого тега - следующий абзац. Он написан внутри тега ...:

Тег принудительного перевода строки  . Говорит браузеру, в каком месте необходимо прервать строку и начать новую. Закрывающей части не имеет. Используется, как и тег ..., для разделения абзацев, но в отличие от него не оставляет пустой строки. Использование этого тега в HTML аналогично использованию клавиши ENTER в Word-e. Имеет один параметр CLEAR, прекращающий обтекание рисунка. О его использовании - в статье о применении графики.

Тег, запрещающий перевод строки - .... Весь текст, помещенный внутри этого тега, будет выведен браузером в одну строчку. Что Вы и наблюдаете на примере этой строки. Можно все же разрешить браузеру перевести строку в определенном месте текста внутри этого тега, если поставить в соответствующем месте тег . После этого тега, как видите, браузер начал новую строчку.
Теги заголовков <H1> - <H6>. Теги контейнеры. Текст, помещенный в них, выводится как заголовок. Имеет параметр выравнивания по горизонтали, аналогичный с тегом . Закрывающая часть обязательна. Примеры:

Заголовок первого уровня.

Заголовок второго уровня с выравниванием по центру.

Заголовок шестого уровня с выравниванием по правому краю.

Тег горизонтальной линии <HR>. Рисует горизонтальную линию. Имеет параметры

ALIGN - выравнивания со значениями LEFT, RIGHT или CENTER.
WIDTH - устанавливает длину линии в пикселях или процентах от окна браузера.
SIZE - устанавливает ширину линии в пикселях.
NOSHADE - отменяет рельефность линии.
COLOR - указывает цвет линии в формате RGB или стандартном имени.

Ну, например:

эта линия нарисована тегом с такими параметрами: <HR ALIGN=RIGHT WIDTH=25% SIZE=20 COLOR=F74C80>.
Тегов, которые употребляются для форматирования текста, довольно много. Часть из них рекомендовано употреблять в таблицах стилей, другая часть отмечены в спецификации HTML-4.0, как устаревшие и их не рекомендуют применять, т.к. браузеры новых версий могут прекратить их поддержку. Рассмотренных нами достаточно, чтобы оформить документ довольно симпатично. В следующей статье я расскажу о применении тегов форматирования шрифтов, а пока у Вас есть время потренироваться в употреблении того, о чем шла речь в этой статье.

ТЕГИ, ПРИМЕНЯЕМЫЕ ДЛЯ ФОРМАТИРОВАНИЯ ШРИФТА.

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

... - выделяет текст, помещенный внутрь, жирным шрифтом.
... - выделяет текст, помещенный внутрь, наклонным шрифтом.
... - выделяет текст, помещенный внутрь, подчеркиванием.
<BIG>...</BIG> - более крупный шрифт.
... - более мелкий шрифт.
Небольшой комментарий - Для форматирования шрифтов можно применять теги физического форматирования и теги логического форматирования. Их отличие в том, что теги физического форматирования дают браузеру конкретное указание, каким шрифтом печатать текст, а теги логического форматирования указывают ему лишь на то, что текст должен отличаться от обычного в ту или иную сторону. Например, вместо тегов <BIG>...</BIG> и ... можно употребить тег
, который имеет параметры
FACE - задает тип шрифта,
SIZE - задает размер шрифта,
COLOR - задает цвет шрифта.
Например, эта фраза написана внутри тега: .
Спецификация HTML-4.0 рекомендует употреблять теги логического форматирования, как более лояльные к пользователю. В некоторых случаях употребление тегов физического форматирования может не привести к желаемому результату. Например, в случае с вышеприведенной фразой, браузер покажет ее шрифтом, установленным по умолчанию, если на машине пользователя нет шрифта Comic Sans MS. В редакторе SNK Visual HTML Workshop теги логического форматирования Вы найдете нажав кнопку "Стили", а теги физического форматирования - нажав кнопку "Шрифт".
... - сильно выделенный текст.

· <РRE>...</PRE> - уже знакомый нам тег.

· Все, помещенное в него, сохраняет форматирование на уровне

· текста, но выводится моноширинным текстом (Что это такое,

· Вы видите на этом примере).

Этого, наверно, достаточно. Как видите, особого разнообразия не наблюдается (мой браузер, например, показывает текст, помещенный в теги ..., <РRE>...</PRE>, <TT>...</TT> совершенно одинаково), но вполне достаточно, чтобы выполнить страничку в соответствии с Вашим вкусом.

ТЕГИ СПИСКОВ

Для предоставления информации на страницах сайтов в виде списков в языке HTML предусмотрен специальный набор тегов. Они дают возможность составлять:

a. Нумерованые или упорядоченные списки.

b. Компактные или маркированные списки.

c. Списки определений.

d. Списки меню.

a. Нумерованные списки создаются при помощи тега-контейнера <OL>...</OL>. Пример применения этого тега у Вас перед глазами.
Тег имеет параметры:

TYPE - задает тип маркера, которым отмечается список. Этот параметр может принимать значения:

A - задает маркеры в виде заглавных латинских букв.
a - задает маркеры в виде строчных латинских букв.
I - задает маркеры в виде больших римских цифр.
i - задает маркеры в виде маленьких римских цифр.
1 - задает маркеры в виде арабских цифр.

По умолчанию принимается значение 1, т. е. нумерация ведется арабскими цифрами.

COMPACT - в настоящее время не рекомендуется к употреблению.
START - позволяет начать нумерацию списка не с единицы. Принимает значение порядкового номера элемента, с которого Вы хотите начать нумерацию.

Синтаксис записи: <OL type=1 start=10>...</OL>
Каждый элемент списка внутри этого тега помещается в тег-контейнер <LI>...</LI>. Закрывающий элемент тега LI может быть опущен.
В качестве примера составим еще один нумерованный список. HTML-код его выглядит так: <OL type=I start=6>Летние месяцы года: <LI>Июнь <LI>Июль <LI>Август </OL>
На странице сайта это будет выглядеть так:

Летние месяцы года:

VI. Июнь

VII. Июль

VIII. Август

b. Маркированные списки создаются при помощи тега-контейнера <UL>...</UL>. Тег имеет параметры:

TYPE - задает тип маркера, которым отмечается список. Этот параметр может принимать значения:

= disc - маркеры отображаются закрашенными кружками.
= circle - маркеры отображаются не закрашенными кружками.
= square - маркеры отображаются закрашенными квадратами.

Параметр type можно употреблять как для всего списка, так и для каждого элемента в отдельности.

Парметр COMPACT - в настоящее время не рекомендуется к употреблению.

Каждый элемент списка внутри этого тега помещается в тег-контейнер <LI>...</LI>. Закрывающий элемент тега LI может быть опущен.
Кроме того есть недокументированная возможность выводить в качестве маркеров выводить всяческие симпатичные штучки.

Для этого необходимо:
Найти симпатичную штучку.
Сделать ее миниатюрную копию желательно (но не обязательно) в формате gif.
Вставить вместо тега LI.
Поставить после каждого элемента списка тег BR.

Я надеюсь, понятно рассказал. Для большей ясности приведу кусок кода, с помощью которого сделан этот список:
<UL>Для этого необходимо: 
<IMG SRC="img/favicon.gif" ALT="favicon.gif[145 байт]" WIDTH="20" HEIGHT="20" BORDER="0"> Найти симпатичную штучку. 
<IMG SRC="img/favicon.gif" ALT="favicon.gif[145 байт]" WIDTH="20" HEIGHT="20" BORDER="0"> Сделать ее миниатюрную копию желательно (но не обязательно) в формате gif. 
<IMG SRC="img/favicon.gif" ALT="favicon.gif[145 байт]" WIDTH="20" HEIGHT="20" BORDER="0"> Вставить вместо тега LI. 
<IMG SRC="img/favicon.gif" ALT="favicon.gif[145 байт]" WIDTH="20" HEIGHT="20" BORDER="0"> Поставить после каждого элемента списка тег BR. 
</UL>
Замечу попутно, что язак HTML имеет еще множество неизученных возможностей и комбинаций кодов. Так что экспериментируйте, фантазируйте, дерзайте, одним словом - и у Вас могут получиться уникальные вещи!
c. Списки определений создаются при помощи тега-контейнера <DL>...</DL>. Внутри контейнера определяемый термин помечается тегом <DT>, а абзац с его определением - тегом <DD>. Для тегов DT и DD закрывающие элементы не обязательны. Пример такого списка:

12 Следующая ⇒

Воспользуйтесь поиском по сайту: