HTML - это просто

Глава 3. Форматирование текста

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

<html> <head> <title>Главная страница</title> </head> <body text="#9900cc"> Привет! Я решил создать свою страничку в Интернете, пока я совсем не знаю, как это делается, но скоро научусь. Тогда я смогу сообщить о себе всему миру, у меня появятся новые друзья и новое интересное занятие. Здесь все желающие смогут познакомится со мной, почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатления в гостевой книге. Я только-только начал этим заниматься, но уже есть кое-какие успехи и достижения, так что совсем скоро в сети появится новая домашняя страничка, и это будет моя страничка. </body> </html> </body> </html>

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

Разберемся с выравниванием текста. Для этого в параграфе предусмотрен атрибут align, который может принимать пять значений: default - выравнивание по умолчанию (такое значение не пишется, параметр align просто опускается), left - выравнивание по левому краю (является параметром по умолчанию), right - выравнивание по правому краю, center - выравнивание по центру, justify - выравнивание по ширине (не поддерживается старыми версиями браузеров).

<html> <head> <title>Главная страница</title> </head> <body text="#9900cc"> Привет! Я решил создать свою страничку в Интернете, пока я совсем не знаю, как это делается, но скоро научусь. Тогда я смогу сообщить о себе всему миру, у меня появятся новые друзья и новое интересное занятие. Здесь все желающие смогут познакомится со мной, почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатления в гостевой книге. Я только-только начал этим заниматься, но уже есть кое-какие успехи и достижения, так что совсем скоро в сети появится новая домашняя страничка, и это будет моя страничка. </body> </html> </body> </html>

Теперь приветствие вынесено в центр окна, а последний параграф красиво растянут по всей ширине окна.

Выделить приветствие можно и с помощью специального контейнерного тега заголовка <h>. Текст заключенный между этими тегами будет выделен жирным шрифтом и будет написан шрифтом размера в зависимости от цифры в открывающем теге. Пример:

<h1> Привет! </h1>

<h2> Привет! </h2>

<h3> Привет! </h3>

<h4> Привет! </h4>

<h5> Привет! </h5>

<h6> Привет! </h6>

Видите, чем меньше цифра в теге заголовка, тем крупнее шрифт. Кроме того, текст, следующий за заголовком, переносится на следующую строку. Но, как видно, заголовок выравнивается по левому краю. Как его разместить посередине? Для этого воспользуемся тегом <center>...<center>. Текст помещенный в этот тег, выводится посередине страницы. Оформим на нашей странице приветствие в виде заголовка 3-его размера, а заодно изменим цвет фона и шрифта документа:

<html> <head> <title>Главная страница</title> </head> <body text="#000080" bgcolor="#ccffff"> <center><h3>Привет!</h3></center> Я решил создать свою страничку в Интернете, пока я совсем не знаю, как это делается, но скоро научусь. Тогда я смогу сообщить о себе всему миру, у меня появятся новые друзья и новое интересное занятие. Здесь все желающие смогут познакомится со мной, почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатления в гостевой книге. Я только-только начал этим заниматься, но уже есть кое-какие успехи и достижения, так что совсем скоро в сети появится новая домашняя страничка, и это будет моя страничка. Я уже умею менять цвет у шрифта и фона, умею выравнивать текст, а сейчас учусь менять размер шрифта. </body> </html>

Вывести заголовок посередине можно и другим способом: у тега заголовка есть параметр align, который работает так же, как и тега параграфа.

Тег заголовка, как следует из названия, предназначен для выделения небольшой части текста. А если нужно выделить большой участок или, наоборот, одно слово или даже букву? Да еще и чтобы переноса не было? Пришло время вернуться к тегу шрифта  и вспомнить, что кроме параметра цвета у него существует атрибут размера size. Он нам и поможет.

Задать размер шрифта можно двумя способами: относительно и абсолютно. В первом случае размер будет отличаться от размера, принятого во всем документе, во втором - установлен вне зависимости от него. Сначала рассмотрим варианты, а потом я поясню разницу:

текст

текст

текст

текст

текст

текст

текст

Сейчас мы рассмотрели относительное задание размеров. А вот так производится абсолютное:

текст размера 7

текст размера 6

текст размера 5

текст размера 4

текст размера 3

текст размера 2

текст размера 1

В html принято 7 свободных разрядов размера шрифта. По умолчанию выставляется 3-ий. При относительном задании размеров, например, size="+2" размер шрифта будет 5-ым, то есть исчисляется от "умолчального". Потому при изменении размера шрифта всей страницы, текст, размер которого задан относительно, будет менять свои размеры вместе с размером шрифта по умолчанию. Текст же с абсолютным размером менять своего размера не будет никогда. Кстати, в тегах заголовка указывается не размер, а порядок, размер шрифта заголовка определенного порядка зависит от размера шрифта по умолчанию. Так вот, моя рекомендация - использовать относительное задание размеров шрифта. Потому что потом, изменив размер шрифта всей страницы, поменяется размер шрифта, заданного относительно. И не используйте напрасно шрифты очень крупных размеров - это производит неблагоприятное впечатление. Посмотрите, как я "изуродовал" эту страницу гигантскими буквами, путь даже и в учебных целях.

Давайте теперь поменяем размер шрифта на нашей страничке:

<html> <head> <title>Главная страница</title> </head> <body text="#000080" bgcolor="#ccffff"> <center><h3>Привет!</h3></center> Я решился создать свою страничку в Интернете, пока я совсем не знаю, как это делается, но скоро научусь. Тогда я смогу сообщить о себе всему миру, у меня появятся новые друзья и новое интересное занятие. Здесь все желающие смогут познакомится со мной, почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатления в гостевой книге. Я только-только начал этим заниматься, но уже есть кое-какие успехи и достижения, так что совсем скоро в сети появится новая домашняя страничка, и это будет моя страничка. Я уже умею менять цвет у шрифта и фона, умею выравнивать текст, а сейчас учусь менять размер шрифта. </body> </html>

Как еще можно выделять фрагменты текста? Существует еще много способов. Ведь текст можно сделать жирным, набрать курсивом или подчеркнуть. А можно и сочетать все эти способы: жирный наклонный подчеркнутый текст. Для этого используются теги жирного шрифта  и , наклонного  и , подчеркнутого  и . Не бойтесь использовать их парно, только помните, что в каком порядке теги открываются, в том же они должны и закрываться. То есть комбинация текст недопустима, большинство браузеров "споткнутся" на ней. Это касается всех тегов, а не только приведенных в примере.

Что еще интересного можно сделать с текстом? Никто не запрещает указать для какого-то участка текста определенный шрифт. Для этого используется параметр face. Как и обычно, значение параметра указывается в кавычках после знака"=". Например, чтобы какой-то текст был набран шрифтом Arial, его нужно поместить в контейнер текст.

Еще есть вот такие теги:
<s>~~тег перечеркивания~~</s>
<big>шрифт большего, чем основной, размера</big>
шрифт меньшего, чем основной, размера
_{нижний индекс}
^{верхний индекс}
<code>моноширинный шрифт</code>

Есть еще немало способов выделения текста, но изучать их все за один прием довольно утомительно. К форматированию текста мы еще вернемся позже. А пока закрепим на практике новые познания.

О форматировании текста мы уже знаем довольно много, потому можно от текста плавно перейти к графике.

Начало | Содержание | Словарь

Глава2. Раскрасим страничку | Глава 4. Графика в HTML