- •Саратовский государственный технический университет
- •Часть 2. Создание web-страниц с использованием Java Script
- •Часть 3. Создание интерактивного web-приложения на основе технологии «клиент-сервер» с использованием графического интерфейса
- •Литература
- •Введение
- •1. Просмотр web-страниц
- •2. Основные сведения о языке html
- •3. Структура документа html
- •4. Форматирование текста
- •5. Управление цветом
- •6. Элементы, расширяющие возможности языка
- •6.1.Горизонтальная линия
- •6.2.Бегущая строка
- •7.Вставка гипертекстовых ссылок
- •7.1. Вставка графического изображения в ссылку
- •7.2. Локальные ссылки внутри документа
- •8. Размещение графических и видеоизображений
- •8.1. Сегментированные графические изображения - ссылки
- •Прозрачные изображения
- •Вставка видеофрагментов
- •9.Таблицы
- •Заголовок таблицы
- •10.Фреймы
- •Плавающие фреймы
- •11.Формы
- •Практическая часть
- •Содержание отчета
- •Литература
7.Вставка гипертекстовых ссылок
Теги <A> и </A>, между которыми размещается некоторый текст, являются одним из самых важных элементов языка HTML, обеспечивающим создание гипертекстовых ссылок. Чаще всего используется такой шаблон:
<A href=’’Адрес ссылки’’> текст для щелчка </A> ,
где в качестве адреса для ссылки указывается либо путь к локальному файлу на этой же машине:
<A href=’’file:///C:\DOC\file.htm’’> Переход к file.htm </A>
или
<A href=’’C:\DOC\file.htm’’> Переход к file.htm </A>.
Если файл находится в той же директории, что и источник текущей web-страницы, то путь к нему в адресе можно не указывать:
<A href=’’file1.htm’’> Ссылка на file1</A>.
Если ссылка происходит на другой web- сервер, то в качестве значения атрибута href указывается полный адрес этого сервера:
<A href=’’http://www.sstu.runnet.ru/sstu/news.htm’’> СГТУ</A>
7.1. Вставка графического изображения в ссылку
Можно использовать для ссылки другой шаблон, который применяется в тех случаях, когда видимая часть гиперссылки представляет собой рисунок (так называемая картинка - ссылка):
<A href=’’Адрес ’’> <IMG src=’’Ссылка на рисунок’’ > </A>,
где в качестве ссылки на рисунок указывается путь к файлу, содержащему графическое изображение.
Например: <A href=’’page2.htm’’> <IMG src=’’pict1.htm’’> </A>.
Более подробно о вставке графических изображений в текст web- страницы и использовании тега <IMG> изложено в следующем разделе (см. п.8).
7.2. Локальные ссылки внутри документа
Если длина документа HTML велика, целесообразно организовать ссылки на его отдельные части, расположив их, например, в начале и в конце документа. Такие ссылки часто называются закладками.
Перед тем, как использовать ссылку, в нужных местах документа (тех, куда необходимо сослаться) должны быть расставлены локальные метки вида:
<A name = ‘’Метка’’> </A>.
Например: <A name = ‘’Начало’’> Заголовок документа </A>.
Для перехода к метке из любого места страницы используется ссылка следующего вида:
Текст <A href = ‘’#Метка’’> Текст для щелчка </A>.
Например: Переход <A href = ‘’#Начало’’> к началу текста </A>.
С помощью таких закладок можно создавать, например, оглавление документа, состоящее из набора ссылок в начале страницы на локальные метки, размещаемые в разных разделах документа.
8. Размещение графических и видеоизображений
Для размещения графических изображений внутри текста или таблиц вы можете воспользоваться тегом IMG. Он не содержит конечного тега - вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гипперссылках (см. п.7.1), вставлять картинки в таблицы, размещать рисунки на web- странице, создавать маркеры и т.д.
Необходимым атрибутом является src - указатель на файл графики: src= ’’ Ссылка на файл’’.
Атрибут alt позволяет выводить пояснительный текст в тех местах страницы, где должны располагаться рисунки. Это нужно для того, чтобы пользователь, не дожидаясь окончания загрузки изображения, смог получить информацию о рисунке.
Например: <IMG src=’’pict1.gif’’ alt= ‘’План города’’>.
Необходимо еще раз отметить, что web-броузеры могут воспринимать графические изображения только в виде файлов в формате .gif или .jpg.
В теге можно использовать атрибут выравнивания текста, размещенного в одном параграфе с рисунком (обтекание текстом) - align:
align=’’bottom’’ - текст выравнивается по нижнему краю рисунка;
align=’’left’’ - текст слева от рисунка;
align=’’middle’’ - текст центрируется по высоте изображения;
align=’’right’’ - текст справа;
align=’’top’’ - выравнивание текста по верхнему краю рисунка.
Можно задать высоту height=Высота в пикселах или ширину width = Ширина в пикселах рисунка. Допустимо применение только одного из атрибутов. В этом случае рисунок масштабируется в соответствии с заданным атрибутом, а второй размер устанавливается автоматически в соответствующей пропорции.
Толщина рамки задается в пикселах:
border= Число пикселов.
Если рисунок используется внутри тега <A>, то изменение цвета рамки позволяет отличить пройденную ссылку от нетронутой.
Вокруг рисунка можно создать пустое пространство цвета фона:
hspace= Число пикселов - справа и слева;
vspace= Число пикселов - сверху и снизу.