HTML Код ссылки
<a href="URL">анкор</a>Пример:
<a href="http://www.w3.org/TR/html401/struct/links.html">Рекомендации W3C. Гиперссылки.</a>Результат: Рекомендации W3C. Гиперссылки.
Содержание.
- Всегда ли URL начинаются с http://?
- Когда используется слеш (символ /) в конце URL.
- Изменить стиль анкора.
- Ссылка для отправки почты.
- Как сделать изображение ссылкой.
- Как открыть линки в новом окне.
- Скрыть ссылку от поисковиков.
- Поясняющий текст к ссылки при наведении курсора.
- Ссылка к заданному месту текста.
- Окно определенного размера.
Всегда ли URL начинаются с http://?
Если сайт расположен на собственном хостинге и URL ведет на свой ресурс, можно использовать относительные ссылки (без протокола передачи данных - http://).Адресация начинается от корня сайта:
<a href="/images/pic.gif">анкор</a>Ссылка размещена внутри текущего каталога:
<a href="images/pic.gif">анкор</a>
Когда используется слеш (символ /) в конце URL.
Чтобы уменьшить время загрузки страницы за счёт того, что браузеру не нужно будет перемещать пользователь со страницы http://shpargalkablog.ru на http://shpargalkablog.ru/, в конце URL-адреса сайта или его каталога нужно указывать слеш.http://shpargalkablog.ru/Если требуется перейти на конечный файл, то косую черту писать не следует, поскольку эти адреса являются разными.
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.htmlСовет: для избежания опечатки, при добавлении URL, копируйте его из строки браузера.
Изменить стиль анкора.
Возможно применение любых стилей.<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html" style="color: #ff0000;">HTML Код ссылки</a>Или использовать свойства CSS, в частности псевдоклассы.
Общий цвет.
a, a:link {color: #ff0000;}Посещенные ссылки.a:visited {color: #ff0000;}Активные.a:active {color: #ff0000;}При наведении мыши.a:hover {color: #ff0000;}Ссылка для отправки почты.
В качестве URL следует указать mailto:адрес_электронной_почты.<a href="mailto:n.mitra@yandex.ru">Моя эл.почта</a>Автоматически отразить тему сообщения: после адреса электронной почты добавить ?subject=тема_сообщения.
<a href="mailto:n.mitra@yandex.ru?subject=Вопрос по HTML">Задавайте вопросы по электронной почте</a>Результат: Задавайте вопросы по электронной почте
Как сделать изображение ссылкой.
<a href="URL"><img src="адрес_картинки" width="ширина_картинки" height="высота_картинки" alt="текст"/></a>Пример:
<a href="http://shpargalkablog.ru/2010/08/podpis-kartinki-html.html"><img alt="Добавить подпись картинки в HTML" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EZ8goL4xsnUKLnScTfEnrLLXmnln0ByiqAsU0TSTWHmg_56fqKX5JWGCvHbbHCqGS3cHOkpj7iNsybrU_rR4nSFY8y_VtfH-A9A6bkaU3zTCoOp_pq678Y6Z_QdQDVimi6K0XsWAXgY6/s220/pauk-fon.gif" width="135" /></a>Здесь я указала также параметр border="0", поскольку хочу, чтобы не было рамки вокруг изображения.
Результат:
Как открыть линки в новом окне.
Не рекомендуется злоупотреблять, так как у пользователя должно быть право выбора (он может воспользоваться клавишей Shift или правой кнопкой мыши).<a href="URL" target="_blank">анкор</a>Пример:
<a href="http://shpargalkablog.ru/2010/08/navigatsiya-po-blogu.html" target="_blank">Варианты размещения внутренних ссылок</a>Результат: Варианты размещения внутренних ссылок.
Поясняющий текст к ссылки при наведении курсора.
<a href="URL" title="поясняющий_текст">анкор</a>Пример:
<a href="http://shpargalkablog.ru/2010/09/optimizatsiya-images-blogger.html" title="Очень полезная статья.">Оптимизация изображений.</a>Результат: Оптимизация изображений.
Ссылка к заданному месту текста.
Сначала, при редактировании сообщения в нужном месте текста устанавливаем закладку (якорь), присвоив элементу id:
<тег id="ваше_имя_закладки_на_латинском">содержание</тег> Пример: <h2 id="name">Заголовок</h2>
А наша ссылка будет иметь вид (перед именем закладки надо указать символ # без пропусков):
<a href="http://URL#ваше_имя_закладки_на_латинском">анкор</a> Пример: <a href="http://shpargalkablog.ru/2010/08/gadzhet-htmljavascript-blogger.html#vypadayushchee">Вертикальное выпадающее меню на CSS.</a>Результат: Вертикальное выпадающее меню на CSS.
Если закладка находится на той же странице:
<a href="#ваше_имя_закладки_на_латинском">анкор</a> Пример: <a href="#name">Ссылка к заданному месту текста.</a>Результат: Ссылка к заданному месту текста.
Поисковые системы индексируют содержание только до символа #. То есть ссылки вида
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#nameи
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.htmlне являются дубликатами друг друга.
Окно определенного размера.
Оформляется с помощью JavaScript. Обратите внимание на отсутствие пробелов.<a href="URL"onclick="window.open(this.href,this.target,'width=600,height=400,top=50, left=50,'+'toolbar=no,menubar=no,scrollbars=yes,resizable=yes');return false;">анкор</a>, где width - ширина окна в пикселях,
height - высота окна в пикселях,
top - отступ сверху, определяющий размещение в окне браузера,
left - отступ слева, определяющий размещение в окне браузера,
toolbar=no/yes - создаёт рабочие инструменты браузера
menubar=no/yes - создаёт меню вверху окна
scrollbars=no/yes - создаёт горизонтальную и вертикальную полосы прокрутки
,resizable=no/yes - пользователь может изменять размер окна.
Пример:
<a href="http://shpargalkablog.ru/" onclick="window.open(this.href,this.target,'width=400,height=400,top=100, left=50,'+'toolbar=no,menubar=no,scrollbars=yes,resizable=yes');return false;">Заработок с нуля.</a>Результат: Заработок с нуля.
Отправить комментарий