HTML / Лабораторная работа 2
.docЛабораторная работа 2. Изображения. Списки. Ссылки
Цель: Научиться добавлять изображения в документ и управлять атрибутами тега. Научиться создавать нумерованные, маркированные и многоуровневые списки. Научиться создавать внутренние и внешние ссылки.
2.1 Теоретические сведения
2.1.1 Изображения
Вставка картинок в html-документ осуществляется с использованием тега <img />. Тег можно записать вручную и затем с помощью автодополнения кода или с помощью панели Inspecrot указать его атрибуты. Можно также воспользоваться кнопкой Image на панели инструментов HTML программы HTMLPad 2008.
Тег <img /> имеет следующие атрибуты (см. таблицу 2.1):
Таблица 2.1 - Атрибуты тега
Атрибут |
Назначение |
src |
указывает на путь к графическому файлу. Пути могу быть относительными: photo.jpg, ../img/photo2.gif или абсолютными: http://mysite.com/pic/photo3.jpg |
lowsrc |
путь к графическому файлу худшего качества (и меньшего размера), который грузится перед полноразмерной картинкой |
alt и title |
альтернативный текст для изображения, используется в качестве всплывающей подсказки или поисковыми системами |
border |
толщина рамки вокруг изображения. Цвет рамки определяется текущим цветом текста |
hspace |
горизонтальный отступ от изображения до текста |
vspace |
вертикальный отступ от изображения до текста |
height |
высота изображения, если не задана, то отображается оригинальный размер изображения, если указана до изображение масштабируется |
width |
ширина изображения, если при указании ширины одновременно с высотой не сохраняются пропорции, то изображение искажается |
align |
определяет как рисунок будет выравниваться и обтекаться текстом (см. рисунок 2.1) |
Рисунок 2.1 – Примеры выравнивания изображения относительно текста
2.1.2 Списки
В языке HTML различают следующие виды списков:
-
маркированные списки;
-
нумерованные списки;
-
списки определений.
Для создания маркированных списков применяют тэги <ul> и <li>. Тегом <ul> отмечается начало и окончание всего списка. Тэгом <li> обозначают начало и конец отдельного элемента списка.
По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута type можно изменить стиль маркирования. Пример использования списка приведен в Листинге 2.1:
Листинг 2.1 - Пример маркированного списка
Аналогично маркированным спискам, используя теги <ol> и <li> можно создавать нумерованные списки. Для создания вариативности нумерации используют: атрибут type для выбора стиля нумерации и start для указания символа, с которого следует начать нумерацию списка. Для тега <li> атрибут value позволяет задать номер текущему элементу списка.
Листинг 2.2 - Пример использования нумерованного
Список определений представляет собой текст, состоящий из двух взаимосвязанных наборов – списка с терминами и списка определений терминов. Вначале указывается первый термин, ниже него идет его определение, затем следующий термин с определением и т.д.
Структура списка определений следующая:
Термин 1
Определение термина 1
Термин 2
Определение термина 2
Сам список задается с помощью тега <dl>, термин – тегом <dt>, а его определение – с помощью тега <dd>. Вложение тегов для создания списка определений продемонстрировано в листинге 2.3:
Листинг 2.3 – Пример использования списка определений
2.1.3 Ссылки
Ссылка или Гиперсвязь (Link, Hyperlink) – фрагмент текста или графики на HTML-странице ссылающийся на другую позицию в том же документе или на объект в другом документе (возможно даже расположенном на другом сервере).
Для создания ссылок в языке HTML используют тег <a> (anchor - якорь). Атрибуты, которые используются в ссылка приведены в таблице 2.2.
Таблица 2.2 - Атрибуты тега <а>
Атрибут |
Назначение |
href |
задает адрес документа, на который следует перейти. Является обязательным атрибутом для тега <a>. Может содержать как относительный, так и абсолютный адрес страницы. А также протоколы отличные от http, например ftp, mailto, ed2 и т.д. |
name |
устанавливает имя якоря, для определения позиционирования ссылки внутри документа. |
target |
устанавливает имя окна или фрейма, в котором будет загружен документ. Возможны также варианты использования: _self для открытия ссылки в том же окне и _blank для открытия ссылки в новом окне. |
title |
добавляет всплывающую подсказку к тексту ссылки |
Листинг 2.4 - Пример использования ссылок
2.2 Практическая часть
-
Запустите веб-сервер Денвер.
-
Создайте в своем домене файл lab2.htm.
-
Используя данные из архива к лабораторной работе вставьте в документ изображения с учетом: ширины, высоты, выравнивания, всплывающих подсказок и т.д.
-
Создайте список определений согласно рисунку. Используйте для этого теги <dl>, <dt> и <dl>.
-
Создайте маркированный список используйте тег <ul>. Измените внешний вид маркера на квадратик.
-
Создайте нумерованный список. Осуществите нумерацию римскими цифрами и измените начало нумерации с числа XV.
-
Создайте список с многоуровневой нумерацией.
-
Обозначьте начало каждого раздела сегодняшней лабораторной как именованный якорь: <a name=”image”>, <a name=”spisok”>.
-
В начале странички добавьте список ссылок на все разделы лабораторной работы. Помните, что при ссылке на именованный якорь следует использовать знак # перед именем якоря.
-
Добавьте внизу странички ссылку на загрузку установочного файла Денвера.
-
Добавьте внизу документа ссылку на свою страничку в контакте, которая будет открываться в новом окне.
-
Второе изображение в документе сделайте ссылкой на поисковую систему Google
-
Создайте новый файл index.html, в котором разработайте список, содержащий ссылки на задания двух лабораторных работ.
-
Создайте новый файл my.html и запишите в нем: нумерованный список из известных вам языков программирования, маркированный список из известных вам цветовых палитр.
-
Добавьте ссылку на файл my.html в файл index.html.
-
Покажите выполненную работу преподавателю.
2.3 Контрольные вопросы
-
Какой тег служит для вставки изображения в html-документ?
-
Где в теге <img> указывается путь к графическому файлу?
-
Как задать выравнивание картинки относительно текста?
-
Какие списки существуют в HTML?
-
Какой тег участвует в создании как маркированного так и нумерованного списков?
-
Как изменить порядок нумерации в нумерованном списке?
-
Как изменить вид маркера в маркированном списке?
-
Что такое списки определений?
-
Как задать якорь для ссылок в приделах одного документа?
-
За что отвечает атрибут target у тега <a>?