Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7

13.07.2015


11:01


8030


6


Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7

Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7

Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке будем учиться закидывать якоря на HTML странице :smile:.
Не пугайтесь! Вы правильно попали – здесь я не буду рассказывать и учить мореходным штучкам. В этом уроке я расскажу, что такое HTML-якорь, как сделать якорь на HTML странице и как закинуть якорь на другую страницу.
Урок будет очень полезный и важный, потому что вы еще не один раз столкнетесь с HTML-якорями.

Что такое ссылка-якорь в HTML?

Якорь это закладка с уникальным именем, которая размещена в html документе в определенном месте и служит для быстрого перехода к ней по ссылке.

Если вы любите ассоциативное разъяснение, тогда выражусь так:

Якорь - это что-то на подобии закладок или содержания в книге.

Частенько используют ссылки-Якоря, для бизнес-сайтов (одностаничники) или же в самом начале статьи, для быстрого перехода до нужного раздела (так как в Википедии).

Пример, как выглядит ссылка-якорь на веб-странице:

Пример, как выглядит ссылка-якорь на веб-странице

Если нажать на ссылку «Перевод песни группы Type o negative», пользователя перекинет на раздел «Перевод песни группы Type o negative».

Я думаю, что вы уже уяснили, что такое ссылка-Якорь в HTML. Если нет, не расстраивайтесь. Не забивайте голову теорией, так как после практичных примеров, вам станет все ясно :coffe:.

Как создать якорь на HTML

Чтобы создать якорь на веб-странице, к тегу <a> пропишите атрибут «name», где в значение указываете уникальное название, например, «stepkinblog» :smile:.

Вот так выглядит макет якоря в HTML:

<a name="имя_якоря">Текст или заголовок</a>

Для тега <a> закрывающий тег </a> обязателен.

Внимание:  название якоря должно быть прописано на латинице.

Неправильно:

<a name="степкинблог">Текст или заголовок</a>

Правильно:

<a name="stepkinblog">Текст или заголовок</a>

Можно вместо атрибута «name» написать атрибут «id»

<a id="имя_якоря"></a>

Теперь нужно создать ссылку на якорь. Для этого напишите стандартную ссылку <a>, где в атрибуте «href» нужно указать название якоря через значок «#»:

<a href="#имя_якоря">Ссылка на раздел (якорь)</a>

можно и так

<a href="#имя_якоря"></a>Ссылка на раздел (якорь) 

 

Внимание:  название якоря должно быть прописано на латинице.

Неправильно:

<a href="#степкинблог">Ссылка на раздел (якорь)</a>

Правильно:

<a href="#stepkinblog">Ссылка на раздел (якорь)</a>

Пример:

<html>
<head>
<title>Как вставить якорь-ссылку в html</title>
</head>
<body>
<H2>Содержание сделанно на на HTML.</H2>
<a href="#stih1">Перейти на статью №1 - Про блог BlogGood.ru</a>
<BR>
<a href="#stih2">Перейти на статью №2 - Про блог StepkinBlog.ru</a>
<BR>
<a href="#stih3">Перейти на статью №3 - Про сайт wm-money.org.ua</a>
<BR><BR><BR><BR><BR><BR><BR><BR>

<H3><a name="stih1"></a>Статья №1 - Про блог BlogGood.ru</H3>
<p>
Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…
</p>
<H3><a name="stih2"></a>Статья №2 - Про блог StepkinBlog.ru</H3>
<p>
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
</p>
<H3><a name="stih3"></a>Статья №3 - Про сайт wm-money.org.ua</H3>
<p>
Обмен, вывод и ввод WebMoney
</p>

</body>
</html>

[посмотреть результат]

Как сделать html якорь на другую страницу

Припустим, у вас есть две веб-страницы. На первой странице вы хотите сделать ссылку, которая будет отправлять пользователя на определенный раздел другой страницы, например, на дату жизни писателя Тараса Шевченко.
Итак, это делается так. На первой странице делаете ссылку на якорь. На второй странице нужно создать в нужном месте якорь.

Чтобы создать ссылку на якорь, которая находится на другой странице или на сайте, нужно указать в атрибуте «href» адрес сайта, веб страничку и имя якоря.

<a href="название_страницы#имя_якоря"></a>

Или так

<a href="http://адрес_сайта/название_страницы#имя_якоря"></a>

Теперь попробуем все это реализовать на примере.

Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7

:idea: Создайте страницу под названием, например, «index-1.html».
Вставьте в текст ссылку на якорь:

<p>текст.. <a href="index-2.html#new1">Т. Г. Шевченко</a> …текст</p>

Полностью готовый HTML код:

<html>
<head>
<title>Как вставить ссылку-якорь в html</title>
</head>
<body>

<p>текст <a href="index-2.html#new1">Т.Г.Шевченко</a> текст</p>

</body>
</html>

:idea: Теперь создадим вторую страницу, под названием «index-2.html» и указываем в нужном разделе текста якорь.

 

<p>текст… <a name="new1">Биография Т. Г. Шевченко</a> …текст</p>

Полностью готовый HTML код:

<html>
<head>
<title>Как вставить ссылку-якорь в html</title>
</head>
<body>

<p>текст…  <a name="new1">Биография Т. Г. Шевченко</a>  …текст</p>

</body>
</html>

Теперь сохраним и посмотрим на результат.

[посмотреть результат]

На сегодня все. Подписывайтесь на обновления блога, чтобы не пропустить уроки HTML.



Случайные записи:

  1. Кнопки. Основы bootstrap 3 для начинающих. Урок №7
  2. Иконки от Glyphicons. Основы bootstrap 3 для начинающих. Урок №6
  3. Бесплатный курс по основам CSS
  4. Работа со строками в php. Основы PHP с нуля. Урок №7
  5. Шпаргалка по HTML на русском языке

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

6 ответа(ов) на статью: “Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7”

  1. Сергей says:

    А если часть текста под картинкой урезана и ниже - "подробней...". Тоже якорь? Как его делать?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Не совсем понял вопрос. Если можно, опишите подробней.

    Ответить

  2. ser says:

    Вроде бы все хорошо, но нет раздела как сделать якорь на раздел на ДРУГОМ сайте.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Хм, как это нет, а это случайно не этот раздел -"Как сделать html якорь на другую страницу" (см. самом низу).
    Оно? :smile:

    Ответить

  3. Денис says:

    Добрый день.
    Подскажите, для того чтобы сделать ссылку на другой сайт, необходимо создать два отдельных файла .html?
    Соответственно, сколько ссылок столько и будет отдельных файлов?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Денис!
    Да, верно! Например, есть меню, "Главная, О нас, Контакты".
    Будет 3-и ссылки на три файла

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245