Новости
Главная / Студентам / ОПБД / Лабораторная работа №2. Изображения. Списки. Ссылки

Лабораторная работа №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)
weblab1image024

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

3.1.2 Списки

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

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

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

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

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

weblab1image026

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

weblab1image028

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

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

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

Термин 1

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

Термин 2

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

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

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

weblab1image030

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 — Пример использования ссылок

weblab1image033

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>?