Чертёж четвёртый Гиперссылки
Можно без лукавства сказать, что сегодняшний тег <A> – самый главный в системе сайтостроительства. С его помощью создаются те самые волшебные дверки, через которые можно легко и быстро перебраться в сколь угодно далёкую комнатку-страничку. Называются эти «дверки» затейливо и звучно – гиперссылки. Но что попусту болтать, будем работать:
в той же папке my_site создай новую страничку – файл pogrom.htm;
<HTML>
<HEAD>
<TITLE>Мой друг Погромыч</TITLE>
</HEAD>
<BODY bgcolor=#ffddff text=#880088>
<H2 align=center><FONT color=#ff0088>
Мой друг Погромыч</FONT></H2>
<P>В нашей дружной семье Погромыч оказался совершенно
случайно…
и дальше рассказ о щенке, возможно, с картинками и фотографиями
</BODY>
</HTML>
в файл index.html добавь тег <A>:
<P>А друзья мои – это <I><FONT size=+0>синичка
<B>Клава</B></FONT>,
кошка <B>Дуся</B> и <FONT size=+2><A href=pogrom.htm>щенок
<B>Погромыч</A>.</B></I></FONT></FONT>
Тег <A> имеет атрибут href, указывающий имя файла, к которому гиперссылка нас и отправляет.
Всё, что находится между «теговыми скобками» <A> и </A>, становится гиперссылкой (это может быть текст, картинки и что угодно).
открой страничку index.html в браузере, обрати внимание на выделенные слова щенок Погромыч (именно так, синим цветом и подчёркиванием, показывается гиперссылка);
подведи указатель мыши к щенку-ссылке – он (указатель) изменился, превратившись в «лапку» (указующий перст);
если теперь этой лапкой ты щёлкнешь ссылку, то тут же увидишь рассказ о том, как Погромыч появился в нашей семье – в окно браузера загрузится указанная в атрибуте href страничка.
Чтобы, прочитав захватывающую историю щенка Погромыча, вернуться на начальную страничку, достаточно нажать кнопку Назад в панели инструментов браузера. Но хорошие строители (web-МАСТЕРА) на каждую страничку помещают так называемую панель навигации, которая состоит из ссылок на все значимые странички своего сайта. Ты хочешь стать мастером? Тогда за дело:
открой в блокноте файл pogrom.htm;
после рассказа о проделках щенка добавь строчки:
<CENTER>
<A href=index.html><img src=images/home.gif></A>
<A href=dusja.htm><img src=images/dusja.gif></A>
<A href=klava.htm><img src=images/klava.gif></A>
</CENTER>
Что здесь стоит пояснить? Тег <CENTER> выравнивает помещённые в него объекты по центру.
Ссылками на этот раз являются маленькие картинки:
добавь в теги <IMG> атрибуты width, height, alt;
создай ещё два файла dusja.htm и klava.htm, в которых расскажи о кошке Дусе и синичке Клаве;
нарисуй картинки-кнопки с соответствующими изображениями и сохрани их в папке images под именами home.gif, dusja.gif, klava.gif и pogrom.gif;
на все свои странички помести панели навигации.