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

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

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

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

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

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

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

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

Веб-услуги

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

Веб-ресурсы

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

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

Практически все теги, рассмотренные нами, являются тегами физического форматирования. Исключение составляют теги <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)

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