Как на странице сделать ссылки разных цветов? Как сделать ссылку на сайт в html


Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 2.1+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href="URL">...</a> <a name="идентификатор">...</a>

Атрибуты

accesskey Активация ссылки с помощью комбинации клавиш. coords Устанавливает координаты активной области. download Предлагает скачать указанный по ссылке файл. href Задает адрес документа, на который следует перейти. hreflang Идентифицирует язык текста по ссылке. name Устанавливает имя якоря внутри документа. rel Отношения между ссылаемым и текущим документами. rev Отношения между текущим и ссылаемым документами. shape Задает форму активной области ссылки для изображений. tabindex Определяет последовательность перехода между ссылками при нажатии на кнопку Tab. target Имя окна или фрейма, куда браузер будет загружать документ. title Добавляет всплывающую подсказку к тексту ссылки. type Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег А</title> </head> <body> <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p> <p><a href="tip.html">Как сделать такое же фото?</a></p> </body> </html>

htmlbook.ru

HTML ссылки: как создавать ссылки на другие веб-страницы

В этой статье мы расскажем, как создавать ссылку в HTML с одной страницы на другую. Также кратко опишем различные типы гиперссылок.

Для создания гиперссылки, воспользуйтесь тегом <a> вместе с атрибутом href. Значением атрибута href является URL-адрес или местоположение, на которое будет указывать ссылка.

Пример:

<p>Here are some <a href="https://www.quackit.com/html/codes/">HTML codes</a> to play with.</p>

Посмотреть пример

Гипертекстовые ссылки могут использовать абсолютные, а также относительные URL-адреса и адреса относительно корня сайта.

Абсолютные адреса

Это относится к случаю, когда URL-адрес содержит полный путь. Например:

<a href="https://www.quackit.com/html/tutorial/">HTML Tutorial</a>

Относительные адреса

В этом случае в URL-адресе указывается путь относительно текущего положения. Например, если мы хотим сослаться на URL-адрес https://www.quackit.com/html/tutorial/, а наше текущее местоположение — https://www.quackit.com/html/, нужно использовать следующую ссылку:

<a href="tutorial/">HTML Tutorial</a>

Адреса относительно корня сайта

Это относится к URL-адресу ссылки HTML, в котором определен путь относительно корня домена.

Например, если мы хотим ссылаться на URL-адрес https://www.quackit.com/html/tutorial/, а текущее местоположение — https://www.quackit.com/html/, нужно использовать следующую ссылку:

<a href="/html/tutorial/">HTML Tutorial</a>

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

Цели ссылки

Также можно определить, где будет открыт URL-адрес: в новом окне или в текущем. Это можно сделать с помощью атрибута target. Например, target = «_ blank» открывает URL в новом окне.

Атрибут target может принимать следующие значения:

_blank: открывает ссылку в новом окне HTML. _self: загружает URL-адрес в текущем окне. _parent: загружает URL-адрес в родительский фрейм (все также в текущем окне браузера). Применимо только при использовании фреймов. _top: загружает URL-адрес в текущем окне браузера, но отменяет другие фреймы.

Пример:

<a href="https://www.quackit.com" target="_blank">Quackit</a>

Посмотреть пример

Ссылки перехода

Можно сделать ссылки, которые будут направлять в другие разделы в переделах одной страницы (или другой).

Вот как сделать ссылку в HTML на эту же страницу:

  1. Добавьте идентификатор к цели ссылки

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

<h3>Elephants</h3>
  1. Создайте гиперссылку

Теперь создайте гиперссылку. Это делается с помощью идентификатора цели ссылки, которому предшествует символ хэша (#):

<a href="#elephants">Jump to Elephants</a>

Приведенные выше фрагменты кода размещены в разных частях документа. Получается примерно следующее:

<!DOCTYPE html> <html> <title>Example</title> <body> <p><a href="#elephants">Jump to Elephants</a></p> <h3>Cats</h3> <p>All about cats.</p> <h3>Dogs</h3> <p>All about dogs.</p> <h3>Birds</h3> <p>All about birds.</p> <h3>Elephants</h3> <p>All about elephants.</p> <h3>Monkeys</h3> <p>All about monkeys.</p> <h3>Snakes</h3> <p>All about snakes.</p> <h3>Rats</h3> <p>All about rats.</p> <h3>Fish</h3> <p>All about fish.</p> <h3>Buffalo</h3> <p>All about buffalo.</p> </body> </html>

Посмотреть пример

Это необязательно должна быть одна и та же страница. Можно использовать этот метод, чтобы перейти к идентификатору любой страницы. Для этого перед тем, как вставить ссылку в HTML, добавьте целевой URL-адрес перед символом «#». Например:

<a href="http://www.example.com#elephants">Jump to Elephants</a>

Конечно, предполагается, что на странице есть идентификатор с этим значением.

Ссылки на электронную почту

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

<a href="mailto:[email protected]">Email King Kong</a>

Посмотреть пример

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

Можно автоматически заполнить строку темы для своих пользователей, и даже тело письма. Это делается путем добавления параметров subject и body к адресу электронной почты.

<a href="mailto:[email protected]?subject=Question&body=Hey there">Email King Kong</a>

Посмотреть пример

Базовый href

Можно задать URL-адрес по умолчанию, с которого будут начинаться все ссылки HTML на странице. Для этого поместите тег base (вместе с атрибутом href) в элемент <head>.

Пример HTML кода:

<!DOCTYPE html> <html> <head> <title>Example</title> <base url="https://www.quackit.com"> </head> <body> <a href="html">HTML</a> </body> </html>

Посмотреть пример

Перевод статьи «HTML Links: How to create Links to other Web Pages» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Атрибуты ссылок | htmlbook.ru

Основной атрибут href тега <a> мы уже освоили, рассмотрим еще несколько полезных, но необязательных атрибутов этого тега.

target

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. Синтаксис следующий.

<a target="имя окна">...</a>

В качестве значения используется имя окна или фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен применяются следующие.

  • _blank — загружает страницу в новое окно браузера.
  • _self — загружает страницу в текущее окно (это значение задается по умолчанию).
  • _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

В примере 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.

Пример 8.4. Открытие ссылки в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Ссылка в новом окне</title> </head> <body> <p><a href="new.html" target="_blank">Открыть в новом окне</a></p> </body> </html>

Атрибут target корректно использовать только при переходном <!DOCTYPE>, при строгом <!DOCTYPE> будет сообщение об ошибке, поскольку в этой версии HTML target уже не поддерживается.

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

title

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

<a title="текст">...</a>

В качестве значения указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. В примере 8.5 показано, как использовать атрибут title для ссылок.

Пример 8.5. Создание всплывающей подсказки

<!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=utf-8"> <title>Подсказка к ссылке</title> </head> <body> <p><a href="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p> </body> </html>

Результат данного примера показан на рис. 8.8.

Рис. 8.8

Рис. 8.8. Вид всплывающей подсказки в браузере

Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут.

htmlbook.ru

Урок 4. Ссылки в html

Что такое ссылка html?

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

Для обозначения ссылки использует тег a. Для обозначения адреса, по которому направляет ссылка, используется атрибут href.

Рассмотри пример конструкции ссылки:

<html>    <head>    <title>Ссылка в html</title>    </head> <body>

   <a href="http://www.yandex.ru">Перейти на Яндекс</a>

</body> </html>

В результате получаем

Перейти на Яндекс Как Вы видите ссылка состоит из Слов (Перейти на Яндекс), которые вставлены между открывающим и закрывающим тегами a и Адреса ( http://www.yandex.ru ), который прописывается в атрибуте href в кавычках.

Тег a обозначает ссылку. У него обязательно должна быть закрывающая часть. У тега a есть несколько атрибутов.

Атрибут href и адреса ссылок

href - самый важный атрибут! В нём прописывается адрес ссылки, по которой перейдёт пользователь.
Адрес ссылки бывает абсолютный и относительный.

В абсолютном прописывается полный URL адрес, например http://tradebenefit.ru/index.html (используется при ссылке на другой сайт или файл другого сайта).

В относительном указывается адрес относительно внутреннего файла. То есть допустим у Вас есть файл index.html, а другой - info.html, также находится на этом компьтере, хостинге и тп. Так вот ссылка Внутри сайта (на том же хостинге, компьютере и тп) на другую страницу будет называться относительной и выглядеть будет короче - info.html (ссылка на файл info.html, который находится в этой же папке)

Для понимания вышесказанного рассмотрим пример кода<html>    <head>    <title>Атрибут href в ссылках html</title>    </head> <body>

<a href="http://tradebenefit.ru/index.php">Абсолютная ссылка</a> <a href="rules.php">Относительная ссылка</a>

</body> </html>

С первой ссылкой я думаю всё понятно, дан адрес целиком. Во втором случае прописывается укороченный адрес, так как файлы находятся на одной машине (сервере). Если файл будет находиться на папку глубже, допустим у нас есть файл index.html и папка data, в которой есть файл info.html, то ссылка будет выглядеть так<a href="data/info.html">Относительная ссылка</a> Если файл, на который ссылаемся, находится наоборот, на папку выше, то делаем так<a href="../info.html">Относительная ссылка</a>

Атрибут target

При использовании атрибута target чаще всего используются три значения: _self, _new, _blank.

_self страница по ссылке открывается в этом же окне (также происходит по умолчанию, если атрибут не использован)._new страница по ссылке откроется в новом окне. Данное значение не всегда отрабатывается как надо, поэтому в некоторых браузерах может открыть новое окно_blank страница по ссылке открывается в новой вкладке. Чаще всего атрибут target используют именно с этим значением.

Теперь рассмотрим пример кода

<html>    <head>    <title>Атрибут target в ссылках html</title>    </head> <body>

<a href="http://www.yandex.ru">Яндекс откроется в этой же вкладке</a> <a href="http://www.yandex.ru" target="_self">Яндекс принудительно откроется в этой же вкладке</a> <a href="http://www.yandex.ru" target="_new">Яндекс откроется в новом окне</a> <a href="http://www.yandex.ru" target="_blank">Яндекс откроется в новой вкладке</a>

</body> </html>

Пример ссылки, открывающейся в новой вкладке. Данный вид ссылок очень полезен тем, что пользователь переходя на другой сайт, не закрывает Ваш.

Перейти на Яндекс

Атрибут title

Атрибут title служит для того, чтобы при наведении на ссылку выплывала подсказка. В атрибуте title соответственно прописывается текст подсказки или пояснения<html>    <head>    <title>Атрибут title в ссылках html</title>    </head> <body>

<a href="http://www.yandex.ru" title="Ссылка на Яндекс">Яндекс</a>

</body> </html>

При наведении на ссылку высветится сообщение 'Ссылка на Яндекс'.

Атрибут charset

Атрибут charset служит для того, чтобы браузеру отправлялась информация о том, что сайт по ссылке создан в другой кодировке. Данное действие позволит избежать некорректного отображения символов при переходе.<html>    <head>    <title>Атрибут charset в ссылках html</title>    </head> <body>

<a href="http://www.unicode.org/" charset="utf-8">Сайт в кодировке utf-8</a>

</body> </html>

Спасибо за внимание! Урок очень важный! Использование ссылок - основа основ! Удачи!

tradebenefit.ru

Как на странице сделать ссылки разных цветов?

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Определить свой цвет ссылок для разных областей веб-страницы.

Решение

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

Для раздельного управления стилем разных ссылок рассмотрим два способа. Первый основан на контекстных селекторах. Смысл следующий. Ссылки меню располагаются внутри блока, например, <div>...</div>, а ссылки в тексте внутри блока <div>...</div>. Тогда стиль для разных ссылок получится таким.

<style> .menu a { color: red; } .content a { color: green; } </style>

Запись .menu A означает, что стиль будет определен только для селектора A, который располагается внутри элемента с классом menu (пример 1).

Пример 1. Использование контекстных селекторов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Использование контекстных селекторов</title> <style> .menu { padding: 5px; /* Поля вокруг текста */ background: #066; /* Цвет фона */ } .menu a { color: #ffc; /* Цвет ссылки */ } .content { background: #ccc; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ } .content a { color:#6f4a25; /* Цвет ссылок */ } </style> </head> <body> <div> <a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a> </div> <div> <a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a> </div> </body> </html>

Результат данного примера показан ни рис. 1.

Ссылки, различающиеся по цвету

Рис. 1. Ссылки, различающиеся по цвету

Второй способ состоит в использовании классов. Для ссылки, цвет которой надо определить, создаётся новый класс и добавляется к тегу <a> (пример 2).

Пример 2. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Использование классов</title> <style> a { color: orange; /* Цвет ссылки */ } a.content { color: #6f4a25; /* Цвет ссылок */ text-decoration: none; /* Убираем подчеркивание */ } a.content:visited { color: purple; /* Цвет посещенных ссылок */ } a.content:hover { color: red; /* Цвет ссылок при наведении на них курсора мыши */ } </style> </head> <body> <p> <a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a> </p> <p> <a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a> </p> </body> </html>

htmlbook.ru

Свойства ссылок | htmlbook.ru

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.

Табл. 1. Псевдоклассы при работе со ссылками Свойство Описание
A:link Определяет стиль для обычной непосещенной ссылки.
A:visited Определяет стиль для посещенной ссылки.
A:active Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.

Ссылки без подчеркивания

Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).

Пример 1. Подчеркивание у ссылки и изменение ее цвета

<!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=utf-8"> <title>Ссылки</title> <style type="text/css"> A:link { text-decoration: none; /* Убирает подчеркивание для ссылок */ } A:visited { text-decoration: none; } A:active { text-decoration: none; } A:hover { text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */ color: red; /* Цвет ссылки */ } </style> </head> <body> <p><a href="1.html">Пример ссылки</a></p> </body> </html>

Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover.

Пример 2. Использование подчеркивания в ссылках

<!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=utf-8"> <title>Ссылки</title> <style type="text/css"> A:link { text-decoration: none; } A:visited { text-decoration: none; } A:active { text-decoration: none; } A:hover { text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */ color: red; /* Цвет ссылки */ } </style> </head> <body> <p><a href="1.html">Пример ссылки</a></p> </body> </html>

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

<!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=utf-8"> <title>Ссылки</title> <style type="text/css"> A:link { text-decoration: none; } A:visited { text-decoration: none; } A:active { text-decoration: none; } A:hover { font-size: 24px; /* Размер шрифта */ font-weight: bold; /* Жирное начертание */ color: red; /* Цвет ссылки */ } </style> </head> <body> <p><a href="1.html">Пример ссылки</a></p> </body> </html>

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).

Пример 4. Создание подчеркивание другого цвета

<!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=utf-8"> <title>Ссылки</title> <style type="text/css"> A:link { color: blue; text-decoration: none; } A:hover { color: red; text-decoration: underline; } .link { color: blue; } </style> </head> <body> <p><a href="1.html"><span>Ссылка</span></a></p> </body> </html>

Ссылки разных цветов

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

Пример 5. Ссылки разных цветов

<!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=utf-8"> <title>Ссылки</title> <style type="text/css"> A { font-size: 14px; color: red; } A.link1 { font-size: 12px; color: green; } A.link2 { font-size: 14px; color: blue; } </style> </head> <body> <p>| <a href="1.html">Ссылка 1</a> | <a href="2.html">Ссылка 2</a> | <a href="3.html">Ссылка 3</a> |</p> </body> </html>

Результат данного примера показан на рис. 1.

Разные ссылки на одной странице

Рис. 1. Разные ссылки на одной странице

htmlbook.ru

Ссылки внутри страницы | htmlbook.ru

Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку (якорь) в соответствующем месте и дать ей имя при помощи атрибута name тега <a>, как показано в примере 1.

Пример 1. Создание внутренней ссылки

<!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=utf-8"> <title>Закладка</title> </head> <body> <p><a name="top"></a></p> <p>Друг уронил утюг в унитаз. И разбил его. Не утюг разбил, а унитаз. Причем так разбил, что по назначению унитаз и использовать никак нельзя, ни боком, ни передом. Мгновением назад только что вот все было хорошо и вот уже дыра прямо в унитазе, да такая, что можно забыть, что есть такой предмет в доме. Махнул рукой нечаянно, а потом мучайся... <p><a href="#top">Наверх</a></p> </body> </html>

Между тегами <a name="top"> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике.

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

Пример 2. Ссылка на закладку из другой веб-страницы

<!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=utf-8"> <title>Закладка</title> </head> <body> <p><a href="text.html#bottom">Перейти к нижней части текста</a></p> </body> </html>

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.

htmlbook.ru