
- •Л. Татарникова
- •Введение
- •Чертёж первый Голова, тело, заголовок…
- •Чертёж второй Цвета и атрибуты
- •Чертёж третий Картинки и бегущие строки
- •Чертёж четвёртый Гиперссылки
- •Чертёж пятый Таблицы
- •Чертёж шестой Списки и отступы
- •Чертёж седьмой Фреймы
- •Чертёж восьмой Карта ссылок
- •Чертёж девятый css или каскадные таблицы стилей, половина первая
- •Чертёж девятый css, оформление блока, половина вторая
- •Чертёж десятый Размещение Flash-объектов на страничке
- •Чертёж одиннадцатый Знакомство с Java Script, половина первая
- •Чертёж одиннадцатый Некоторые объекты js, половина вторая
- •Чертёж одиннадцатый Операторы js, «половина» третья
- •Чертёж одиннадцатый js, ещё немного, «половина» четвёртая
- •Чертёж последний Позаботимся о тех, у кого «нестандартный» браузер
- •Заключение
- •Приложения Приложение 1 Теги html
- •Приложение 2 Свойства css
- •Приложение 3 Объекты JavaScript
- •Приложение 4 События
- •Литература
- •Оглавление
Чертёж четвёртый Гиперссылки
Можно без лукавства сказать, что сегодняшний тег <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;
на все свои странички помести панели навигации.