 |
Нумерованные списки
|
|
|
|
Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.
Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.
Пример кода для нумерованного списка:
| <ol> <li>кошки</li> <li>собаки</li> <li>лошади</li> </ol> |
Результат:
- кошки
- собаки
- лошади
Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:
- type="A" - нумерация заглавными латинскими буквами (A, B, C).
- type="a" - нумерация прописными латинскими буквами (a, b, c).
- type="I" - нумерация большими римскими цифрами (I, II, III).
- type="i" - нумерация маленькими римскими цифрами (i, ii, iii).
Пример кода с римскими цифрами:
| <ol type="I"> <li>кошки</li> <li>собаки</li> <li>лошади</li> </ol> |
Результат:
- кошки
- собаки
- лошади
Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).
Пример кода:
| <ol type="I" start="3"> <li>кошки</li> <li>собаки</li> <li>лошади</li> </ol> |
Результат:
- кошки
- собаки
- лошади
У тега <li> можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.
Пример кода:
| <ol> <li>красный</li> <li>оранжевый</li> <li>желтый</li> <br>............... <li value="7">фиолетовый</li> </ol> |
Результат:
|
|
|
- красный
- оранжевый
- желтый
...............
- фиолетовый
Маркированные списки
В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.
Пример кода для маркированного списка:
| <ul> <li>кошки</li> <li>собаки</li> <li>лошади</li> </ul> |
Результат:
- кошки
- собаки
- лошади
По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:
- type="disc" - закрашенный кружочек.
- type="circle" - пустой кружочек.
- type="square" - закрашенный квадратик.
Пример кода для маркированных списков:
| <ul type="disc"> <li>кошки</li> <li>собаки</li> <li>лошади</li> </ul> <ul type="circle"> <li>кошки</li> <li>собаки</li> <li>лошади</li> </ul> <ul type="square"> <li>кошки</li> <li>собаки</li> <li>лошади</li> </ul> |
Результат:
- кошки
- собаки
- лошади
- кошки
- собаки
- лошади
- кошки
- собаки
- лошади
Списки определений
Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения - в теги <dd></dd>.
Пример кода списка определений:
| <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> <dt>Термин 2</dt> <dd>Определение термина 2</dd> </dl> |
Результат:
Термин 1
Определение термина 1
Термин 2
Определение термина 2
Вложенные списки
Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков.
Пример кода многоуровневого списка:
|
|
|
| <ul> <li>Животные <ol> <li>кошки</li> <li>собаки</li> </ol> </li> <li>Растения <ol> <li>деревья</li> <li>цветы</li> </ol> </li> </ul> |
Результат:
- Животные
- кошки
- собаки
- Растения
- деревья
- цветы
Уровень вложенности может быть любым, главное не запутаться.
8. Работа с изображениями - тег img
Содержание:
- Фоновые изображения
- Встраивание изображений
- Размеры изображений
- Отделение изображения от текста
- Альтернативный текст
- Изображение в качестве ссылки
| ЗАДАНИЕ. В процессе чтения выполнить все примеры в одном документе HTML. Документ exemple1.htm создайте в отдельном файле. По окончании откройте документ в различных браузерах. |
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.
Как правило, все изображения для сайта хранятся в отдельной папке. А пути к изображениям прописываются также, как в ссылках.
Во всех последующих примерах, кроме первого, пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке index08.files, находящейся на том же уровне что и эта страница.
Фоновые изображения
Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге <body> атрибут background="fon.gif", рисунком fon.gif будет залито все окно браузера.
Пример кода:
| <body background="../exemple1_files/fon.gif" bgcolor="pink"> |
Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor. Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor.
Встраивание изображений
Для размещения на странице изображений используется тег <img>, имеющий единственный обязательный параметр src, определяющий URL-адрес изображения.
Пример кода:
| <img src="index08.files/fish0000.gif"> Остальное содержимое документа |
Результат:
Остальное содержимое документа
Согласитесь, текст рядом с картинкой выглядит не очень красиво.
Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметр align.
|
|
|
У этого параметра есть несколько значений. Рассмотрим их все на примерах.
Пример кода с параметром align="left"
| <img src="index08.files/fish0000.gif" align="left"> Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек. |
Результат:
Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.
Пример кода с параметром align="right"
| <img src="index08.files/fish0000.gif" align="right"> Картинка справа, а текст обтекает ее справа и этот текст может занимать несколько строчек. |
Результат:
Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.
Пример кода с параметром align="top"
| <img src="index08.files/fish0000.gif" align="top"> Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту. |
Результат:
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту.
Пример кода с параметром align="middle"
| <img src="index08.files/fish0000.gif" align="middle"> <font size=7>Выравнивание</font> середины изображения по базовой линии текущей строки. |
Результат:
Выравнивание середины изображения по базовой линии текущей строки.
* крупный шрифт сделан для наглядности разницы между middle absmiddle.
Пример кода с параметром align="absmiddle"
| <img src="index08.files/fish0000.gif" align="absmiddle"> <font size=7>Выравнивание</font> середины изображения посередине текущей строки. |
Результат:
Выравнивание середины изображения посередине текущей строки.
Пример кода с параметром align="bottom"
| <img src="index08.files/fish0000.gif" align="bottom"> <font size=7>Выравнивание</font> нижней границы изображения по базовой линии текущей строки. |
Результат:
Выравнивание нижней границы изображения по базовой линии текущей строки.
|
|
|
Пример кода с параметром align="absbottom"
| <img src="index08.files/fish0000.gif" align="absbottom"> <font size=7>Выравнивание</font> нижней границы изображения по нижней границе текущей строки. |
Результат:
Выравнивание нижней границы изображения по нижней границе текущей строки.
Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег <br> с параметром clear, который запрещает обтекание. Обтекание можно запретить с правой стороны (right), с левой стороны (left) и с обеих сторон (all).
Пример кода:
| <img src="index08.files/fish0000.gif"> <br clear="all"> Остальные элементы документа |
Результат:
Остальные элементы документа
Размеры изображений
Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки.
Для этого у тега <img> существуют параметры width - ширина и height - высота. Они задаются в пикселах или в процентах (процент от ширины экрана)
При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.
Пример кода:
| <img src="index08.files/fish0000.gif"> <img src="index08.files/fish0000.gif" width="50" height="50"> <img src="index08.files/fish0000.gif" width="25" height="25"> |
Результат:
Отделение изображения от текста
Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не всегда красиво. Для решения этой проблемы имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.
Пример кода:
| <img src="index08.files/fish0000.gif" align="left" hspace="20" vspace="20"> Остальное содержимое документа теперь не прилипает к изображению. |
Результат:
Остальное содержимое документа теперь не прилипает к изображению.
Альтернативный текст
Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик (в Internet Explorer) или другую иконку (в других браузерах). Неплохо было бы дать ему подсказку, что изображено на рисунке. Для этого используется параметр alt. Текст из этого параметра будет отображаться вместо картинки (если отключен режим загрузки изображений). В случае же, если картинка отображается, этот параметр дает подсказку при наведении курсора мыши, правда, не во всех браузерах.
Пример кода:
| <img src="index08.files/fish0000.gif" alt="рыбка"> <img src="index08.files/fig.gif" alt="рыбка"> |
Результат:
|
|
|
|
|
|
