Ссылки можно поделить на две категории:
ссылки на внешние ресурсы
— создаются с помощью тега и используются для расширения возможностей текущего документа при обработке браузером;
гиперссылки
— ссылки на другие ресурсы, которые пользователь может посетить или загрузить.
Как сделать гиперссылки на сайте
1. Структура ссылки
Гиперссылки создаются с помощью парного тега . Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.
Обязательным параметром тега является атрибут href , который задает URl-адрес веб-страницы.
указатель ссылкиСсылка состоит из двух частей — указателя и адресной части . Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.
Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:
Метод доступа://имя сервера:порт/путь
Метод доступа , или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:
file обеспечивает чтение файла с локального диска:
File:/gallery/pictures/summer.html
http предоставляет доступ к веб-странице по протоколу HTTP:
Http://site.ru/
https - специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)
Https://site.ru/
ftp осуществляет запрос к FTP-серверу на получение файла:
Ftp://pgu/directory/library
mailto запускает сеанс почтовой связи с указанным адресатом и хостом:
Mailto: [email protected]
Имя сервера описывает полное имя машины в сети, например, site.ru . Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.
Номер порта ТСР
, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
21 — FTP
23 — Telnet
70 — Gopher
80 — HTTP
Путь содержит имя папки, в которой находится файл.
2. Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.
Рис. 1. Пример структуры папок
2.1. Абсолютный путь
Абсолютный путь
указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
1) протокол, например, http (опционально);
2) домен (доменное имя или IP-адрес компьютера);
3) папка (имя папки, указывающей путь к файлу);
4) файл (имя файла).
Существует два вида записи абсолютного пути — с указанием протокола и без него:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Если файл находится в корневой папке, то путь к файлу будет следующим:
Http://site.ru/index.html
При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).
Http://site.ru/
Обычно в качестве индексного файла выступает документ с именем index.html . Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.
2.2. Относительный путь
Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http:// , он выполняет поиск указанного документа на том же сервере.
Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу);
2) файл (имя файла).
Путь для относительных ссылок имеет три специальных обозначения:
/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
./ указывает на текущую папку
../ подняться на одну папку (директорию) выше
Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.
3. Якоря
Якоря , или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега с разницей в том, что атрибут href содержит имя указателя — так называемый якорь , а не URl-адрес. Перед именем указателя всегда ставится знак # .
Я считаю, что ни одна HTML-страница не может существовать без хотя бы одной гиперссылки (или просто ссылки). Ссылки могут быть как на другие страницы или сайты, так и на файлы, картинки и т.д.
Ссылки бывают внешними и внутренними, текстовыми и графическими. Внешние ссылки ссылаются на другие сайты или объекты объекты на них, внутренние же наоборот — на различные части твоего сайта. Текстовая ссылка — это текст, при нажатии на который ты попадаешь на другой объект или открываешь его, а графическая — это некий объект (чаще всего картинка), который служит также для перехода на другую страницу, сайт или, например, изображение. Ссылки в HTML создаются при помощи тега (от англ. anchor — якорь). Далее я расскажу тебе подробнее о ссылках.
В теге есть важный и главный атрибут href. Его значением выступает путь к объекту или сайту, на который ссылается наша ссылка в виде URL-адреса. В качестве анкора (тела ссылки) может выступать как текст (текстовая ссылка), так и изображение (графическая ссылка). Если тебе надо создать графическую ссылку, надо в качестве анкора использовать тег IMG между тегами . Приведу простой пример HTML-код ссылки:
текст ссылки (анкор)
Приведу еще один пример, чтобы ты лучше усвоил. За основу возьму мой сайт:
На html-странице в браузере это будет такой вид:
Цвет текста ссылок задается атрибутами в теге BODY. Если говорить проще, то к ссылкам подходят те же атрибуты для изменения, что и к тексту на странице. Это и выделить жирным, и курсивом, и использовать заголовки и т.п.
На html-странице появится следующее:
Получим результат без рамки:
Главная страница 1seo
Как ты заметил, переход на другую страницу осуществляется в этом же окне. Если ты хочешь чтобы ссылка открывалась в другом окне или родительском (по умолчанию стоит в этом же окне), можно применять слудующие атрибут target тега A:
- _blank — открывает страницу в новом окне;
- _parent — загружает ссылку в родительском окне;
- _self — по умолчанию. Открывает ссылку в этом же окне.
Главная страница сайта 1seo
Существует еще атрибут title, для создания всплывающей подсказки у ссылки:
Главная страница сайта 1seo
Кстати, если указать в URL-адресе ваш почтовый ящик, и указать протокол mailto:, то при нажатии по твоей ссылки откроется почтовая программа, где в поле Кому уже будет вписан твой адрес почтового ящика. На примере HTML-код будет вот такой:
Написать мне сообщение
Я постарался написать основное, что тебе необходимо для создания ссылки в HTML. Кстати, если ты прочитал предыдущие статьи Учебника HTML, то я могу с увереностью сказать, что ты уже знаешь минимум, чтобы создать свою первую полноценную html-страницу. После того, как создашь страничку, ты можешь выложить её на бесплатный хостинг и увидеть плоды своего труда. Поверь, после того как ты это сделаешь, у тебя будет еще больший прилив творческой энергии. Далее я расскажу тебе, как создать таблицу в HTML. Это тоже очень важная информация, постарайся её полностью поглотить и переварить.
Дата публикации: 15 мая, 2012В данном уроке мы поговорим о том, как сделать ссылку в HTML . Ссылки очень часто используются на сайтах, они позволяют переходить с одной страницы сайта на другую. Особенностью ссылок является то, что они могут вести не только на веб-страницу, но и на файлы, изображения и др.
Ссылки могут быть внутренние и внешние. По внутренним ссылкам осуществляется переход на страницы и файлы внутри одного сайта. Внешние ссылки ведут на сторонние сайты, документы и файлы. При этом, задаются эти виды ссылок, практически, одинаково.
Как сделать ссылку в HTML, примеры
1. HREF — отвечает за то, куда должна вести ссылка. Стандартная ссылка задается следующим образом: Текст ссылки.
2. TARGET — отвечает за то, в каком окне будет открываться документ. По умолчанию новый документ открывается в текущем окне браузера. Атрибут «target» позволяет открывать ссылку в новом окне браузера. Данный атрибут имеет следующие параметры:
- _blank - загружает страницу в новом окне;
- _self - загружает страницу в текущем окне;
- _parent - загружает страницу во фрейм-родитель;
- _top - отменяет все фреймы и загружает страницу в новом окне.
3. NAME — используется для перехода к конкретной области внутри страницы. После символа «решетка» указывается в кавычках ключевое слово (закладка или метка). Для перехода к этой метке используется ссылка, в которой данная метка прописывается.
Пример внешней ссылки Перейти на сайт
Перейти на сайт
Бесплатные уроки по WordPress
Пример 4. Изображения в качестве ссылок.
Пример изображения в качестве ссылки
Пример ссылки на определенное место на странице Перейти к тексту
Текст страницы...
В данном примере на странице ставится метка «list» с помощью атрибута «name». Ссылка на эту метку обеспечит переход в определенную область страницы.
Скачать файл
Написать письмо
Можно задавать цвет ссылок с помощью атрибутов, которые указываются в теге «body» в качестве параметров. Рассмотрим эти атрибуты:
- link — не посещенная ссылка, по умолчанию она отображается синим цветом;
- alink — активная ссылка, по умолчанию имеет красный цвет;
- vlink — посещенная ссылка, имеет по умолчанию фиолетовый цвет.
Пример задания цвета у ссылок ...
Таким образом, мы разобрались по какому принципу создаются ссылки в HTML. Ссылкам можно придавать определенные стили оформления. Про можно посмотреть в уроке, перейдя по ссылке.
Здравствуйте, уважаемые читатели блога сайт. Сегодняшнюю публикацию я решил посвятить важнейшему аспекту вебмастеринга, где со всеми подробностями попытаюсь объяснить, что представляет из себя гиперссылка, неразрывно связанная с , который, в свою очередь, без преувеличения, является основой интернета.
Но для того, чтобы правильно создавать гиперссылки и вставлять их в код вебстраниц (например, своего сайта), необходимо изучить соответствующую область языка гипертекстовой разметки (), поскольку эти элементы образуются с помощью HTML-тега a, который имеет , позволяющие модернизировать ссылку до нужного вида.
Итак, сегодня мы разберем, из каких частей состоит гиперссылка, каким образом использование атрибута target blank дает возможность открывать страницу в новом окне (вкладке), как любую картинку делать ссылкой и много других важных подробностей. Кроме всего прочего, эта информация продвинет вас в изучении языка HTML.
Что такое гиперссылка и можно ли ее называть ссылкой?
Отвечая на вопрос, заданный в заголовке, скажу, что термин «ссылка» имеет более широкий смысловой спектр (ссылка в Сибирь, банковская для идентификации плательщика, текстовая в книге и т.д.), включая и значение, заложенное в понятие «гиперссылка», которое связано только с гипертекстом, дающим возможность нелинейного восприятия информации.
Таким образом, гиперссылка это частный случай ссылки , поэтому вполне возможно употреблять их в сегодняшней темы на равных основаниях. Этим я и воспользуюсь в своих "шкурных интересах" в ходе сегодняшней публикации, применяя оба этих термина, чтобы избежать излишнего спама ключевых слов.
Но существуют еще и невидимые служебные, создаваемые при помощи и находящиеся в пределах , в задачу которых входит подача многочисленных сигналов и команд браузерам для выполнения той или иной функции.
Например, с помощью служебных гиперссылок возможно отображение иконки . Их можно увидеть только в составе HTML-кода (для этого нажмите для любой открытой в браузере страницы):
Сейчас пока оставим в покое служебные линки и рассмотрим общую закономерность создания гиперссылок. Общее заключается в том, что все они имеют обязательный атрибут href , в качестве значения которого указывается адрес документа (). Ссылка HTML может вести как на внутреннюю страницу сайта, так и на внешний документ.
Еще одно важное замечание. Применение атрибута href делает гиперссылки кликабельными, то есть дает возможность пользователям в результате клика по ним автоматически переходить на соответствующую страницу веб-сайта.
Как сделать гиперссылку в HTML с помощью href
Итак, мы уже знаем, что для создания ссылки необходим в обязательном порядке тег a и атрибут href, параметрами которого могут быть URL различного вида. Поскольку a это , то между открывающим и закрывающим расположено содержание, которое и будет отображаться на web-странице.
Это содержимое называется анкором и может быть представлено в виде текста или изображения (о том, как сделать картинку ссылкой, поговорим подробнее ниже). Как я уже отмечал, анкор будет кликабельным. Рассмотрим пример гиперссылки с текстовым содержанием. Вот как будет выглядеть ее конструкция в HTML-коде:
немного об анкорах
Помимо HTTP может быть использован защищенный протокол HTTPS. Линк не обязательно должен вести на вебстраницу. Все зависит от значения href, в качестве которого может быть указан путь до какого нибудь файлика:
//сайт/wp-content/uploads/2012/05/giperssylqi-v-html.jpg
скачать
На вебстранице данный линк примет такое обличье:
Браузер "понимает", что объект с расширением.zip может быть предназначен только для скачивания, что и предлагает сделать юзеру.
Кстати, путь до любого файла иногда указывается через ФТП (). Тогда в URL адресе, который применяется в качестве параметра атрибута href, следует просто заменить протокол HTTP (HTTPS) на FTP. Ссылка на файл будет выглядеть следующим образом:
скачать с сервера
Но и это не все. Подобным образом создается ссылка на электронную почту с использованием псевдо-протокола mailto для быстрого доступа к средству написания письма:
пишите письма
После нажатия на подобную ссылку должно появиться окно установленного по умолчанию почтового клиента, в котором можете составить текст сообщения и отправить его по уже указанному адресу, взятому, как вы, наверное, догадались, из href.
На практике гиперссылки на почту очень часто ранее использовались вебмастерами и владельцами крупных ресурсов для обеспечения удобства пользователей и клиентов, которые могут в один клик получить доступ к форме почтовой связи.
Но этот вид коммуникации на веб-ресурсах сейчас уже не столь популярен (тем более, что можно установить, например, ), потому как открытые таким образом почтовые адреса активно перехватывается с помощью софта и используются разного рода спамерами.
Я привел в пример только самые распространенные протоколы, входящие в состав URL, который, в свою очередь, является параметром атрибута href при формировании гиперссылки. Кроме HTTP (HTTPS), FTP и mailto существуют и другие для решения задач более узкого профиля. Возможно, мы их рассмотрим поподробнее в других публикациях.
Виды гиперссылок
А теперь попробуем классифицировать линки по тем или иным признакам.
По области их действия:
1. Внешние — ведут на страницы, располагающиеся вне сайта, на котором они проставлены;
2. Внутренние — связывают вебстраницы, находящиеся в пределах одного веб-ресурса.
По формату:
2. Графически е — в этом случае анкором гиперссылки является изображение (в том числе миниатюра), баннер, кнопка и т.п.
По типу URL, выступающего в качестве значения атрибута href:
1. Абсолютные , которые содержат явное указание протокола передачи данных (например, HTTP) и доменное имя сайта (в все о доменах).
Такие линки чаще используют, когда ссылаются на страницы внешних ресурсов. В этом случае значение href будет включать в себя полный путь до нужного файла либо вебстраницы. Вот пример абсолютной гиперссылки:
Контекст - что это такое
2. Относительные , одним из вариантов создания которых будет путь, указанный относительно корневой папки веб-сайта (отсюда и название этого вида гиперссылок). При этом из URL адреса будет изъят протокол (HTTP) и домен сайта:
Контекст - что это такое
Относительные гиперссылки на web-странице могут обеспечить переходы на внутренние странички. В таком виде они короче, что облегчает HTML-код. Конечно, все не так просто, и требует более широкого освещения, в чем вы сможете убедиться, ежели перейдете по предоставленной ссылке.
Атрибуты тега a
Теперь посмотрим, какие еще атрибуты, кроме обязательного href, существуют, и как они могут повлиять на создание гиперссылки. Наиболее полные данные в этом отношении, так сказать, "из первых рук" вы можете найти на официальном сайте Международного Консорциума W3C, на котором актуальная информация появляется быстрее всего.
Они являются полностью идентичными и инициируют открытие веб-страницы в текущей вкладке. Если же вы хотите, чтобы странички открывались в новой вкладке при переходе по ссылкам, то следует добавить при формировании линка атрибут target с параметром blank :
Контекст - что это такое
Хотя некоторые вебмастера и сеошники считают, что лучше, если посетителю дать возможность выбора (то есть не прописывать target blank), ведь при необходимости в новой вкладке страницу можно открыть и с помощью контекстного меню (подвести курсор к линку, щелкнуть правой кнопкой мышки и нажать на соответствующий пункт):
Причем, как видите, в этом случае у юзера преимущество в том, что есть возможность открыть вебстраницу не только в новой вкладке, но и в новом окне (такой вариант нельзя реализовать посредством HTML, только с помощью скриптов).
Но я считаю, что не все начинающие пользователи в полной мере знакомы с возможностями и настройками популярных браузеров (). Вполне вероятна ситуация, когда читатель, перейдя по внешней гиперссылке и, потеряв из виду страницу-источник (вместо нее появится документ-реципиент), в сердцах просто закроет вкладку.
Таким образом владелец веб-ресурса вполне может не только потерять перспективного посетителя, но и получить в придачу ухудшение поведенческих факторов (), что повлечет за собой потерю позиций страницы при ранжировании.
Кроме этого, открытие страницы в соседней вкладке очень удобно с точки зрения юзабилити (). Юзер перебирается по гиперссылке на вебстраничку, получает дополнительную информацию и, как ни в чем не бывало, продолжает изучение основного материала.
Для создания объективной картины следует добавить, что применение «target="_blank"» к любым внешним ссылкам, оказывается, таит в себе некоторую угрозу безопасности. Если кому интересно, то можете почитать , где даны рекомендации по устранению проблем при использовании target blank, а также представлены альтернативные варианты реализации задачи по открытию вебстраницы в новой вкладке.
Вроде бы отметил все плюсы и минусы применения значения blank для открытия гиперссылки в новой вкладке. Ежели вы читаете статьи на моем блоге, то, наверное, уже догадались о моем отношении к этому параметру атрибута target.
На данный момент для меня его плюсы перевешивают минусы, и я являюсь его безусловным сторонником. На основании приведенных фактов у вас может сформироваться свое мнение по этому вопросу. Хотя...с учетом появления новых обстоятельств и оно может измениться.
Как создать хеш-ссылки, якоря и зачем они нужны?
Далее акцентирую ваше внимание на еще одной разновидности гиперлинков, которые могут быть полезны, если материал, расположенный на веб-странице, довольно объемный, и его следует структурировать для улучшения навигации.
За примером далеко ходить не надо, просто взгляните на оглавление данной публикации в самом начале. Видите, там присутствует список разделов статьи? Гиперлинки на эти разделы как раз и являются хеш-ссылками. После нажатия на любую из них браузер прокрутит страницу до того места, где начинается соответствующая часть.
Оформляются подобные линки довольно просто. Для начала нужно создать якорь (anchor) , проставив в необходимом месте страницы соответствующую метку в виде идентификатора ID, являющегося одним из глобальных атрибутов, применяемых к любому HTML-тегу.
Благодаря универсализму ID подобные метки-якоря можно установить практически в любом месте вебстраницы. Поскольку обычно текст разделяется на абзацы, то их можно применить и к . Я в основном проставляю якоря , которыми статьи разделены на логические части:
Отметив таким образом все нужные места в HTML коде, далее создаем гиперлинки на них. Для этого в конце после последнего слэша «/» в URL (являющегося, как вы уже знаете, значением атрибута href) прописываем последовательно знак решетки «#» и имя метки (ID):
Как формировать хеш-ссылки и якоря?
Причем, если подобная якорная ссылка проставлена на той же странице, что и якоря, то часть урла до последнего слеша перед решеткой включительно может быть опущена и в качестве параметра href использованы только «#» плюс наименование ID (в сущности, это один из вариантов относительной ссылки):
Как формировать хеш-ссылки и якоря?
То есть при составлении оглавления мануала для оптимизации HTML кода вы вполне можете воспользоваться этим облегченным вариантом. Если в качестве URL вы поставите лишь один знак решетки, без названия идентификатора, то с места, где находится такая ссылка, страничка будет прокручиваться до конца вверх:
Наверх
Собственно, это простейший вариант , которая опять же служит дополнительным плюсом юзабилити ресурса, поскольку облегчает жизнь его посетителям. В качестве анкора для создания кнопки можно использовать привлекательную картинку.
Как убрать подчеркивание и изменить цвет ссылки
Разработчики HTML продумали практически все нюансы, которые могут помочь в оптимизации того или иного аспекта, это же касается и гиперлинков. Например, переходя по какой-нибудь гиперссылке на другую веб-страницу, а затем вернувшись обратно, юзер увидит, что гиперссылка изменила цвет.
Если ему требуется повторять такие действия неоднократно, то он сможет быстро определять, какие ссылки он уже нажимал, а какие нет. Такая опция заложена практически в каждом браузере. Нет нужды объяснять, насколько это удобно и сколько времени экономит.
По умолчанию и без применения средств CSS гиперссылки выделены подчеркиванием и тремя вариантами цвета , каждому из которых соответствует свой атрибут для :
- link — задает цвет гиперлинка на вебстранице (по умолчанию синий, который в обозначается #0000ff);
- alink — цвет активной гиперссылки на тот промежуток времени, пока она обрабатывается веб-браузером (красный #ff0000);
- vlink — цвет посещенной юзером ссылки (фиолетовый, #800080).
Как же заменить цвета ссылок, отображаемых браузерами для вашего сайта? Ну, для простого HTML-сайта, где странички формируются вручную (а полнофункциональных ресурсов такого рода в современных реалиях, думаю, практически не осталось, разве что простенькие дневники и лендинги) нужно просто найти открывающий тег
и прописать для него нужные параметры (кстати для обозначения цвета можно использовать и его название), например:
Если вы установили для администрирования своего веб-ресурса систему управления контентом (), то, независимо от типа движка, который вы используете, необходимо открыть на редактирование файл, отвечающий за вывод хидера (шапки), где присутствует открывающий тег
.Если ваш ресурс работает под управлением Вордпресс, то для практической реализации этой задумки в качестве инструмента для автоматической вставки картинки внутрь гиперссылки можно воспользоваться , где сначала выбираете из библиотеки или загружаете нужное изображение и вставляете его в текст:
Затем выделяете полученный код картинки и нажимаете кнопку «link» редактора, после чего в появившемся окне вставляете нужный скопированный гиперлинк:
Загрузка...