Тема: «Форматирование текста. Параграф. Заголовки».

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

Оборудование: для проведения работы необхом любой стандартный браузер, например, Internet Explorer,простой текстовый редактор, например, Блокнот и подключение Интернет.

Поговорим о параграфах. Параграфы вводятся тэгом:

<p> </p>

С помощью параграфов мы можем центрировать текст:

<p align="center"> текст </p>

С помощью параграфов мы можем выровнять текст по левому краю:

<p align="left"> текст </p>

Или по правому краю документа:

<p align="right"> текст </p>

Теперь введем параграфы в наш документ и посмотрим наглядно, что получится, попробуйте подставить в параграф другие параметры со значениями Left или Right.

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="# D 1 D 1 D 1">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </p>
</body>
</html>

Рис. Выравнивание текста по центру с использованием параграфа.

Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу уже не нужен тэг <br> для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">:

<center>текст</center>

< html >
< head >
< title >Мой первый шаг </ title >
</ head >
< body text ="#336699" bgcolor ="# D 1 D 1 D 1">
<center>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать ! </font>:) </center>
</body>
</html>

Рис. Выравнивание текста по центру с использованием тэга <body>.

Все было бы хорошо, и можно было бы шагнуть на следующую ступеньку, если бы у тэга <p> не существовало бы еще и четвертого, но опасного значения (атрибута):

<p align="justify"> текст </p>

Этот атрибут параграфа выравнивает текст по обоим краям документа, и все становится аккуратным. Почему же это опасный атрибут? Он не работает в старых версиях браузеров, поэтому у тех, кто использует старые браузеры, он может не действовать (не отображаться), т.е. текст выровняется в таком случае по левому краю документа. Еще один пример использования данного атрибута.

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="# D 1 D 1 D 1">
<center>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать ! </font>:) </center>
<p align="justify">

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появиться еще один виртуальный друг?:)
</p>
</body>
</html>

Рис. Выравнивание текста по обеим сторонам.

Теперь вставьте пример в наш документ, и посмотрите, что получится.

Мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга

<font></font>.

Итак, мы уже немного умеем форматировать текст, но посмотрите на наш документ. Мне кажется, что фраза "Здравствуйте, это моя первая страница" так и просится, чтобы ее выделили. Для этого можно использовать заголовки:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>

<H6> текст </H6>

Пришлось немного пожертвовать красотой, чтобы сразу наглядно все продемонстрировать. Зато всем видно и то, что существуют шесть уровней заголовков, и то, что соответственно буковки у каждого разного размера, и то, что тут у нас такая же ситуация как с параграфами (принудительный перенос строки). Заголовок выделяется жирным текстом, это тоже одно из его свойств. В пример введен заголовок третьего уровня <H3></H3>. Смотрите, что получилось.

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#D1D1D1">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг?:)
</p>
</body>
</html>

Рис. Использование заголовка третьего размера.

Заголовки предназначены для выделения небольшой части текста (строки, фразы), Но, если вы хотите выделить большой фрагмент текста, или только одно слово, при этом без переноса строки? С заголовками так не получится, поэтому вспомним о тэге

<font></font>:

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

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

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#D1D1D1">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <font size="+1"> еще один виртуальный друг?:)</font>
</p>
</body>
</html>

Рис. Использован еще один способ задания размера текста с помощью параметра size.

В нашем примере выделено "еще один виртуальный друг?", пусть все думают, что вы горите желанием завести еще одного виртуального друга:). Стандартный size (по умолчанию) ="+0".

Теперь настала пора поговорить о том, как делается курсив, подчеркнутый текст, полужирный текст и фиксированный текст:

<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<u> Подчеркнутый текст </u>

Например:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#D1D1D1">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b> еще один виртуальный друг?:)</b>
</p>
</body>
</html>

Рис. Использован полужирный текст.

Теперь пара строк о фиксированном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой ширины, оттого и зовется фиксированным. А тэг для него следующий:

<tt> fixed - фиксированный шрифт </tt>

Задание. Повторите предыдущий пример, используя фиксированный текст. Просмотрите в браузере, как выглядит данная страничка.

<pre> текст (куча пробелов) текст </pre>

Текст между <pre> и </pre> тоже фиксированный, но тут есть одна большая особенность, он не только фиксированный, но еще и выводится с точностью до пробела так, как вы его набили в блокноте, сей странный тэг может быть полезен, допустим, для форматирования стихотворений. Запомните, к одному фрагменту текста может применяться сразу несколько тэгов:

<tt><b><i> текст </i></b></tt>

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

Существует еще один интересный атрибут тэга <font>:

<font face="ARIAL"> текст (шрифт Arial) </font>

С помощью атрибута face в нашем случае задан шрифт Arial. Таким образом, вы можете задать и какой-нибудь экзотический шрифт для своей страницы, но это немного рискованно, т.к. у вашего посетителя может не оказаться такого шрифта, поэтому все же лучше задавайте стандартные (Arial (без надсечек), Times Roman (пропорциональный), Courier (равноширинный) и другие).

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

Упражнение для самостоятельной работы:

Проделайте все предложенные в работе манипуляции по оформлению Web-страницы. Создайте самостоятельно Web-страницу на тему «Моя персональная страничка» с использованием, полученных в работе знаний по ее оформлению: создание текста различного размера и выравнивания относительно сторон странички, используя различные шрифты и способы написания текста вашей странички.

Контрольные вопросы:

7. Тэг параграф и его атрибуты. Какие атрибуты устанавливаются по умолчанию?

8. Форматирование текста с помощью тэга <font>.

9. Атрибуты тэга <font> по умолчанию.

10. Фиксированный текст, его организация.

11. Как прописать шрифты на Web-странице?

Литература

4. Хольцнер С., Dynamic HTML, Руководство разработчика, БХВ Киев, 1999 г.

5. Кузин А., JavaScript шаг за шагом, [email protected].

6. Алленова Н., Первые шаги – учебник (руководство) по хтмл (html), http://www.postroika.ru.