Цель: Научиться добавлять изображения в документ и управлять атрибутами тега. Научиться создавать нумерованные, маркированные и многоуровневые списки. Научиться создавать внутренние и внешние ссылки.
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 различают следующие виды списков:
- маркированные списки;
- нумерованные списки;
- списки определений.
Для создания маркированных списков применяют тэги <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 Практическая часть
- Запустите веб-сервер Денвер на виртуальной машине.
- Создайте в своем домене файл lab3.htm.
- Используя данные из архива к лабораторной работе вставьте в документ изображения с
учетом: ширины, высоты, выравнивания, всплывающих подсказок и т.д. - Создайте список определений согласно рисунку. Используйте для этого теги <dl>, <dt> и
<dl>. - Создайте маркированный список используйте тег <ul>. Измените внешний вид маркера на квадратик.
- Создайте нумерованный список. Осуществите нумерацию римскими цифрами и измените начало нумерации с числа XV.
- Создайте список с многоуровневой нумерацией.
- Обозначьте начало каждого раздела сегодняшней
лабораторной как именованный якорь: <a name=”image”>, <a name=”spisok”>. - В начале странички добавьте список ссылок на все разделы лабораторной работы. Помните, что при ссылке на именованный якорь следует использовать знак # перед именем якоря.
- Добавьте внизу странички ссылку на загрузку установочного файла Денвера.
- Добавьте внизу документа ссылку на свою страничку в контакте, которая будет открываться в новом окне.
- Второе изображение в документе сделайте ссылкой на поисковую систему Google
- Создайте новый файл my.html и запишите в нем: нумерованный список из известных вам языков программирования, маркированный список из известных вам цветовых палитр.
- Добавьте ссылку на файл my.html в файл index.html.
- Покажите выполненную работу преподавателю.
3.3 Контрольные вопросы
- Какой тег служит для вставки изображения в html-документ?
- Где в теге <img> указывается путь к графическому файлу?
- Как задать выравнивание картинки относительно текста?
- Какие списки существуют в HTML?
- Какой тег участвует в создании как маркированного так и нумерованного списков?
- Как изменить порядок нумерации в нумерованном списке?
- Как изменить вид маркера в маркированном списке?
- Что такое списки определений?
- Как задать якорь для ссылок в приделах одного документа?
- За что отвечает атрибут target у тега <a>?