Как сделать ссылку словом html

1.5. HTML-ссылки

Ссылки можно поделить на две категории:

Как сделать гиперссылки на сайте

1. Структура ссылки

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

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

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

file обеспечивает чтение файла с локального диска:

http предоставляет доступ к веб-странице по протоколу HTTP:

https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS):

ftp осуществляет запрос к FTP-серверу на получение файла:

mailto запускает сеанс почтовой связи с указанным адресатом и хостом:

Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:

Путь содержит имя папки, в которой находится файл.

2. Абсолютный и относительный путь

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

Рис. 1. Пример структуры папок

2.1. Абсолютный путь

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

Существует два вида записи абсолютного пути — с указанием протокола (полный) и без него:

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

Если файл находится в корневой папке, то путь к файлу будет следующим:

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

2.2. Относительный путь

Относительный путь содержит следующие компоненты:

Путь для относительных ссылок имеет три специальных обозначения:

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

3. Якоря

Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:

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

4. Как сделать изображение-ссылку

Рис. 2. Изображение-ссылка

5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты

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

Источник

Гиперссылки в HTML

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

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

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

Содержание урока:

Термины

§ 1. Ссылка на файл, ссылка на сайт, ссылка на страницу

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

Д абы не растекаться мыслью по древу, покажу всё на примере.

И так, код ссылки на сайт выглядит так:

В браузере мы увидим вот, что:

Код ссылки на страницу выглядит так:

В браузере мы увидим вот, что:

Код ссылки на файл выглядит так:

В браузере мы увидим вот, что:

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

§ 2. Создание внешних ссылок

М ежду собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.

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

В браузере это будет выглядеть так:

К ак я писал в самом начале этого урока, цвет текста ссылок (анкора) можно изменить с помощью атрибутов тега BODY. Вообще, к тексту ссылок можно применять все те же варианты форматирования, что и к основному тексту страницы, т. е. выделять жирным, курсивом, использовать заголовки и т. д.

§ 2.1 Графические ссылки (ссылки-картинки)

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

П о-умолчанию, браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0:

Т екстовые и графические ссылки можно комбинировать. Если написать:

, то ссылкой будет как картинка, так и текст «Главная страница»

§ 3. Внутренние ссылки

Д ля комфортного перемещения по страницам с большим количеством контента используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается «якорь» ссылки. «Якорь» создаётся атрибутом name:

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

«Я корь» располагается в тех местах страницы, в которые должен попасть пользователь после щелчка по ссылке.

К ак я уже сказал выше, в атрибуте href внутренней ссылки вместо адреса указывается имя нужного «якоря» с обязательным символом решётки ( #) перед ним. Разберём на примере.

Я создал «якорь» с именем zagolovok и разместил его в коде страницы рядом с заголовком этого урока («Гиперссылки в HTML»). Код «якоря» следующий:

H TML-код внутренней ссылки будет выглядеть так:

П осле щелчка по этой ссылке, ты попадёшь к заголовку этого урока.

Е сли ты заметил, то после перехода по внутренней ссылке к заголовку изменился URL-адрес в адресной строке браузера:

К изначальному адресу:

Д обавилась внутренняя ссылка:

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

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

Т акже ссылки бывают абсолютными и относительными. Абсолютная ссылка — это обычная ссылка вида:

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

Р азберём сначала создание ссылки относительно корневой папки сайта.

Д опустим нам нужно сослаться на страницу klienty.html, которая лежит в одной папке с главной страницей сайта. Тогда код относительной ссылки примет вид:

А теперь предположим, что в одной папке с главной страницей лежит папка zakazy и уже в ней лежит страница klienty.html Тогда код относительной ссылки станет таким:

Т еперь рассмотрим создание гиперссылок относительно исходной страницы. Допустим, у нас есть страница price.html (исходная страница) и с неё нужно сослаться на страницу klienty.html Тут бывают следующие типовые варианты:

1. Страницы price.html и klienty.html находятся в одной папке.

Тогда код ссылки будет таким:

2. Страница klienty.html и папка zakazy находятся в корневой папке сайта, страница price.html лежит в папке zakazy (т. е. страница klienty.html относительно исходной страницы price.html лежит на один уровень выше).

Две точки показывают, что нужно выйти из текущей папки на уровень выше.

3. Страница klienty.html и папка zakazy находятся в корневой папке сайта, папка mebel лежит в папке zakazy, страница price.html лежит в папке mebel (т. е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше).

Код ссылки примет вид:

Т. е. каждый уровень обозначается двумя точками и слешем «/».

4. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта, страница klienty.html лежит в папке zakazy (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже).

Теперь код ссылки будет таким:

В этом случае точки и слеши не ставятся.

5. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта, папка mebel лежит в папке zakazy, страница klienty.html лежит в папке mebel (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже).

6. В корневой папке сайта лежат две папки: zakazy и oplata. Страница klienty.html лежит в папке zakazy, исходная страница price.html лежит в папке oplata (т. е. обе страницы лежат в разных папках на уровень ниже от корневой папки сайта).

Код ссылки станет следующим:

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

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

Д ля того, чтобы создать ссылку на электронную почту, нужно вместо URL-адреса в значении атрибута href написать адрес электронной почты с указанием протокола ( mailto:). И тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» адресом электронной почты. В HTML-коде это выглядит так:

§ 6. Атрибуты тега «A»

§ 6.1 Атрибут target

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

_blank — открывает ссылку в новом окне (в современных браузерах в новой вкладке).

_parent — загружает ссылку в родительском окне.

_self — открывает ссылку в этом же окне. Это значение стоит у всех ссылок по-умолчанию (т. е. если вообще не указывать атрибут target, то сработает именно это значение).

Э то не все значения атрибута target, но это самые основные. Пример использования этого атрибута:

§ 6.2 Атрибут title

В теге можно также использовать атрибут title. С его помощью создаётся всплывающая подсказка, которая появляется при наведении мыши на ссылку.

§ 6.3 Атрибут rel=»nofollow»

У атрибута rel есть несколько значений, но самым используемым является значение « nofollow». Это значение указывает роботам поисковых систем, что эту ссылку не нужно использовать в поисковом ранжировании. Подробнее — в разделе о продвижении сайтов.

§ 7. Заключение

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

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

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

И это уже будет первый шаг на пути к превращению личной странички в серьёзный ресурс.

Ещё материалы по этой теме:

Поделиться ссылкой на эту страницу в:

Источник

Ссылки в HTML

Здравствуйте уважаемые начинающие веб-мастера.

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

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

А так как основной задачей интернета является предоставление и поиск информации, то ссылка — это главный инструмент, как веб-мастера, так и пользователя. Так давайте научимся его создавать.

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

Затем идёт анкор — текст ссылки, который отобразиться на экране, и этот текст, должен сообщать пользователю о том, куда эта ссылка ведёт.

Гиперссылка

Гиперссылка — это ссылка ведущая на отдельную страницу.

Давайте напишем ссылку на этот сайт.

Теперь добавим пару необходимых атрибутов.

Теперь полностью, и вставим эту ссылку в текст.

Создаём ссылку на сайт Старпер55плюс.

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

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

Якорная ссылка

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

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

Сначала посмотрим вариант, для быстрой прокрутки страницы вверх.

Для этого в первом заголовке расположим идентификатор id со значением nev (якорь). Слово в значении может быть любым.

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

Можно сделать несколько якорных ссылок, на разные места страницы.

Теперь посмотрим, как делается якорная ссылка на другую страницу.

Теперь на странице сайта появиться ссылка, пройдя по которой, Вы окажитесь в месте отмеченном якорем.

Ссылка на изображениях

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

Для этого необходимо код картинки заключить в код ссылки.

Давайте ещё раз повторим, какие теги и атрибуты мы тут использовали.

href — атрибут, всегда и обязательно применяемый в теге «а». В его значении указан адрес ресурса.

— одиночный тег изображений.

src — обязательный атрибут тега изображений, указывает адрес изображения.

target=»_blank» — атрибут, предписывающий открывать ссылку в отдельном окне.

title=» описание» — атрибут предписывающий вывести окошко с описанием ресурса, куда ведёт ссылка, при наведении курсора на изображение.

width=»400″ — атрибут, указывающий ширину изображения

height=»400″ — атрибут, указывающий высоту изображения

alt=» Koala» — атрибут, выводящий на экран название картинки, если сама картинка, по каким либо причинам, не появилась

align=»left» — атрибут, указывающий, с какой стороны от текста (относительно текста), будет расположена картинка.

hspace=»50″ — атрибут, задающий горизонтальный отступ от текста

vspace=»50″ — атрибут, задающий вертикальный отступ от текста

Ссылка на обратную связь

Ссылка на обратную связь – это обычно ссылка на Email автора сайта. Удобство этой ссылки в том, что посетителю не придётся идти в свою почту, набирать там Ваш адрес, что занимает какое-то время.

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

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

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

Пока по ссылкам всё. Желаю творческих успехов.

Перемена

А ведь в 19-м веке словосочетание «получить ссылку» имело совсем другое значение

Урок в школе:
— Моня, допустим у тебя шесть яблок, половину ты отдал Абраму. Сколько яблок у тебя осталось?
— Пять с половиной.

14 комментариев на «Ссылки в HTML»

Добрый вечер Татьяна. Самое главное Вы не сказали. Через какой сервис Вы отправляете картинку? Если через Mail.ru, то там да, действительно, в письме будет значок, указывающий что в переданном файле находится картинка. Если навести на этот значок курсор, то появится строчка Скачать и размер файла. Щёлкните по Скачать и файл скачается к Вам на комп, только смотрите в какую папку он будет скачан, а то потом не найдёте. Открывайте и смотрите картинку.

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

Насчёт кавычек и символа «с» который и на кириллице и на латинице одинаковый, это Вы точно заметили, браузер путается. Весь код со страницы любого сайта нужно сначала перенести в Notepad ++, подправить, а потом использовать.

Ещё такое наблюдение: картинки с именем на кириллице, бывает не срабатывают.

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

Насчёт CSS — это очень увлекательно. Раз уж знаете основные теги html, беритесь смело за css.

Спасибо, Сергей. Наконец то на страничке появился и мой, и Ваш комментарий, а то с почтой какие-то проблемы.

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

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

Насчёт title и mailto тоже нашел ошибки. Как и в других случаях бывает просто какая то мелочь, буквально один знак неправильно, и тот не совсем заметен (хотя вроде копирую готовый код). Дело в том, что или там случайно оказывается буква кириллицы похожая на латинскую (наверное браузер чувствителен к этому), или вообще проблема в том, что двойные кавычки оказались не прямыми, а наклонными. Но в принципе по цвету, которым выделяет текст Notepad++, можно догадаться, что что-то не так.
Иногда понятные вещи доходят спустя лишь некоторое время.

Здравствуйте Максим. Сейчас всё объясню.
Картинка Коала — это реальная картинка расположенная на моём сервере, и в её URL указан полный путь к картинке, в конце которого Bezyimyannyiy331.png — это имя картинки. Естественно поисковик её нашёл и она у Вас отобразилась.

А вот в посте Ссылки на изображениях и в ссылке и в img указан только адрес моего сайта, без пути к картинке. Я так сделал только для того, чтоб показать как картинка (img) упаковывается в ссылку, а не для того, чтоб открыть картинку. Просто пример.

Поэтому картинка у вас не открылась а появился зелёный квадратик. Так браузеры отображают пустой тег img, или если в этом теге адрес не содержащий изображения, или если в адресе ошибка.

Насчёт отступов. Атрибуты hspace и vspace задают отступы с обоих сторон, один по горизонтали, другой по вертикали. В дальнейшем вы ими в картинках пользоваться не будете. Они чаще в таблицах применяются для позиционирования данных в ячейках таблицы. А отступы для картинок будете задавать свойством margin, ну это когда дойдёте до CSS, и именно с того края, с которого вам будет нужно.

По выравниванию. Выравнивается ведь не ссылка, а то что в ней заключено (текст, изображение). Если выравнивается текст, то атрибут align=»» вставляется в код ссылки после адреса, если выравнивается картинка, то этот атрибут вставляется в код картинки, тоже после адреса. Вроде бы в посте у меня этот атрибут показан.

Насчёт title — там никаких заморочек. Как напишешь текст, так он и отобразится при наведении. Если этого не происходит, или происходит «коряво», значит где-то ошибочка, кавычки там или ещё что.

Насчёт адреса почты — там же показан пример ссылки на обратную связь. Вместо http: в адрес ставится mailto: и дальше адрес почты. Возможно что сейчас по такой ссылке будет приходить ответ Страница не найдена. В последние дни сервис Mail.ru работает как черепаха. Праздник видимо. Перегруз или что-то там ещё.

Всё вроде. Если что — уточняйте, отвечу.

Здравствуйте, Сергей. У меня вот какие вопросы:

1)Ссылка на картинку отображается в виде белого квадрата с маленькой зелёной иконкой внутри и надписью «Описание». Так и должно быть? Код вставил такой как у Вас (см. раздел этой страницы «Ссылка на изображениях»). Код картинки, которая рядом я вписал URL картинки из Вашего примера.
Возможно это будет рассмотрено дальше, но когда делается отступ картинки от текста, то она также передвигается от края страницы.

2)Можно ли ссылку на сайт и якорную ссылку выравнивать (по центру, по правому краю)? И еще я так понял в атрибуте title=»О создании сайта» надо писать слитно, то есть в данном случае пробелы заменить на нижнее подчеркивание, иначе окошечко с текстом отображает текст только до пробела («О ).

Источник