Главная
К библиотеке
Military.com Free Screensavers!

Базовая разметка документа в HTML

В HTML документы записываются в обычном текстовом формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе.

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

Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы:

Для каждого из этих элементов в HTML существуют определенные стили, описывающие в каком виде пользователь увидит текст на экране. Пусть мы создали некоторый файл:

<HTML>
<HEAD>
<TITLE>Пример HTML-текста</TITLE>
</HEAD>
<BODY>
<H1>Глава 1</H1>
<H2>Параграф 1.</H2>
Добро пожаловать в HTML!
Здесь мы расскажем, как надо и как не надо писать гипертексты.<P>
<H2>Параграф 2.</H2><P>
</BODY>
</HTML>

Этот текст выглядит так.

Глава 1

Параграф 1.

Добро пожаловать в HTML! Здесь мы расскажем, как надо и как не надо писать гипертексты.

Параграф 2.

Основные элементы

Как уже отмечалось язык HTML не различает, какими буквами набраны команды форматирования (нечувствителен к регистру): <title> равносильно <TITLE> или <TiTlE>. Основной текст документа (тело) отделяется от заголовка документа Командами:

<BODY> </BODY>

Заголовок

Каждый HTML-документ должен иметь заголовок, он показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Для задания заголовка служат команды:

<HEAD><TITLE>Заголовок</TITLE></HEAD>

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

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

Абзацы

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

   <H2>Параграф 1.</H2>
   Добро пожаловать в HTML!
   Здесь мы расскажем, как надо и как не надо писать гипертексты.<P>

В исходном файле два предложения находятся на двух разных строках. Web browser игнорирует это перерывание строки и начинает новый абзац только, после знака < P>.

Однако, чтобы сохранить удобочитаемость в исходных HTML-файлах, мы рекомендуем заголовки размещать на отдельных строках, а абзацы отделять пустыми строками (в дополнение к команде < P>).

Также заметим, что хотя в действующих версиях HTML нет команды форматирования "конец абзаца" < /P>, рекомендуется его употреблять, поскольку это соответствует стандарту и он может быть введен в последующих версиях. К ошибке это не приведет, поскольку все незнакомые символы browser просто игнорирует. Иначе Вам в последствии, может быть, придется переделывать Ваши HTML-документы.

Дополнительные возможности форматирования

Списки

HTML поддерживает ненумерованные, нумерованные списки и списки определений.

Ненумерованные списки

Ненумерованный список: <UL><LI>список пунктов </UL>, например:

<UL> <LI> яблоки <LI> бананы </UL>

что дает на экране:

Нумерованные списки

Нумерованный список идентичен ненумерованному списку, только вместо < UL> используется < OL>.

<OL> <LI> апельсины <LI> персики <LI> виноград </OL>

что дает на экране:

  1. апельсины
  2. персики
  3. виноград

Списки определений

Список определений обычно состоит из чередования термина ( DT ) и определения ( DD ). Обычно Web browsers определения располагает на новой строке. Приведем пример списка определений: 

<DL>
<DT> NCSA
<DD> NCSA (National Center for Supercomputing Applications).
<DT> CTC
<DD> CTC (Cornell Theory Center).
</DL>

что дает:

NCSA
NCSA (the National Center for Supercomputing Applications)
CTC
CTC (Cornell Theory Center).

Вложенные списки

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

Приведем пример вложенных списков:

<UL> <LI> Крупные города России: <UL> <LI> Москва <LI> Новосибирск <LI> Санкт-Петербург </UL> <LI> Крупные города Украины: <UL> <LI> Киев </UL> </UL>

что дает на экране:

Стили

Можно описывать специальными стилями отдельные слова или предложения. Имеются два типа стилей: логический и физический.

Логические стили

<DFN>
служит для описания определений. (Это определение.)
<EM>
служит для выделения слов. (Это выделенное слово.)
<CITE>
служит для выделения заголовков книг, фильмов, цитат и т.п. (Это цитата)
<CODE>
служит для выделения программных кодов, текстов программ и т.п. Изображается шрифтом фиксированной ширины. (The <stdio.h> header file)
<KBD>
используется для ввода с клавиатуры пользователя. Может быть изображено жирным шрифтом (но в большинстве browser изображается специальным шрифтом). (Введите passwd)
<SAMP>
используется для машинных сообщений. Изображается шрифтом фиксированной ширины. (Segmentation fault: Core dumped.)
<STRONG>
служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом (Это очень важно )
<VAR>
используется для символьных переменных. (Это переменная.)

Физические стили

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

Вы можете задать:

<B>, </B>
жирный шрифт (это жирный шрифт)
<I>, </I>
наклонный шрифт (это наклонный шрифт)
<TT>, </TT>
фиксированный шрифт (шрифт заданной ширины) (это fixed шрифт)

Специальные символы

Символы <, >, & и " имеют в HTML особое значение, как символы форматирования. Но иногда нам необходимо использовать их в тексте по своему прямому назначению. Для их введения в текст, Вы должны использовать:

&lt;
- левая скобка <
&gt;
- правая скобка >
&amp;
- & амперсанд
&quot;
- " кавычки

ЗАМЕЧАНИЕ: Специальные символы чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо &lt;.

Прерывание строки

Используя команду <BR> Вы можете перейти на новую строку, не начиная нового абзаца (в большинстве browser абзацы выделяются дополнительными пустыми строками).

Например: 

Институт<BR>В котором мы учимся<BR>

даст на экране:

Институт
В котором мы учимся

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

Используя команду <HR> Вы можете разделить текст горизонтальной чертой:

          Этот текст сверху от линии.

          Этот текст снизу от линии.

Верхние и нижние индексы

Если просмотрщик поддерживает стандарт языка HTML 3.2, то вы можете использовать в тексте верхние и нижние индексы с помощью команд SUP and SUB.

Эти команды уменьшают размер текста, располагаемого вверху или внизу от строки. Например: 

верхний индекс B<sup>a</sup>
и нижний индекс B<sub>a</sub>

имеет следующий вид:

верхний индекс Ba и нижний индекс Ba

Преформатируемый текст

Вы можете включать в гипертекстовый документ текстовые фрагменты набранные и отформатированные в каком-либо текстовом редакторе (например, Norton Edit) без разметки HTML, в том виде как от есть. Для этого используется команда <pre> </pre>. Текст за исключением специальных символов будет выводится равноширинным шрифтом с сохранением всех пробелов и переводов строк исходного текста. Специальные символы нужно набирать по правилам, которые были указаны выше.

Например: 

<pre>
   Вы можете включать в гипертекстовый документ текстовые
фрагменты  набранные  и отформатированные  в   каком-либо
текстовом редакторе  (например, Norton Edit) без разметки
HTML,  в  том  виде как от есть.   Для этого используется
команда <pre>  </pre>. 
</pre>

Что даст: 

   Вы можете включать в гипертекстовый документ текстовые
фрагменты  набранные  и отформатированные  в   каком-либо
текстовом редакторе  (например, Norton Edit) без разметки
HTML,  в  том  виде как от есть.   Для этого используется
команда <pre> </pre>.

Замечание: не рекомендуется для этого использовать тексты, подготовленные в редакторе "ЛЕКСИКОН", так как последний вставляет в документ собственные символы форматирования, которые могут быть показаны просмотрщиком пользователю, причем в самом неожиданном виде, особенно если ваш сервер использует перекодировщики для перевода текста в различные кодовые таблицы.

Hosted by uCoz