HTML Начинающим. Текстовые ссылки

Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок. Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа. Ссылкой может быть текст, фраза, слово, а может быть и картинка.

Для начала создайте новый документ в той же папке где находится ваш главный документ index.html. Имя документа можете задать любое, на ваше усмотрение, у себя я создал документ photo.html и наполнил этот документ несколькими картинками.
Посмотреть документ с картинками.

Как видите фраза (Посмотреть документ с картинками) стала ссылкой на страницу с картинками.

<a href="photo.html">Посмотреть документ с картинками</a>

Тэг <a></a> делает ссылкой заключенную в него фразу, текст или картинку. Как в случае с указание пути к картинкам, для тега <a> тоже надо прописать путь:

  • <a href="photo.html">мои фотографии</a> Документ лежит в той же папке, что и документ, в котором мы ссылаемся на photo.html
  • <a href="photos/photo.html">мои фотографии</a> Документ лежит в поддиректории /photos
  • <a href="http://www.photos.ru/photo.html">мои фотографии</a> Ссылка на сайт http://www.photos.ru, где лежит нужный вам документ.

Как цвет для всего текста в документе, так и цвет для всех ссылок можно прописать в открывающем теге <body>.
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

  • link - цвет просто ссылки
  • alink - цвет активной ссылки (нажатой)
  • vlink - цвет уже посещенной ссылки.

Далее в свой пример я напишу фразу "посмотреть картинки" и сделаю ее ссылкой на страницу с картинками.


  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<div align="Justify">
<font color="#CCCCFF">
<img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" border="0" alt="Просто картинка">
<font size="+1" face="Cosmic Sans, arial, verdana, courier">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
<br clear="left">
<b> Он словно сошел с картинки </b>
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником.
<i> Однако внимание привлекал не столько щегольской наряд пассажира, </i>
сколько импозантная, можно даже сказать, эффектная внешность.
<u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u>
ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
<a href="photo.html" title="страница с картинками">посмотреть картинки</a>
</body>
</html>
   посмотреть

Для выделения одной или нескольких текстовых ссылок цветами отличающимися от цвета остальных текстовых ссылок в документе, вы можете прибегнуть к помощи тега <font> и его атрибута color.
<a href="prf.html"><font color="#CC0000">посмотреть картинки</font></a>
Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.

У тега <a> еще есть атрибут title, который предлагает информацию об элементе, для которого он устанавливается в нашем случае это тег <a> Если наведите курсор мыши на слово "посмотреть", в нашем примере то вы увидите подсказку к текстовой ссылке.

HTML предлагает большое количество ссылок для создания сложных структурированных документов. Одна из таких ссылок является ссылкой на почтовый ящик, прописывается такая ссылка немного иначе, чем ссылка на другой документ, страницу или сайт.

<a href="mailto:pochta@mail.ru">написать письмо</a>

У mailto есть еще несколько опций:

  • ?subject=Тема письма
  • &Body=Текст вашего сообщения
  • &cc=copy@mail.ru,copy2@mail.ru (копии письма через запятую)
  • &bcc=hidden_copy@mail.ru,hidden_copy2@mail.ru (скрытые копии письма через запятую)

Запись будет выглядеть так:

<a href="mailto:pochta@mail.ru?subject=Привет &Body=Текст вашего сообщения&cc=copy@mail.ru &bcc=hidden_copy@mail.ru">написать письмо</a>

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


Вернуться назад Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru