Самоучитель по HTML, Ссылки в HTML.

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

Незнаю почему не сказал об этом раньше, но дальше будет позно! Поговорим о именах HTML-файлов. Имя файла может быть любым, но должен быть один главный(главная страница) index в нашем случае index.html, т.к. если набрать адрес http://alexgrad.org.ua/ - это только адрес сайта, а имени запрашиваемого файла просто нет и в таких случаях если нет файла index то ваш сайт просто откроется как папка с именами файлов в ней, что-бы этого не просходило не забывайте его вставлять...

Ну продолжим наше обучение... При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с описанием нашего хобби, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими фотографиями, и т.д. Ссылки в HTML-документ вставляются при помощи тэга:
<a href="путь/имя_файла">название ссылки </a>.
Теперь покажу в действии(примером будет мой сайт):
<a href="http://alexgrad.org.ua/index.php">Создай сайт своими руками</a>
а - говорит от том, что это ссылка,
href=" " - путь к ресурсу,
http://alexgrad.org.ua/ - адрес сайта
index.php - имя запрашиваемого файла
Создай сайт своими руками - Текст, котырый описывает данную ссылку
</a> Конец ссылки.

Теперь расмотрим пути(адреса к ресурсам) они делятся на две категории:
Абсолютные - пути относительно корня диска, привожу пример раньше мы прописывали картинки так: <img src="Best_friend.gif">, а абсолютный адрес относительно диска "D" на вашем компьютере: D:\my_site\Best_friend.gif т.е. диск"D" папка my_site и файл Best_friend.gif.
http://alexgrad.site.net/index.php - это тоже абсолютный путь относительно корневой папки сайта.
Относительные пути - это относительно файла который его запрашует, в нашем примере <img src="Best_friend.gif"> этого пути не видно т.к. HTML-документ и картинка лежат в одной директории(папке), я не передложил вам создать папку "images" (D:\my_site\images\)только потому, что в любом случае свой первый сайт выложите на бесплатном хостинге(narod.ru и т.д.), а там даже для таких мелочей нет возможности. но ради практики в нашей папке my_site создайте папку images и перетащите туда все наши рисунки, теперь перепишем наши HTML-документы с картинками по такому шаблону <img src="images/Best_friend.gif"> это и есть относительный путь.

Ну переписывать старые страницы будеде самостоятельно, а сейчас создадим трёх страничный сайт, пишем код:

        <html>
        <head>
        <title>Главная страница</title>
        </head>
        <body  background="images/fon_2.gif"  text="#000000" >
        <div align="center"><img src="images/logo.gif"> </div><br>
        <h1>Главная страница</h1>
        <h3>Здравствуйте, уважаемые рунетчики!!! </h3>
        Это мой персональный сайт, где вы  можете бесплатно скачать:<br>
         <a href="Photoshop.html">Photoshop CS-3</a>
        Программа для изготовления от простейших банеров до фотомонтажа.
        50% дизай.студий во всём мире работаю на ней <br>
        А так-же: <br>
         <a href="arhiv.html">картинки на мобильный</a>
        созданы на  Photoshop CS-3  мною лично !!!
        </body>
        </html>

Сохраним этот файл как index.html, если файл с таким именем уже есть, то удалите или переименуйте или перезапишите его.
Cоздадим второй документ:
        <html>
        <head>
        <title>Photoshop CS-3</title>
        </head>
        <body  background="images/fon_2.gif"  text="#000000" >
        <div align="center"><img src="images/logo.gif"> </div><br>
        <h1>Photoshop CS-3</h1>
        <h3>Здравствуйте, уважаемые рунетчики!!! </h3>
        Это мой персональный сайт, где вы  можете ознакомиться:<br>
        Photoshop CS-3 программа для изготовления от простейших
         банеров до фотомонтажа. 50% дизай.
         студий во всём мире работаю на ней <br>
        А так-же: <br>
          <a href="index.html">вернуться на главную</a><br>
        или  <a href="arhiv.html">картинки на мобильный</a>
        созданы на  Photoshop CS-3  мною лично !!!
        </body>
        </html>

Сохраним наш файл как: Photoshop.html
Создадим третий документ:
        <html>
        <head>
        <title>Архив катинок</title>
        </head>
        <body  background="images/fon_2.gif"  text="#000000" >
        <div align="center"><img src="images/logo.gif"> </div><br>
        <h1>Архив картинок</h1>
        <h3>Здравствуйте, уважаемые рунетчики!!! </h3>
        Это мой архив картинок:<br>
        А так-же вы можете: <br>
          <a href="index.html">вернуться на главную</a><br>
        или перейти на  <a href="Photoshop.html>Photoshop</a>
        ознакомиться  с его возможностями.
        </body>
        </html>

Можете сами повставлять туда картинки, чесно где скачать Photoshop я не знаю, у меня он на диске, программа просто бомба!!! А весь текст привёл только для примера.
Сохраним наш файл как: arhiv.html
Далее самостоятельно запустите в браузере(InternetExplorer) файл index.html и протестируйте ссылки на работоспособность.

А можно картинку сделать ссылкой? Да, вот таким способом:
<a href="index.html"><img src="images/logo.gif" width="100" height="100" alt="банер" border="0"> </a> в место текста.
также можно сделать рамку вокруг картинки:
<img src="images/logo.gif" width="100" height="100" alt="банер" border="5" bordercolor="red"> bordercolor - цвет рамки. Однако использовать рамки или нет дело ваше, ними можно сделать красивую рамку для картинки или испортить всю страницу.

А как сделать ссылу открывающуюся в новом окне? Вот так:
<a href="index.html" target="_blank"><img src="images/logo.gif"> </a> добавляем новый атрибут target="_blank", обратите внимание синтаксис. Можно использовать как текстовой ссылке, так и банерам(ссылка-картинка). Этот атрибут имеет и другие значения, но о них в следующих уроках. Рекомендую использовать только на ссылки дла перехода на другие сайты, на свои лучше этого не делать, с точки зрения этичности.

А как сделать подсказку к сылке? Вот так:
<a href="index.html" title="Ваша подсказка" >имя ссылки</a> тест: имя ссылки Обратите внимание: что title здесь не тег-контейнер, а атрибут.

А как изменить цвет ссылок?
Цвет ссылок задаётся атрибутами в теге body вот таким способом:
<body background="images/fon_2.gif" link="blue" alink="red" vlink="blue" text="#000000" > где:
link="blue" - цвет ссылки
alink="red" - цвет активной ссылки(при нажатии она будет красной)
vlink="blue" - цвет посещёной ссылки(если заметили бывает так, заходите на какой-то сайт повторно и ссылки которые вы нажимали принимают другой цвет)
Так-же можно изменить отдельную ссылку
<a href="index.html"> <font color="#00ffaa"> главная страница</font> </a> правильный вариант
<font color="#00ffaa"> <a href="index.html"> главная страница</a></font> не правильный, т.к. в этом случае можно изменить только текст, который за пределами тега "а"

А как сделать ссылку на адрес эл.почты?
Ссылка на ваш почтовый ящик прописывается немного по другому, чем ссылка на страницу, сайт:
<a href="mailto:login@mail.ru">эл.почта </a>
Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик это другое.
П.С. В следующем уроке мы продолжим изучать ссылки, т.к. материала не много, а полно описания и примеров.


Перейти к выбору следующей страницы