Цель: Ознакомиться с возможностями форматирования текста странички с использованием параграфа, научиться создавать текст разного размера, расположения и разного стиля. Сформировать умение создавать странички с вышеперечисленными свойствами текста.
Оборудование: для проведения работы необхом любой стандартный браузер, например, 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.
