Форматирование документа

Практически все теги, рассмотренные нами, являются тегами физического форматирования. Исключение составляют теги <strong> и <em>. Эти теги являются тегами физического форматирования текста и используются для выделения очень важных и просто важных фрагментов соответственно. Теги логического форматирования используются для структурной разметки документа и могут отображаться разными веб-браузерами по-разному.

Теги логического форматирования:

<CITE> ... </CITE> — применяется для отметки цитат, а также названий произведений;
<CODE> ... </CODE> — служит для отметки фрагментов программного кода;
<ACRONYM> ... </ACRONYM> — используется для отметки аббревиатур;
<KBD> ... </KBD> — отмечает фрагмент как вводимый пользователем с клавиатуры;
<Q> ... </Q> — используется для отметки коротких цитат;
<SAMP> ... </SAMP> — применяется для отметки результата, выдаваемого программой;
<VAR> ... </VAR> — отмечает имена переменных.

Тег комментария

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

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

Перевод строки

Для разделения строк используется одинарный тег <br>.

Если в HTML-документе набрать текст

<html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

              <title>Перевод строки</title>

              </head>

              

              <body>

              Строка 1

              Строка 2

              Строка 3

              </body>

              </html>

то веб-браузер отобразит его в одну строку.

В окне веб-браузера это будет выглядеть ТАК.

Для того, чтобы строки располагались друг под другом, необходимо добавить тег <br> в конец каждой строки:

<html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

              <title>Перевод строки</title>

              </head>

              

              <body>

              Строка 1<br>

              Строка 2<br>

              Строка 3<br>

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

Для вывода текста в исходном виде, что и в исходном коде, используется парный тег <pre>:

<html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

              <title>Перевод строки</title>

              </head>

              

              <body>

              <pre>

              Строка 1

              Строка 2

              Строка 3

              </pre>

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

Запрет переноса строки

Для запрета переноса строки используется тег <nobr>:

<nobr>Длинная строка</nobr>

С помощью этого тега можно получить очень длинные строки. Если строка будет выходить за пределы окна веб-браузера, то появится горизонтальная полоса прокрутки.

Пример:

<html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

              <title>Перевод строки</title>

              </head>

              

              <body>

              <nobr>

              Практически все теги, рассмотренные нами, являются тегами физического форматирования. Исключение составляют теги <strong> и <em>. Эти теги являются тегами физического форматирования текста и используются для выделения очень важных и просто важных фрагментов соответственно. Теги логического форматирования используются для структурной разметки документа и могут отображаться разными веб-браузерами по-разному.

              </nobr>

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

Горизонтальная линия

Одинарный тег <hr> позволяет провести горизонтальную линию.

Тег <hr> имеет следующие параметры:

size — толщина линии;
Пример:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Горизонтальная линия</title> </head> <body> Горизонтальная линия <hr size="5"> </body> </html>

В окне веб-браузера это будет выглядеть ТАК.
width —длина линии. Можно указывать значение как в пикселах, так и в процентах относительно ширины окна веб-браузера:
Пример:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Горизонтальная линия</title> </head> <body> Горизонтальная линия. Длина линии. <hr size="5" width="100"> <hr size="5" width="100%"> </body> </html>

В окне веб-браузера это будет выглядеть ТАК.
color —цвет линии.
Пример:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Горизонтальная линия</title> </head> <body> Горизонтальная линия. Цвет линии. <hr size="2" width="200" color="#0000FF"> <hr size="3" width="100%" color="#FF0000"> </body> </html>

В окне веб-браузера это будет выглядеть ТАК.
align — выравнивание линии. Параметр может принимать следующие значения:
- center — выравнивание по центру (значение по умолчанию);
- left —выравнивание по левому краю;
- right — выравнивание по правому краю.
Пример:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Горизонтальная линия</title> </head> <body> Горизонтальная линия.Выравнивание линии. <hr size="2" width="200" color="#0000FF" align="center"> <hr size="3" width="200" color="#FF0000" align="left"> <hr size="3" width="200" color="#FF0000" align="right"> </body> </html>

В окне веб-браузера это будет выглядеть ТАК.
noshade — присутствие этого параметра отменяет рельефность линии.
Пример:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Горизонтальная линия</title> </head> <body> Горизонтальная линия. <hr size="2" width="200" color="#0000FF" align="center" noshade> </body> </html>

В окне веб-браузера это будет выглядеть ТАК.

Заголовки

Заголовки могут иметь шесть различных размеров:

<Hx>Заголовок</Hx>

где х — число от 1 до 6.

Заголовок с номером 1 является самым крупным:

<H1>Самый крупный заголовок</H1>

Заголовок с номером 6 является самым мелким:

<H6>Самый мелкий заголовок</H6>

Пример:

<html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

              <title>Заголовки</title>

              </head>

              

              <body>

              <h1>Самый крупный заголовок</h1>

              <h6>Самый мелкий заголовок</h6>

              

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

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

center — выравнивание по центру;
left — выравнивание по левому краю (по-умолчанию);
right — выравнивание по правому краю.

Пример:

<html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

              <title>Заголовки</title>

              </head>

              

              <body>

              <h1 align="center">Заголовок первого уровня с выравниванием по центру</h1>

              <h2 align="left">Заголовок второго уровня с выравниванием по левому краю</h2>

              <h6 align="right">Самый мелкий заголовок с выравниванием по правому краю</h6>

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

Понравилась статья или раздел сайта - порекомендуйте их друзьям.

Обсудить на форуме

Комментарии(0)

Для добавления комментариев надо войти в систему и авторизоваться
Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться

Вход в Личный кабинет
Ваш логин:	Ваш пароль:

Забыли пароль?

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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Веб-инструмент

Веб-мастерская

Веб-услуги

Веб-графика

Веб-ресурсы