More link оформление в css. Как вставить гиперссылку в HTML? Создание и использование гиперссылок в HTML. Как сделать ссылку блочной

В предыдущем уроке вы узнали о четырех состояниях, которые может принимать ссылка, а также о том, как стилизовать ссылки в этих состояниях, используя псевдоклассы. Сегодня мы поговорим о свойствах CSS, пригодных для использования со ссылками.

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

Со ссылками работают самые разнообразные свойства: color , background , border , border-radius , text-decoration , padding и т. д. Мы покажем наиболее распространенные варианты оформления ссылок, после чего вы можете подумать, каким образом их дополнить либо изменить.

Подчеркивание ссылок

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

Чтобы отменить дефолтный подчеркнутый стиль у ссылок, потребуется задать значение none для уже знакомого нам свойства text-decoration:

A { text-decoration: none; }

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

Подчеркивание ссылок при наведении

A { text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } Ссылка подчеркнута, когда наведен курсор

Подчеркивание с помощью border

Стандартное свойство text-decoration не поддается особой стилизации, поэтому веб-разработчики часто используют в качестве альтернативы свойство border . Управлять внешним видом границы гораздо легче: ей можно задать цвет, толщину, стиль полосы. Пример:

A { text-decoration: none; /* отменяем стандартное подчеркивание, * иначе будет две полосы */ border-bottom: 3px solid pink; /* добавляем нижнюю границу */ padding-bottom: 1px; /* делаем небольшое расстояние между текстом и границей */ } Создание подчеркивания с помощью свойства border-bottom

Согласитесь, такой вариант выглядит веселее с точки зрения возможностей. Не забывайте, что с помощью псевдокласса:hover можно изменить вид границы (и не только) при наведении курсора. А если при этом еще и задействовать CSS-анимацию, то из обычной ссылки может получиться настоящее произведение искусства! Убедитесь в этом сами, взглянув на несколько оригинальных способов выделения ссылок в CSS .

Ссылка с фоном

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

Как обозначить ссылки, которые открываются в новом окне/вкладке? Для этого поведения даже существует привычная иконка. Но добавлять ее через тег будет не очень хорошим тоном. Желательно, чтобы иконка открытия в новом окне появлялась автоматически, если у ссылки есть соответствующий HTML-атрибут target="_blank" . Здесь нам на помощь придет селектор атрибутов:

A { background-image: url(open-in-new-tab.png); background-position: center right; background-repeat: no-repeat; padding-right: 13px; } Ссылка с иконкой открытия в новом окне

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

Ссылка-кнопка

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

Несколько примеров (чтобы просмотреть код CSS для каждого примера, кликните по изображению):

Код CSS для данного примера:

A { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #ffffff; padding: 16px 26px; background: -moz-linear-gradient(top, #42aaff 0%, #003366); background: -webkit-gradient(linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); display: inline-block; text-decoration: none; } a:hover { background: -moz-linear-gradient(top, #42aaff 0%, #0d5aa7); background: -webkit-gradient(linear, left top, left bottom, from(#42aaff), to(#0d5aa7)); } a:active { background: -moz-linear-gradient(top, #003366 0%, #42aaff); background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#42aaff)); }

Код CSS для данного примера:

A { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #fafafa; padding: 16px 26px; display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0px 6px #27ae60; background: #2ecc71; } a:hover { background: #36d479; } a:active { position: relative; top: 6px; box-shadow: 0px 0px #23a33d; background: #23a33d; }

В этих примерах определены стили как для обычного состояния ссылки-кнопки, так и для состояний:hover (наведение) и:active (нажатие/удержание). Как видите, CSS позволяет имитировать внешний вид настоящей кнопки до мельчайших деталей.

Важно: чтобы иметь возможность подобным образом стилизовать ссылку, нужно заставить ее вести себя как блочный (block ) либо строчно-блочный элемент (inline-block ). Дело в том, что если вы будете добавлять отступы к строчному элементу (коим по умолчанию является ссылка), то не увидите никакого эффекта.

(Вы найдете больше примеров внизу этой страницы)

HTML Гиперссылки (Ссылки)

Тег может быть использован двумя способами:

Замечание:
Грядущий в обозримом будущем стандарт HTML5 предлагает использовать атрибут id вместо атрибута name для указания имени ссылки.
Использование атрибута id фактически работает и в HTML4 во всех современных браузерах.

Закладки не отображаются каким-либо специальным образом. Они не видимы для читателя.

Замечание: Всегда добавляйте замыкающий слэш к ссылкам на поддиретории. Если вы создаете ссылку так: href="http://сайт/html", то генерируется два запроса к серверу, сначала сервер добавляет слэш к адресу, и затем создает новый запрос: href="http://сайт/html/".

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

Совет: Если браузер не находит указанную именованную ссылку, он идет в начало документа. Никаких ошибок не возникает.

И . Также тут использована разметка .

HTML-теги для аббревиатуры (сокращённого слова) и определения (непонятного слова)

Пример

Более простой способ только на HTML .

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

Более простой способ только на HTML.

1. id у элементов индивидуальный. Он не может иметь одинаковое значение у двух и более тегов. Ссылка с хэшем (#) не только откроет указанную страницу (если до # ничего нет, то текущую страницу), но и прокрутит её к запрашиваемому id элемента (то, что указывается после #)..html#name">тут и тут.

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

Вставка гиперссылки

В HTML для вставки гиперссылки используется дескриптор (тег) , который вставляется в нужное место. Обычно его располагают среди текста, так как гиперссылка сама по себе является текстовой структурой. Но ссылки бывают ещё графическими (иконки, кнопки, картинки); о них будет рассказано дальше. Их расположение на веб-странице не ограничивается текстом, а зависит от дизайнерского решения создателя сайта.

главная страница Google

Это пример того, как вставить гиперссылку в HTML-документ, что осуществляется посредством тега . Посетитель сайта увидит подчёркнутый текст, отличный от цвета окружающего текста (цвет HTML-ссылки может быть любым), «главная страница Google», нажав на который, он попадёт на главную страницу поисковой системы «Гугл». Следует отметить, что текст гиперссылки должен содержать информацию о том, куда будет осуществлён переход. Этого принципа следует придерживаться и принять за правило!

Структура тега ...

Можно заметить, что тег - парный: необходим закрывающий тег .

href—атрибут тега, указывает назначение ссылки.

https://google.com/ - значение атрибута , заключающее в себе URL-адрес ресурса, на который осуществится переход. Оно заключается в двойные или одинарные кавычки. Это зависит от структуры вложенности тегов по правилам HTML.

главная страница Гугл

вся эта конструкция называется элементом веб-документа.

По правилам HTML, одни элементы могут содержать другие элементы. Тег не исключение. Если программисту необходимо выделить жирным слово Google, то делается это с помощью тега по общим правилам форматирования текста, соблюдая последовательность вложенности тегов. Веб-мастер должен знать, как создать гиперссылку в HTML без ошибок, иначе они не будут работать. Неработающие ссылки на компьютерном слэнге называют «битыми».

главная страница Гугл

Здесь: элемент

главная страница Гугл

содержит вложенный элемент

Гугл

Абсолютные гиперссылки

протокол://название домена/путь к файлу

Пример адреса распространённого в Америке поисковика: https://aol.com — абсолютный, так как содержит имя домена.com.

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

• http и https — наиболее часто встречающиеся; по ним осуществляется переход между интернет-страницами разных сайтов;
• ftp — протокол для загрузки файлов на сервер или скачивания пользователем с сайта;
• mailto — почтовый протокол, по которому отправляется электронная почта непосредственно с сайта, не заходя в личную почту.

Существуют ещё несколько протоколов особого назначения (gopher, telnet), встречающихся довольно редко, использование которых требует специальных знаний в программировании или системном администрировании.

Относительные гиперссылки

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

Создавая интернет-словарь, программист в начале страницы располагает алфавит, и если бы не применение ссылок, то пользователю пришлось бы очень долго крутить колесо мыши, чтобы добраться до буквы «Я».

Перейти к букве Я

где ya называется якорем, а Перейти к букве Я - якорем назначения. Для правильного отображения якорей рекомендуется использование латинских букв и цифр, поэтому не стоит писать «Я», хотя так было бы понятнее.

Теперь, чтобы осуществлялся переход от алфавита в начале страницы к букве «Я», нужно сделать привязку якоря в том месте HTML-документа, в котором начинаются слова на букву «Я»:

буква Я

перед якорем стоит знак решётки, без которого переход к букве не будет работать.

Относительная адресация при создании сайта

Удобный и самый общепринятый алгоритм создания сайта программистом:

• создание папки в компьютере и расположение её в месте быстрого доступа для удобства;
• создание в этой папке главной ;
• создание второстепенных веб-страниц (index.html/page2);
• и размещение в ней графических файлов;
• создание папки и размещение в ней других объектов (файлы для скачивания, например);
• наполнение сайта контентом;
• размещение файлов сайта на хостинге.

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

Допустим, программист создал главную страницу сайта index.html, на которой имеется ссылка на другую страницу page2.html, украшенную картинкой img.png. Тогда относительный путь к этой картинке будет выглядеть так:

картинка

Совет: при изучении этой темы лучше всего использовать простой редактор текста по причине того, что нужно приобрести сноровку в правильном написании адресов перехода и чтобы научиться разбираться в чужом коде. На этом этапе будет хорошим результатом без ошибок прописанная гиперссылка в блокноте, HTML их не прощает и выдаёт ошибки.

Способы переходов по гиперссылкам

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

Синтаксис применения атрибута target:

главная страница гугл

Главная страница «Гугл» откроется в новом окне.

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

Цвет гиперссылок

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

Задаются цвета ссылок в теге с помощью атрибутов и их значений, в которых выступает цвет HTML в системе rgb (#00FF00) или с прямым указанием имени цвета («green»). Существует три вида атрибутов для ссылок:

• link — задаёт цвет непосещённой ссылки;
• vlink — задаёт цвет ссылки, по которой пользователь уже переходил;
• alink — задаёт цвет ссылки в момент перехода на другую страницу. Это происходит быстро, поэтому не всегда можно уловить этот эффект.

Пример разметки:

Если применить эти атрибуты в теге , ссылки данного веб-документа будут тёмно-синими, посещённые - лилового, а активные - оранжево-красного цвета.

Графические гиперссылки

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

Широко применяется способ замены статичных кнопок () на красивые графические, созданные веб-дизайнером в редакторах графики (GIMP, Photoshop).

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

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

Звонки с сайта

Стандарт html5 расширил функциональные возможности использования Интернета, и теперь совершать звонки можно не только с телефона, но непосредственно с сайта. Для этой цели также можно использовать гиперссылки в HTML документе, и они имеют такой синтаксис:

...абонент ...

Вместо слова «абонент» прописывается понятный звонящему контакт, как в телефонной книге. Также можно разместить графический файл (фотографию абонента).

Чтобы звонки совершались с сайта, необходимо наличие не только ссылки на номер телефона абонента, но и гарнитуры (микрофон, наушники), установленной на компьютере VoIP-программа, скорость интернета должна превышать 0,5 Мб/сек. Оплата за звонки осуществляется расходом траффика. Поэтому, если Интернет безлимитный, то звонки бесплатные.

Этика создания гиперссылок

Размещая сайт в Интернете, веб-мастер должен знать, какие виды гиперссылок существуют в HTML, и не только правильно, профессионально их применять, но и придерживаться следующих положений:

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

Yandex

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

Попав не на ожидаемую страницу или скачав не тот файл, пользователь в 99% случаев тут же покинет сайт и в будущем никогда на него не зайдёт.

Анти-Seo при создании гиперссылок

Кроме технической стороны вопроса о том, как вставить гиперссылку в HTML, следует осветить ещё и нравственный аспект. Существует много сайтов, доступ к которым пользователям блокируется программами безопасности (антивирусом) или даже государством. Это те сайты, которые были созданы нечистыми на руку веб-программистами.

Одна из уловок, к которой они прибегают, - это вставка «невидимых» гиперссылок на веб-страницу. Мошенники знают, как создать гиперссылку в HTML, а при помощи атрибутов убрать подчёркивание ссылки и назначить ей цвет окружающего текста с тем, чтобы рядовой пользователь не увидел её. А при помощи других инструментов веб-технологий (CSS, JavaScript, PHP) можно запрограммировать их поведение. К примеру, событие OnMouseOver языка JavaScript активирует действие элемента веб-страницы. Когда пользователь проводит курсором по невидимой ссылке, он попадает на рекламную страницу другого сайта. Или ещё хуже, когда присутствует невидимая ссылка на файл и на его компьютер начинает скачиваться и устанавливаться ненужное программное обеспечение. Обычно это вирусы, которые меняют домашнюю страницу браузера, захламляют жёсткий диск массой программ и прочее.

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

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

Но, вначале немного справочной информации:

Элемент может принимать несколько «состояний», определяемых псевдо-классами CSS:

P.S. Постовой. Вот, например, как раз по теме — интернет магазин парфюмерии Vanilla имеет очень красивый дизайн и продуманное оформление ссылок.
Чтобы сайт радовал посетителей дизайном и стабильно работал закажите хостинг у надежной хостинговой компании с хорошими ценами.
Крайне полезной для вебмастеров окажется статья где купить ссылки в биржах статей или ссылок — автоматических или с размещением навсегда.