Информация
Содержание

HTML в Домино

HTML (Hyper Text Markup Language) – это язык разметки (форматирования) документов. Для того чтобы текстовые файлы могли быть прочитаны программой просмотра (броузером), эти тексты размечают тегами HTML. Тег – это управляющий код, заключенный в угловые скобки <…>.

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

В ДОМИНО один из вариантов отображения результата отчетов заключается в вызове HTML броузера. Для корректного отображения результата шаблон отчета должен быть подготовлен в соответствии с правилами языка HTML.

Теги структуры документа

Документы HTML состоят из двух основных частей: заголовка (HEAD) и тела (BODY). И в заголовке и в теле используются теги. Некоторые теги могут использоваться сами по себе, другие теги должны применяться парами (открывающий и закрывающий теги).

Обычно, структура документа выглядит вот таким образом:

<HTML>

<HEAD>

…

</HEAD>

<BODY>

…

</BODY>

</HTML>

  • <HTML> и </HTML>  - начало и конец документа. Указывать эти теги не обязательно.
  • <HEAD> и  </HEAD> - начало и конец заголовка документа.
  • <BODY> и </BODY> - начало и конец тела документа.
    • BGCOLOR – цвет фона.
    • TEXT - цвет текста. 
    • LINK - цвет непросмотренной гипертекстовой ссылки
    • VLINK - цвет просмотренной гипертекстовой ссылки
    • BACKGROUND – имя графического файла, выбранного в качестве фона.

Теги названий и заголовков

  • <TITLE> и </TITLE> - начало и конец наименования документа.
  • <H1> и  </H1> , <H2> и  </H2> … <H6> и  </H6> - начало и конец заголовков разных уровней. Каждому уровню заголовка соответствует конкретный стиль. Обычно при переходе от стиля H1 к стилю H6 постепенно уменьшаются размер и толщина шрифта заголовка.

Теги выделения

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

  • <BLOCKQUOTE> и </BLOCKQUOTE> - начало и конец цитаты. Текст отображается с отступом.
  • <B> и </B> - жирный текст.
  • <I> и </I> - курсив.
  • <U> и </U> - подчеркивание.
  • <S> и </S> - перечеркнутый текст.
  • <BIG> и </BIG> - крупный шрифт.
  • <SMALL> и </SMALL> - мелкий шрифт.

Обычно броузер преобразует текст и при отображении его на экран игнорирует лишние пробелы, символы табуляции и символы концов строк. Если требуется чтобы текст на экране выглядел точно так, как был введен, то следует воспользоваться тегом PRE.

  • <PRE> и </PRE> - форматированный текст.

Однако здесь есть одна особенность. Дело в том, что тексты заданного формата броузер изображает с помощью моноширинного шрифта, в котором все символы занимают

один и тот же размер по горизонтали. Поэтому, чтобы обеспечить точное воспроизведение текста заданного формата необходимо использовать при его наборе один из моноширинных шрифтов.

Для управления шрифтом документа применяются теги <BASEFONT> и <FONT>.

  • <BASEFONT> - задает основной шрифт документа.
  • <FONT> - задает текущий шрифт в отдельных местах текста.
    • FACE - гарнитура шрифта.
    • SIZE – размер шрифта. Размер устанавливается либо цифрой от 1 до 7 (по умолчанию 3), либо относительно текущего размера (плюс – увеличить, минус- уменьшить.  Например, увеличить размер текущего шрифта относительно основного на 2 пункта: size=+2.
    • COLOR – цвет шрифта.

Теги форматирования

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

  • <BR> - тег перевода строки, отделяет строку от последующего текста. Применяется одиночно.
  • <P> - тег абзаца, отделяет строку от последующего текста и добавляет пустую строку, которая зрительно выделяет абзац. Применяется одиночно.

Для предотвращения произвольного разрыва текста при переполнении строки окна броузера применяются теги NoBr и WBR.

  • <NoBR> и </NoBR> - начало и конец неразбиваемого блока текста.
  • <WBR> - указывает место в неразбиваемом блоке, где все-таки можно сделать разрыв.

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

  • <HR> - горизонтальный (неграфический) разделитель.
    • SIZE – задает толщину полосы в пикселях.
    • WIDTH – задает длину полосы в пикселях или в процентах от ширины окна.
    • ALIGN – задает расположение полосы, если длина полоса меньше ширины экрана. Может принимать одно из следующих значений:  LEFT, RIGHT или CENTER – слева, справа или по центру.
    • NOSHADE – вместо обычной полосы будет изображена широкая сплошная темная полоса.

Стиль текста

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

  • <STYLE> и </STYLE> - начало и конец описания стиля.

По существу, задание стиля – это назначение элементов выделения для тела и заголовков разного уровня. Если определить стиль заголовка H1 внутри заголовка документа <HEAD>, то всякий раз, когда будет встречаться пара тегов <H1> и </H1>, все, что расположено между ними, будет отображаться этим стилем.

Можно подключить к документу файл со списком стилей:

Подробнее об этой возможности написано ниже.

Таблица

Таблица представляет собой особую часть документа. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы называется ячейкой.

Таблицы состоят из названия таблицы, заголовков столбцов и ячеек. Заполняется таблица горизонтальными рядами – ячейка за ячейкой, слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.

Таблицы, как правило, показываются на экране ‘приподнятыми’ над поверхностью страницы, а ячейки – ‘вдавленными’ в тело таблицы. Окантовкой выделяются только заполненные ячейки.

Структура таблицы:

<TABLE >

<CAPTION> название таблицы </CAPTION>

<TR>

<TH> имя первого столбца </TH> <TH> имя второго столбца </TH>

</TR>

<TR>

<TD> первая ячейка </TD> <TD> вторая ячейка </TD>

</TR> ...

...

</TABLE>

  • <TABLE> и </TABLE> - начало и конец таблицы.
    • ALIGN - вид горизонтального выравнивания всей таблицы (по умолчанию LEFT).
    • WIDTH - ширина всей таблицы в пикселях или в процентах от ширины окна.
    • BORDER - ширина внешней рамки вокруг таблицы и ячеек в пикселях. Значение 0 (по умолчанию) означает, что таблица без рамки. Некоторые броузеры допускают написание BORDER без значения, которое воспринимается, как BORDER=1.
    • CELLSPACING - ширина рамки между ячейками в пикселях. Обычно атрибут BORDER (с ненулевым значением) устанавливает по умолчанию CELLSPACING=1.
    • CELLPADDING - промежуток  между содержимым ячейки и ее рамкой в пикселях.
    • BGCOLOR – цвет всей таблицы.            
  • <CAPTION> и </CAPTION> - начало и конец названия таблицы.
    • ALIGN - местоположение названия. Допустимые значения: TOP, BOTTOM.
  • <TR> и </TR> - начало и конец ряда ячеек.
    • ALIGN - вид горизонтального выравнивания в ячейках строки. Допустимые значения: LEFT, CENTER и RIGHT.
    • VALIGN - вид вертикального выравнивания в ячейках строки. Допустимые значения: TOP, MIDDLE и BOTTOM.
    • BGCOLOR – цвет ряда ячеек.      
  • <TH> и </TH> - начало и конец строки заголовка таблицы.
    • COLSPAN – объединение столбцов. Значение – целое положительное число.
    • WIDTH - ширина столбца в пикселях или в процентах от ширины таблицы.
    • ALIGN - вид горизонтального выравнивания в ячейках столбца. Допустимые значения: LEFT, CENTER и RIGHT.
    • VALIGN - вид вертикального выравнивания в ячейках столбца. Допустимые значения: TOP, MIDDLE и BOTTOM.
  • <TD> и </TD> - начало и конец одной ячейки. Открывающие метки обязательны, закрывающие - нет.
    • ROWSPAN - объединение ячеек. Значение – целое положительное число.
    • WIDTH - ширина ячейки в пикселях или в процентах от ширины таблицы.
    • ALIGN - вид горизонтального выравнивания в ячейке. Допустимые значения: LEFT, CENTER и RIGHT.
    • VALIGN - вид вертикального выравнивания в ячейке. Допустимые значения: TOP, MIDDLE и BOTTOM.
    • NOWRAP – запрещает автоматический переход текста на новую строку при заполнении ячейки.
    • HEIGHT – высота содержимого ячейки в пикселях.
    • BGCOLOR – цвет ячейки.           

Теги ссылок

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

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

<A NAME=”имя файла”> и </A> - установка якоря.

<A HREF=”имя метки”> и </A> - текстовая ссылка на другой документ.

<A HREF=”#имя метки”> и </A> - ссылка на метку.

<A HREF=”имя файла#имя метки”> и </A> - ссылка на метку другого документа.

Теги для создания списков

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

Упорядоченные списки задаются парным тегом <OL>, а неупорядоченные – парным тегом <UL>. Оба вида используют для элементов списка тег <LI>.

  • <OL> и </OL> - начало и конец упорядоченного списка.
    • TYPE – вид индексации элементов списка. Может принимать следующие значения: 1, А, а, i, I (арабские цифры, прописные буквы латинского алфавита, строчные , буквы латинского алфавита, римские цифры прописными буквами, римские цифры строчными буквами).
    • START - Начальный номер (или порядковый номер буквы), с которого начинается нумерация элементов списка. По умолчанию равен 1.
  • <UL> и </UL> - начало и конец неупорядоченного списка.
    • TYPE – вид маркера. Может принимать следующие значения: DISC (круг), CIRCLE (окружность), SQUARE (квадрат).
  • <LI> - элемент списка. Непарный тег.
    • TYPE – изменение вида маркера или вида индексации.
    • VALUE – изменение номера элемента.

Списки с подзаголовками – это специальные списки, каждый элемент которых состоит из двух частей. Например, подзаголовок и описание. Перед элементами таких списков не ставятся ни маркеры, ни порядковые  номера. Список открывается тегом <DL>. Перед подзаголовком ставится тег <DT>, а перед описанием ставится тег <DD>.

  • <DL> и </DL> - начало и конец списка с подзаголовками.
  • <DT> - подзаголовок элемента списка. Непарный тег.
  • <DD> - описание элемента списка. Непарный тег.

Встраивание графического рисунка

Графика в текст вставляется с помощью тега <IMG>.

  • <IMG > - встраивание рисунка.
    • SRC – файл, содержащий рисунок.
    • ALIGN – выравнивание текста и рисунка. Может принимать следующие значения:  TOP, TEXTTOP, MIDDLE, BOTTOM, LEFT, RIGHT.
    • HEIGHT - высота в пикселях.
    • WIDTH - ширина в пикселях.
    • HSPACE - ширина незаполненного пространства слева и справа от рисунка в пикселях.
    • VSPACE - высота незаполненного пространства выше и ниже рисунка в пикселях.

Прочие теги

В документы можно вставлять строки, которые не будут отображаться броузером. Это строки комментариев. Внутри комментариев другие теги использовать нельзя.

<!  текст  > - комментарий.

При наборе документа могут использоваться только буквы, цифры и символы, кроме зарезервированных. Зарезервированные символы HTML применяет для своих целей. Если возникла необходимость вставить в текст документа зарезервированный символ, то вместо него надо вставить его буквенный эквивалент.

Список буквенных эквивалентов зарезервированных символов:

 

“

&quot

&

&amp

< 

&lt

> 

&gt

неразрывный пробел

&nbsp

Для записи символа, не представленного на клавиатуре, вставляется цифровой эквивалент этого символа. Указываются знаки &# и, следом, код ASCII нужного символа.

Задание цвета

Цвет задается указанием в шестнадцатеричном виде трех его составляющих: красной, зеленой  и синей.

Названия и цифровые эквиваленты наиболее распространенных цветов:

Black (Черный)                                 = #000000     

Navy (Темно-синий)            = #000080

Silver (Серебро)                    = #C0C0C0

Blue (Синий)                        = #0000FF

Maroon (Темно-бордовый)  = #800000

Purple (Фиолетовый)           = #800080

Red (Красный)                     = #FF0000

Fuchsia                                  = #FF00FF    

Green (Зеленый)                   = #008000

Teal                                        = #008080

Lime (Известь)                      = #00FF00

Aqua                                      = #00FFFF

Olive (Оливковый)               = #808000

Gray (Серый)                                    = #808080     

Yellow (Желтый)                  = #FFFF00

White (Белый)                                   = #FFFFFF    

 

Нет комментариев
Наверх