Блог Тимура Казанского

Урок 3. Ссылки в HTML


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

Теория

И так, чтобы сделать ссылку, нам нужно будет пометить содержимое ссылки элементом <a>, в итоге наша ссылка будет выглядеть следующим образом: <a>ссылка на другую страницу</a>, если вы попытаетесь открыть данный код в браузере, то либо она будет подчеркнута(в зависимости от браузера), либо ничего не произойдет и будет высвечиваться обычный текст, точно такой же, как если бы вы вставили данный текст в элемент <p>. Почему тогда я все это описываю, вместо того, чтобы сразу объяснить, что к чему, на работающем примере? Дело в том, что из урока в урок, я буду повторять важные термины, элементы языка, все это для того, чтобы вы смогли запомнить их, и в дальнейшем, по мере того, как будет усложняться код, появляться новые элементы, синтаксис, вы без труда сможете разобраться в них, без необходимости судорожно искать что-то непонятное в предыдущих уроках. И в этом уроке, я хочу очередной раз напомнить вам, что тег <a> + содержимое «ссылка на другую страницу» + закрывающий тег </a> = элемент, а чтобы наша ссылка заработала, нам нужно добавить атрибут, который будет указывать, на какую страницу необходимо ссылаться – этот атрибут называется «href», а полная, работающая ссылка, будет выглядеть следующим образом:


<a href="http://сайт.ру/другая страница.html">Ссылка на другую страницу</a>

Давайте в качестве примера возьмем тот самый дом, который мы разбирали на прошлом уроке, и представим дом, как элемент html - <дом>, а теперь подумайте, что вы можете сказать об этом элементе? Да ровным счетом ничего, из чего построен этот дом, сколько в нем этажей, где он находится и т.д. Поэтому, чтобы внести ясность, нам нужно добавить атрибуты к элементу <дом>, а вот, как это будет выглядеть: <дом материал="кирпич", этажи="2", местонахождение="Москва">Мой дом</дом>.

Атрибуты в элементе на примере дома

Теперь я думаю понятно.

«Атрибут указывает дополнительную информацию об элементе»

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

target – бывают ситуации, когда при переходе по ссылке, нужно открыть содержимое в новом окне, например для того, чтобы не потерять информацию на текущей странице, возьмем, как пример поисковик «Яндекс», если вы введете нужное слово для поиска, а потом щелкните на какой-нибудь сайт из списка, то вы увидите, как откроется новое окно с результатом вашего поиска – в данном случае это удобно, а иногда наоборот очень неудобно(особенно, когда речь идет о форумах, сайтах, блогах), когда открывается огромное количество окон тем самым сея неразбериху и путаницу, так вот, чтобы управлять открытием ссылок, мы используем данный атрибут, взгляните на пример:

<a href= "http://wexplorer.ru/html/kak-sozdat-html-stranicy" target="_blank">Как создать html страницу</a>

Данное значение атрибута позволит вам, открыть страницу в новом окне, но если вы установите атрибуту "target" со значением "_self", то страница откроется в текущем окне, впрочем данное значение установлено по умолчанию, поэтому его и не используют, т.е. создавая обычную ссылку вида <a href="ссылка"></a>, она у вас откроется в текущем окне. Есть еще пару значений, но они используются очень редко и только во фреймах (что такое фреймы, объясню как-нибудь в следующем уроке) это «_parent» – загружает страницу в окно родителя(если есть окно родителя) и значение «_top» – загружает страницу в полном окне, если вы не используете фреймы, то при указании последних двух значений, браузер будет распознавать их, как значение "_self".

title– данный атрибут позволяет выдавать всплывающее окно - подсказу при наведении курсора на ссылку:

download - данный атрибут позволяет скачивать файлы из указанной ссылки.

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

<a id="verh_stranici">Верх страницы</a> <a href="данная страница#verh_stranici">Перейдите в самый верх/середину/низ этой страницы</a>

download - данный атрибут позволяет скачивать файлы из указанной ссылки.

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

Ссылки на изображении или картинке

Здесь мы поговорим, как сделать изображение и картинку ссылкой, т.е. любое изображение можно использовать как обычную ссылку, первое, что нам потребуется это элемент <img>, он указывает браузеру, что содержимое данного элемента – изображение, но чтобы указать путь к картинке нам потребуется указать новый атрибут «src», который укажет элементу <img> где находится данное изображение (аналог атрибута «href», делается это вот так:
<img src="ссылка на изображение">

А теперь рассмотрим основные атрибуты элемента <img>:

alt – с помощью данного атрибута описываем краткое описание изображения или картинки, особенно это бывает важно, когда изображение по тем или иным причинам не смогло загрузится, например в случае плохого соединения с интернетом или отсутствия самого изображения, в этом случае, чтобы понять, что было изображено на картинке, достаточно навести курсор на ссылку отсутствующего изображения и посмотреть на всплывающую надпись.(Отключите показ картинок в браузере и проверьте) Поэтому я рекомендую всегда стараться указывать заголовок с кратким описанием вашей ссылочной картинки, а делается это вот так:
<img src="ссылка на изображение" alt="на этом изображении нарисована собака">

title – аналог атрибута «alt», но в отличии от первого всегда показывает всплывающее окно с кратким описанием, советую использовать данный атрибут, когда изображении нуждается в дополнительном описании или не несет в себе достаточную информативность, например если вы будете использовать кнопку на сайте в виде изображения, то внесите краткое описание, что будет если пользователь перейдет по ней. Кстати специальные браузеры для людей с ослабленным зрением могут читать такие заголовки(title) вслух.
<img src="ссылка на изображение" alt="Нажмите эту кнопку, чтобы перейти в главное меню" title="Нажмите эту кнопку, чтобы перейти в главное меню">

Хорошо с <img> разобрались, но это пока еще не ссылка, а только изображение, как сделать его ссылкой? Очень просто – используем уже знакомый элемент <a> с атрибутом href – где вы указываете путь к странице на которую хотите перейти:
<a href="страница на которую вы перейдете после того, как щелкните на изображении"<img src="ссылка на изображение" alt="Нажмите эту кнопку, чтобы перейти в главное меню" title="Нажмите эту кнопку, чтобы перейти в главное меню"></a>
Теории я думаю достаточно, теперь давайте перейдем к практике!

Практика

Давайте сегодня создадим, что-нибудь новенькое, пусть это будет интернет магазин радиоуправляемых игрушек(да-да!) и на примере мы сможем подробно рассмотреть, как работают ссылки! Давайте сделаем следующим образом, ниже я сразу приведу табличку с описанием кода, а за ней ссылку на пример где вы сможете посмотреть урок воочию.

Использования ссылок на примере интернет магазина

<html>начало html файла
<head>заголовок
<title>Интернет магазин радиоуправляемых игрушек</title>описание страницы
<style>открывающий тег «style»
body h1, b {указываем путь к заголовку и элементу жирного шрифта
color: #040478;определяем цвет заголовка и элемента жирного шрифта
}закрываем стили для вышеперечисленных элементов
a {указываем элемент «a»(можно указывать напрямую без определения body)
color: #FD6904;устанавливаем цвет – подробнее о цветах и их обозначениях мы поговорим в следующем уроке;
font-size: 130%;определяем размер шрифта
text-decoration: none;убираем все эффекты( в данном случае если мы этого не сделаем, то ссылка будет иметь нижнее подчеркивание.
}закрываем фигурную скобку
/*p {комментируем стили для элемента «p», они делают невидимым все, что находится между - /*все что находится здесь - невидимо браузеру*/ и используются, чтобы создавать комментарии к коду.
text-align: center;устанавливает содержимое элемента «p» по центру окна, в данном случае используются, чтобы иметь возможность установить изображение в центр окна.
}*/закрываем комментарий, уберите его и вы увидите, как изображение изменит свое положение.
</style>закрываем тег стиля
<a href = "index.html"><img src="images/head.gif" alt="шапка интернет магазина"></a>изображение с названием интернет магазина, обычно устанавливается в самую верхушку страницы, в данном случае имеет ссылку на главную страницу, о том, что такое атрибут «alt» читайте выше, в теории.
</head>закрываем тег заголовка страницы
<body>открываем тег тела страницы
<h1>Добро пожаловать в магазин игрушек!</h1>заголовок
<h3><ins>Ниже представлены самые популярные игрушки зтого месяца</ins></h3>подзаголовок
<a href="vertolet.html" title="Вертолет Syma S5">Вертолет Syma S5</a><br>
<p><a href="vertolet.html"><img src="images/rapid.jpg" alt="Радиоуправляемый вертолет"></a></p>абзац с вложенным ссылочным изображением, это сделано для того, чтобы иметь возможность центрировать нашу картинку в окне браузера, о вложенности читаем в следующем уроке.
<p>Радиоуправляемая модель вертолета Syma S5<br>абзац с элементом переноса строки
<b>Цена:</b> 799 руб.</p></b>помечаем текст жирным шрифтом и переносим строку
<p><a href="vertolet.html"><img src="images/button.gif" alt="Купить" title="нажмите кнопку, чтобы купить товар"></a></p>здесь указываем такой атрибут, как <title>, так же, как и атрибут «alt» устанавливает краткое описание содержимого элемента, подробнее читаем выше, в разделе - теория
<a href="audi.html" title="Audi R8" target ="_blank">Audi R8</a><br>здесь мы указываем «title», для текстовой ссылки и атрибут «target» нажмите на ссылку с описанием и вы увидите, как благодаря значению «_blank» страница откроется в новом окне.
<p><a href="audi.html"><img src="images/r8.jpg" alt="Радиоуправляемая машина Audi R8"></a></p>атрибут <src> определяет путь к картинке
<p>Радиоуправляемая модель Audi R8, масштаб 1/24<br>помещаем текст в абзац с элементом переноса строки
<b>Цена:</b> 1599 руб.</p>помечаем цену жирным шрифтом и закрываем тег абзаца
<p><a href="audi.html"><img src="images/button.gif" alt="Купить" title="нажмите кнопку, чтобы купить товар"></a></p>тут мы добавляем атрибут <title> к изображению, для подробного описания кнопки. Описание будет всплывать не зависимо от того, видно изображение или нет.
<a href="jeep.html" title="джип OEM S800">OEM S800</a><br>тут все по старому, указываем элемент <a> с атрибутами «href» и «title» и переносим строку
<p><a href="jeep.html"><img src="images/s800.jpg" alt="Радиоуправляемый джип"></a></p>также вкладываем элемент <img> в элемень <p>, чтобы вы могли установить изображение по центру
<p>Радиоуправляемвя модель с 4мя ведущими колесами<br>а здесь попробуйте сами описать данный код, здесь нет ничего нового, но зато это позволит вам улучшить запоминание.
<b>Цена:</b> 3000 руб.</p>
<p><a href="jeep.html"><img src="images/button.gif"alt="Купить" title="нажмите кнопку, чтобы купить товар"></a></p>и не забудьте убрать комментарии для стиля абзаца – сможете увидеть, как изображение переместиться в центр экрана, а потом убрав теги абзаца подумайте и поэкспериментируйте, как без них можно поместить изображение в центр страницы?
</body>закрываем тело страницы
</html>закрываем тег html

Вы можете также посмотреть пример интернет магазина здесь и скачать код отсюда.

А теперь давайте разберем пример со страницами описания товаров нашего интернет магазина. Простыми словами, когда вы попробуйте перейти по какой либо ссылке (будь то ссылка на изображение или текстовая ссылка), вам откроется другая страница с подробным описанием данного товара. Попробуйте в примере, который располагается ниже, сами описать значение каждой строки кода, особенно уделяя внимание ссылкам. Не переживайте вы не найдете ничего нового, все это мы уже с вами разбирали ранее.

<html>
<head>
<title>Радиоуправляемый вертолет</title>
<style>
body h1, b{
color: #040478;
}
body em{
color: red;
font-size: 130%;
}
</style>
<a href = "index.html"><img src="images/head.gif"></a>
</head>
<body>
<h1>Добро пожаловать в магазин игрушек!</h1>
<h3><ins>Вертолет Syma S5</ins></h3>
<img src="images/rapidd.jpg" title="Радиоуправляемый вертолет" alt="Радиоуправляемый вертолет"></a><br>
<em>Цена: 799 руб.</em>
<p><a href="vertolet.html"><img src="images/button.gif" title="Купить" alt="Купить"></a></p>
<h2>Технические характеристики</h2>
<ul>
<li><b>Тип:</b> Вертолет Gyro S5</li>
<li><b>Размеры:</b> 190 x 90 x 40 мм</li>
<li><b>Управление:</b> Дистанционное</li>
<li><b>Время полета:</b> 8-10 минут</li>
<li><b>Дальность:</b> 10 м</li>
<li><b>Количество каналов:</b> 3</li>
<li><b>Возраст:</b> от 14 лет</li>
<li><b>Гироскоп:</b> Есть</li>
<li><b>Время зарядки аккумулятора:</ins> 50 минут</li>
</body>
</html>

Данный урок получился довольно таки объемным, но вы не переживайте если, что-то не уловили, некоторые элементы их атрибуты, мы рассмотрим более подробно в следующий уроках. А на последок, как и обещал проверка якоря – щелкните на этой ссылке, чтобы перейти в раздел теория данной страницы. Всем удачи!

Категория: Уроки HTML для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0