Лекция: Мировые информационные ресурсы

шрифты с засечками для самого текста (например, ТАЙМС).

3.Реже используйте выделения, подчеркивания и жирные шрифты.

Существуют так же дескрипторы:

1) <b>.</b> - выделяет текст в контейнере с помощью жирного шрифта.

2) <i>.</i> - выделяет текст в контейнере с помощью наклонного текста (курсив).

Пример логического форматирования.

1) Парный дескриптор <CITE>.</ CITE >

Используется для цитат. Обычно браузером отображается в виде курсива

(наклонного текста).

2) Парный дескриптор <BLOCKQUOTE>.</BLOCKQUOTE>

Используется для выделения больших цитат. (Браузер обычно делает отступ от

левого края).

В большинстве случаев браузер не допускает пересечение дескрипторов.

Пример пересечения:

<PRE>

<FONT>

</ PRE >

</ FONT >

(В лучшем случае просто не запустится).

Но есть и исключения, например <b>.<i>.</b>.</i>

В том месте, где пересеклись дескрипторы <i> и <b>, текст

будет выделен жирным курсивом.

3) Парный дескриптор <U>.</U> - подчеркивание.

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

Используются для отображения символов, которые являются в HTML управляющими и

не могут быть отображены обычными способами.

Например, (>) - больше или (<) – меньше. Браузер ее воспринимает как

начало контрольной последовательности.

Для того чтобы все-таки отобразить эту скобку необходимо набрать

последовательность:

1) &lt - отобразится левая скобка.

2) &gt - отобразится правая скобка.

3) &copy - отобразится значок авторского права.

4) &deg - отобразится значок температуры.

5) &nbsp; отобразится символ пробела (жесткого пробела).

Если пробел указан с помощью данного специального символа, то разрыв строки не

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

Сложное форматирование

В отличие от простого форматирования символов и абзацев в HTML сложное

форматирование производится с помощью многоуровневых конструкций, основу

которых составляет дескриптор, задающий способ форматирования (список,

таблица) и элементы более низкого уровня, используемые непосредственно для

отображения текста.

Пример:

<OL>

<LI>abc</LI>

<LI>def</LI>

</OL>

Данная конструкция формирует нумерованный список, при этом дескриптор <OL>

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

отобразится:

1.abc или a. abc

2.def b. def

1. Парный дескриптор <LI>.</LI>

(от английского слова List - список) используется для отображения элементов

списка. Атрибутов не имеет.

2. Парный дескриптор <OL>.</OL> - формирует нумерованный список (или упорядоченный).

• Изменение способа нумерации производится с помощью атрибута TYPE.

Например:

<OL TYPE=[1/a/A/I] , где

1 - арабские цифры.

а – прописные буквы.

А – заглавные буквы.

I – римские цифры.

• Атрибут START позволяет указать номер, с которого начинается нумерация.

Например, если START=3, то нумерация начнется с трех или с буквы “c”.

2. Парный дескриптор <UL>.</UL>

Формирует не упорядоченный список (маркерный).

• abc
• def

Например:

<UL TYPE=disc, square, circle>

<LI>abc</LI>

</UL>

Где disc – жирная точка; square - квадрат; circle – не закрашенная окружность.

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

Многоуровневые списки.

Например:

<UL TYPE=disc, square, circle>

<LI>abc</LI>

<UL>

<LI>def</LI>

<LI>ghi</LI>

</UL>

</UL>

Отобразиться:

• abc
• def
• ghi

Браузер будет делать очередной отступ слева.

Таблицы.

1. Парный дескриптор <TABLE>.</TABLE>

В его контейнере должны быть сформированы элементы таблицы (ячейки) в которых

и будет информация.

2. Парный дескриптор <TR>.</TR> - формирует строку таблицы.

3. Парный дескриптор <TD>.</TD> - формирует ячейку внутри строки.

Пример:

<TABLE>

<TR> <TR>

<TR> <TR>

</TABLE>

Атрибуты дескриптора <TABLE>:

• Атрибут WIDTH – определяет ширину таблицы (в процентах или пикселях).

Пример:

<TABLE WIDTH=100% или WIDTH=200>

• Атрибут HEIGHT – высота (принимает такие же

  значения, как и атрибут WIDTH).

• Атрибут ALIGN

  – выравнивание таблицы по ширине относительно краев окна.

• Атрибут

  BORDER – определяет ширину рамки (если значение данного атрибута 0,

  то рамки отсутствуют).

• Атрибут bgcolor

  – для формирования фона таблицы с помощью цвета.

• Атрибут

  background - для формирования фона таблицы с помощью картинки.

• Атрибут cellpadding – для указания отступов от краев

  ячейки (в пикселях).

• Атрибут cellspacing –

  расстояние между ячейками.

Обычная таблица

• Атрибут bordercolor – цвет границ ячеек (рамки).

Атрибуты дескриптора <TR>:

1) Атрибут ALIGN – выравнивание текста в ячейках.

2) Атрибут VALIGN – определяет вертикальное выравнивание текста в ячейках.

Возможные значения атрибута VALIGN:

· =TOP – по верху.

· =MIDDLE – по центру.

· =BOTTOM – по нижнему краю ячейки.

3)Атрибут bgcolor – для указания фона строки.

Атрибуты дескриптора <TD>:

• Атрибут ALIGN.
• Атрибут VALIGN.
• Атрибут bgcolor.

Вышеперечисленные атрибуты действуют так же, как для дескриптора <TR>.

Дополнительно атрибуты:

• Атрибут COLSPAN – объединение ячеек, находящихся в

  одной строке. Значение атрибута равно количеству близлежащих ячеек

  находящихся в одной строке, которые будут объединены.

Пример:

<TABLE>

<TR> </TR>

<TR> </TR>

</TABLE>

• Атрибут ROWSPAN – объединение ячеек,

  находящихся в одном столбце. Значение атрибута указывает количество

  близлежащих ячеек находящихся в одном столбце, которые будут объединены.

Пример:

<TABLE>

<TR> </TR>

<TR> </TR>

</TABLE>

Форматирование текстовых фрагментов HTML документа

Кроме ширины и высоты таблицы в целом можно регулировать ширину и высоту ячеек

(то есть использовать такие же атрибуты в дескрипторе <TD>, в пикселях и

в процентах).

Если они не указаны, то браузер выравнивает размер ячейки по ширине текста.

Таблица является наиболее часто употребляемым инструментом в Web дизайне,

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

Подобно спискам, таблицы могут быть вложены в другие таблицы.

Пример:

Чтобы добавить такую таблицу в контейнере дескриптора ячейки пишут следующее:

<TD>

<TABLE>

<TR><TD></TD><TD></TD></TR>

<TR><TD></TD><TD></TD></TR>

</TABLE>

<TD>

Фон отдельных ячеек могут отображать не все браузеры.

Размещение графических изображений в HTML документе

Для размещения изображений используются в основном два графических формата:

• JPG
• GIF

1.Формат JPG.

Плюсы - Графическое изображение, сохраненное в данном формате, имеют

наименьший объем.

Минусы – при сохранении происходит довольно сильное сжатие картинки, а

при сжатии изображение теряет качество и наблюдается эффект пикселизации.

Пример:

Картинка сжалась в девять раз.

Девять пикселей заменяются одним пикселем среднего цвета.

Изображение сохраняется в формате .jpg в том случае, если необходимо

сохранить максимальное количество оттенков.

2.Формат GIF.

При сохранении картинок в этом формате также происходит сжатие, но

пикселизации не происходит.

Минусы – изображение сохраняется с помощью ограниченного количества

цветов (обычно 256 цветов) => изображение будет не очень красочным.

С помощью формата .gif сохраняются навигационные кнопки, навигационные

графические элементы и фоновые изображения.

Для внедрения изображения используется одиночный дескриптор <IMG>.

• Атрибут SRC – основной атрибут. Он указывает

  путь и имя файла, в котором содержится графический элемент.

Пример:

<IMG SRC=1.gif>

• Атрибут WIDTH – ширина внедряемого

  изображения (в пикселях).

• Атрибут HEIGHT

  - высота внедряемого изображения (в пикселях).

• Атрибуты

  VSPACE, HSPACE – устанавливают отступ текста от внедряемого в

  HTML документ изображения.

• Атрибут BORDER

  – задает толщину рамки вокруг изображения.

• Атрибут ALT

  – задает альтернативный текст, который появляется в том месте, где должны

  быть картинки.

Пример:

ALT=”Здесь была картинка”.

Обычно атрибут используют при размещении навигационных изображений (ссылок),

а так же при размещении изображений, о которых надо дать знать поисковой

системе.

• Атрибут ALIGN – выравнивание.

Возможные значения:

=LEFT, CENTER, RIGHT.

Добавляются значения: =TOP, MIDDLE, BOTTOM.

• Если не используются атрибуты WIDTH, HEIGHT,

  то изображение внедряется оригинального размера.

Если используется только один атрибут, например HEIGHT, то браузер

уменьшит или увеличит ширину пропорционально изображению.

Использование гипрессылок

Гипрессылка – это URL адрес того документа, который

привязан к одному из элементов Web страницы (текстовому или графическому).

Для внедрения ссылок в HTML документ применяется парный дескриптор <A>.</A>.

Пример:

<A HREF=”http://www.kirov.ru/price.htm”>

Все, что находится внутри контейнера, называется элемент привязки (текстовый

фрагмент или графический элемент).

Страницы: 1, 2, 3, 4, 5, 6