Что такое якорь на сайте. Как сделать быстрый переход к нужной строке сайта. Wordpress вставить якорь
Как сделать html якорь в WordPress, плагин Better Anchor Links « Темы для WordPress
Для одной достаточно большой статьи блога про разные дизайнерские курсы фотошопа мне потребовалось создать в начале текста что-то вроде оглавления. Я использовал при этом классический механизм html якорей (anchor), которые размещаются в определенных местах текста, а потом на них легко можно ссылаться. В данной заметке я расскажу о том как создать html якорь, что он из себя представляет и как можно автоматизировать процесс с помощью модуля Better Anchor Links. Итак, поехали.
В чистом html для создания якоря в определенной части страницы вам нужно добавить в текст пустую ссылку с id, например:
Обычный текст на странице.Затем в другом месте документа вы просто создаете линк с этим якорем:
При клике на такую ссылку пользователь будет перемещен на созданный вами якорь. Кстати, в системе WordPress по умолчанию в ссылкиЧитать далее добавляется якорь #more – при клике по ним вы попадаете на страницу с постом не в начало, а в место после якоря #more.
Исходя из вышесказанного вы наверняка поняли, что для создания html якоря в WordPress вам нужно будет перейти в HTML редактор текста. Однако я предлагаю куда более наглядный вариант – для него потребуется плагин TinyMCE Advanced. В настройках модуля первым делом добавляем кнопочку инструмента Anchor в панель редактора.
После этого при написании нового поста в блоге у вас появится кнопка создания html якоря. Вы просто размещаете курсор в том месте текста, где нужно добавить якорь и кликаете по ней. Во всплывающем окне указываете название (id) анкора. Лучше, думаю, указать имя английскими буквами.
После создания увидите соответствующую картинку перед текстом – значит, html якорь создан. Дальше вам нужно создать ссылку на якорь.
В текстовом редакторе TinyMCE Advanced при добавлении линка вы увидите всплывающее окно, где в пункте Anchors в выпадающем списке можете выбрать один из якорей. После этого его название (#yakor) будет поставлено в поле URL.
Что там и как работает в базовом редакторе, к сожалению, уже не помню – ориентируйтесь на теорию относительно html якорей, что я изложил в начале статьи. А еще лучше поставьте себе TinyMCE Advanced:)
Better Anchor Links
Напоследок хотелось бы рассказать еще об одном плагине – Better Anchor Links. Основная его задача – это создание якорей из заголовков страницы и автоматическое их расположение в начале статьи или других местах. По сути, это инструмент для создания оглавления, похожий на тот, что есть в word. Вот как это приблизительно выглядит на сайте.
У Better Anchor Links есть несколько полезных настроек. Тут можно найти заголовок для оглавления, автоопределение оглавления по H тегам, подключение своих CSS стилей и многое другое.
Список основных функций Better Anchor Links:
- Автоматическое создание якорей из H тегов в тексте статьи.
- Возможно отключить базовые CSS стили плагина для задания своих.
- Имеется специальный виджет.
- Можно указать свой заголовок для оглавления.
- Можно выбрать список ссылок с цифрами или без.
- Поддержка локализации qTranslate/mqTranslate.
- Если требуется, есть ссылка возвращения к оглавлению.
В официальном репозитории вордпресс на странице FAQ описания плагина имеется парочка советов (кодов) как выводить оглавление не в тексте статьи. То есть вы, например, можете разместить список ссылок на якоря в сайдбаре (с помощью виджета или PHP).
Нужно ли использовать Better Anchor Links? Это вопрос из области «излишней функциональности» – если у вас из 100 записей на сайте только 1-2 требуют оглавления, то, конечно, все это проще сделать вручную. Если же оглавления для постов блога/сайта создаются часто и весьма органично смотрятся в дизайне блога, то модуль пригодится. К тому же Better Anchor Links позволяет выводить оглавление не только в статье, а и в сайдбаре – это можно использовать интересным образом.
temy-dlya-wordpress.ru
Как вставлять ссылку картинку и ссылку-якорь
Мы подкованные, практически настоящие веб-мастера — мы уже знаем, как вставлять ссылку на другую страницу и ссылку на электронную почту. Однако помимо этих ссылок часто так же используются и другие виды — ссылка-картинка и якорь. Для полноты своих знаний давайте изучим и этот вопрос.
Ссылка-картинка
Ссылка-картинка — это обычная ссылка, просто вместо текста в которой используется изображение. Если вы используете визуальный редактор, то можете подглядеть в посте «Основы работы с WordPress | Создание картинки-ссылки и редактирование свойств изображений», как использовать картинку в виде ссылки. Если же вы редактируете запись в режиме HTML, то для начала давайте вставим изображение:
Этот код вставляет изображение image.jpg, которое находится в /site.ru/files/. Теперь осталось сделать его ссылкой.
Этот код вставляет картинку image.jpg, при клике на которую вы перейдете на site.ru. Это обычная ссылка, в которой можно использовать дополнительные параметры.
Ссылка-якорь
В качестве ссылки может выступать и якорь — определенное место на странице, куда переходит пользователь при клике по ссылке-якорю. ссылки-якоря удобно использовать в больших списках, на больших страницах с множеством разделов, в качестве сносок на определенные места в тексте. Например, если вы кликните вот по этой ссылке, то перейдете в начало этого поста, в то место, где я пишу, что мы уже подкованные перцы. Делается это так:
1. В то место, куда вы хотите бросить якорь, вставьте невидимую ссылку:
2. Если вам нужно отправить посетителя к якорю, вставьте ссылку на него:
текст ссылки
Пример ссылки-якоря, используемого в этом посте:
- это якорьпо этой ссылке - это ссылка, отправляющая к якорю
К якорю можно отправлять не только с этой страницы, но и с других. Для этого в ссылке нужно указывать не только якорь, но и на какую страницу отправлять. Пример:
- это якорь, который расположен на странице pageтекст ссылки - это ссылка, отправляющая из любого места к якорю 001, установленному на странице page
Это пример простейшего варианта ссылки-якоря. Есть и более сложные, с использованием других контейнеров — span, div, а так же атрибутов id, но даже этого простого варианта вам хватит, чтобы сделать блог более удобным.
wordpresse.ru
Что такое якорь на сайте. Как сделать быстрый переход к нужной строке сайта.
Что такое якорь на сайте. Как сделать на сайте быстрый переход к нужной строке. Это удобная функция для статей с большим количеством знаков или длинных сайтов одностраничников. С её помощью посетитель может быстро очутиться на нужной строчке в тексте.
Если это статья, то можно сделать как бы оглавление в начале. Это удобно посетителю. Он быстро может прочитать, то, что его интересует больше всего. А если информация его не разочарует, то возможно, что он захочет прочитать и остальное, таким образом, он подольше задержится на сайте. А это будет улучшать поведенческие факторы и навигацию сайта.
Якорь частенько используют на длинных продающих сайтах, после каждого блока информации пишут, например «Скачайте прямо сейчас свой экземпляр». И как только вы кликаете на ссылку, браузер подводит вас к блоку, где написана цена, гарантии и есть ссылка, для перехода к оплате.
Вот как будет выглядеть содержание этой статьи с якорями:
Как сделать якорь на сайте пример.
Очень просто. В режиме html (в админке вордпресс этот режим называется – Текст) нужно выбрать строку, которая будет перенаправлять на якорь. И окружить её тегами.
Фраза «Ваш текст», окружена нужными тэгами:
<a href="#giv"> Ваш текст </a>И при нажатии на неё посетителя перенесёт на фразу, которая тоже окружена другими тэгами. Но якорь там должен быть именно тот, который в слове или фразе, с которой его будет перекидывать.
"#giv"этот значок указывает на якорь. Вы можете написать вместо giv любые символы или цифры. И ваш якорь должен быть с теми же знаками или цифрами.
И словосочетание естественно напишите своё.
А теперь как оформить строчку, на которую будет перенаправлен посетитель, после нажатия на ссылку. Вот как она будет выглядеть, я специально не меняла слова, чтобы вам было понятно.
<a> Ваш текст </a>В тексте эта строчка будет выглядеть как ссылка, но если на неё нажать, то вы никуда не перейдёте.
Если же вы не хотите, чтобы фраза (это наш якорь) на которую будет перебрасывать первая ссылка, не выглядела как URL, то окружите её тегами, например <h3>Ваша фраза</h3> (эти теги создают заголовок из простого шрифта).
А если окружаете фразу этими тэгами, то можете просто добавить в теги
id="giv"вот как это будет выглядеть:
<h3> Ваш текст </h3>Вместо тега — а для якоря, вы можете использовать теги — div,p. А вместо id, слово — name. То есть
<div name=”giv”>Ваш текст </div>или
<p name=”giv”>Ваш текст</p>
И ещё маленький секрет, когда посетитель переходит на якорь, то фраза-якорь убегает наверх монитора, да так, что её не видно. Ролик видно наполовину и картинку тоже.
Так вот, чтобы этого не происходило, вы можете схитрить. И написать код якоря вообще без текста, и разместить код немного выше фразы, ролика или картинки. Для этого есть 4 варианта написания:
Сделать якорь можно не только на фразу, но и на картинку и на видеоролик. Для этого точно так же окружаем код картинки или видеоролика кодом
<a> код видео или изображения</a>Или любым из 6-ти предыдущих кодов.
Как сделать якорь на другую страницу сайта.
Это очень просто, пишем URL статьи, а в конце ставим /#якорь той фразы, на которую будет перенаправлять ссылка. Естественно, что сам якорь на той странице уже сделан.
Чтобы было понятнее, использую якорь, который писала до этого https://ccылка на статью/#giv
То есть тот набор знаков, который вы задавали для якоря. И посетитель будет попадать на указанную вами фразу, фото или ролик.
И лучше сделать так, чтобы она открывалась в новом окне.
Как сделать ссылку для интернета, чтобы посетитель сразу попадал на якорь.
Если вы хотите поделиться в соцсетях на статью с якорем, то формировать ссылку нужно так же, как написано выше. То есть поставить в конце ссылки /#якорь.
Как сделать якорь на сайте с помощью плагина wordpress.
Помогать нам в этом будет плагин AddQuicktag, он вообще-то применяется для удобного внедрения на блог шроткодов. Вы можете его скачать здесь или установить при помощи поиска плагинов в административной панели блога.
Не волнуйтесь — это лёгкий плагин и никакой нагрузки на блог он оказывать не будет, а просто проставит коды, в нужном вам месте. Ведь тяжесть плагинов напрямую зависит от того какой скрипт он выполняет. А здесь ничего тяжёлого нет. Так что советую поставить.
Иначе, пока вы не запомните коды, вам придётся «скакать» и смотреть их.
Итак, установили и активировали плагин AddQuicktag, теперь на странице с плагинами, нажимаем Настройки.
И добавляем:
- 1 – Название будущей кнопки (вы можете поставить любое)
- 2 – Начало кода для начальной фразы, кликнув на которую посетитель перескакивает на якорь
- 3 – Конец кода (хотя это делать не обязательно, потому что для закрытия тега, есть кнопка в вордпресс админке)
- 4 – проставляем галочки, для того чтобы указать, где будет применяться этот код
- 5 – жмём сохранить
А теперь идём в админ панель, в раздел редактирования статей. Переходим там в режим HTML (Текст). И добавляем код для якоря.
- Для этого ставим курсор в начало фразы — цифра 1 на скриншоте
- Нажимаем на кнопку – цифра 2 ( у меня она называется Якорь 1).
- Когда появится код, вставляем символы для якоря после знака #
- Ставим курсор в конец фразы и нажимаем либо ещё раз на кнопку Якорь1, либо на кнопку — Закрыть код (она есть на всех панелях вордпресс редактора статей по умолчанию)
Тоже самое проделываем с кодом для якоря. И всё, теперь у вас есть удобный инструмент для вставки якоря.
Как сделать якорь с привязкой по времени для видеоролика.
Это не совсем якорь и называется по-другому, но я решила, что для кого-то это будет полезная информация. Тем более, что URL выглядит почти так же так же, как и ссылка с якорем.
Идея состоит в том, чтобы отправить ссылку на видео, которое будет начинаться с нужного вам времени. И после того, как по вашей ссылке перейдут, ролик начнётся не сначала, а с заданного времени. Например, начало там не важно, или ролик очень длинный, и некоторые зрители просто не досмотрят до самого нужно и закроют видео, так ничего и не поняв.
- Первый способ получить ссылку с привязкой ко времени
Это можно сделать прямо на ЮТубе. Или на любом сайте, если там стоит ролик с видеохостинга YouTube.
Как только видео дойдёт до нужной минуты (или часа, зависит от длины ролика) — кликайте на ролик правой кнопкой мыши. И вы увидите список, выбирайте: Получить URL видео с привязкой ко времени.
После этого появится ссылка на привязанное ко времени видео. Копируйте URL и отправляйте, туда, куда хотели. Выглядеть ссылка будет примерно вот так https://youtu.be/EgjfrkEnFxA?t=11m56s
– это время привязки в секундах. Можете его подкорректировать при желании, не обязательно ждать пока сервис сгенерирует нужное время.
А если ролик идёт несколько часов, такое тоже бывает. А вы хотите, чтобы знакомый перешёл сразу же в видео на нужный момент через 2 часа, 30 минут и 23 секунды. Тогда вам после ссылки нужно разместить вот такой код — t=02h40m23s
- Второй способ как получить ссылку на ролик с привязкой ко времени
Если первый способ можно применять на любом сайте, где есть видео с ЮТуба. То этот способ подходит, только в том случае если вы находитесь на YouTube.
Спускаемся под видео. Жмём на слово – Поделиться. И как только видео дойдёт до нужного времени, сразу же ставим галочку рядом со словом – Начало. В окошечке рядом мы видим как меняется время. А выше всего этого вы можете скопировать ссылку, с привязкой ко времени.
А здесь ссылочка уже выглядит по-другому, вот так https://www.youtube.com/watch?v=EgjfrkEnFxA#t=721
В этому случае сервис показывает время в секундах.
В этой статье, я рассказала вам, как поставить якорь на сайт, для того, чтобы посетитель попадал на нужный абзац или, строку или картинку, или видео в статье. А так же рассказала, как сделать ссылку на видео с привязкой ко времени.
С Уважением, Татьяна Чиронова
Сохраните пост к себе на стенку в соцсети
А здесь можно публиковать анонсы постов по теме:
chironova.ru
HTML якоря - грамотное использование
Якоря HTML, для чего они нужны, где целесообразно и уместно их использовать? Постараемся ответить на эти вопросы на этой страничке.
Назначение якорей HTML
Приветствую Вас на страницах моего сайта inetmkt.ru. Итак, что же это такое? HTML якоря это элементы навигации по странице сайта. Их используют для перемещения в пределах одной страницы. Если страница слишком большого объема, тогда, для удобства пользователей, у вебдизайнера есть возможность обеспечить навигацию по странице путем простановки специальных меток – HTML якорей.
Вы такие страницы часто встречаете. Обычная структура таких документов содержит в начале содержание страницы. а в теле страницы – описание элементов содержания.
Содержание Раздел1 Раздел2 Раздел3
А в теле страницы – описание элементов содержания.
Раздел1 текст…………Раздел2 текст…………
Будет логично для создания меток использовать заголовки и подзаголовки на странице, хотя это и не обязательно.
Как поставить HTML якоря?
Создать метку можно двумя способами. В первом случай для создания метки используют тег <a> с атрибутом name. Запись в HTML-коде будет выглядеть следующим образом
<a name=”Razdel1”> Раздел1</a>
Текст между открывающим и закрывающим тегами не обязателен, но, на мой взгляд, желателен. Имя метки должно быть уникальным на странице и может содержать латинские буквы и цифры.
Во втором случае поступают еще проще. Любому html-тегу добавляют атрибут ID, например:
<h4 id=”Razdel2”> Раздел2 </h4>
Можно использовать любой из описанных выше способов.
Как сослаться на HTML якоря?
Для того, чтобы перейти в нужное место, помеченное якорем, организовывается ссылка. Она является частным случаем обычной гиперссылки, но имеет некоторые нюансы. Например:
<a href=”#Razdel4”> Раздел4 </a>
Как Вы уже поняли к имени метки, заданной в атрибутах name или ID, добавляется знак решетки — #.
Переход на метку якоря HTML на другой странице
<a href=”page1#Razdel4> Якоря. Раздел4 </a>
Если Вы задаете ссылку в таком виде
<a href=”#”> В начало </a>
то переход произойдет к началу вебстраницы.
Использование HTML якорей в WordPress
Процесс простановки якорей в CMS WordPress не автоматизирован. Но, при желании, их легко можно проставить, воспользовавшись HTML редактором. Синтаксис написания ничем не отличается от описанных выше способов.
<a name=”Yakor1”> Якорь1 </a>
А вот организовать ссылку можно средствами WordPress традиционным способом. И будет она выглядеть тоже традиционно.
<a href=»#Yakor1″> Якорь1 </a>
Вот собственно и все, что я хотел Вам донести об HTML якорях. Всем желаю всего хорошего и побольше.
Полезные Материалы:
inetmkt.ru
как сделать и зачем нужна?
Добрый день, уважаемые читатели!
Сейчас я покажу вам, как использовать на своих страницах ссылки-якоря, для повышения удобства пользования сайтом и потребления контента.
Яркий пример таких ссылок-якорей вы можете увидеть практически в каждой моей статьей, где имеется содержание.
Каждая ссылка в содержании сделана с помощью ссылки-якоря. При нажатии на каждую происходит перемещение в определенную часть страницы. Такой вариант содержания намного удобней для пользования будет, чем просто список пунктов, так как во втором случае посетителю придется самому листать страницу и искать нужный пункт.
Пользователю в большинстве случаев нужно конкретный ответ на вопрос и нужен он сразу. И, если мы будем заставлять его искать нужный пункт на всей странице, то не факт, что он будет это делать. Таким образом будет ухудшаться поведенческий фактор.
Дав же посетителю возможность перейти сразу к нужному вопросу, мы гарантируем своей странице хороший ПФ, так как пользователь сможет сразу попасть на нужный ему вопрос и будет его изучать с большей долей вероятностью.
Поэтому, если вы делаете свои страницы с рассмотрением многих вопросов, то обязательно нужно делать содержание в виде ссылок-якорей. Как сделать такой вариант, мы и рассмотрим ниже. Также нужно делать такой вариант при большом объеме контента.
Теперь перейдем непосредственно к реализации. Начинаю с видео-урока после чего имеется текстовая версия для полного освоения всей информации.
А вот и обещанный текстовый вариант со всеми исходными данными, который показывал выше.
Как поставить ссылку-якорь в тексте?
Реализация данной функции проста до невозможности. Нам потребуется 2 ссылки:
- Первая для самой ссылки;
- Вторая для якоря, который будет определять место, куда нужно переместиться при нажатии на первую.
Теперь стало понятно, что первую ссылку мы ставим на ту фразу, при нажатии на которую будет происходить перемещение в нужное место статьи. А вторую - в место, куда нужно переместиться.
Ниже даю вам 2 ссылки, которые необходимо прописывать в HTML режиме.
<a href="#1">тут текст ссылки</a> <a name="1"></a>
<a href="#1">тут текст ссылки</a> <a name="1"></a> |
В обеих ссылках имеется идентификатор, который связывает оба линка между собой. Если на одной странице нужно использовать не одну ссылку-якорь, то значения необходимо ставить новое для каждой связки. В примере выше значение стоит 1. Если мне необходимо сделать вторую ссылку, то можно поставить новое значение, например 2.
Я так обычно и делаю в своем содержании. Каждый пункт у меня обозначен новым номером.
То же самое касается и второй ссылки, то есть самого якоря. Там также проставлены номера, соответствующие каждому пункту.
Замечу, что во второй ссылке между тегами не обязательно прописывать какой-то текст. Я его не вписываю. Мне нужен просто якорь. Если же пропишите текст, то якорь будет отображаться ссылкой с текстом, который вы туда впишите.
Что касается движка WordPress, то необязательно проставлять первую ссылку в текстовом (html) редакторе. Я делаю проще.
- Сначала пишу все пункты содержания;
- Затем делаю их нумерованным списком;
- Далее просто делаю каждый пункт ссылкой стандартным функционалом и URL указываю в виде идентификаторов #1, #2, #3 и так далее;
- Потом перехожу в текстовый редактор и в нужные места вставляю якоря с соответствующими номерами ссылок.
Каждый якорь я вставляю всегда перед каждым заголовком, который соответствует каждому пункту материала. На изображении выше вы можете это увидеть.
Также, если статья ну очень уж длинная, то я даю возможность после каждого пункта вернуться к содержанию, использовав ту же самую ссылку якорь.
Это нужно для того, чтобы посетитель не утруждал себя долгим перелистыванием страницы вверх.
Делается все точно так же. Возле содержания ставим якорь и после каждого пункта ставим ссылку на него.
Если не хотите делать такой вариант, то позаботьтесь об удобности потребления объемного контента на вашем ресурсе. Например, кнопка вверх для сайта также помогает быстро переместиться в самое начало контента.
В окончании этой статьи я дам еще один совет, когда можно использовать такие ссылки-якоря.
Целесообразно это делать в том случае, когда нужно вернуться к какому-то моменту, описанному выше в тексте. Как правило, всегда пишется "Делайте точно так же, как и выше...". Можно эту фразу также сделать ссылкой на якорь, чтобы посетитель сразу переместился в нужное место. В таком случае ему не придется самому искать ранее изложенную информацию.
На этом статью заканчиваю. Надеюсь, что вы поняли всю полезность таких ссылок в вашем контенте на сайте и будете их использовать в обязательном порядке.
До скорой!
С уважением, Константин Хмелев!
kostyakhmelev.ru
Как вставить ссылку-якорь в HTML. Урок - 6 (для начинающих)
Будем учиться закидывать якорь на HTML странице. Вы только не подумайте, учить мореходным штучкам я не буду 
.
Итак, что такое ссылка-якорь в HTML?
Якорь - это закладка с уникальным именем которая размещена на определенном месте веб-страницы и служит для быстрого перехода к ней по ссылке.
Если сказать простыми словами, то якорь - это что-то на подобии закладок в книге.
Для чего нужно использовать якорь в в HTML? Если у вас по тексту получилась объемная страничка, тогда можно для быстрого перехода к нужному разделу использовать якорь. Читатели вашей странички еще спасибо скажут, ведь как-то некорректно крутить колесик мышки, чтобы найти нужный раздел.
Пример, как выглядит ссылка-якорь в HTML:
На примере вы можете увидеть, что при нажатии вкладки "Перевод песни группы HIM", посетителя перекинет именно на этот раздел (на песню группы HIM).
Если вам ничего не понятно, предлагаю приступить к практике, так лучше усвоится или поймете материал.
Как создать или закинуть якорь?
Вот ссылка-якорь
<a name="имя якоря-1">Текст или заголовок</a>
а это ссылка, которая привязывается к якорю.
<a href="#имя якоря-1">Ссылка закладки на раздел</a>
Внимание:обязательно нужно использовать для привязки якоря к ссылке символ #.
Итак, давайте посмотрим, как выглядят якоря в html файле.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Как вставить ссылку в html</title> </head> <body> <h3>Перевод песен.</h3> <a href="#stih2">Перевод песни группы Type o negative</a> <BR> <a href="#stih3">Перевод песни группы HIM</a> <BR> <a href="#stih4">Перевод песни группы Nazareth</a> <BR><BR><BR><BR><BR><BR><BR><BR> <h4><a name="stih2">Перевод песни группы Type o negative</a></h4> <p> ... бла-бла-бла 1... </p> <h4><a name="stih3">Перевод песни группы HIM</a></h4> <p> ... бла-бла-бла 2... </p> <h4><a name="stih4">Перевод песни группы Nazareth</a></h4> <p> ... бла-бла-бла 3... </p> </body> </html>Результат:
[посмотреть пример]
Как бросить якорь на другую веб страницу?
Якорь можно бросить на другую страницу веб-ресурса или страницы. Для этого пропишите в атрибуте href URL-адрес страницы, добавьте к нему символ # и название якоря.
<p><a href="/primer.html#new1">Текст для перехода</a></p>
primer.html - это другая страница.#new1 - название якоря.
Теперь на странице primer.html бросаем якорь на нужный раздел текста.
<p><a name="new1">нужный раздел текста</a></p>
new1 - название якоря.
Посмотрим пример:
Создайте html документ с названием "1.html".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Как вставить ссылку-якорь в html</title> </head> <body> <p>текст</p> <a href="/2.html#stih2">Перевод песни группы Type o negative</a> <p>текст</p> </body> </html>Теперь создайте html документ с названием "2.html".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Как вставить ссылку-якорь в html</title> </head> <body> <p>текст</p> <p><a name="stih2">нужный раздел текста</a></p> <p>текст</p> </body> </html>[посмотреть пример]
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: html, основы
bloggood.ru
Как вставлять ссылку картинку и ссылку-якорь
Мы подкованные, практически настоящие веб-мастера — мы уже знаем, как вставлять ссылку на другую страницу и ссылку на электронную почту. Однако помимо этих ссылок часто так же используются и другие виды — ссылка-картинка и якорь. Для полноты своих знаний давайте изучим и этот вопрос.
Ссылка-картинка
Ссылка-картинка — это обычная ссылка, просто вместо текста в которой используется изображение. Если вы используете визуальный редактор, то можете подглядеть в посте Основы работы с WordPress | Создание картинки-ссылки и редактирование свойств изображений, как использовать картинку в виде ссылки. Если же вы редактируете запись в режиме HTML, то для начала давайте вставим изображение:
<img src="http://site.ru/files/image.jpg" />
<img src="http://site.ru/files/image.jpg" /> |
Этот код вставляет изображение image.jpg, которое находится в /site.ru/files/. Теперь осталось сделать его ссылкой.
<a href="http://site.ru"><img src="http://site.ru/files/image.jpg" /></a>
<a href="http://site.ru"><img src="http://site.ru/files/image.jpg" /></a> |
Этот код вставляет картинку image.jpg, при клике на которую вы перейдете на site.ru. Это обычная ссылка, в которой можно использовать дополнительные параметры (какие? смотрите этот или этот посты).
Ссылка-якорь
В качестве ссылки может выступать и якорь — определенное место на странице, куда переходит пользователь при клике по ссылке-якорю. Ссылки-якоря удобно использовать в больших списках, на больших страницах с множеством разделов, в качестве сносок на определенные места в тексте. Например, если вы кликните вот по этой ссылке, то перейдете в начало этого поста, в то место, где я пишу, что мы уже подкованные перцы. Делается это так:
1. В то место, куда вы хотите бросить якорь, вставьте невидимую ссылку:
<a name="якорь"></a>
<a name="якорь"></a> |
2. Если вам нужно отправить посетителя к якорю, вставьте ссылку на него:
<a href="#якорь">текст ссылки</a>
<a href="#якорь">текст ссылки</a> |
Пример ссылки-якоря, используемого в этом посте:
<a name="z001"></a> - это якорь <a href="#z001">по этой ссылке></a> - это ссылка, отправляющая к якорю
<a name="z001"></a> - это якорь <a href="#z001">по этой ссылке></a> - это ссылка, отправляющая к якорю |
К якорю можно отправлять не только с этой страницы, но и с других. Для этого в ссылке нужно указывать не только якорь, но и на какую страницу отправлять. Пример:
<a name="001"></a> - это якорь, который расположен на странице page <a href="/page#001">текст ссылки</a> - это ссылка, отправляющая из любого места к якорю 001, установленному на странице page
<a name="001"></a> - это якорь, который расположен на странице page <a href="/page#001">текст ссылки</a> - это ссылка, отправляющая из любого места к якорю 001, установленному на странице page |
Это пример простейшего варианта ссылки-якоря. Есть и более сложные, с использованием других контейнеров — span, div, а так же атрибутов id, но даже этого простого варианта вам хватит, чтобы сделать блог более удобным.
n-wp.ru
