Интернет – легко и просто!
Шрифт:
В общем случае у веб-документа есть также и «голова», ограничивающаяся тегами <HEAD> и </HEAD>. Информация, располагающаяся в этом разделе документа, является служебной и сообщает браузеру дополнительные данные о документе, стиль страницы, взаимосвязь с другими элементами и т. д.
Далее будем работать исключительно с «телом» документа.
Форматирование текста
Для чего нужно форматирование? Попробуйте скопировать в «тело» документа произвольный текст и посмотрите на результат. Понравилось? Вся информация идет сплошным текстом: без заголовков, переносов, делений на абзацы и т. д. Чтобы сделать документ удобочитаемым и привести содержимое в порядок,
Заголовки и подзаголовки. Сначала необходимо определить заголовки. Язык HTML позволяет оперировать шестью разнообразными типами. Первый заголовок – самый главный, самый большой и жирный, а каждый последующий – поменьше и похилее.
Первый заголовок обозначается тегом <Н1>, второй – <Н2> и т. д. Пример заголовка третьего уровня:
<НЗ>Текст заголовка</НЗ>
Выравнивание абзацев. Операции с отдельными абзацами текста производятся с помощью тега <Р>:
<Р>текст абзаца</Р>
Абзацы можно выравнивать по центру страницы:
<Р ALIGN="CENTER">TЕKCT абзаца</Р>
а также по левому:
<Р ALIGN="LEFT">TЕKCT абзаца</Р>
по правому:
<Р ALIGN="RIGHT">TЕKCT абзаца</Р>
или по обоим краям:
<Р ALIGN="JUSTIFY">TЕKCT абзаца</Р>
Размер и стиль шрифта. Размер шрифта можно задавать с помощью тега <FONT>, изменяя его параметр SIZE. Чем больше значение этого параметра, тем больше размер символов текста:
<F0NT SIZE="+6">большой текст</FONT>
<F0NT SIZE="-2">маленький текст</FONT>
Стиль шрифта устанавливается с помощью следующих тегов:
<В>полужирный текст</В>
<I>курсивный текст</I>
<U>подчеркнутый текст</U>
Данные теги можно применять и в совокупности:
<i><u>курсивный и подчеркнутый текст</u></i>
Списки. Списки подразделяются на нумерованные и маркированные. Для создания нумерованного списка используются следующие теги:
<0L>
<LI>Первый элемент
<LI>Второй элемент
</0L>
Для организации маркированного списка применяется такая конструкция:
<UL>
<LI>Первый элемент
<LI>Второй элемент
</UL>
Списки можно вкладывать друг в друга для организации более сложных, вложенных списков:
<0L>
<LI>Первый элемент
<UL>
<LI>Первый элемент второго уровня
<LI>Второй элемент второго уровня
</UL>
<LI>Второй элемент
</0L>
Принудительный перенос. Для продолжения текста с новой строки существует тег <BR>:
…какой-то текст. <ВР>Этот текст уже с новой строки…
Теги <PRE></PRE> позволяют выводить предварительно отформатированный текст, с точностью до пробелов и переносов.
Попробуем объединить все, что мы узнали о форматировании текста.
<HTML>
<TITLE>
Примеры форматирования текста
</TITLE>
<B0DY>
<Н1>Заголовок 1</Н1>
<НЗ>Заголовок 3</Н3>
<Н5>Заголовок 5</Н5>
<Р ALIGN="CENTER><B>
Полужирный текст, выровненный по центру</В></Р>
<Р ALIGN="LEFT"><I>
Курсивный
текст, выровненный по левому краю</I></Р><Р ALIGN="RIGHT" XU>
Подчеркнутый текст, выровненный по правому краю</u></Р>
<F0NT SIZE="+2">пример вложенного списка</FONT>
<0L>
<И>Элемент списка первого уровня
<UL>
<LI><F0NT SIZE="-1 «>первый элемент списка второго уровня; </F0NT>
<LI><F0NT SIZE="-1 «>второй элемент списка второго уровня. </F0NT>
</UL>
<LI>Элемент списка первого уровня
</0L>
</B0DY>
</HTML>
Теперь посмотрим на результат в браузере (рис. 6.1).
Рис. 6.1. Форматирование текста
Цвета
Помимо манипуляций с текстом, HTML позволяет изменять цвета элементов вебстраницы. Цвета в HTML обозначаются в шестнадцатеричном виде.
Для справки: если в десятичной системе каждая цифра числа находится в пределах от 0 до 9, то в шестнадцатеричной – от 0 до F (после 9 идет А, затем В, С, D, Е и F), то есть числу 16 соответствует F, a 17—10.
Так, белому цвету в HTML соответствует код FFFFFF, черному – 000000, а между ними находится более 16 млн других цветов.
Цвет фона устанавливается с помощью параметра BGCOLOR в обязательном теге <BODY>. По умолчанию фон белый.
Чтобы установить, к примеру, оранжевый, необходимо ввести следующее:
<B0DY BGCOLOR="#FF9900">
Для изменения цвета шрифта во всем документе существует параметр TEXT все в том же теге <BODY>.
Например, синий шрифт можно получить следующим образом:
<B0DY TEXT="#0000FF">
Можно применять и оба параметра одновременно:
<B0DY BGCOLOR="#FF9900» TEXT="#0000FF">
Если же цвет шрифта устанавливать во всем документе нет необходимости, а нужно, к примеру, выделить только несколько слов, то следует воспользоваться следующей конструкцией:
<F0NT C0L0R="#3399FF">Текст</F0NT>
Ниже приведен список основных цветов. Более полный перечень можно найти в Интернете (или же получить нужный цвет «на ощупь").
– Черный – 000000.
– Белый – FFFFFF.
– Синий – 0000FF.
– Зеленый – 00FF00.
– Желтый – FFFF00.
– Красный – FF0000.
– Оранжевый – FF9900 и FFA500.
– Голубой – 00CCFF.
– Серый – 999999.
– Коричневый – 996633.
Изображения
Чтобы вставить в документ изображение, необходимо воспользоваться тегом <IMG>. Данный тег имеет множество параметров, главным из которых является SRC, задающий имя файла с изображением. Если картинка находится в той же папке, что и HTML-файл, то достаточно просто указать ее название:
<IMG SRC="picture.j pg">
Если изображение расположено во вложенной папке, то ссылка на него будет примерно такой:
<IMG SRC="pics/picture.jpg">
Аналогично можно указывать расположение изображения в Интернете:
<IMG SRC="http://www.somewhere.ru/pics/picture.jpg">
Немаловажными являются параметры WIDTH и HEIGHT – соответственно, ширина и высота изображения в пикселах. Если эти параметры не заданы, то будут использоваться реальные размеры изображения.