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

Физические (макетные) стили

Вазовые элементы HTML-документа

Приведем некоторые элементы HTML, относящиеся к пред­ставлению документа.

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

Н1 — жирный, очень крупный шрифт, текст центрирован. Между заголовком и последующим текстом вставляется одна или две пустые строки. При выводе на принтер заголовок печа­тается на новой странице;

Н2 — жирный крупный шрифт, до и после заголовка поме­щаются одна или две пустые строки;

нз — наклонный крупный шрифт, до и после заголовка по­мещаются одна или две пустые строки. Печатается с небольшим отступом;

Н4 — жирный нормальный шрифт, до и после заголовка по­мещается пустая строка;

Н5 — наклонный шрифт, как и для Н4, пустая строка ставит­ся перед заголовком;

нб — жирный шрифт, перед заголовком ставится пустая строка.

тт — (телетайп) шрифт фиксированной ширины; в — жирный или еще каким-либо образом выделенный шрифт;

I — наклонный шрифт (или видоизмененный еще каким-ли- бо образом);

и — подчеркивание.

Интерпретация:

ем — выделение символов (обычно наклон шрифта), смы­словое усиление определенного слова или фразы;

strong — более четкое выделение, привлечение внимания (обычно применение более жирного шрифта);

code — пример кода; обычно фиксированный шрифт (фор­мулы, выражения);

samp — последовательность символов (названия команд, примеры);

var — имя переменной (имена переменных в примерах, формулах);

dfn — определение к какому-либо термину — обычно жир­ный наклонный;

cite — цитата, обычно наклонный шрифт (названия доку­ментов, выдержки из документов, цитируемые фразы и т. д.).

Рассмотрим пример документа с разметкой HTML, содержа­щий приведенные выше элементы управления стилем символов текста:

<HTML>

<Н1> Примеры управления шрифтами </Н1>

<Н1> Заголовок 1 </Н1>

<Н2> Заголовок 2 </Н2>

<Ь> Это текст Bold </bxp>

<i> Это текст Italic</ixp>

<и>,Это подчеркнутый текст </и> <р>

<strike> Это перечеркнутый текст </strike>

<р>В обычный текст можно вставить <sub> подстрочный

</sub> текст, что позволяет написать выражение типа <sub>max</sub>=max{P<sub>l</sub>,P<sub>2</sub>}<р> В обычный текст можно вставить <sup> надстрочный</зир> текст, что позволяет написать обозначение изотопа в виде Cs<sup>134</sup> </HTML>

Пример отображения этого текста браузером Mozilla FireFox представлен на рис. 7.2.

> Mozilla Firefox

Файл Правка Вид Переход Закладки Инструменты Справка О

СЙ © О 1й «е ///medtayGOGA_1 GB/_____ SNIMKI/htm/htrnll И1гУ jj | EL |

0SUSE LWUX ^Entertainment 0News §3 Internet Search ^Reference lilMaps and Drectons »


Примеры управления шрифтами Заголовок 1

Заголовок 2

Это текст Bold

Это текст Italic Это подчеркнутый текст

В обычный текст можно вставить подстрочный текст, что позволяет написать выражение типа Рптах=тах{Р-|.Р2}

Найти: г Просмотр- вШ Сегодня 1 form2.htm Л htmMhtm в Ш Вчера •■• j Jrtfroducti... - _3 Introducb... гintroducb... ; LJ trtfroducti... ;J3 introducb... □ Your Horn... ЭЙ 2днейназад □ BeOnUne,., ■■■■■■JS form,htm - J html2.htm i_3 trtfroductL Introduce... ; Introducb... •J) Introducb,.. I Гокяо

В обычный текст можно вставить "WPwittm текст что позволяет написать обозначение изотопа в виде Cs134


 

 


Рис. 7.2. Управление отображением стиля символов текста

Некоторые дополнительные возможности. Списки. В HTML

предусмотрены следующие виды списков:

• UL — ненумерованный список (неупорядоченный);

• 0L — нумерованный список (упорядоченный);

DL — список определений. Типичный неупорядоченный список:

<UL>

<LH>Title of WWW programmes (NCSA). <LI> NCSA HTTPD; <LI> NCSA MOSAIC <UL>

<LH>Title of WWW programmes (CERN).

<LI> CERN HTTPD;

<LI> AGORA - email robot;

<LI> HTTPD CERN;

<LI> WWW Line Browser;

<LI> Arena.

</UL>

<UL>

<LH> Title of WWW programmes (Netscape).

<LI> Netsite - server;

<LI> Netscape Navigator.

</UL>

Пример интерпретации данного списка браузером NCSA Mosaic приведен на рис. 7.3, а.

Таблицы. Для описания таблиц служит элемент table, кото­рый является контейнером для других элементов описания таб­лицы. Наиболее часто он употребляется с атрибутом border, оп­ределяющим разделительные линии граф таблицы, которые мо­гут быть либо трехмерными (рис. 7.3, б), либо обычными.

Из элементов формы следует отметить colspec и dp. colspec позволяет заказать параметры отображения каждой ко­лонки таблицы и имеет вид:

COLSPEC="l20 с8 l40"

Здесь определены три колонки шириной 20, 8 и 40 условных единиц, которые могут измеряться в пикселях и типографских интервалах или зависеть от размеров самой таблицы. Атрибут DP определяет вид десятичной точки.

Элемент TR (Table Row) дает общее описание строки таб­лицы. Обычно используется для выравнивания содержания граф строки. Способ выравнивания определяют: атрибут ALIGN — горизонтальное выравнивание, который принимает значения left, right, center, justify, decimal, и атрибут valign — вертикальное выравнивание, который принимает значения top, bottom, middle, baseline. По умолчанию графы-заголовки центрируются, а графы-данные выравниваются по левому верх­нему углу.

Элементы ТН (Table Header) и TD (Table Data) использу­ются для описания граф таблицы. Кроме выравнивания ТН и TD позволяют еще и объединять графы, как это показано в при­мере (третья строка из текстового примера, см. ниже). Это дела-

jg3 NCSA Mosaic - This is an example of simple HTML docu BOi
I File Edit Options Navigate Annotate Hotjists Help |j
  •rs^l
]XM //CI/TEXT/DOC/COURCE/FEXAMPLE.HTM *J  
Ti liTT ,r  
Title of WW*W piograriimes(NQ>A) . плелл-к писы О NCSA HTTPD, в NCSA MOSAIC Mlph Title of WWW ptogiarnmeffCERNj ; CERN HTTPD, • AGOF.A-email robot, * HTTPD CERN, ---------------------------------------------- Заемснты \в WWW Line Browset, / ' cnH1,M \ в Агяча T itle of www pi ogi amines (Netscape)' О Netsite- server, Q Netscape Novigator ♦ —
*LJ ' • -Ы  
j if SIHelp. pressFl ;............................................................ [ .............................. " ||

 

а

Э D: ТАВ1Е 80RDER2.htm - Microsoft I

Фай» Правка ВЙД: (Ъбраигюе Сервис Спр<

Q '.ffll Цприте mm

_it\__ it_v0\it_02_textl,table bob

Тестовая таблица - A test table with merged cells >
[ Average> other Misc
[height [weight category
[males |l 9 |0.003    
[females [l.7 |0 002    

 

б

Рис. 7.3. Отображение ненумерованного списка (а); пример таблицы в HTML (б)

ется с помощью атрибутов rowspan (пропуск строки) и colspan (пропуск столбца). Цифра в этих атрибутах определяет количест­во последовательно расположенных граф таблицы, объединен­ных в одну графу.

Приведем пример таблицы (интерпретация браузером MS Internet Explorer отображена на рис. 7.3, б):

CTABLE BORDER>

<CAPTION>A test table with merged cells.

<CREDIT> (Тестовая таблица) </CREDITX/CAPTION>

<TRXTH R0WSPAN=2XTH C0LSPAN=2>Average>

<TH rowspan=2>other<BR>category<TH R0WSPAN=2>Misc</TR>

<TRXTH>height<TH>weight</TR>

<TRXTH ALIGN=left>males<TD>l . 9<TD>0 .003

<TRXTH ALIGN=lef t>females<TD>l . 7<TD>0 . 002

</TABLE>

Математика. Для реализации математических выражений в языке определен элемент math, внутри которого разрешено ис­пользовать следующие элементы:

• вох (отделение одного выражения от другого);

• sub/sup (подстрочные/надстрочные индексы);

• above (запись символа над выражением);

• below (запись символа под выражением);

• sqrt, root (корни);

• array (матрицы и другие виды массивов);

• text (для записи текста);

• в, т, вт (выделение символов);

• over (черта).

Совместно с этими элементами применяются специальные символы, которые обозначают символы математические.

Например, выражение: <ROOT>3<OF>l+x</ROOT> отобража­ется как

VTTx.