Если нужно сделать ссылку между собственными страницами?
Урок 6: Покоряем html ссылки
В первую очередь давайте поговорим о ссылках - переходах с одной страницы на другую. Ссылки это базовый элемент без которого невозможно представить интернет.
Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. Ну вот например:
<a href="http://www.zvirec.com">Это ссылка на сайт zvirec.com </a>
будет выглядеть в браузере:
Это ссылка на сайт zvirec.com
Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <a> и закрывающим </a> тегом , будет текстом ссылки. Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.
Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и page2.htm) расположенные в одной папке , то код ссылки с page1 на page2 будет выглядеть так:
<a href="page2.htm">Для перехода на page2 щелкни здесь! </a>
Т.е. надо просто написать название страницы, на которую мы хотим перейти.
Eсли страница page 2 находится в подпапке "subfolder", код ссылки выглядит так:
<a href="subfolder/page2.htm">Для перехода на page2 щелкни здесь!</a>
Так будет выглядеть код html ссылки со страницы page 2 на page1(в обратную сторону):
<a href="../page1.htm">Для перехода на page1 щелкни здесь!</a>
Т.е. сочетание "../" указывает как бы на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка.
Бывают случаи когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и.т.д. Сделать ее очень просто! Необходимо пометить место документа следующей конструкцией:
<!-- этот способ используется при маркировании заголовков --> <h2 id="razdel1">Раздел 1</h2> <!-- а такую метку можно поставить везде где понадобится--> <h2> <a name="razdel1"></a>Раздел1:</h2>
Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #.
Вот как будет выглядеть ссылка на раздел1:
<a href="#razdel1"> Ссылка на Раздел 1</a>
Приведу более наглядный пример:
<h1 > Оглавление </h1> <br> <a href="#razdel1">Раздел 1: как стать богатым</a> <br> <a href="#razdel2">Раздел 2: как стать счастливым</a><br> <a href="#razdel3">Раздел 3: как быть здоровым</a> <h2 id="razdel1">Раздел 1: как стать богатым </h2> <p> Для того, чтобы стать богатым необходимо очень много трудиться ..... </p> <h2 id="razdel2">Раздел 2: как стать счастливым</h2> <p>Для того чтобы стать счастливым, нужно использовать каждую минуту...</p> <h2>Раздел3:<a name="razdel3"></a> как быть здоровым</h2> <p>Для того чтобы быть здоровым нужно много заниматься физкультурой...</p>