Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Чертёж четвёртый Гиперссылки






1. Можно без лукавства сказать, что сегодняшний тег < A> – самый главный в системе сайтостроительства. С его помощью создаются те самые волшебные дверки, через которые можно легко и быстро перебраться в сколь угодно далёкую комнатку-страничку. Называются эти «дверки» затейливо и звучно – гиперссылки. Но что попусту болтать, будем работать:

c в той же папке 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>

c в файл 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>, становится гиперссылкой (это может быть текст, картинки и что угодно).

c открой страничку index.html в браузере, обрати внимание на выделенные слова щенок Погромыч (именно так, синим цветом и подчёркиванием, показывается гиперссылка);

c подведи указатель мыши к щенку-ссылке – он (указатель) изменился, превратившись в «лапку» (указующий перст);

c если теперь этой лапкой ты щёлкнешь ссылку, то тут же увидишь рассказ о том, как Погромыч появился в нашей семье – в окно браузера загрузится указанная в атрибуте href страничка.

2. Чтобы, прочитав захватывающую историю щенка Погромыча, вернуться на начальную страничку, достаточно нажать кнопку Назад в панели инструментов браузера. Но хорошие строители (web-МАСТЕРА) на каждую страничку помещают так называемую панель навигации, которая состоит из ссылок на все значимые странички своего сайта. Ты хочешь стать мастером? Тогда за дело:

c открой в блокноте файл pogrom.htm;

c после рассказа о проделках щенка добавь строчки:

< 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> выравнивает помещённые в него объекты по центру.

Ссылками на этот раз являются маленькие картинки:

c добавь в теги < IMG> атрибуты width, height, alt;

c создай ещё два файла dusja.htm и klava.htm, в которых расскажи о кошке Дусе и синичке Клаве;

c нарисуй картинки-кнопки с соответствующими изображениями и сохрани их в папке images под именами home.gif, dusja.gif, klava.gif и pogrom.gif;

c на все свои странички помести панели навигации.

3. Как только ты выполнишь все эти задания, можешь считать наш четвёртый чертёж законченным.

Для самых любопытных, которые заметили, что щенок Погромыч на главной страничке из синего стал фиолетовым.

Чтобы посетителю странички было легче ориентироваться в ссылках (какие он уже посетил, а какие ещё нет), посещённые ссылки принимают другую окраску, обычно фиолетовую.

Но мы можем изменить цвет гиперссылок, используя атрибуты link (цвет гиперсылки) и vlink (цвет посещённой гиперссылки) тега < BODY>:

< BODY bgcolor=#ffddff text=#880088 link=#ff00ff

vlink=#880000 >

И, наконец, для самых замечательных – тех, кто всё замечает, и, наверняка, уже успел заметить, что вокруг рисунков-ссылок появляется рамочка того же цвета, что назначен для ссылок. Если эта рамка вдруг портит дизайн твоей странички, убери её, задав в теге < IMG> атрибут border=0.

 






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.