Html оформление ссылки: Как сделать ссылку | htmlbook.ru

Разное 

Содержание

Ссылки в HTML • Vertex Academy

Vertex Academy html ссылка в новом окне,html ссылки,html ссылки внутри страницы,html5,как сделать переход на другую страницу html,как сделать ссылку,как сделать ссылку html,как сделать ссылку на сайт в html,как создать гиперссылку в html,ссылки в html,тег

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой…и не дают уснуть вовремя 🙂

Ссылки бывают разные, но чаще всего встречаются такие:

  • с одного сайта на другой
  • с одной страницы на другую в рамках того же сайта
  • в пределах одной страницы — с одной её части на другую
  • ссылки, которые запускают почтовую программу и позволяют отправить письмо на определенный адрес.

Ссылка создаётся с помощью тега <a> (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href. Сам адрес пишется в кавычках. Между тегами <a></a> указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа «Жми сюда».


При клике на любое из слов, помещенных внутри элемента <a></a> пользователь переходит по указанной ссылке.

По умолчанию, когда вы наводите на ссылку, указатель мыши превращается в руку с тычущим пальчиком, а цвет ссылки меняется.

Абсолютные и относительные ссылки

Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: «планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41». А может просто сказать «да вот его квартира, слева от меня». В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором — относительную.

Абсолютные ссылки используются для перехода на другой сайт. Они соответствуют требованиям обозначения URL-адреса, т.е. содержат протокол передачи данных (например http://), доменное имя сайта и путь к конкретной странице сайта. Если путь не указан, то по умолчанию откроется главная страница. В примере выше указана абсолютная ссылка, ведущая на главную страницу сайта.

Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки 🙂

Ссылка на документ в той же папке

Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html

Поскольку они соседи, то ссылка со страницы index. html может быть очень короткой и содержать просто название страницы: about.html

<!DOCTYPE HTML> <html> <head> <title>Главная</title> <meta charset=»utf-8″> </head> <body> <p>Моя первая веб-страница</p> <a href=»about.html»>Подробнее</a> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE HTML>

   <html>

   <head>

      <title>Главная</title>

      <meta charset=»utf-8″>

   </head>

   <body>  

      <p>Моя первая веб-страница</p>

      <a href=»about.html»>Подробнее</a>

   </body>

</html>
Ссылки на документ в папках уровнем ниже

Зачастую при создании сайта одним корневым каталогом дело не обходится, и создаются дополнительные папки, например для хранения изображений, видео или просто с другой темой. Создадим в нашей папке HTML_Start еще одну папку, Lessons. Эта папка будет на уровень ниже и станет дочерней по отношению к нашему корневому каталогу, а он будет родительским по отношению к ней.

В папке Lessons давайте создадим файл links.html и попробуем сослаться на него с главной страницы. Чтобы это сделать, нужно указать:

имя папки, слеш (символ /), а потом уже имя страницы:

<body> <p>Моя первая веб-страница</p> <a href=»Lessons/links.html»>Как создавать ссылки в HTML</a> </body>

<body>  

   <p>Моя первая веб-страница</p>

   <a href=»Lessons/links.html»>Как создавать ссылки в HTML</a>

</body>

 

Если внутри папки Lessons создать еще одну папку, например HTML, то эта папка будет уже на 2 уровня ниже и станет

внучатой для нашего корневого каталога, а он для неё будет прародительским. Создадим в ней файл Practice.html. Чтобы попасть с главной страницы на страницу, которая лежит во внучатой папке HTML, путь должен записываться так:

«имя дочерней папки/имя внучатой папки/имя нужной страницы«

<a href=»Lessons/HTML/Practice.html»>Упражнения</a>

<a href=»Lessons/HTML/Practice.html»>Упражнения</a>
Ссылки на документ в папке уровнем выше 

Для упрощения веб-сёрфинга полезно делать ссылки, ведущие назад, например на главную страницу. Чтобы создать ссылку на страницу в родительской папке нужно ввести две точки и слеш — это укажет на то, что файл лежит в папке уровнем выше, и потом имя самого файла. Для файла links.html, лежащего в папке Lessons синтаксис будет таким:

<a href=»../index.html»>На главную</a>

<a href=». ./index.html»>На главную</a>

 

а для файла Practice.html, лежащего во внучатой папке HTML, чтобы перейти назад на главную страницу в прародительском каталоге, нужно

два раза указать «../«

<a href=»../../index.html»>На главную</a>

<a href=»../../index.html»>На главную</a>

 

Давайте еще раз вспомним, кто кому родня:


Lessons — дочерняя папка для HTML_Start, для ссылки на файл в ней пишем

<a href=»Lessons/links.html»>Ссылки в HTML</a>

<a href=»Lessons/links.html»>Ссылки в HTML</a>

HTML_Start является родительской папкой для папки Lessons. Чтобы вернуться на уровень выше из папки Lessons пишем

<a href=». ./index.html»>На главную</a>

<a href=»../index.html»>На главную</a>

HTML — внучатая папка для HTML_Start, чтобы сослаться на файл в ней, нужно указать также и «по батюшке»

<a href=»Lessons/HTML/practice.html»>Ссылки в HTML</a>

<a href=»Lessons/HTML/practice.html»>Ссылки в HTML</a>

HTML_Start — прародительская папка для папки HTML, чтобы из папки HTML подняться на два уровня выше пишем:

<a href=»../../index.html»>На главную</a>

<a href=»../../index.html»>На главную</a>
Ссылка в новом окне

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

Для этого используется атрибут target = «_blank».

Мы впервые использовали два атрибута для одного тега. Обратите внимание, что они разделяются исключительно пробелом, никаких запятых и тому подобного!

Ссылка на электронную почту

Если на сайте есть раздел типа «Свяжитесь с нами», можно создать ссылку, при клике на которую на компьютере пользователя откроется установленная у него программа электронной почты и ему останется только написать письмо.

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

Ссылка на определенную часть страницы

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

Отметить участок можно с помощью атрибута id. Этот атрибут можно присваивать любому элементу разметки HTML, будь то абзац, картинка, заголовок, что угодно. Для создания ссылки на этот участок значение атрибута href должно начинаться с решетки «#», после которой указываем значение атрибута id. Например <a href=»#top»></a>

Картинка в качестве ссылки

Часто бывает, что при клике на картинку мы переходим на другую страницу. Чтобы создать изображение ссылкой нужно вместо текста ссылки написать путь к имиджу. В этом примере picture.jpg лежит в той же папке, что и страница, с которой ведёт ссылка:

<a href=»links.html»><img src=»picture.jpg»></a>

<a href=»links. html»><img src=»picture.jpg»></a>

Если картинка лежит в другой папке вашего сайта — для неё указывается относительный путь точно также, как и для файлов.

Если картинка лежит в другом месте, не у вас на сайте — указывайте абсолютный путь:

Подробнее об имиджах смотрите другую нашу статью 🙂
До встречи!

 


Правильное оформление ссылок на сайте

Красиво оформленные ссылки привлекают внимание посетителей и побуждают к действию.

Оформление ссылок и юзабилити

Давайте определим, как же должны выглядеть ссылки, чтобы они гармонировали с дизайном сайта и в то же время были удобными для использования.

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

Лучший цвет для выделения – синий (голубой), он наиболее привычен для пользователей. Пример правильного выделения ссылок:

А вот слишком яркие цвета будут только отвлекать от основной информации и испортят внешний вид текста в целом:

Выделять стоит все ссылки, кроме ссылок меню, по ним и так понятно, что они кликабельны. Как видите, подчеркивание здесь лишнее:

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

Лучше всего выбрать менее яркий оттенок основного цвета ссылок или близкий по цвету, но также приглушенный. Разные одинаково яркие цвета только запутают пользователя.

Пример использования похожих цветов:

И ещё 6 дополнительных советов:

  1. Используйте для ссылок тот же размер шрифта, что и для основного текста, чтобы текст легче воспринимался.
  2. Не стоит добавлять для ссылок дополнительные эффекты при наведении курсора – их не видно с мобильных устройств.
  3. Не размещайте ссылки слишком близко друг к другу, используйте отступы и знаки препинания между ними. Или переформулируйте основной текст.
  4. Не добавляйте в текст слишком много ссылок. Такой текст сложнее читать, к тому же есть риск попасть под фильтры поисковых систем.
  5. Ссылки на сторонние ресурсы открывайте в новой вкладке, чтобы не уводить посетителей с сайта.
  6. Не выделяйте некликабельный текст синим цветом или подчеркиванием, чтобы не дезориентировать пользователей.

Правильно с точки зрения юзабилити оформить ссылки – мало, надо еще уметь использовать их к месту. Для продвижения сайта важны как внутренние ссылки (между страницами сайта), так и внешние (со сторонних источников). Сначала поговорим о ссылках внутри сайта.

Внутренняя перелинковка

Говоря о внутренней перелинковке, хочется заметить, что многие не уделяют ей нужного внимания.

Так, например, красиво оформленные ссылки в тексте статьи или блок с похожими материалами/товарами привлекает внимание посетителя и тем самым увеличивает время пребывания на сайте, а также глубину просмотра, что хорошо для продвижения.

Еще к автоматической перелинковке можно отнести хлебные крошки и карту сайта. Например, у нас на сайте она находится в подвале:

От правильной перелинковки во многом зависит скорость индексации ресурса и его продвижение в целом.

Внешние ссылки

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

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

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

Поэтому, прежде чем ставить ссылку на какой-то сайт, определитесь, для чего это делаете.

Если ради заработка на бирже – подумайте два раза, а надо ли; если ссылка рекламная – закройте ее от индексации, так будет безопаснее всего. Если просто хотите поделиться годным контентом – то ОК, ссылка будет естественной, и вроде как бояться нечего.

Используйте ссылки так, чтобы по ним переходили люди, чтобы они были полезны. Именно такой формат лучше всего воспринимается поисковыми системами и не будет принят за спам или покупную ссылку.

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

Итак, мы решили, что ставим ссылку на сторонний ресурс осознанно, теперь надо понять, анкорная это ссылка будет или нет.

Виды ссылок: с анкором и без

Все популярнее становится вариант размещения так называемых безанкорных ссылок. А безанкорные они не потому что в них нет текста (анкора), а потому что нет вхождения ключевой фразы.

В ссылках такого типа в качестве анкора чаще всего используются:

  • конкретный url страницы;
  • название компании, бренда;
  • указательные слова: там, здесь, тут, по ссылке.

Если добавляете такой вид ссылок, учтите, что самым важным является околоссылочный текст, так как именно на него будут обращать внимание Яндекс и Google, пытаясь понять, на какую тематику данная ссылка и что конкретно она рекомендует.

«В прошлом году купил тут отличный велосипед»

«Бесплатную запись курса вы можете скачать по ссылке»

В обоих случаях наш анкор не объясняет, что же за страница откроется после перехода. Именно поэтому так важен текст около самой ссылки.

С анкорными же ссылками все гораздо проще. Вы либо указываете точное вхождение нужной ключевой фразы, либо слегка разбавленной.

«В нашем городе есть магазин с хорошими велосипедами»

«Запчасти для ноутбуков с доставкой по всему городу в компании Ноутбукич»

При оформлении таких ссылок не стоит забывать о морфологии и грамматике, варианты вроде «Заказать пластиковые окна Сочи» совершенно неприемлемы – это спам.

Идеальные анкорные ссылки должны обладать одним важным качеством – выглядеть естественно. То есть не надо их вставлять только ради ссылки – на своем сайте (перелинковка ради перелинковки) или на стороннем (ради наращивания ссылочной массы и продвижения в ТОП), ссылки добавляем только если они несут пользу для посетителей сайта.

Что делать, если ссылку поставить надо, а пользы она не несет? Такие ссылки закрываем от индексации.

Закрытие внешних ссылок от индексации

Давайте уточним, какие же ссылки стоит закрывать:

  • на сайты других тематик;
  • из комментариев/в отзывах, так как не всегда есть возможность контролировать их;
  • платные;
  • на сайты с ненадежным контентом (которому вы не доверяете).

Если все-таки необходимо закрыть какой-то участок сайта или ссылку, на выбор 2 инструмента.

Для скрытия текстовой информации от индексации в Яндексе используется тег <noindex>

<noindex>Наш текст <a href=»url»>Анкор</a></noindex>

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

Для закрытия же ссылок не забываем про атрибут rel=»nofollow» внутри самой ссылки.

<a href=»http://yandex.ru» rel=»nofollow»>Хороший сайт</a>

Атрибут запрещает роботам поисковых систем переходить по ссылке, однако есть и исключение. Как указано в справке Google:

Как правило, переход не производится. Это означает, что по этим ссылкам Google не передает ни PageRank, ни текст ссылки. Благодаря nofollow ссылки не попадают в нашу «схему» Сети. Однако соответствующие целевые страницы все равно могут быть включены в индекс Google, если другие сайты ссылаются на них без использования nofollow или если их URL предоставлены Google с помощью файла Sitemap.

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

Хотелось бы упомянуть про различные баннеры и ссылки в подвале сайта, например, на разработчиков. Их просто закрываем через nofollow и забываем.

Выводы

Правильно оформленные ссылки, как внешние, так и внутренние, являются залогом хорошего ссылочного профиля сайта. Крайне не рекомендуем заниматься покупкой или продажей ссылок, старайтесь получать внешние ссылки только с качественных ресурсов.

А если у вас остались вопросы или есть какие-то проблемы на сайте – пишите нам на почту. Или закажите у наших специалистов поисковое продвижение.

Оценок: 1 226 (средняя 5 из 5)

Правильное оформление ссылок на сайте {descr}

  1. Главная
  2. Правильное оформление ссылок на сайте

Лучший способ верстки страницы с помощью HTML5

Поиск

Введение

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

Семантическая разметка

Семантическая разметка четко выражает свое значение и назначение для разработчиков и браузера. Веб-разработчики часто используют элемент

для компоновки своих веб-страниц. Однако элемент
сам по себе не передает того, что он представляет на веб-странице. Элемент
может содержать навигационное меню или список постов блога, но простое использование
не дает много информации разработчикам или браузерам. Обычно классы CSS, применяемые к элементам
, раскрывают некоторую информацию об их предназначении. Например, рассмотрим следующую разметку:

 
...

В приведенной выше разметке класс CSS заголовка дает вам представление о том, что может делать

. Однако в отсутствие этого класса CSS невозможно легко определить, что может делать
. Это связано с тем, что
является элементом общего назначения. У него нет конкретной документально подтвержденной ответственности. Он просто отмечает раздел или раздел веб-страницы, но не диктует, что может находиться внутри этого раздела.

HTML5 включает набор элементов разметки, которые преодолевают эту трудность. Эти новые элементы имеют осмысленные имена, так что просто взглянув на эти элементы, вы получите четкое представление об их содержании. Эти семантические элементы HTML5 перечислены ниже (это не исчерпывающий список):

  • <заголовок>
  • <нижний колонтитул>
  • <раздел>
  • <артикул>
  • <в сторону>
  • <навигация>

Как видите, эти элементы достаточно выразительны и сразу можно составить представление о предназначении. На следующем рисунке показан образец макета страницы, созданный с использованием следующих элементов:

На приведенном выше рисунке показано типичное расположение различных элементов. Обратите внимание, что их точное расположение на странице полностью зависит от макета. Например, элемент