Моя первая страница

HTML Ссылки

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

HTML Ссылки — Гиперссылки

HTML ссылки — это гиперссылки.

Вы можете нажать на ссылку и перейти к другому документу.

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

Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любым другим HTML элементом!

HTML Ссылки — синтаксис

Текст ссылки это та часть, которая будет видна читателю.

Нажав на текст ссылки, читатель отправится на указанный URL-адрес.

Пример

В этом примере показано, как создать ссылку на Schoolsw3.com:

По индексу ссылки будут отображаться следующим образом во всех браузерах:

• Не посещенная ссылка подчеркнута синим цветом
• Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
• Активная ссылка подчеркнута красным цветом

Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы получить другой вид!

HTML Ссылки — атрибут target

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

Атрибут target указывает, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

• _self — По умолчанию. Открывает документ в том же окне / вкладке, в котором он был нажат
• _blank — Открывает документ в новом окне или вкладке
• _parent — Открывает документ в родительском фрейме
• _top — Открывает документ во всем теле окна

Пример

Используйте target=»_blank» , чтобы открыть связанный документ в новом окне браузера или на новой вкладке:

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

В обоих приведенных выше примерах используется абсолютный URL (полный веб-адрес) в атрибуте href .

Локальная ссылка (ссылка на страницу внутри того же веб-сайта) указывается с помощью относительного URL (без «https://www») :

Пример

Абсолютные URLы

sw3C

Google

Относительные URLы

HTML Изображения

CSS Учебник

HTML Ссылки — использование изображения в качестве ссылки

Чтобы использовать изображение в качестве ссылки, просто поместите тег внутри тега :

Пример

Ссылка на адрес электронной почты

Используйте mailto: внутри атрибута href , чтобы создать ссылку, которая открывает пользователя программы электронной почты (чтобы позволить им отправить новое сообщение электронной почты):

Пример

Кнопка как ссылка

Чтобы использовать HTML кнопку в качестве ссылки, вы должны добавить некоторый код JavaScript.

JavaScript позволяет указать, что происходит при определенных событиях, таких как нажатие кнопки:

Пример

Совет: Узнайте больше о JavaScript в разделе JavaScript Учебник.

Названия ссылок

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

Пример

Подробнее об абсолютных и относительных URL-адресах

Пример

Используйте полный URL-адрес для ссылки на веб страницу:

Пример

Ссылка на страницу, расположенную в папке html на текущем веб сайте:

Пример

Ссылка на страницу, расположенную в той же папке, что и текущая страница:

Подробнее о путях к файлам вы можете прочитать в этой главе HTML Пути к файлам.

Краткое содержание главы

HTML Упражнения

HTML Ссылки теги

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

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

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

Как сделать ссылку в HTML — виды ссылок — изображение ссылка

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

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

Ссылка в html задается при помощи тега и парного закрывающего его тега . Адрес ссылки задается при помощи атрибута href= «». Например, код ссылки на данный сайт будет выглядеть так:

Ссылка состоит из двух элементов:

адреса ссылки href= http://webmastermix.ru/ и

текста ссылки Портал для веб-мастеров.

Текст ссылки называется якорем или анкором ссылки.Выше мы рассмотрели пример ссылки, которая ведет на главную страницу сайта. В данном случае, в адресе ссылки, мы не прописывали имя файла и его расширение. Для того чтобы дать ссылку на главную страницу сайта достаточно указать адрес сайта. В большинстве случаев главная страница имеет название index.html.

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

То же самое проделайте еще раз и сохраните файл с именем razdel.html Содержимое второго файла придумайте сами. Если вы еще не знаете, как создавать html документы то смотрите урок Основы HTML.

Теперь мы сделаем ссылку из страницы с названием index.html на страницу razdel.html. Ссылка будет выглядеть следующим образом:

Это в том случае если файл razdel.html лежит в одной папке с файлом index.html. Если же он лежит например в папке pages, то адрес будет выглядеть так:

    Посмотреть страницу  

Можете открыть файл index.html в вашем браузере и перейти по ссылке, в результате откроется новая страница. Как вы заметили, в данном случае страница открылась в текущем окне. Можно сделать так чтобы при нажатии на ссылку новая страница открывалась в новом окне для этого в открывающий тег нужно добавить атрибут target=»_blank» Это будет выглядеть следующим образом:

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

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

К примеру, для той страницы где вы сейчас находитесь, можно сделать так:

Этим мы определили якорь т. е. место куда будет попадать пользователь при нажатии на нашу ссылку. Теперь в том месте, где это нужно, необходимо указать саму ссылку. Делается это так:

Заметьте что здесь в кавычках перед словом verh обязательно должен быть знак решетка #. Чтобы посмотреть, как это работает, можете нажать на следующую ссылку: Перейти вверх.

Ссылаться можно не только на файлы с расширением html но и на файлы с другими расширениями. Для этого в адресе ссылки необходимо прописывать соответствующее имя файла и расширение. Например, html ссылка на файл архива будет выглядеть так:

Ссылка на файл .mp3 будет выглядеть следующим образом:

Можете попробовать скопировать какой либо архив или музыкальный файл в папку с файлами, созданными ранее и дать на них ссылку. В этом случае при переходе по ссылке браузер предложит вам открыть или сохранить файл. Атрибут target=»_blank» так же можно применять к данным ссылкам.

Теперь рассмотрим, какие бывают виды ссылок. Различают следующие виды ссылок абсолютные и относительные. Абсолютные ссылки это ссылки, в которых указан полный адрес документа. Такие ссылки используются для связи с внешними ресурсами сети. Пример такой ссылки:

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

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

http:// — самый распространенный протокол, при помощи его обеспечивается доступ к веб-страницам, ссылка выглядит так:

mailto: — протокол доступа к электронной почте. Его необходимо использовать, если вы хотите дать ссылку на электронную почту. Код ссылки записывается следующим образом:

Кроме этих протоколов есть еще протокол ftp://, при помощи которого, осуществляется передача файлов по FTP с помощью программы FTP-клиента. А также протокол file:// — используется для указания ссылки на страницу расположенную на локальном компьютере.

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

Сохраните изображение, которое вы видите слева в ту папку, где лежат файлы, которые мы создавали ранее. Теперь мы сделаем это изображение ссылкой. Для этого в нашем файле index.html нужно прописать следующее:

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

Для того чтобы увидеть как это работает, сохраните второе изображение в ту папку где лежат ранее созданные файлы, а в файл index.html вставьте следующий код:

В результате если вы пройдете по ссылке в виде маленького изображения откроется большое изображение. К ссылке в виде изображения можно также применять атрибут target=»_blank», а также производить открытие не только файлов с расширением .html но и файлов с другими расширениями. Вот и все что касается того как делать ссылки в HTML.

Материал подготовлен порталом: webmastermix.ru

Источник

Что такое ссылки и как их ставить. Тег a

Ссылка — текст, кликая на который вы переходите на другую страницу. Иногда после клика открывается картинка, скачивается файл или вы переходите к другой части страницы.

В HTML ссылки создаются с помощью тега . Например:

href — это атрибут, в котором мы прописываем адрес для перехода.

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

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

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

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

https:// — протокол, по которому мы обращаемся к сайту.

/blog/index.html — путь к файлу.

Если в адресе есть все эти части — это абсолютный адрес.

Относительные ссылки

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

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

Если в адресе нет имени сервера или протокола, то это относительный адрес.

Ссылки на файл

По ссылкам можно не только переходить на другие сайты, но и скачивать файлы. Для этого пропишите в атрибуте href ссылку на этот файл. А чтобы предотвратить открытие файлов прямо в браузере, добавьте атрибут download у тега .

Ссылки-якоря

Ссылка-якорь — это обычная ссылка, в адресе которой используется символ # , после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.

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

Больше про ссылки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник