Раздел 4. Форматирование шрифта

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

Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом. Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

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

<EM> ... </EM>

От английского emphasis — акцент.

<STRONG> ... </STRONG>

От английского strong emphasis — сильный акцент.

<CODE> ... </CODE>

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

Задание 1.5

Наберите в редакторе «блокнот» текст следующего HTML-документа:

 

Сохраните документ с именем пример5.htm, откройте в браузере.

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

Раздел 5. Списки

5.1. Ненумерованные списки: <UL> ... </UL>

Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Например, такой HTML-текст

<UL> <LI>утро; <LI> день; <LI> вечер </UL>Приведет к отображению на экране такого вот списка· утро; · день; · вечер

Обратите внимание: у метки <LI> нет парной закрывающей метки.

5.2. Нумерованные списки: <OL> ... </OL>

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

<OL> <LI>утро; <LI>день; <LI>вечер </OL>

получится вот такой список:

1. утро; 2. день; 3. вечер

Вид маркера определяется атрибутом type. В нумеровано списке можно задать следующие значения атрибута:

1-нумерация арабскими цифрами (по умолчанию);

А- большими латинскими буквами по алфавиту;

а- маленькими латинскими буквами;

I- большими римскими цифрами;

i- маленькими римскими цифрами;

Например,

<ol type=”a”><li>Первый элемент</li><li>Первый элемент</li><li>Первый элемент</li></ol>

В маркированном списке значения атриута type такие:

disc- закрашенный кружок( по умолчанию);

circle-не закрашенный кружок;

square-закрашенный квадратик;

Задание 6

 

5.3. Списки определений: <DL> ... </DL>

Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:

<DL> <DT>HTML <DD>Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. <DT>HTML-документ <DD>Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). </DL>

 

Этот фрагмент будет выведен на экран следующим образом:

HTML Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. HTML-документ Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

 

Обратите внимание: точно так же, как метки <LI>, метки <DT> и <DD> не имеют парных закрывающих меток. Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, вот такой фрагмент HTML-текста:

<DL COMPACT> <DT>А <DD>Первая буква алфавита <DT>Б <DD>Вторая буква алфавита <DT>В <DD>Третья буква алфавита </DL>

 

будет выведен на экран примерно так:

А Первая буква алфавита Б Вторая буква алфавита В Третья буква алфавита

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

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

Задание 1.7

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример6.htm, откройте в браузере.

Раздел 6. Форматированный текст: <PRE> ... </PRE>

В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение. Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.

Задание 1.8

Добавьте в пример6 фрагмент:

Раздел 7. Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE>

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

Задание 1.9

Добавьте в пример6 фрагмент:

Контрольные вопросы:

1. Из каких разделов состоит html – документ?

2. Как создать маркированный и нумерованный списки?

3. Как нарисовать горизонтальную линию?

4. Как вставить в html – документ заранее отформатированный текст?

5. Какие вы знаете команды для шрифтового выделения текста внутри html – документа?

Лабораторная работа №2
Создание гиперссылок, работа с изображениями

 

Цель работы:получить навыки создания гиперссылок в html – документе.

Задачи:

· научиться применять локальные и глобальные ссылки;

· научиться вставлять графические элементы в html – документ ;

· научиться задавать размеры изображений.