Ссылка – переход на внешний сайт или к внутреннему элементу текущего сайта: странице, разделу, изображению и т.п.
Метка (Якорь («анкор») или Закладка) – указатель для последующего перехода к нему по ссылке. Причем, метка может быть как внутри текущей, так и внутри другой страницы сайта.
Ссылки и метки создаются при помощи парного тега <A>. Он не может содержать другие теги <A>,т.е. нельзя одну ссылку располагать внутри другой. Адрес документа, к которому ведёт ссылка, указывается в качестве значения атрибута href. Внутри тега <A> указывается текст или изображение.
Например, <A HREF=”http://co654.com “>Сайт Центра образования №654</A>
или <A HREF=”http://co654.com”><img src=”c:/1.jpg”></A>
АТРИБУТЫ ТЭГА <A>
Стандартные атрибуты:
- HREF= «адрес» – Обязательный атрибут ссылки. Задаёт адрес внешней или внутренней Web-страницы или имя метки, куда будет осуществлён переход по ссылке.
- name= «имя метки» – Обязательный атрибут метки. Задаёт имя метки (с учётом регистра)
- target – Задаёт имя окна или фрейма, в котором будет открыт документ.
- «имя» – Загружает документ в новое окно, присваивая ему имя, заданное для дальнейших загрузок
- _self – Загружает документ в текущее окно (фрейм) (по умолчанию)
- _blank – Загружает документ в новое окно, не присваивая ему имени.
- _parent – Загружает документ в родительский фрейм, если родителя нет, то действует как _self.
- _top – Отменяет все фреймы и загружает документ во все окно, если фреймов нет, то действует как _self.
Параметры href и name в теге <A> одновременно не присутствуют. Для создания ссылки на метку, расположенную на другой странице или сайте, перед символом решетка (#) дополнительно указывается относительный или абсолютный адрес этой страницы.
Дополнительные атрибуты:
- title= «текст» – всплывающая подсказка при наведении курсора мыши на ссылку.
- style=«color:#RRGGBB» – цвет для оформления непосещенной ссылки
ВИДЫ ССЫЛОК
В зависимости от адреса (см. тему «Иллюстрации), указанного в атрибуте href, различают внешние и внутренние ссылки. Для связи Web-страниц внутри сайта, удобно использовать относительные адреса, а для ссылок на другие ресурсы – абсолютные. Сайт представляет собой папку с файлами HTML-документов, картинок и т.п., размещенную на хостинге. Файлы, для удобства, могут быть рассортированы по папкам.
Внешняя ссылка – переход на внешний сайт, заданный абсолютным (полным) адресом.
Полный адрес страницы: имя протокола (http), имя домена-сайта (co654.com) и имя папки или страницы на сайте.
Например,
<A HREF=”http://co654.com“>Сайт Центра образования №654</A>
<A HREF=”http://co654.com/na-netschool.html”>Электронный журнал</A>
Переход по такому адресу всегда осуществляется корректно, что не всегда возможно при использовании относительной адресации. Недостатком абсолютной адресации является длинный адрес, требующий подключения к Интернет, что необязательно для локального HTML-документа
Внутренняя ссылка – переход внутри сайта или внутри текущей страницы (к разделу, изображению и т.п.), заданный относительным адресом или именем метки. Такие ссылки действуют только в пределах текущего сайта.
Относительный адрес: только имя страницы, включающее перечень имен папок относительно положения главной страницы сайта или страницы, на которой указаны. Такие адреса короче абсолютных, но ссылки работают только в пределах сайта.
Например,
<A HREF=”pages/page1.htm”>Аннотация к фильму</A>
<A HREF=”images/poster.htm”>Постер кинофильма</A>
Параметры тегов HTML чувствительны к регистру текста, поэтому при задании значений атрибутов в тегах ссылок и иллюстраций будьте внимательны к названиям папок и файлов.
Оформление внутренних ссылок сайта.
ОФОРМЛЕНИЕ ССЫЛОК
Принято, текст, являющийся ссылкой, выделять подчеркиванием и цветом. Такое выделение ссылок помогает посетителям сайта ориентироваться в его навигации. Различают посещенные, непосещенные, активные ссылки и ссылки при наведении курсора мыши.
Непосещенными называются ссылки, которые пользователь ни разу не активировал, посещенными – те, которые хоть раз активировались. Ссылки в кратковременный момент нажатия левой кнопки мыши называются активными, а ссылки при наведении на них курсора мыши так и называются – ссылки при наведении курсора мыши.
В классическом языке HTML разные виды ссылок принято оформлять разными цветами при помощи атрибутов тега <BODY>: link, alink и vlink. Эти атрибуты не позволяют определить цвет только для ссылки при наведении курсора мыши.
Другой способ оформления ссылок цветом – внутренние стили. Для этого в «шапку» страницы (<HEAD>) добавляется парный тег <STYLE type=”text/css”>…</STYLE>, внутри которого указываются тег и через «двоеточие» параметр, затем в фигурных значение цвета для каждого вида ссылки. Такой способ задания цветов ссылок принят в дополнении к HTML – в языке CSS.
<style type=”text/css”>
a:link {color:#RRGGBB} /* цвет непосещенной ссылки */
a:visited {color:#RRGGBB} /* цвет посещенной ссылки */
a:hover {color:#RRGGBB} /* цвет ссылки при наведении курсора мыши */
a:active {color:#RRGGBB} /* цвет активной ссылки (в момент нажатия) */
</style>
Организация внутренних ссылок
Для создания внутренней ссылки используется пара тегов <A>:
1) задающий метку (якорь или закладку)
<A name=“имя_метки”></A>, где имя_метки – любое слово на английском языке.
2) оформляющий внутреннюю ссылку
<A href=“#имя_метки”>любой текст</A>, где # и имя_метки НЕ РАЗДЕЛЕНЫ пробелом
Два важных замечания:
1) имя_метки – уникальное имя на странице – задается один раз, а ссылок на него может быть несколько;
2) имя_метки – чувствительно к регистру
Для организации внутренней ссылки на другую страницу сайта в значение атрибута HREF перед # указывают имя другой страницы того же сайта. Например, <A href=“name_page2#имя”>любой текст</A>
ОТКРЫТИЕ ССЫЛОК В НОВОМ ОКНЕ
По умолчанию все браузеры открывают новые страницы в текущем окне. Атрибут TARGET тега <A> позволяет открывать новые страницы в новом окне. Для этого указывается значение “_blank”. Например, <А HREF=”http://co654.com” target=”_blank”>Наш сайт </a>
Если в качестве значения этого параметра указано любое имя, заданное латиницей и цифрами (например, win1), то ссылка откроется также в новом окне, которое получает заданное имя, невидимое пользователю. Повторное же обращение к этой ссылке при незакрытом окне win1 не приведёт к открытию еще одного нового окна. Параметр TARGET используется в теге <A> для указания фрейма (части окна браузера), в котором будут открываться все ссылки сайта.
ОРГАНИЗАЦИЯ САЙТА
По определению «сайт» – набор Web-страниц, объединенных по какому-либо признаку. Объединение Web-страниц осуществляется при помощи ссылок. Поэтому очень важно придерживаться следующих рекомендаций:
- Стартовую страницу сайта общепринято называть index.htm
- На стартовой странице должно быть минимальное количество графики.
Загрузка любого сайта обычно начинается с его стартовой страницы, поэтому «успех» сайта во многом зависит от того, насколько быстро загружается страница. Фотографии, иллюстрации и прочие графические элементы загружаются медленнее текста. Поэтому их лучше не размещать на стартовой странице, где организовать ссылку на них. В качестве логотипа на разных страницах сайта использовать один и тот же графический файл, а не его копии («логотип для страницы 1», «логотип для страницы 2» и т.п.) – это только затрудняет загрузку сайта. Общий рисунок при повторном использовании уже не скачивается, а берется из временной папки, создаваемой на компьютере при скачивании сайта
- При организации фотоальбома или аналогичного сайта сделайте страницу с мелкими копиями –ссылками на оригинал. Пользователь поучит возможность сам определять, какую картинку он будет ожидать.
- На каждой странице сайта нужно стремиться следовать единому, самостоятельно выработанному, стилю оформления и навигации – это упрощает посещение сайта.
- Следует стремиться ограничивать размер страницы сайта в пределах 100-150 Кбайт – это ускоряет загрузку и улучшает восприятие страниц.
Пример
<html>
<head>
<title>Примеры ссылок</title>
</head>
<body alink=#FF0000 link =#0000FF vlink =#9900FF>
<basefont size =4>
<h1 align =center >Оформление ссылок и закладок</h1>
<! метка начала страницы >
<a name =”begin”></a>
<h2 align =left>Содержание страницы </h2>
<! список (меню внутренних ссылок текущей страницы сайта) >
<ol>
<li> <a href =”#Lesson1″>Понятие ссылки и закладки</a> </li>
<li> <a href =”#Lesson2″>Внешние ссылки</a> </li>
</ol>
<h2 align =left >Разделы</h2>
<! метка первого раздела >
<a name =”Lesson1″></a>
<h3>Понятия ссылки и закладки</h3>
<dl>
<dt><b> Ссылка </b> </dt>
<dd > это переход на внешний сайт, другую страницу текущего сайта или к разделу текущей страницы</dd>
<ul>Ссылки различают по адресации
<li> Внешняя – переход на внешний сайт (используется URL-адрес) </li>
<li> Внутренняя – это переход на другую страницу текущего сайта (используется относительный адрес) или на метку</li>
</ul>
<dt><b> Метка </b> (Закладка или Якорь) </dt>
<dd > это указатель на раздел сайта</dd>
</dl>
<! ссылка на содержание – возврат в начало страницы>
<p> <a href =”#begin”>Вернуться в начало страницы</a></p>
<! метка второго раздела >
<a name =”Lesson2″></a>
<h3>Внешние и внутренние ссылки. </h3>
<p>Новая страница или сайт может открываться в текущем или в новом окне.
<br>Это определяется значением атрибута <b>TARGET</b>. </p>
<! список ссылок на внутренние страницы сайта >
<ul>
<li> <a href=”example/exm1-1.htm” target =”_self”> <b>_self</b> – ссылка откроется в текущем окне </a></li>
<li> <a href=”example/exm1-2.htm” target =”_blank”> <b>_blank</b> – ссылка откроется каждый раз в новом окне </a></li>
<li> <a href=”example/exm1-3.htm” target =”example”> <b>name</b> – ссылка откроется первый раз в новом окне …</a></li>
<! ссылка на внешний сайт >
<li> <a href=”http://www.ya.ru” target =”example”> <b>name</b> – ссылка откроется в прежнем окне</a></li>
</ul>
<! ссылка на содержание – возврат в начало страницы>
<p> <a href =”#begin”>Вернуться в начало страницы</a></p>
</body>
</html>
Страницы exm1-1.htm, exm1-2.htm, exm1-3.htm содержат только указание, как вернуться на главную страницу сайта.
Ссылки на электронную почту
Каждый уважающий себя сайт должен иметь обратную связь со своими посетителями. Один из способов этой связи – написать адрес электронной почты (e-mail), но гораздо лучше будет указать его в виде ссылки, при нажатии на которую автоматически откроется почтовая программа. Чтобы это сделать, достаточно создать в теге <A> такую конструкцию:
<a href=”mailto:адрес почты”>адрес почты</a>
Пример создания ссылки на электронную почту
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html><head><meta http-equiv=”Content-Type” content=”text/html; charset=Windows-1251″><title>Ссылка на почтовый ящик</title></head><body> <p> <a href=”mailto:mymail@site.bom” title=”Почта для связи”>mymail@site.bom</a> </p></body></html>
Результат в браузере
mymail@site.bom
Как видите все очень просто, только не забывайте о том, что <A> является встроенным (inline, уровня строки) элементом и располагать его можно только внутри тегов, которые могут содержать этот тип.
Хорошо, но можно сделать еще кое-что. Если вы хотите, чтобы письма отправлялись на несколько почтовых ящиков, то надо после адреса основной электронной почты поставить знак вопроса (?) и две латинские «с» со знаком равно (сс=). А далее пишите дополнительные адреса через запятую.
Пример создания ссылки на несколько ящиков электронной почты
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html><head><meta http-equiv=”Content-Type” content=”text/html; charset=Windows-1251″><title>Ссылка несколько почтовых ящиков</title></head><body> <p> <a href=”mailto:mymail@site.bom?cc=mymail2@site.bom,mymail3@site.bom”>mymail@site.bom</a> </p></body></html>
Результат в браузере
mymail@site.bom
Тэг <BASE>
Тег <BASE> используется для установки базового адреса текущего документа, относительно которого будут высчитываться все относительные адреса (URL) на странице. Также он может задавать имя окна или фрейма, в котором будут открываться все документы по ссылкам на текущей странице. Данный тег располагается в заголовке страницы, внутри <HEAD>. Причем, он должен появиться раньше любого тега, ссылающегося на внешний документ.
Дело в том, что по умолчанию все относительные адреса на странице высчитываются исходя из расположения (адреса) самой страницы. Поэтому, если ее скопировать в другую папку или, допустим, на локальный компьютер, то относительные URL (или их часть) перестанут работать. Для исправления этого недостатка и нужен тег <BASE>.
Допустим, у вас есть страница по адресу: http://mysite.bom/one/1.php, в которой используется ссылка с относительным URL вида: href=”two/2.php”. Теперь, если мы перенесем страницу 1.php в другую папку, то ссылка не найдет файл 2.php. А вот, если мы укажем в теге <BASE> адрес href=”http://mysite.bom/one/1.php”, то ссылка будет работать везде.
Атрибуты
Личные атрибуты:
- href – Обязательный атрибут. Устанавливает базовый адрес текущего документа.
- target – Задает имя окна или фрейма, в котором будут открываться все документы по ссылкам на текущей странице.
Без комментариев.