Изучаем HTML. Часть 5 — Ссылки
Страница 1 из 1
Изучаем HTML. Часть 5 — Ссылки
Ссылки — это основа интернета. Без них интернет не приобрел бы такую популярность.
Для добавления ссылок используется следующий тег:
<A>…</A>
Особенность этого тега заключается в том, что он используется не только для ссылок, но и для указания переходов внутри документа по т.н. «якорям». Якорь — это закладка внутри страницы, на которую можно перенаправлять пользователя. В качестве примеров могу привести ссылку «Вверх», расположенную внизу справа этого форума и автоматический переход к первому непрочитанному сообщению в теме, тоже на этом форуме. Для создания якоря внутри страницы может использоваться как сам тег <a>, так и другие теги (p, div и подобные).
Содержанием тега может быть текст и/или картинка.
Параметры тега:
HREF — Задает адрес документа, на который следует перейти. Адрес может быть как относительным, так и абсолютным. Абсолютный адрес — это полный адрес веб-страницы (или файла), включая протокол (http, https, ftp и другие). Относительный адрес — это часть адреса веб-страницы, которую необходимо дописать к адресу текущего сайта, чтобы получить её полный адрес. Если тег используется для задания якоря, то этот параметр не используется.
Примеры:
С абсолютным адресом:
Код HTML:
…
<a href="http://chatplanet.ru/forum/forumdisplay.php?f=13">Уроки</a>
…С относительным адресом:
Код HTML:
…
<a href="forumdisplay.php?f=13">Уроки</a>
…С якорем:
Код HTML:
…
<a href="#top">Вверх</a>
…Если в качестве параметра указать ссылку на файл (например, архив zip), то браузер при нажатии на эту ссылку предложит скачать этот файл.
В качестве адреса можно указать ссылку вида: href="mailto:admin@сайт.ru". Система откроет программу для использования электронной почты и создаст новое пустое письмо для указанного адресата. Более того, к адресу можно добавить тему и текст письма: href="mailto:admin@сайт.ru?subject=Привет&body=Как %20дела?". Параметры:
subject — Тема письма
body — Текст письма
cc — Адресаты, которым следует передать копию письма
bcc — Адресаты, которым следует передать скрытую копию письма
В параметрах subject и body в качестве пробела следует использовать «%20». В body вместо перевода строки — «%0A».
NAME — Устанавливает имя якоря внутри документа. В этом случае писать текст внутри тега не обязательно. Пример:
Код HTML:
<html>
<head>
<title>Якоря</title>
</head>
<body>
<a name="top"></a>
…
<a href="#top">Вверх</a>
<a href="#bottom">Вниз</a>
…
<a name="bottom"></a>
</body>
</html>Обратите внимание, что имя якоря задается без символа решетки, а ссылка на якорь обязательно содержит этот символ. Кроме того, ссылаться на якорь можно не только в данном документе, но и в другом. Примеры:
Код HTML:
…
<a href="showthread.php?p=6452#post6452">Перейти к сообщению номер 6452 на этом форуме</a>
<a href="http://www.другойсайт.ru/news/42#comments">Перейти к комметариям на другом сайте</a>
…TARGET — Имя окна или фрейма, куда браузер будет загружать документ. По-умолчанию, все ссылки открываются в текущем окне или фрейме. Это поведение может быть изменено при помощью данного атрибута. Возможные значения:
_blank — документ откроется в новом окне (или новой вкладке).
_self — документ откроется в текущем окне или фрейме
_parent — документ откроется в фрейме-родителе
_top — документ откроется в текущем окне браузера. При этом все фреймы будут отменены
имя фрейма — документ откроется в фрейме с указанным именем. Если фрейма с таким именем нет (или фреймов вообще нет), то откроется новое окно, ему будет присвоено это имя и в него загрузится документ. При открытии других ссылок с таким же значением параметра они будут открываться в этом созданном окне.
TITLE — Добавляет всплывающую подсказку к тексту ссылки.
Говоря о ссылках нельзя не упомянуть следующий тег:
<BASE … /> — переопределение текущего полного адреса документа. Тег необходимо использовать внутри тега <head> (напомню, что там же находится тег <title>).
У тега есть 2 параметра:
href — Адрес, который должен использоваться для указания полного пути к файлам.
target — Имя окна или фрейма, куда будет загружаться документ, открываемый по ссылке.
Работу этого тега лучше всего понять на примерах.
Пусть у нас есть сайт www.мойсайт.ru, на котором я делаю страницу с новостями news.html. Но для всех картинок сайта я сделал отдельный домен images.мойсайт.ru. В этом случае при вставке картинок мне будет необходимо каждый раз указывать полный путь до изображения (так как базовые адреса страницы с новостями и картинок различаются). Количество исходного кода для страницы увеличится, она будет занимать больше места на сервере и дольше загружаться посетителями. Но если в шапке страницы я размещу тег <base href="http://images.мойсайт.ru" />, тогда в параметре src для изображений я буду указывать их относительные адреса. Размер кода страницы уменьшится, станет проще.
Второй пример. Предположим, я делаю каталог сайтов или страницу — список партнеров проекта. Дописывать к каждой ссылки параметр target="_blank" мне лень . Вместо этого я использую следующий тег: <base target="_blank" /> и все ссылки при этом открываются в новых окнах (или вкладках).
С удовольствием отвечу на все ваши вопросы по ссылкам в html документах.
© Mickeleangelo
P.S. Да, чуть не забыл сказать: никто не может запретить вам на вашем сайте (или в вашем чате) ставить ссылки на другие сайты (или чаты). Делать это можно и нужно без спроса у кого-либо.
Для добавления ссылок используется следующий тег:
<A>…</A>
Особенность этого тега заключается в том, что он используется не только для ссылок, но и для указания переходов внутри документа по т.н. «якорям». Якорь — это закладка внутри страницы, на которую можно перенаправлять пользователя. В качестве примеров могу привести ссылку «Вверх», расположенную внизу справа этого форума и автоматический переход к первому непрочитанному сообщению в теме, тоже на этом форуме. Для создания якоря внутри страницы может использоваться как сам тег <a>, так и другие теги (p, div и подобные).
Содержанием тега может быть текст и/или картинка.
Параметры тега:
HREF — Задает адрес документа, на который следует перейти. Адрес может быть как относительным, так и абсолютным. Абсолютный адрес — это полный адрес веб-страницы (или файла), включая протокол (http, https, ftp и другие). Относительный адрес — это часть адреса веб-страницы, которую необходимо дописать к адресу текущего сайта, чтобы получить её полный адрес. Если тег используется для задания якоря, то этот параметр не используется.
Примеры:
С абсолютным адресом:
Код HTML:
…
<a href="http://chatplanet.ru/forum/forumdisplay.php?f=13">Уроки</a>
…С относительным адресом:
Код HTML:
…
<a href="forumdisplay.php?f=13">Уроки</a>
…С якорем:
Код HTML:
…
<a href="#top">Вверх</a>
…Если в качестве параметра указать ссылку на файл (например, архив zip), то браузер при нажатии на эту ссылку предложит скачать этот файл.
В качестве адреса можно указать ссылку вида: href="mailto:admin@сайт.ru". Система откроет программу для использования электронной почты и создаст новое пустое письмо для указанного адресата. Более того, к адресу можно добавить тему и текст письма: href="mailto:admin@сайт.ru?subject=Привет&body=Как %20дела?". Параметры:
subject — Тема письма
body — Текст письма
cc — Адресаты, которым следует передать копию письма
bcc — Адресаты, которым следует передать скрытую копию письма
В параметрах subject и body в качестве пробела следует использовать «%20». В body вместо перевода строки — «%0A».
NAME — Устанавливает имя якоря внутри документа. В этом случае писать текст внутри тега не обязательно. Пример:
Код HTML:
<html>
<head>
<title>Якоря</title>
</head>
<body>
<a name="top"></a>
…
<a href="#top">Вверх</a>
<a href="#bottom">Вниз</a>
…
<a name="bottom"></a>
</body>
</html>Обратите внимание, что имя якоря задается без символа решетки, а ссылка на якорь обязательно содержит этот символ. Кроме того, ссылаться на якорь можно не только в данном документе, но и в другом. Примеры:
Код HTML:
…
<a href="showthread.php?p=6452#post6452">Перейти к сообщению номер 6452 на этом форуме</a>
<a href="http://www.другойсайт.ru/news/42#comments">Перейти к комметариям на другом сайте</a>
…TARGET — Имя окна или фрейма, куда браузер будет загружать документ. По-умолчанию, все ссылки открываются в текущем окне или фрейме. Это поведение может быть изменено при помощью данного атрибута. Возможные значения:
_blank — документ откроется в новом окне (или новой вкладке).
_self — документ откроется в текущем окне или фрейме
_parent — документ откроется в фрейме-родителе
_top — документ откроется в текущем окне браузера. При этом все фреймы будут отменены
имя фрейма — документ откроется в фрейме с указанным именем. Если фрейма с таким именем нет (или фреймов вообще нет), то откроется новое окно, ему будет присвоено это имя и в него загрузится документ. При открытии других ссылок с таким же значением параметра они будут открываться в этом созданном окне.
TITLE — Добавляет всплывающую подсказку к тексту ссылки.
Говоря о ссылках нельзя не упомянуть следующий тег:
<BASE … /> — переопределение текущего полного адреса документа. Тег необходимо использовать внутри тега <head> (напомню, что там же находится тег <title>).
У тега есть 2 параметра:
href — Адрес, который должен использоваться для указания полного пути к файлам.
target — Имя окна или фрейма, куда будет загружаться документ, открываемый по ссылке.
Работу этого тега лучше всего понять на примерах.
Пусть у нас есть сайт www.мойсайт.ru, на котором я делаю страницу с новостями news.html. Но для всех картинок сайта я сделал отдельный домен images.мойсайт.ru. В этом случае при вставке картинок мне будет необходимо каждый раз указывать полный путь до изображения (так как базовые адреса страницы с новостями и картинок различаются). Количество исходного кода для страницы увеличится, она будет занимать больше места на сервере и дольше загружаться посетителями. Но если в шапке страницы я размещу тег <base href="http://images.мойсайт.ru" />, тогда в параметре src для изображений я буду указывать их относительные адреса. Размер кода страницы уменьшится, станет проще.
Второй пример. Предположим, я делаю каталог сайтов или страницу — список партнеров проекта. Дописывать к каждой ссылки параметр target="_blank" мне лень . Вместо этого я использую следующий тег: <base target="_blank" /> и все ссылки при этом открываются в новых окнах (или вкладках).
С удовольствием отвечу на все ваши вопросы по ссылкам в html документах.
© Mickeleangelo
P.S. Да, чуть не забыл сказать: никто не может запретить вам на вашем сайте (или в вашем чате) ставить ссылки на другие сайты (или чаты). Делать это можно и нужно без спроса у кого-либо.
Похожие темы
» Изучаем HTML. Часть 7 — Таблицы
» Изучаем HTML. Часть 8 — Что такое CSS
» Изучаем HTML. Часть 6 — Списки
» Изучаем HTML. Часть 1 — Основы
» Изучаем HTML. Часть 4 — Добавляем картинки
» Изучаем HTML. Часть 8 — Что такое CSS
» Изучаем HTML. Часть 6 — Списки
» Изучаем HTML. Часть 1 — Основы
» Изучаем HTML. Часть 4 — Добавляем картинки
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения