Совет 1: Как написать на сайте ссылку

Создать удобную и интуитивно понятную навигацию на сайте можно при помощи ссылок. Этот прием позволяет сделать пребывание пользователя на страницах ресурса максимально комфортным.
Инструкция
1
Любая ссылка создается с использованием тега <a>, который необходимо закрывать при помощи </a>. Адрес страницы указывается в кавычках после атрибута href. В результате должно получиться нечто подобное:
<html>
      <head>
      <title>Сайт</title>
      </head>
      <body>
            <a href= "foto.html">Перейти в фотогалерею</a>
      </body>
</html>

Чтобы переход осуществлялся на присутствующую в интернет-пространстве страницу, укажите ее адрес, например, KakProsto.ru. Для соединения с html-файлом, находящимся на вашем компьютере, пропишите путь к нему. В идеале желательно перейти на английский язык, чтобы устранить длинные записи, возникающие при копировании русскоязычного текста с последующим его переводом в требуемый формат. Например, file:///E:/%D0%A3%D1%87%D0%B5%D0%B1%D0%B0/XXX%20%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0/%D1%81%D0%B0%D0%B9%D1%82%29%29%29/11%20%D1%81%D1%82%D1%80%20%D1%80%D0%B0%D0%B7%D0%BD%D0%BE%D0%B5/%D0%BE%D0%B1%D0%BE%20%D0%B2%D1%81%D0%B5%D0%BC%20%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F.html"
2
Ссылка может быть задана в виде картинки. Для этого заключите изображение между тегами <a> и </a>: <a href= "foto.html"><img src= "kartinka.png"></a>. Чтобы при наведении на маленькую иконку открывалось полноценная иллюстрация большего размера, нужно использовать связку <a href="kartinka_big.png"><img src="kartinka_small.png"></a>.

Для организации поочередной смены картинок, каждая из которых будет представлена в виде ссылки и вести на разные страницы, используйте код:
<html>
<head>
<title>Сайт</title>
      <style type="text/css">
      div#rotator {position:relative; height:150px; margin-left: 15px;}
      div#rotator ul li {float:left; position:absolute; list-style: none;}
      div#rotator ul li.show {z-index:500;}
</style>

      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script type="text/javascript">
      function theRotator() {
            $('div#rotator ul li').css({opacity: 0.0});
            $('div#rotator ul li:first').css({opacity: 1.0});
            setInterval('rotate()',5000);
            }

      function rotate() {
            var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
            var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
            // var sibs = current.siblings();
            // var rndNum = Math.floor(Math.random() * sibs.length );
            // var next = $( sibs[ rndNum ] );
            next.css({opacity: 0.0})
           .addClass('show')
           .animate({opacity: 1.0}, 1000);
            current.animate({opacity: 0.0}, 1000)
           .removeClass('show');
      };

      $(document).ready(function() {

      theRotator();
      });

      </script>
</head>

      <body>
      <div id="rotator">
      <ul>
            <li class="show"><a href="адрес_страницы_1"><img src="images/1.gif" width="500" height="313" alt="pic1" /></a></li>
            <li><a href=" адрес_страницы_2"><img src="images/2.gif" width="500" height="313" alt="pic2" /></a></li>
            <li><a href=" адрес_страницы_3"><img src="images/3.gif" width="500" height="313" alt="pic3" /></a></li>
      </ul>
      </div>

</body>
</html>
3
Чтобы страница, на которую ведет ссылка, открывалась в отдельном окне, необходимо добавить атрибут target="_blank": <a href="адрес_страницы" target="_blank">Перейти</a>.
4
Если html-документ слишком длинный, то можно проставить ссылки внутри него. Например, в самом начале можно сделать оглавление, а при нажатии на определенный заголовок пользователь будет перемещаться в нужную часть страницы. Для этого необходимо прописать ссылку со значком #: <a href="#путь к закладке">Перейти на раздел</a> и к ссылкам создать закладки: <a name="путь к закладке">Раздел</a>.

Выглядеть это будет так:
<html>
      <head>
            <title>Сайт</title>
      </head>
      <body>
            <a href="#путь к закладке">Ссылка на раздел</a>
            <a name="путь к закладке">Раздел</a>
      </body>
</html>

Совет 2: Как написать ссылку

Для любого сайта важен его дизайн и контент. Чтобы связать эти две составляющие, сайтостроитель использует ссылку. Обычный пользователь нажимает на ссылку «Новости», и получает доступ к сайту с новостями. Ссылки являются также предметом бизнеса в интернете, но разберем, как создать ссылку в html документе.
Инструкция
1
Для создания элементов на языке html используются тэги. При создании ссылки мы также будем использовать их. За создание ссылки на сайте отвечает тэг «a». Этот тэг является закрывающимся, поэтому не забываем, сразу же закрыть его. Между тэгами можно сразу написать название ссылки.
2
Обязательным атрибутом тэга «a» является «href». Его необходимо указывать всегда. Он отвечает за адрес документа, к которому ссылка будет указывать. Для этого мы присваиваем к атрибуту значение адреса (href=”адрес_ссылки”).
3
Теперь необходимо задать адрес в соответствии с тем, куда он указывает. Если адрес будет указывать на другой сайт, то необходимо прописать полный путь к ресурсу или документу, который находится там. Но если страница или документ находится на вашем, же сайте, то прописываем только имя страницы. При необходимости, можно задать идентификатор тэгу, к которому ссылка будет обращаться. Например, можно сделать ссылку, которая при нажатии будет отправлять пользователя с конца документа, в начало. Обычно их называют «наверх». Для этого приписываем тэгу «body» идентификатор «top» (id=”top”). После этого присваиваем значение атрибуту «href» значение «#top». Теперь при нажатии на эту ссылку пользователь будет попадать в начало страницы.
4
По умолчанию, при нажатии ссылки, открывается страница в том же окне. Для того, чтобы ссылка открывалась в новом окне необходимо указать атрибут «target». Присвоим ему значение «_blank». Теперь ссылка будет открывать в новом окне. Атрибут «_self» вернет первоначальное открывание ссылки в том же окне.
Видео по теме
Источники:
  • как написать ссылку на сайт
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500
к
Honor 6X Premium
новая премиальная версия
узнать больше