Интернет – легко и просто!
Шрифт:
Обязательные теги
Все HTML-документы имеют одну и ту же структуру, основу которой составляют обязательные теги. Откройте Блокнот и введите следующий текст:
<HTML>
<TITLE> Пример простейшего HTML-документа </TITLE>
<B0DY> Добро пожаловать на мою первую веб-страницу </B0DY>
</HTML>
Теперь сохраните введенный текст как файл с расширением НТМ и откройте его с помощью браузера. Вот вы уже и научились создавать простейшую веб-страницу!
Тег <HTML> является признаком того, что данный текстовый файл является HTML-документом. Он сигнализирует браузеру о том, что далее ему необходимо будет обрабатывать другие теги. Любая веб-страница начинается с тега <HTML>, им же и заканчивается.
Ter <TITLE> применяется для задания заголовка документа. Текст, заключенный между данными тегами, будет выводиться в строке заголовка браузера.
Информация, помещенная между тегами <BODY> и </BODY>, является «телом» документа. Она выводится непосредственно в рабочей области браузера.
В общем случае у веб-документа есть также и «голова», ограничивающаяся тегами <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>.
Например, синий шрифт можно получить следующим образом: