Вставка изображений в Web-страницы. Гиперссылки на Web-страницах
Вставка изображений в Web-страницы
На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.
Вставка изображений. Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
<IMG SRC="computer.gif''>
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
<IMG SRC="C:\computer\computer.gif">
Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:
<IMG SRC="http://www.server.ru/coraputer.gif">
Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):
<IMG SRC="computer.gif" ALIGN="right">
 |
| Рис. 6.28. Вставка изображения в Web-страницу "Компьютер" |
Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.
Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IMG SRC="computer.gif" ALIGN="right" ALT="Компьютер">
1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?
6.12. Практическое задание. Вставить в Web-страницу "Компьютер" изображение и просмотреть ее в браузере.
Гиперссылки на Web-страницах
Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница:
<А HREF="Адрес">Указатель ссылки</А>
Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:
<А HREF="f ilename . htm">Указатель ссылки</А>
Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:
<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки</А>
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.
Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить:
- к просмотру изображения в браузере:
<А HREF="picture.jpg">Изображение</A> - к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
<А HREF="sound.wav">Звук</A> - к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
<А HREF="Apxив.ziр">Скачать файл</А>
Панель навигации по сайту. Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания:
<HTML>
<HEAD>
<ТITLЕ>Заголовок страницы</ТITLЕ>
</HEAD>
<BODY>
</BODY>
На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.
Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:
<Р ALIGN="center">
[<А HREF="software . htm">Программы</A>]
[<A HREF="glossary.htm">Словарь</A>]
[<A HREF="hardware.htm">Комплектующие</А>]
[<A HREF="anketa.htm">Aнкетa</A>]
</P>
Гиперссылка на адрес электронной почты.Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер <ADDRESS>
<ADDRESS>
<А HREF="mailto:username@server.ru">E-mail:
username@server.ru</A>
</ADDRESS>
Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому будет указан заданный в ссылке адрес.
Итак, созданная домашняя страница Web-сайта "Компьютер" содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).
 |
| Рис. 6.29. Готовая домашняя страница сайта "Компьютер" |
1. Какой тэг и его атрибуты используются для создания гиперссылок?
6.13. Практическое задание. Создать Web-страницу "Компьютер", содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.