УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 6. Форматируем текст

На этом уроке мы узнаем, как форматировать текст, то есть, как изменять параметры текста: начертание, размер, цвет, положение на странице.

Начнём с положения текста на странице.

Текст может быть выровнен по левому либо правому краю страницы, по центру и по ширине.

Для того, чтобы расположить текст тем или иным способом, используется тег параграфа <p> … </p> и атрибут align:

<p align="left"> - текст выравнивается по левому краю;

<p align="right"> - текст выравнивается по правом у краю;

<p align="justify"> - текст выравнивается по ширине страницы;

<p align="center"> - текст выравнивается по центру.

Вот и всё, ничего сложного. Осталось применить на практике.

Давайте напишем во второй ячейки нижней строки статью.

Любая статья начинается с заголовка, а заголовок обычно располагается по центру. Запишите следующий код во вторую ячейку нижней строки:

Листинг 6.1

……
<body>
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC" cellpadding="5">
<tr height="150">
<td align="center"> Здесь будет картинка, отражающая тему сайта </td>
<td colspan="2" align="center"> Имя сайта: ВСЁ О СОБАКАХ </td>
</tr>
<tr height="40">
<td colspan="3" align="center"> Здесь будет рекламный баннер </td>
</tr>
<tr>
<td WIDTH="200" align="center" valign="top"> Здесь будет панель навигации </td>
<td align="justify" valign="top">
<p align="center">Собака - друг человека.</p>
<p align="justify">Содержание и разведение собак - часть мировой культуры, историческая традиция, восходящая к тем древним временам, когда у далёкого нашего предка появился преданный друг, помогавший добывать пищу и охранять жилище.</p>
<p align="justify">За долгие века привязанность человека к братьям его меньшим не утратила своей теплоты, а собаки остаются для людей помощниками и компаньонами.</p>

</td>
<td WIDTH="200" align="center" valign="top"> Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр. </td>
</tr>
</table>
……

Сохраним документ, посмотрим результат в браузере:

Уроки html для начинающих
Рис. 12.

Заголовок расположен по центру, а остальной текст - по всей ширине ячейки.

Обратите внимание: закрывающий тег </p> автоматически переводит текст на новую строку.

Кроме того, на новую строку можно переходить с помощью непарного тега <br>.

Дальше поговорим о том, как установить или изменить размер и цвет шрифта.

Цвет шрифта устанавливается двумя способами.

Первый - в открывающем теге <body> прописывается атрибут text="#...":

Листинг 6.2

……
<body text="#000000">
…..

Посмотрев по таблице цветов, можно выяснить, какому цвету соответствует приведённая в примере кодировка. Это чёрный цвет. Правда, он и так чёрный по умолчанию, так что можно специально не указывать.

Цвет, заданный в теге <body>, относится ко всему тексту страницы. Если нужно изменить цвет текста на отдельном участке, применяют тег <font> … </font> с атрибутом color.

Изменим цвет заголовка статьи, добавив следующий код:

Листинг 6.3

......
<p align="center"><font color="#008000"> Собака - друг человека. </font></p>
<p align="justify"> Содержание и разведение собак - часть мировой культуры, историческая традиция, восходящая к тем древним временам, когда у далёкого нашего предка появился преданный друг, помогавший добывать пищу и охранять жилище. </p>
<p align="justify"> За долгие века привязанность человека к братьям его меньшим не утратила своей теплоты, а собаки остаются для людей помощниками и компаньонами. </p>
……

 

Сохраните страницу, обновите в браузере. Заголовок стал зелёным.

Предлагаю самостоятельное задание: изменить цвет заголовка сайта "ВСЁ О СОБАКАХ". (И, кстати, избавиться от слов "имя сайта", а то это слишком похоже на табличку "Дерево" на дереве.) Я заголовок сайта тоже сделал зленным, а Вы - выберите, что нравится Вам.

Уроки html для начинающих
Рис. 13

Теперь о размерах.

Размер задают в теге <font> … </font> атрибутом size, присваивая ему значение от -2 до +4:

<font size="+3"> текст </font>
<
font size="+2"> текст </font>
<
font size="+1"> текст </font>
<
font size="+0"> текст </font>
<
font size="-1"> текст </font>
<font size="-2">
текст </font>

По умолчанию размер текста +0. Другие цифры показывают, на сколько текст отличается от "по умолчанию". Можете самостоятельно поэкспериментировать с размерами шрифта. А потом пойдём дальше и узнаем о заголовках.

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

В HTML существует шесть уровней заголовков:

<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>

Первый самый важный, последний, шестой, наименее важный. Возьмём тег <H3> … </H3> и заменим им тег <p align="center"> в заголовке статьи:

Листинг 6.4

……
<H3> <font color="#008000"> Собака - друг человека.</font> </H3>
……

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

Уроки html для начинающих
Рис. 14

Мы уже выяснили: выравнивать текст можно тегом параграфа <p> с атрибутом align. Но есть ещё один тег, который тоже можно применять для выравнивания текста.

Это тег <div>…</div>. (Вообще-то, этот тег чаще применяется для разделения страницы на блоки, но с блочным построением сайта мы познакомимся позже.) Все четыре значения атрибута align можно употреблять с <div>:

<div align="center"> текст </div>
<div align="left">
текст </div>
<div align="right">
текст </div>
<div align="justify">
текст </div>

Пропишем этот тег для нашего заголовка:

Листинг 6.5

……
<div align="center">
<H3> <font color="#008000"> Собака - друг человека. </font></H3>
</div>
……

Сохраним результат, обновим в браузере:

Уроки html для начинающих
Рис. 15

Самостоятельно пропишите заголовко первого уровня для названия сайта.

У меня получилось вот так:

Уроки html для начинающих
Рис. 16

Итак, мы научились вырвнивать текст на странице, изменять размер и цвет текста. Осталось научиться менять начертание текста, то есть, задавать его тип. А так же делать текст жирным, курсивным, либо подчёркнутым.

По умолчанию тип текста для всей страницы Times New Roman.

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

Чтобы изменить тип текста, нужно в известном нам теге <font> </font> задать нужный нам тип с помощью атрибута face="…". Например, зададим для текста статьи тип шрифта Verdana:

Листинг 6.6

……
<font face="Verdana">
<div align="center">
<H3> <font color="#008000">Собака - друг человека.</font></H3></div>
<p align="justify">Содержание и разведение собак - часть мировой культуры, историческая традиция, восходящая к тем древним временам, когда у далёкого нашего предка появился преданный друг, помогавший добывать пищу и охранять жилище.</p>
<p align="justify">За долгие века привязанность человека к братьям его меньшим не утратила своей теплоты, а собаки остаются для людей помощниками и компаньонами.</p>
</font>
</td>
……

Сохраним документ, обновим в браузере. При желании можете самостоятельно поупражняться в изменении типа шрифта для разных участков текста. Думаю, это не вызовет затруднений.

Осталось разобрать последнее: как изменить обычный шрифт на курсивный, полужирный или/и подчёркнутый.

Как и всё остальное, это сделать просто.

Для полужирного начертания применяют тег <b>… </b>; для курсивного - <i>…</i>; для подчёркнутого - <u>…</u>. Есть ещё такая экзотика, как перечёркнутый текст, его задают тегом <s>…</s>.

Осталось применить к нашей странице.

Заголовок сделаем подчёркнутым. А первый абзац текста курсивным:

Листинг 6.7

……
<td align="justify" valign="top">
<font face="Verdana">
<div align="center">
<H3> <font color="#008000" face="Verdana"><u>Собака - друг человека.</u></font></H3></div>
<p align="justify"><i>Содержание и разведение собак - часть мировой культуры, историческая традиция, восходящая к тем древним временам, когда у далёкого нашего предка появился преданный друг, помогавший добывать пищу и охранять жилище.</i></p>
<p align="justify">За долгие века привязанность человека к братьям его меньшим не утратила своей теплоты, а собаки остаются для людей помощниками и компаньонами.</p>
</font>
</td>
……

Сохраним документ, обновим в браузере. Вот что получилось:

Уроки html для начинающих
Рис. 17

Вот и весь урок. Подведём итоги.

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

Домашнее задание. Придумать заголовки для панели управления своего сайта и, пользуясь полученными знаниями о форматировании текста, расположить эти заголовки в первой ячейке нижней строки.

Чтобы Вам было легче, дам подсмотреть, как я выполнил это задание:

Уроки html для начинающих
Рис. 18

А вот фрагмент кода:

Листинг 6.8

……
<tr>
<td WIDTH="200" align="center" valign="top">
<font face="Verdana">
<div>
Главная<br>
Породы<br>
Выбор<br>
Содержание<br>
Дрессировка<br>
Выставки<br>
Контакты
</div>
</font>

</td>
……

Успехов.

И до встречи на следующем уроке >>>>>>>

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

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта