Пошаговые уроки с примерами по работе с ссылками на html странице.

В этом уроке будем работать над созданием ссылок.

Ссылка на сайт

Ссылка на страницу сайта

Ссылка на страницу внутри сайта

Ссылка внутри страницы


Для работы по этому уроку желательно создать папку и поместить туда несколько страниц например index.html, index2.html, index3.html . И ещё надо знать что index.html по умолчанию это главная страница сайта.



Как сделать ссылку на сайт.

Давайте посмотрим, как создать ссылку на сайт, это совсем легко все они начинаются с открывающего <a href""> и закрывающего </a> тега. Перейдём к примеру.


<a href="http://www.sozdat-svoysayt.ru"> Эта ссылка указывает на сайт www.sozdat-svoysayt.ru </a>
 

Переносим теперь всё это в index.html страницу который мы создавали в первых уроках сохраняем, далее открываем в браузере и видим ссылку. Она указывает на главную страницу сайта www.sozdat-svoysayt.ru. Ниже находится итог нашего примера ссылка вполне рабочая можете нажать на неё и откроется первая страница сайта.


Эта ссылка указывает на сайт www.sozdat-svoysayt.ru
 



Как сделать ссылку на страницу сайта.

Ссылку на определённую страницу сайта указывается так же, но в конце надо через чёрточку добавить название страницы. В нашем примере index.php, а у вас она может быть index.html или index2.html возможно и другие варианты, если вы создали папку и поместили туда несколько страниц. Давайте посмотрим на примере и всё станет ясно.


<a href="http://www.sozdat-svoysayt/index.php"> Эта ссылка указывает на страницу index.php сайта www.sozdat-svoysayt.ru </a>
 

Здесь мы указали на страницу index.php если перейти по нему то откроется главная страница сайта, так же можно вместо index.php указать другую страницу только если эта страница находится в главной папке сайта. Как делать ссылки на страницы, которые находятся в других папках, смотрите ниже.


 

Эта ссылка указывает на страницу index.php сайта www.sozdat-svoysayt.ru
 


Как сделать ссылку на страницу внутри сайта.

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


Так указываем когда страница struktura.php находится в одной папке со страницей, где расположена ссылка.<br>
 <a href="struktura.php"> struktura.php </a><br><br>

Здесь мы указываем когда страница struktura.php находится в следующей папке в который можно перейти сразу с папки где расположена страница с ссылкой. <br>
 <a href="primer/struktura.php"> primer/struktura.php </a><br><br>

Здесь мы указываем, если страница struktura.php находится в другой папке, которая расположена до папки, где находится страница со ссылкой.<br>
 <a href="../struktura.php">../struktura.php </a><br>
 

Теперь посмотрим итог нашего примера после того как мы поместили её на index.html . В первом примере struktura.php мы ссылаемся на страницу расположенную в одной папке. Во втором примере primer/struktura.php мы ссылаемся на страницу, которая находится в другой папке на шаг в перёд. Для этого примера я специально создал папку primer на сайте и поместил туда struktura.php. В третьем примере ../sozdat_svoy_sayt/struktura.php мы ссылаемся на страницу, которая находится в другой папке, получается на шаг назад. Как вы заметили, мы обошлись без указания имени сайта. Здесь я указываю php документы, а вы проверяйте на html страницах. В дальнейшем мы познакомимся, как работает php. Давайте взглянем, что же у нас получилось, все они рабочие можете проверить.


Так указываем когда страница struktura.php находится в одной папке со страницей, где расположена ссылка.
struktura.php

Здесь мы указываем когда страница struktura.php находится в следующей папке в который можно перейти сразу с папки где расположена страница с ссылкой.
primer/struktura.php

Здесь мы указываем когда страница struktura.php находится в другой папке которая расположена до папки где находится страница с ссылкой.
../struktura.php
 


Как сделать ссылку внутри страницы.

Для чего же нам нужно ссылаться внутри страницы? а для того чтоб пользователю было легче находить нужную информацию. Допустим, у вас на сайте есть страница с большим объёмом информации, а пользователь, переходя на ваш сайт, хочет найти определенную информацию. Но так как текста на странице много ему может и не хватить терпения и он может покинуть ваш сайт. Чтоб этого не случилось надо в начале страницы сделать заголовки с небольшим описанием в виде ссылок и пользователь перейдёт к интересующему месту. Смотрим на примере.


<h1 > Общее описание сайта </h1>
<h2><a href="#razdel1">Ссылка на первый раздел </a><br><br>
<a href="#razdel2">Ссылка на второй раздел </a><br><br>
<a href="#razdel3">Ссылка на третий раздел </a></h2>
<p id="razdel1"> Первый раздел </p>
<p align="center"> Здесь мы начинаем писать все, что мы хотели для первого раздела </p>
<p id="razdel2"> Второй раздел </p>
<p align="center"> Здесь мы начинаем писать все, что мы хотели для второго раздела </p>
<p id="razdel3"> Третий раздел </p>
<p align="center"> Здесь мы начинаем писать все, что мы хотели для третьего раздела </p>
 

А вот что у нас вышло. Здесь конечно не так видно как если бы на странице было бы больше текста, но ссылки всё равно работают.


Общее описание сайта

Ссылка на первый раздел

Ссылка на второй раздел

Ссылка на третий раздел

Первый раздел

Здесь мы начинаем писать все, что мы хотели для первого раздела

Второй раздел

Здесь мы начинаем писать все, что мы хотели для второго раздела

Третий раздел

Здесь мы начинаем писать все, что мы хотели для третьего раздела


На этом мы закончим наш первый урок по работе с ссылками на сайте, ждём вас на следующем, важном уроке по работе с ссылками часть 2.




Рейтинг@Mail.ru   Яндекс.Метрика