Лого SiteHere.ru

Урок 5. Ссылки. Часть 1

Урок 5. Ссылки

Здравствуй, уважаемый читатель.

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


Это пятая статья, посвященная изучению html. Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения

Теория и практика

Сайт невозможно представить без ссылок. Ссылки осуществляют переходы с одной страницы на другую. Ссылки могут вести не только на другие страницы сайта, но также и на файл любого типа, даже если этот файл размещается на другом сайте. Ссылка создается с помощью тега <a href="путь_к_ссылке">Название ссылки</a>. Посмотрим как это будет выглядеть в коде нашей страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul>
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
 
	<p>Morbi quis rutrum nulla. Quisque lacinia <a href="http://адрес_сайта" title="Перейти на посторонний сайт">turpis</a> nisl, non mollis nisl vestibulum at. Duis neque leo, congue at ultricies non, pharetra sed mauris. Proin elementum fringilla quam, non viverra justo luctus id. In ipsum lacus, commodo in porta ac, ultrices ac leo. </p>
</body>
</html>

Атрибут href="banan.html" — указывает куда ведет ссылка. Также есть атрибут target="_blank", который отвечает за то, что при клике по данной ссылке она откроется в новом окне. Html страница, на которую переходят должна находиться в той же папке, где и главный файл. Если вы хотите остальные страницы держать в отдельной папке, вам необходимо написать следующее href="название_папки/banan.html" в теге <a>.

Домашнее задание

Создать три html страницы: banan.html, apple.html и persik.html. Добавить на каждую страницу информацию. Убедиться что переходы работают. Также сделать обратные ссылки, ведущие на главную страницу.

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

1
2
3
4
5
6
7
8
    ...
    <ul>
        <li><a href="#banan" target="_blank">Банан</a></li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
    <h2 id="banan">Польза банана</h2>
    ...

Посмотреть примерСкачать


Вы заметили, что в пути ссылки появилась решетка #, а у того элемента на который будем ссылаться внутри страницы появился атрибут id="banan". Исходный код на странице с примером можно посмотреть нажав комбинацию клавиш на клавиатуре CTRL+U.

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

Больше практикуйтесь!

20 комментариев к записи
  • Alex

    Здравствуйте Юрий! Я вот только недавно стал осваивать html5.В разделе ссылки есть домашнее задание, а в ссылки 2 есть его решение. У меня никак не получается его выполнить. Не могли бы вы отослать мне на почту как вы его прописать кодом. Спасибо.

     
  • Игорь

    Добрый вечер.После слов «Посмотрим как это будет выглядеть в коде нашей страницы:» нету примера вставки ссылки.Хотелось бы чтоб вы исправили.Спасибо

     
    • Юрий

      Спасибо Игорь за замечание, исправил!

       
  • Максим

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

     
    • Юрий

      Значит адреса у ссылок неправильные.

       
  • Максим

    Я уже разобрался. Сразу трудно запомнить все эти теги.

     
  • Максим

    А что означает атрибут #?

     
    • Юрий

      Это не атрибут, а значение атрибута. Значит что при клике по ссылке с таким значением атрибута href пользователь никуда не перейдет и останется на этой же странице.

       
  • Максим

    А если не использовать такое значение что произойдет? Просто немного не пойму пока его значения.

     
    • Юрий

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

       
  • Максим

    Значение атрибута # и id это одно и тоже значение,я правильно понял?

     
  • Максим

    Или значение атрибута # ведет к заголовку со значение атрибута id?

     
    • Юрий

      Верно, это называется якорь.

       
  • Максим

    Кажется теперь понял.

     
  • Екатерина

    Здравствуйте, В предыдущих уроках все было четко и ясно рассказано. Но в этом я не совсем поняла как делать переходы на ссылки. Не понимаю что за тег title=»перейти на посторонний сайт»
    Не могу из за этого дальше продвинуться в обучении.

     
    • Юрий Немец

      Здравствуйте, Екатерина!
      Чтобы создать ссылку достаточно лишь одного тега:

      Ссылка на sitehere
      

      Я указал ссылку на главную страницу сайта. Если мы пропишем еще атрибут title, то выглядеть это будет так:

      Ссылка на sitehere
      

      И увидеть этот текст можно при наведении на ссылку.

      Если еще появятся вопросы — обязательно задавайте их!

       
  • Екатерина

    К сожалению не могу разобраться с домашним задание. можно пожалуйста по подробней объяснение. Если не трудно то на электронку.

     
    • Юрий Немец

      Что вы уже сделали из домашнего задания, а что еще не получилось сделать?

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *