База данных для веб-мастеров: Обучение: Основы создания HTML-документа

Основы создания HTML-документа

Заголовки разделов
      документов

<H1>...</H1> - <H6>...</H6>

HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом - размером и толщиной букв. Заголовок первого уровня - самый крупный, шестого уровня, естественно - самый мелкий. Заголовки определяются тегом <Hi>, где 'i'- это значение уровня заголовка, т.е. H1-заголовок вышего уровня, H2-заголовок следующего уровня после H1 и так далее. Тег <Hi> должен иметь завершающий тег </Hi>.

Разделение текста на абзацы.

<P>...</P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Примечание:
В HTML несколько стоящих подряд тэгов <Р> не дают дополнительного пространства между абзацами. Большинство браузеров также интерпретирует стоящие рядом тэги <P> как один тэг.

Вот самый простой HTML-документ:

<html> 
     <head> 
          <title> 
               Пример 1 
          </title>
     </head> 
     <body> 
          <H1> 
               Привет! 
          </H1> 
          <P> 
               Это простейший пример HTML-документа. 
          </P> 
          <P> 
               Этот *.htm-файл может быть одновременно открыт 
               и в Notepad, и в Netscape. Сохранив изменения в Notepad, 
               просто нажмите кнопку Reload ('перезагрузить') в Netscape, 
               чтобы увидеть эти изменения реализованными в HTML-документе. 
          </P> 
     </body> 
</html>

Заголовки и абзац можно выравнивать по центру, по левому или по правому краю текста, например:

<H1 ALIGN="center">Заголовок 1-го уровня, отцентрированный</H1> 
или 
&ltP ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Таблица 1.

Значение Функция

LEFT Выравнивание текста по левой границе окна браузера.

CENTER Выравнивание по центру окна браузера.

RIGHT Выравнивание по правой границе окна браузера.

Подытожим все, что мы знаем, с помощью примера 2:

<html> 
<head> 
<title>Пример 2</title> 
</head> 
<body> 
<H1 ALIGN=CENTER>Привет!</H1> 
<H2>Это чуть более сложный пример HTML-документа</H2> 
<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P> 
<P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P> 
</body> 
</html>

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

<BR>
Для того чтобы перейти на следующую строку в любом нужном вам месте текущей строки, в HTML существует тэг разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с начала новой строки. В отличие от тэга абзаца, тэг <BR> не добавляет пустую строку. Вдобавок он не имеет соответственного закрывающего тэга. Очень удобно при публикации стихов (см. пример 3).

<html> 
<head> 
<title>Пример 3</title> 
</head> 
<body> 
<H1>Стих</H1> 
<H2>Автор неизвестен</H2> 
<P>Однажды в студеную зимнюю пору<BR> 
Сижу за решеткой в темнице сырой.<BR> 
Гляжу - поднимается медленно в гору<BR> 
Вскормленный в неволе орел молодой.</P> 
<P>И шествуя важно, в спокойствии чинном,<BR> 
Мой грустный товарищ, махая крылом,<BR> 
В больших сапогах, в полушубке овчинном,<BR> 
Кровавую пищу клюет под окном.</P>
</body> </html>

<NOBR>...</NOBR>
Бывают случаи, когда возникает надобность в операции противоположного назначения – запретить перевод строки. Текст, заключенный между тэгами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке без переноса на другую.Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки.

Горизонтальные линии.

<HR>
Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Сейчас часто используют рельефную, вдавленную линию, чтобы обозначить "объемность" документа.
Элемент <HR> позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тэг не является контейнером, поэтому не требует закрывающего тэга. До и после линии автоматически вставляется пустая строка.

В табл. 2 представлены атрибуты тэга <HR>.

Таблица 2.

Атрибут Назначение

ALIGN Выравнивает по краю или центру; имеет значения LEFT, CENTER,RIGHT.

WIDTH Устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ %

SIZE Устанавливает ширину линии в пикселах.

NOSHADE Отменяет рельефность линии.

COLOR Указывает цвет линии. Используется формат RGB или стандартное имя.

В примере 4 приведена небольшая коллекция горизонтальных линий.

<html> 
<head> 
<title>Пример 4</title> 
</head> 
<body> 
<H1>Коллекция горизонтальных линий</H1> 
<HR SIZE=2 WIDTH=100%>
 
<HR SIZE=4 WIDTH=50%>
 
<HR SIZE=8 WIDTH=25%>
 
<HR SIZE=16 WIDTH=12%>
 
</body> 
</html>

Использование предварительно отформатированного текста.

<PRE>
Обязательно ли пользоваться тэгами абзаца и разрыва строки? Оказывается, нет. HTML имеет специальный тэг-контейнер, в который можно включать предварительно отформатированный (преформатированньй, preformatted) текст. При этом вы сможете в большей степени контролировать вывод документа программой просмотра, правда, за счет некоторой потери гибкости.
Наиболее употребляемым является контейнер <PRE>. Текст внутри него может записываться в любой форме.

            <PRE> 
               Заранее 
                  отформатированный текст
                     с сохранением отступов  
                  и пробелов 
            </PRE>

Примечание:
Если вы хотите показать в преформатированном тексте HTML-код либо символы < или >, используйте специальные коды &1t и &gt, например, &1tPRE&gt.

Страницы >>

Автор: Казьмина Светлана