Шаг 2. Тэги перевода строки и абзаца
Форматирование Web-страниц
Краткие теоретические сведения
При обработке HTML-документов браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелы. Для «разлома» строк служит тег перевода строки <br> - он выполняет переход на новую строку. Тэг абзаца <p> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.
Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:
<b>…</b> для выделения полужирным,
<i>…</i> для выделения курсивом,
<u>…</u> для выделения подчеркиванием.
Большинство тегов, используемых для разметки HTML-страниц, являются контейнерами, т. е. внутри себя они могут содержать текст и другие теги. Например, использование комбинированных начертаний шрифтов:
<i><b>Всем</b></i> <i>огромный</i> <u>привет!</u>.
При этом необходимо помнить следующее правило записи вложенных тэгов: тег, который был открыт первым, закрывается последним, вторым – предпоследним и т.д. Например
| <Тэг1> <Тэг2> <Тэг3> … </Тэг3> </Тэг2> </Тэг1> | правильная запись |
| <Тэг1> <Тэг2> <Тэг3> … </Тэг3> <Тэг1></Тэг2> | ошибочная запись |
Существует два способа управления размером текста, отображаемого браузером:
· использование стилей заголовка,
· задание размера основного документа или размера текущего шрифта.
В языке HTML имеется шесть тэгов заголовков (от <h1> до <h6>). Каждому такому тэгу соответствует свой стиль, заданный в параметрах настройки браузера. Из них <h1> – самый крупный.
Атрибут size= тега <font> позволяет задавать размер текущего шрифта для отдельных фрагментов текста. Диапазон установки текущего шрифта – от 1 до 7.
Тэг <font> многофункциональный – он предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <font> атрибута face=. Например, для отображения текста шрифтом Arial необходимо указать <font face="arial">. Для изменения цвета шрифта в тэге <font> используется атрибут color=.
С помощью тэгов языка HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, то все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле. Для выравнивания текста используется атрибут align=, который встраивается в теги абзаца <p> или заголовка <h> и может принимать такие значения:
· center - выравнивание по центру,
· right - выравнивание по правому краю,
· left - выравнивание по левому краю.
Ход работы
Шаг 1. Управление расположением текста на экране
1. В папке для создания HTML-документов отредактируйте файл hello.html, убрав в нем информацию о цвете и расположив слова «Всем», «огромный» и «привет!» на разных строках:
<html>
<head>
<title>Мой первый документ HTML</title>
</head>
<body>
Всем
огромный
привет!
</body>
</html>
2. Просмотрите его содержимое в браузере. В результате текст в основном окне будет расположен в одну строку. Так происходит потому, что при отображении HTML-документов браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелы.
Шаг 2. Тэги перевода строки и абзаца
1. Внесите в текст файла HTML следующие изменения:
<html>
<head>
<title>Мой первый документ HTML</title>
</head>
<body>
Всем<p>
огромный<br>
привет!
</body>
</html>
2. Посмотрите обновленную WEB-страницу. В результате она должна выглядеть примерно так:
Вид документа HTML изменился в результате того, что было добавлено два тега <br> и <p>. Тэг перевода строки <br> отделяет строку от последующего текста или графики, а <p> дополнительно добавляет пустую строку.