Пошаговая инструкция создания сайта на html коде / Переходы со страницы на страницу сайта, создание ссылок

Переходы со страницы на страницу сайта, создание ссылок

Для того чтобы можно было переходить с одной страницы сайта на другую, существует элемент <a>, предназначенный для создания ссылок, который тем самым соединяет страницы сайта между собой.

Элемент <a> состоит из пары тегов, между которыми может быть размещен текст или картинка:

<a><!-- Текст или картинка --></a>

При создании ссылки обязательно нужно указывать адрес (название) той страницы на которую необходимо совершить переход, с помощью атрибута href:

href="Адрес ссылки"

Например, если нужно совершить переход на вторую страницу нашего сайта, то ее адрес в ссылке будет выглядеть так:

<a href="second.html">

И, соответственно, если нужно со второй страницы перейти на первую, то адрес первой страницы будет:

<a href="index.html">

Обратимся к нашему меню. Сейчас, если на пункт меню навести курсор мышки и щелкнуть по нему левой кнопкой, то ничего не произойдет, кроме того, что курсор из стрелки превратиться в значок с помощью которого можно только сделать выделение текста ссылки:

Доработаем меню, а именно, подставим ссылки к его пунктам в обеих файлах страниц нашего сайта, в моем случае это index.html и second.html.

Для удобства я переименую названия "Первый пункт меню" и "Второй пункт меню", в "Первая статья" и "Вторая статья":

<ul
<li><a href="index.html"> Первая статья</a></li>
<li><a href="second.html"> Вторая статья</a></li>
</ul>

Теперь наше меню заработало. При наведении курсора мышки на пункт меню, он из стрелки превращается в указательный палец и если на первой странице сайта щелкнуть по пункту "Вторая статья" левой кнопкой, то мы тут же попадаем на страницу со второй статьей, и наоборот. Но изменился и вид текста пунктов меню.

Дело в том, что по умолчанию для ссылок заданы такие значения:

- текст ссылки идет с подчеркиванием;

- если по ссылке еще не переходили, то цвет ее текста будет синий;

- если уже переходили, то цвет текста становится фиолетовым;

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

Пока оставим это как есть, остальную красоту для меню наведем позже, а сейчас сделаем еще одну ссылку.


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

Что бы и у вас было так же, заключим в теги элемента <a> маленькую картинку и названия сайта, а в атрибуте адреса href укажем имя нашего сайта вот в таком виде "http://proba.ru". Это нужно сделать на обеих страницах сайта, index.html и second.html:

<a href="http://proba.ru">

Файл index.html:

Теперь картинка и название сайта являются ссылкой, но у текста появилось подчеркивание:

Чтобы его убрать, используем для элемента <a> атрибут стиля style и его свойство text-decoration:

text-decoration: none; <!-- Убираем подчеркивание текста ссылки -->

<a style="text-decoration: none;" href="http://proba.ru">

Уже на этом этапе можно создать простой, но самый настоящий сайт-блог, и постепенно продолжать его преобразовывать и совершенствовать, добавляя новые фишки и возможности. Главное - начать, это я теперь точно знаю.


Файл index.html.

Блок шапки сайта:

Блок верхнего меню сайта:

Следующий шаг - Изменение внутренней структуры сайта