Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

HTML / Лабораторная работа 2

.doc
Скачиваний:
90
Добавлен:
24.02.2016
Размер:
215.55 Кб
Скачать

Лабораторная работа 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 различают следующие виды списков:

  1. маркированные списки;

  2. нумерованные списки;

  3. списки определений.

Для создания маркированных списков применяют тэги <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 Практическая часть

  1. Запустите веб-сервер Денвер.

  2. Создайте в своем домене файл lab2.htm.

  3. Используя данные из архива к лабораторной работе вставьте в документ изображения с учетом: ширины, высоты, выравнивания, всплывающих подсказок и т.д.

  4. Создайте список определений согласно рисунку. Используйте для этого теги <dl>, <dt> и <dl>. 

  5. Создайте маркированный список используйте тег <ul>. Измените внешний вид маркера на квадратик.

  6. Создайте нумерованный список. Осуществите нумерацию римскими цифрами и измените начало нумерации с числа XV.

  7. Создайте список с многоуровневой нумерацией.

  8. Обозначьте начало каждого раздела сегодняшней лабораторной как именованный якорь: <a name=”image”>, <a name=”spisok”>.

  9. В начале странички добавьте список ссылок на все разделы лабораторной работы. Помните, что при ссылке на именованный якорь следует использовать знак # перед именем якоря.

  10. Добавьте внизу странички ссылку на загрузку установочного файла Денвера.

  11. Добавьте внизу документа ссылку на свою страничку в контакте, которая будет открываться в новом окне.

  12. Второе изображение в документе сделайте ссылкой на поисковую систему Google

  13. Создайте новый файл index.html, в котором разработайте список, содержащий ссылки на задания двух лабораторных работ.

  14. Создайте новый файл my.html и запишите в нем: нумерованный список из известных вам языков программирования, маркированный список из известных вам цветовых палитр.

  15. Добавьте ссылку на файл my.html в файл index.html.

  16. Покажите выполненную работу преподавателю.

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

  1. Какой тег служит для вставки изображения в html-документ?

  2. Где в теге <img> указывается путь к графическому файлу?

  3. Как задать выравнивание картинки относительно текста?

  4. Какие списки существуют в HTML?

  5. Какой тег участвует в создании как маркированного так и нумерованного списков?

  6. Как изменить порядок нумерации в нумерованном списке?

  7. Как изменить вид маркера в маркированном списке?

  8. Что такое списки определений?

  9. Как задать якорь для ссылок в приделах одного документа?

  10. За что отвечает атрибут target у тега <a>?