Создание ссылок на web-странице

Цель работы:

1) сформировать навыки вставки иллюстрации на web-страницу;

2) освоить технологию создания ссылок, подсказок к ссылкам;

3) научиться задавать различные цвета ссылок;

4) получить представление об использовании изображений в ка­честве ссылок;

5) приобрести навыки создания ссылки на адрес электронной по­мощи.

План работы:

1) Вставка иллюстраций на web-страницу.

2) Вставка гиперссылок.

3) Выполнение зачетного задания.

Теоретические сведения

Гиперссылка — это фрагмент текста или рисунок, который явля­ется указателем на другой файл или объект (в частности, на другую web-страницу или сайт). Гиперссылка необходима, чтобы обеспечить возможность перехода от одного web-документа к другому.

Фрейм — это обособленная область web-документа со своими по­лосами прокрутки. С помощью фреймов web-страница разделяется на несколько независимых областей. При этом можно открыть в одном фрейме по ссылке, находящейся в другом фрейме. Фреймы предо­ставляют уникальную возможность размещения информации точно в нужном месте окна браузера. Так, можно поместить фрейм в нижней части окна, и независимо от прокручивания содержимого в основной части окна эта область не изменит своего положения.

Выделяют три способа размещения сайта в Интернете:

1) через владельца или администратора сервера (в учебном заведе­нии, на работе или иной организации);

2) через провайдера (загляните в текст договора с ним или обра­титесь в его службу поддержки пользователей);

3) путем использования бесплатного общедоступного сервера (на­пример, www.narod.ru).

Ход выполнения работы

1. Вставка иллюстраций на web-страницу. Тег <IMG> позволяет добавлять на web-страницу различные иллюстрации. Иллюстрация содержится в отдельном файле формата JPEG, GIF или PNG и вставля­ется в текст в том месте, где помещается данный тег. Вся информация

задается с помощью атрибутов, обязательным является атрибут SRC, указывающий имя файла. Имя графического файла должно быть за­ключено в кавычки.

Пример № 1

<IMG SRC="tyu.gif ">

Задание размеров иллюстрации. По умолчанию вставленный графический файл отображается в масштабе 1:1. Для изменения раз­меров иллюстрации используют атрибуты HEIGH и WIDTH.

Пример № 2

<IMG SRC="tyu.gif" HEIGHT=137 WIDTH=180>

· Откройте в Блокноте файл шаблон. html.

· Сохраните файл в пайке Страница под именем рис. html.

· Нарисуйте любой рисунок в графическом редакторе Paint, предварительно с помощью меню Рисунок => Атрибуты установите размеры рисунка: ширина — 180, высота — 137. Сохраните готовый рисунок в папку Страница под именем chet.gif.

· Вставьте созданный рисунок chet.gif, указав в параметрах <IMG> его реальные размеры (см. пример № 2).

Задание рамки вокруг рисунка. Изображение на web-странице можно поместить в рамку различной толщины с помощью атрибута BORDER. По умолчанию рамка вокруг рисунка не отображается, кроме случая, когда рисунок является гиперссылкой.

Пример № 3

<IMG SRC="tyu.gif" B0RDER=2>

· Заключите рисунок в рамку толщиной четыре пикселя (см. пример № 3, рис. 6.18).

Альтернативный текст. Данный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере за­грузке изображений либо при загрузке рисунка в виде всплывающей подсказки при наведении курсора мыши на картинку. Для задания альтернативного текста используется параметр ALT. Текст должен быть заключен в кавычки (использование кавычек в самом тексте не допускается, их можно заменить двойными апострофами).

Пример № 4

<IMG SRC="tyu.gif" АЬТ="Дизайн квартиры">

· Оформите вывод альтернативного текста к рисунку «Полевой цветок»

· Покажите преподавателю результат вы­полненной работы.

Совместная верстка рисунка и текста. Таблица из двух ячеек позволяет разместить рядом текст и рисунок.

Пример № 5

<TABLE BORDER=0>

<TR>

<TD>

<НЗ>Квартира</НЗ>

</td>

<TD>

<IMG SRC="tyu.gif">

</TD>

</TR>

</TABLE>

Удалите строку вывода альтернативного текста. Оформите рисунок и текст «Полевой цветок» с помощью таблицы (см. пример № 5, рис. 6.19).

Обтекание и:ю6ражения текстом. Задание отступов по краям рисунка. Обтекание рисунка текстом — один из приемов верстки web- страниц. При этом изображение располагается у края окна браузера, а текст заполняет место сбоку от него. Выравнивание изображения определяется параметром ALIGN. Он указывает расположение рисун­ка и способ его обтекания текстом (изображение по правому краю и задание обтекания слева — значение RIGHT, изображение слева с об­теканием справа — значение LEFT).

Параметр ALIGN часто используют вместе с другими параметрами тега <IMG> — HSPACE и VSPACE, которые определяют отступы между рисунком и обтекающим его текстом.

Пример № 6

<HTML>

<BODY>

<IMG SRC="tyu.gif" HEIGHT=137 WIDTH=180 HSPASE=10 VSPASE=10 ALIGN=LEFT> Концепция проекта: за основу взято ис­пользование натуральных материалов и элементов при­родной среды. И то и другое применяют, чтобы сде­лать обстановку комфортной и привнести в интерьер богатство тактильных ощущений, которые не только дают информацию о предмете, но и формируют его образ.

</BODY>

</HTML>

Параметр HSPACE управляет горизонтальными отступами и слева, и справа.

Скопируйте в папку Страница любой файл, связанный с инте­рьером квартиры.

Добавьте строки в файл рис. html, которые позволят (см. при­мер № 6, рис. 6.20):

расположить рисунок справа от текста;

задать отступы вокруг изображения.

Введите текст, связанный с изображением.

Использование таблиц при обтекании изображения текстом. Таблицы с невидимой границей используются при создании обтекания изображения текстом. Для достижения результата можно использовать параметр ALIGN тега TABLE, имеющий такое же назначение, как и в теге <IMG>.

Пример № 7

<HTML>

<BODY>

CTABLE WIDTH=190 HEIGHT=145 BORDER=0 ALIGN=LEFT CELLPADDING=0 CELISPACING=0>

<TR>

<TD>

<IMG SRC="tyu.gif" HEIGHT=137 WIDTH=180>

</TD>

</TR>

</TABLE>

Концепция проекта: за основу взято использование натуральных материалов и элементов природной среды. И то и другое применяют, чтобы сделать обстановку комфортной и привнести в интерьер богатство тактиль­ных ощущений, которые не только дают информацию о предмете, но и формируют его образ.

</BODY>

</HTML>

Таблица создает невидимую границу, которая отстоит на некоторое расстояние от самого изображения и не позволяет тексту приблизиться к нему. Размер этого отступа регулируется шириной и высотой табли­цы. В примере № 6 рисунок выравнивается по левому краю. Горизон­тальный отступ от текста до рисунка при этом будет равен разности между шириной таблицы и шириной изображения. По умолчанию выравнивание содержимого ячейки таблицы производится посереди­не. Если в теге <TD> не задан параметр VALIGN=TOP, то отступы по вертикали будут в два раза меньше, чем по горизонтали.

· Покажите преподавателю результат работы.