Урок пятый

Оформление текста

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

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

Для просмотра документа в браузере, сохраняем его на диске. (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить, если вы не закрывали страницу)

Это будет выглядеть ТАК

Выравнивание текста

Выравнивание текста по центру позволяют сделать тег <center> и </center>. При использовании этих тегов заголовки или текст не будут прижаты к левому краю, они равномерно заполнят область вывода текста. Чтобы выровнять текст по центру, просто вставьте теги <center> и </center> в начале и в конце нужного фрагмента.

Ряд других команд для выравнивания:
<h1 align="left">Выровнять заголовок по левому краю</h1>
<h2 align="right"> Выровнять заголовок по правому краю</h2>
<h3 align="center">Выровнять заголовок по центру</h3>
<h4 align="justify">Выровнять заголовок равномерно</h4>
Выровнять абзац по левому краю
Выровнять абзац по центру
Выровнять абзац равномерно

Применим их к нашему тексту.

<html>
<head>
<title>Моя первая web страница </title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1251">
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>

<h1>Персональная страница Горбункова Семена Семеновича </h1>
</center>
<hr>
Это моя первая страничка. Продолжаю над ней работать.
<hr noshade>

Я освою Web дизайн и создам свой сайт!
 
Я хочу научиться 
<dd>создавать сайты
<dd>размещать их в интернете
<dd>веб дизайну
<dd> веб графике

<img src="images/sv1.gif" width="553" height="468" alt="Сайт о сайтах">
<hr size="5">
 
Абзац начинается с новой строки и является
элементом документа
</body>
</html>

Для просмотра документа в браузере, сохраняем его на диске. (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить если вы не закрывали страницу)

Это будет выглядеть ТАК

Теперь о шрифтах.

Для того чтобы сделать текст жирными используются парные теги и ( b- от слова bold, т.е. жирный), курсивом и . i- от слова italic, т.е. курсив.

Сделаем текст нашей страницы в одном месте жирным, а в другом курсивом.

<html>
<head>
<title>Моя первая web страница </title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1251">
</head>
<body bgcolor="#00CCFF" text="#FFFF00">

<center>
<h1>Персональная страница Горбункова Семена Семеновича </h1>
</center>
<hr>
Это моя первая страничка. Продолжаю над ней работать.
<hr noshade>

Я освою Web дизайн и создам свой сайт!
 
Я хочу научиться 
<dd>создавать сайты
<dd>размещать их в интернете
<dd>веб дизайну
<dd> веб графике 
<img src="images/sv1.gif" width="553" height="468" alt="Сайт о сайтах">
<hr size="5">
 
Абзац начинается с новой строки и является
элементом документа
</body>
</html>

Теперь наша страничка будет выглядеть ТАК.

Обратите внимание на порядок следования тегов вложенных в другие теги. Теги должны быть вложены как матрешки.

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

или вот так

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

Будьте внимательны при написании кода ! Иначе это вызовет ошибки в отображении страницы.

А можно ли сделать текст одновременно и жирным и курсивом ?
Конечно можно ! Например вот так:

<>Это моя первая страничка. Продолжаю над ней работать.

или так

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

или так

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

О размере шрифтов

Иногда при написании текста в веб-странице необходимо слегка выделить определенные фрагменты текста, чтобы читатель обратил на них особое внимание. HTML предлагает ряд возможностей для такого выделения, в числе которых еще два новых тега, дающих возможность изменить вид текста на экране. Это теги <big> и . Они не оказывают существенного влияния на вид текста, но вызывают некоторые изменения в размере шрифта.

Шрифт текста между тегами <big> и </big> немного крупнее обычного текста. Как вы догадаетесь, действие тегов и прямо противоположно. Шрифт между ними становиться немного меньше.

Тег имеет дополнительные возможности для задания размера шрифта основного текста. Вместо определенного номера вы можете задать относительный размер шрифта, например +3 или -1. Браузер прибавляет (или вычитывает) заданное число к номеру шрифта, используемого по умолчанию (размер 3).

На странице есть такая строчка

Я освою Web дизайн и создам свой сайт!

Здесь с помощью тега и параметра color мы задаем цвет текста.

А с помощью параметра size можно задать размер текста, например вот так

Я освою Web дизайн и создам свой сайт!

Добавьте изменение в код страницы из предыдущего урока.

Теперь наша страница будет выглядеть ТАК

Следующий урок смотрите ЗДЕСЬ