"ВОКРУГ САЙТА" www.vokrug-saita.ru

как создать сайт самостоятельно

Главная Рассылка Секрет Автор сайта

УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 8. Как сделать ссылку в HTML, или Связываем страницы между собой

Начинаем наш новый урок. На нём мы научимся создавать ссылки, связывать страницы сайта гиперссылками.

Гиперссылкой может быть слово на странице, целое предложение, большой кусок текста, рисунок… что угодно. Но чаще всего для перехода со страницы на страницу используют заголовки в панели навигации. Вот и потренируемся создавать гиперссылки на панели навигации.

Напомню, она выглядит так:

Уроки html для начинающих
Рис. 24

Поскольку это у нас главная страница, то ссылку здесь на неё делать не нужно. Создадим гиперссылку на заголовке "Породы".

Откройте Веб-страницу в "Блокноте". Отыщите в коде ячейку с заголовками для панели навигации. Код выглядит так:

Листинг 8.1

……
<tr>
<td WIDTH="200" align="center" valign="top">
<font face="Verdana">
<div>
Главная<br>
Породы<br>
Выбор<br>
Содержание<br>
Дрессировка<br>
Выставки<br>
Контакты
</div>
</font>
</td>
……

Гиперссылки создаются с помощью парного тега <a>…</a> и атрибута href, с помощью которого задаётся путь к файлу на который ссылается данная ссылка. Выглядит это так:

<a href="путь_к_файлу/имя_файла"</a>

Если файлы находятся в одной папке, то путь не указывается, только имя.

Если нужно сослаться на страницу в Интернете, то в пути указывается адрес этой страницы:

<a href="http://www. ..."</a>

Добавим в код страницы изменения:

Листинг 8.2

……
<tr>
<td WIDTH="200" align="center" valign="top">
<font face="Verdana">
<div>
Главная<br>
<a href="poroda.htm">Породы</a><br>
Выбор<br>
Содержание<br>
Дрессировка<br>
Выставки<br>
Контакты
</div>
</font>
</td>
……

Обратите внимание. Я дал имя будущему файлу poroda с расширением .htm. Главную страницу сайта всегда называют index и дают расширение .html. Прочим страницам можно назначать расширение .htm.

Итак, ссылку мы создали. Чтобы она вела на заданную страницу, нужно эту страницу создать. Создадим.

В открытом "Блокноте" выделите весь код ("Правка" - "Выделить всё" либо нажмите одновременно Ctrl+A). Скопируйте выделенное ("Правка" - "Копировать" либо Ctrl+C).

Создайте новый документ через "Файл" - "Новый" (в некоторых редакторах "Файл" - "Создать"). И вставьте скопированный из предыдущего документа код ("Правка" - "Вставить" или Ctrl+V).

Сохраните документ через "Файл" - "Сохранить как" - Папка: "Мой сайт" - Имя файла: poroda.htm - "Сохранить":

Уроки html для начинающих
Рис. 25

Внесём кой-какие изменения в код.

Во-первых, в теге заголовка <title>Сайт о собаках</title> вместо "Сайт о собаках" напишем заголовок этой новой страницы, например, "Породы собак".

Во-вторых, с этой страницы мы должны переходить на главную, поэтому установим гиперссылки следующим образом:

Листинг 8.3

……
<tr>
<td WIDTH="200" align="center" valign="top">
<font face="Verdana">
<div>
<a href="index.html">Главная</a><br>
Породы<br>
Выбор<br>
Содержание<br>
Дрессировка<br>
Выставки<br>
Контакты
</div>
</font>
</td>
……

Сохраните результат.

Откроем главную страницу сайта в браузере. Слово "Породы" стало синего цвета и подчёркнутым, что указывает, что это теперь гиперссылка. Проверьте, как она работает. На новой странице гиперссылка на слове "Главная".

Конечно, кроме ссылок, всё прочее на обеих страницах одинаково. Но от кого зависит это изменить!

Самостоятельное задание. Создайте ссылки для других заголовков в панели навигации. А потом - соответствующие им файлы. С соответствующим содержанием.

Но это немного погодя. Сначала узнаем, как делать ссылкой картинку.

Собственно, в этом нет ничего сложного. Нужно прописать тег <a href="имя_файла.htm"> перед тегом, задающим изображение. Вот так:

<a href="имя_файла.htm"><img src="…"></a>

На нашей странице всего одно изображение, на нём и потренируемся:

Листинг 8.4

……
<body text="#000000" bgcolor="#CCCCCC" background="img/fon.jpg">
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC" cellpadding="5">
<tr height="150">
<td align="center"> <a href="foto.htm"><img src="img/dog.jpg" height="150" WIDTH="200" alt="Всё о собаках"></a> </td>
……

Я создал ссылку на документ foto.htm, подразумевая, что ссылка ведёт в "Фотоальбом", то есть, на страницу, где много фотографий собак. Я не буду показывать, как создавать такую страницу, потому что Вы уже сами это можете: создавать страницы, размещать изображения, выравнивать их тем или иным образом, задавать размеры. Проделайте эту работу самостоятельно.

А встретимся мы на следующем уроке >>>>>>>

Успехов.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Есть вопросы? Спрашивайте, мы вместе разберёмся с Вашей проблемой:



Введите сумму чисел с картинки*:
сумма

Подпишитесь на рассылку
"Вокруг Сайта "
и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта


Узнать подробней о рассылке "Вокруг Сайта" >>






PHP-песочница
Подписаться письмом



Карта
rss
Карта