Лабораторная работа №2. Изображения. Списки. Ссылки

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

3.1 Теоретические сведения

3.1.1 Изображения

Вставка картинок в html-документ осуществляется с использованием тега <img />. Тег можно записать вручную и затем с помощью автодополнения кода или с помощью панели Inspecrot
указать его атрибуты.

Тег <img /> имеет следующие атрибуты (см. таблицу 3.1):

Таблица 3.1 — Атрибуты тега

Атрибут	Назначение
src	указывает на путь к графическому файлу. Пути могу быть относительными: photo.jpg, ../img/photo2.gif или абсолютными: http://mysite.com/pic/photo3.jpg
lowsrc	путь к графическому файлу худшего качества (и меньшего размера), который грузится перед полноразмерной картинкой
alt и title	альтернативный текст для изображения, используется в качестве всплывающей подсказки или поисковыми системами
border	толщина рамки вокруг изображения. Цвет рамки определяется текущим цветом текста
hspace	горизонтальный отступ от изображения до текста
vspace	вертикальный отступ от изображения до текста
height	высота изображения, если не задана, то отображается оригинальный размер изображения, если указана до изображение масштабируется
width	ширина изображения, если при указании ширины одновременно с высотой не сохраняются пропорции, то изображение искажается
align	определяет как рисунок будет выравниваться и обтекаться текстом (см. рисунок 2.1)

Рисунок 3.1 – Примеры выравнивания изображения относительно текста

3.1.2 Списки

В языке HTML различают следующие виды списков:

1. маркированные списки;
2. нумерованные списки;
3. списки определений.

Для создания маркированных списков применяют тэги <ul> и <li>. Тегом <ul> отмечается начало и окончание всего списка. Тэгом <li> обозначают начало и конец отдельного элемента списка.

По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута type можно изменить стиль маркирования.
Пример использования списка приведен в Листинге 3.1:

Листинг 3.1 — Пример маркированного списка

Аналогично маркированным спискам, используя теги <ol> и <li> можно создавать нумерованные списки. Для создания вариативности нумерации используют: атрибут type для выбора стиля нумерации и start для указания символа, с которого
следует начать нумерацию списка. Для тега <li> атрибут value позволяет задать номер текущему элементу списка.

Листинг 3.2 — Пример использования нумерованного списка

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

Структура списка определений следующая:

Термин 1

Определение термина
1

Термин 2

Определение термина
2

Сам список задается с помощью тега <dl>, термин – тегом <dt>, а его определение – с помощью тега <dd>. Вложение тегов для создания списка определений продемонстрировано в листинге 2.3:

Листинг
3.3 – Пример использования списка определений

3.1.3 Ссылки

Ссылка или Гиперсвязь (Link, Hyperlink) – фрагмент текста или графики на HTML-странице ссылающийся на другую позицию в том же документе или на объект в другом документе (возможно даже расположенном на другом сервере).

Для создания ссылок в языке HTML используют тег <a> (anchor — якорь). Атрибуты, которые используются в ссылка приведены в таблице 3.2.

Таблица 3.2 — Атрибуты тега <а>

Атрибут	Назначение
href	задает адрес документа, на который следует перейти. Является обязательным атрибутом для тега <a>. Может содержать как относительный, так и абсолютный адрес страницы. А также протоколы отличные от http, например ftp, mailto, ed2 и т.д.
name	устанавливает имя якоря, для определения позиционирования ссылки внутри документа.
target	устанавливает имя окна или фрейма, в котором будет загружен документ. Возможны также варианты использования: _self для открытия ссылки в том же окне и _blank для открытия ссылки в новом окне.
title	добавляет всплывающую подсказку к тексту ссылки

Листинг 3.4 — Пример использования ссылок

3.2 Практическая часть

1. Запустите веб-сервер Денвер на виртуальной машине.
2. Создайте в своем домене файл lab3.htm.
3. Используя данные из архива к лабораторной работе вставьте в документ изображения с
   учетом: ширины, высоты, выравнивания, всплывающих подсказок и т.д.
4. Создайте список определений согласно рисунку. Используйте для этого теги <dl>, <dt> и
   <dl>.
5. Создайте маркированный список используйте тег <ul>. Измените внешний вид маркера на квадратик.
6. Создайте нумерованный список. Осуществите нумерацию римскими цифрами и измените начало нумерации с числа XV.
7. Создайте список с многоуровневой нумерацией.
8. Обозначьте начало каждого раздела сегодняшней
   лабораторной как именованный якорь: <a name=”image”>, <a name=”spisok”>.
9. В начале странички добавьте список ссылок на все разделы лабораторной работы. Помните, что при ссылке на именованный якорь следует использовать знак # перед именем якоря.
10. Добавьте внизу странички ссылку на загрузку установочного файла Денвера.
11. Добавьте внизу документа ссылку на свою страничку в контакте, которая будет открываться в новом окне.
12. Второе изображение в документе сделайте ссылкой на поисковую систему Google
13. Создайте новый файл my.html и запишите в нем: нумерованный список из известных вам языков программирования, маркированный список из известных вам цветовых палитр.
14. Добавьте ссылку на файл my.html в файл index.html.
15. Покажите выполненную работу преподавателю.

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

1. Какой тег служит для вставки изображения в html-документ?
2. Где в теге <img> указывается путь к графическому файлу?
3. Как задать выравнивание картинки относительно текста?
4. Какие списки существуют в HTML?
5. Какой тег участвует в создании как маркированного так и нумерованного списков?
6. Как изменить порядок нумерации в нумерованном списке?
7. Как изменить вид маркера в маркированном списке?
8. Что такое списки определений?
9. Как задать якорь для ссылок в приделах одного документа?
10. За что отвечает атрибут target у тега <a>?