Ссылки в HTML

Прошлый урок мы посвятили построению списков в HTML документе.
На этом мы рассмотрим самую важную составляющую всего интернета - это ссылки в HTML.

Ссылки в HTML документе это переходы с одной страницы на другую или на какой либо файл.

Вот пример кода ссылки в HTML:

<a href="http://www.joomlatown.net">Ссылка на сайт JoomlaTown</a>

Здесь a href указывает адрес на который должен быть выполнен переход. А текст между открывающим и закрывающим тэгом будет служить текстом ссылки (анкором).

Небольшое предупреждение!

С этого урока Вы будете самостоятельно прописывать все тэги, так будет намного полезнее и эффективнее для Вас, нежели просто копировать и вставлять код. Скопированный код не будет работать в браузере. Он даётся только для лучшего восприятия и понимания. Исключение, в тех местах где сказано, что можно скопировать.

Теория без Практики это как машина без колёс. Прошу понять меня правильно.

Для того чтобы сделать html ссылку на другую страницу своего сайта достаточно просто указать имя страницы, без http, например на страницу про аквариумы:

<а hrеf="aquarium.html">Аквариумы</a>

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

<а hrеf="folder/aquarium.html">Аквариумы</a>

Если страница находится на один уровень выше ( в папке выше ) то код ссылки будет такой

<а hrеf="../aquarium.html">Аквариумы</a>

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

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

<h1 id="razdel1">Золотые рыбки</h1>
.... далее текст раздела...
........   .....

Таким образом мы отметили наш раздел. Теперь сделаем на него ссылку с конца страницы.

<a href="#razdel1"> Ввернуться к разделу о Золотых рыбках </a>

Если вы хотите предложить пользователю скачать тот или иной файл со своего сайта, то ссылка будет выглядеть так:

<а hrеf="music.mp3"> Скачать файл </a>

или песню Туман из папки Сектор Газа:

<а hrеf="sectorgaza/tuman.mp3> скачать Туман.mp3 </a>

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

Ссылка на электронную почту нужна для того чтобы отправить электронное письмо с сайта.

<а hrеf="mailto:
 Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
 "> Написать письмо </a>

где Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript - электронный адрес получателя.

Атрибуты html ссылки.

Атрибут title="заголовок" показывает заголовок ссылки при наведении на неё мышкой. Пример:

<a href="http://www.joomlatown.net" title="Как создать сайт самому">Ссылка на сайт JoomlaTown</a></p>

Результат:

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

Атрибут target="_blank" открывает ссылку в новом окне, по умолчанию ссылка открывается в том же окне. Пример:

<a href="http://www.joomlatown.net" target="_blank">Ссылка на сайт JoomlaTown откроется в новом окне</a>

Результат:

Ссылка на сайт JoomlaTown откроется в новом окне

Цвет ссылки в html.

Чтобы назначить цвета ссылкам на всей странице используется контейнер <body></body>. Его дополняют атрибутами.

link - цвет ссылки

alink - цвет ссылки при нажатии на неё мышкой

vlink - цвет посещёной ссылки

Пример:

<body link="green" alink="blue" vlink="grey">
...тело документа...
</body>

Здесь будут ссылки зелёного цвета, при нажатии будут синего, а посещённые будут серого.

Можно назначать цвета и отдельным ссылкам, при помощи вот такого кода:

<a href="http://...."><font color="red">Красная ссылка</font></a>

Теперь закрепим знания и немного поэкспериментируем.

Будем расширять свой сайт и немного изменим файл index.html

В папке www создаем ещё несколько страничек, которые будут соответствовать пунктам списка в index.html. То есть Аквариумы и оборудование, пресноводные рыбки, морские рыбки и т.д., всего 5 страничек.

Также заходим в Блокнот, пишем простейший код для пяти страничек.

<html>
<head>
<title> Аквариумы и оборудование </title>
</head>
<body>
<p> Эта страница об аквариумах и необходимом оборудовании </p>
</body>
</html>

И так пять страничек, только меняйте имя файла (вместо index.html - своё произвольное), заголовок в тэге title и описание в body. Незабывайте сохранять как файл .html. Имена файлов должны быть написаны по-английски.

После этого открываем в Блокноте свой последний сохранённый файл index.html. Если не сохранили, скопируйте здесь и сохраните:

<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<!--Тело документа!-->

<body">
<!--Здесь будет горизонтальная линия!-->

<h1 align="center"> Всё об аквариумных рыбках и растениях</h1>
<br><hr width="55%" align="right" color="red">

<!-- Тут выравнивание текста посередине!--> 
<p align="center">Добро Пожаловать!<br>
На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>

<!--Блок текста слева синим цветом!-->
<div align="left"><span style="color: #0000ff">Сомы очень скрытные рыбы,их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты</span><div>
<ul>
<li>Аквариумы и оборудование</li>
<li>Пресноводные рыбки</li>
<li>Морские рыбки</li>
<li>Аквариумные растения</li>
<li>Другие обитатели</li>
</ul>
</body>

<!--Конец тела документа!-->
</html>

Теперь пункты списка переделываем в ссылки на соответствующие страницы. Будте внимательны, не торопитесь. Вот пример:

Было:

<li>Аквариумы и оборудование</li>

Примерно что должно получиться:

<li><а hrеf="aquarium.html">Аквариумы и оборудование</a></li>

Не бойтесь это не страшно, всё должно получится.

Также попробуйте задать атрибуты ссылкам и пройти по ним, если всё правильно, то будут открыватся наши маленькие странички. Если что-то не получается подсказка здесь.

Если всё получилось переходим к следующему уроку

Вставка изображения в HTML

Обновлено 06.11.2011 22:46

Интересная статья? Поделись ей с другими:

Добавить комментарий

Скажите, какая тема вам интересна больше всего.

Ответить >>

Что нового:

Популярное

Наши Новости

VIPZone