Как сделать ссылку. Как сделать на сайте ссылку на документ


Как сделать ссылку на скачивание файла

01/09/201602/09/201603/09/201604/09/201605/09/201606/09/201607/09/201608/09/201609/09/201610/09/201611/09/201612/09/201613/09/201614/09/201615/09/201616/09/201617/09/201618/09/201619/09/201620/09/201621/09/201622/09/201623/09/201624/09/201625/09/201626/09/201627/09/201628/09/201629/09/201630/09/201601/10/201602/10/201603/10/201604/10/201605/10/201606/10/201607/10/201608/10/201609/10/201610/10/201611/10/201612/10/201613/10/201614/10/201615/10/201616/10/201617/10/201618/10/201619/10/201620/10/201621/10/201622/10/201623/10/201624/10/201625/10/201626/10/201627/10/201628/10/201629/10/201630/10/201631/10/201601/11/201602/11/201603/11/201604/11/201605/11/201606/11/201607/11/201608/11/201609/11/201610/11/201611/11/201612/11/201613/11/201614/11/201615/11/201616/11/201617/11/201618/11/201619/11/201620/11/201621/11/201622/11/201623/11/201624/11/201625/11/201626/11/201627/11/201628/11/201629/11/201630/11/201601/12/201602/12/201603/12/201604/12/201605/12/201606/12/201607/12/201608/12/201609/12/201610/12/201611/12/201612/12/201613/12/201614/12/201615/12/201616/12/201617/12/201618/12/201619/12/201620/12/201621/12/201622/12/201623/12/201624/12/201625/12/201626/12/201627/12/201628/12/201629/12/201630/12/201631/12/201601/01/201702/01/201703/01/201704/01/201705/01/201706/01/201707/01/201708/01/201709/01/201710/01/201711/01/201712/01/201713/01/201714/01/201715/01/201716/01/201717/01/201718/01/201719/01/201720/01/201721/01/201722/01/201723/01/201724/01/201725/01/201726/01/201727/01/201728/01/201729/01/201730/01/201731/01/201701/02/201702/02/201703/02/201704/02/201705/02/201706/02/201707/02/201708/02/201709/02/201710/02/201711/02/201712/02/201713/02/201714/02/201715/02/201716/02/201717/02/201718/02/201719/02/201720/02/201721/02/201722/02/201723/02/201724/02/201725/02/201726/02/201727/02/201728/02/201701/03/201702/03/201703/03/201704/03/201705/03/201706/03/201707/03/201708/03/201709/03/201710/03/201711/03/201712/03/201713/03/201714/03/201715/03/201716/03/201717/03/201718/03/201719/03/201720/03/201721/03/201722/03/201723/03/201724/03/201725/03/201726/03/201727/03/201728/03/201729/03/201730/03/201731/03/201701/04/201702/04/201703/04/201704/04/201705/04/201706/04/201707/04/201708/04/201709/04/201710/04/201711/04/201712/04/201713/04/201714/04/201715/04/201716/04/201717/04/201718/04/201719/04/201720/04/201721/04/201722/04/201723/04/201724/04/201725/04/201726/04/201727/04/201728/04/201729/04/201730/04/201701/05/201702/05/201703/05/201704/05/201705/05/201706/05/201707/05/201708/05/201709/05/201710/05/201711/05/201712/05/201713/05/201714/05/201715/05/201716/05/201717/05/201718/05/201719/05/201720/05/201721/05/201722/05/201723/05/201724/05/201725/05/201726/05/201727/05/201728/05/201729/05/201730/05/201731/05/201701/06/201702/06/201703/06/201704/06/201705/06/201706/06/201707/06/201708/06/201709/06/201710/06/201711/06/201712/06/201713/06/201714/06/201715/06/201716/06/201717/06/201718/06/201719/06/201720/06/201721/06/201722/06/201723/06/201724/06/201725/06/201726/06/201727/06/201728/06/201729/06/201730/06/201701/07/201702/07/201703/07/201704/07/201705/07/201706/07/201707/07/201708/07/201709/07/201710/07/201711/07/201712/07/201713/07/201714/07/201715/07/201716/07/201717/07/201718/07/201719/07/201720/07/201721/07/201722/07/201723/07/201724/07/201725/07/201726/07/201727/07/201728/07/201729/07/201730/07/201731/07/201701/08/201702/08/201703/08/201704/08/201705/08/201706/08/201707/08/201708/08/201709/08/201710/08/201711/08/201712/08/201713/08/201714/08/201715/08/201716/08/201717/08/201718/08/201719/08/201720/08/201721/08/201722/08/201723/08/201724/08/201725/08/201726/08/201727/08/201728/08/201729/08/201730/08/201731/08/201701/09/201702/09/201703/09/201704/09/201705/09/201706/09/201707/09/201708/09/201709/09/201710/09/201711/09/201712/09/201713/09/201714/09/201715/09/201716/09/201717/09/201718/09/201719/09/201720/09/201721/09/201722/09/201723/09/201724/09/201725/09/201726/09/201727/09/201728/09/201729/09/201730/09/201701/10/201702/10/201703/10/201704/10/201705/10/201706/10/201707/10/201708/10/201709/10/201710/10/201711/10/201712/10/201713/10/201714/10/201715/10/201716/10/201717/10/201718/10/201719/10/201720/10/201721/10/201722/10/201723/10/201724/10/201725/10/201726/10/201727/10/201728/10/201729/10/201730/10/201731/10/201701/11/201702/11/201703/11/201704/11/201705/11/201706/11/201707/11/201708/11/201709/11/201710/11/201711/11/201712/11/201713/11/201714/11/201715/11/201716/11/201717/11/201718/11/201719/11/201720/11/201721/11/201722/11/201723/11/201724/11/201725/11/201726/11/201727/11/201728/11/201729/11/201730/11/201701/12/201702/12/201703/12/201704/12/201705/12/201706/12/201707/12/201708/12/201709/12/201710/12/201711/12/201712/12/201713/12/201714/12/201715/12/201716/12/201717/12/201718/12/201719/12/201720/12/201721/12/201722/12/201723/12/201724/12/201725/12/201726/12/201727/12/201728/12/201729/12/201730/12/201731/12/201701/01/201802/01/201803/01/201804/01/201805/01/201806/01/201807/01/201808/01/201809/01/201810/01/201811/01/201812/01/201813/01/201814/01/201815/01/201816/01/201817/01/201818/01/201819/01/201820/01/201821/01/201822/01/201823/01/201824/01/201825/01/201826/01/201827/01/201828/01/201829/01/201830/01/201831/01/201801/02/201802/02/201803/02/201804/02/201805/02/201806/02/201807/02/201808/02/201809/02/201810/02/201811/02/201812/02/201813/02/201814/02/201815/02/201816/02/201817/02/201818/02/201819/02/201820/02/201821/02/201822/02/201823/02/201824/02/201825/02/201826/02/201827/02/201828/02/201801/03/201802/03/201803/03/201804/03/201805/03/201806/03/201807/03/201808/03/201809/03/201810/03/201811/03/201812/03/201813/03/201814/03/201815/03/2018

inter-net.pro

Как сделать ссылку в HTML - виды ссылок

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

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

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

Материалы по теме:

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

<a href= "http://webmastermix.ru/">Проект для веб-мастеров</a>

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

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

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

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

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

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

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

<a href= "razdel.html">Посмотреть страницу</a>

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

<a href= "pages/razdel.html">Посмотреть страницу</a>

Весь код файла index.html будет выглядеть так:

<html> <head> <title>Моя первая страница </title> </head> <body> <a href= "razdel.html">Посмотреть страницу</a> </body> </html>

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

<a href= "razdel.html" target="_blank">Посмотреть страницу</a>

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

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

Предположим, нам нужно сделать такую ссылку, нажав на которую, посетитель будет попадать в верхнюю часть данной страницы. Для этого первое слово или словосочетание на данной странице необходимо заключить в тег <a name="">первое слово</a>. Где в кавычках необходимо указать какое либо название.

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

<a name= "verh">Все страницы</a>

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

<a href= "#verh">Перейти вверх</a>

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

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

<a href= "vasharhiv.rar">Скачать архив</a>

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

<a href= "music.mp3">Скачать мелодию</a>

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

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

<a href= "http://webmastermix.ru/">Портал для веб-мастеров</a>

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

<a href= "razdel.html">Посмотреть страницу</a>

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

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

<a href= "http://webmastermix.ru/">Портал для веб-мастеров</a>

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

<a href= "mailto:адресс@почты.ru">Отправить письмо</a>

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

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

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

<a href= "razdel.html"> <img src= "tigar_small.png"> </a>

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

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

<a href= "tigar_big.jpg"> <img src= "tigar_small.png"> </a>

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

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

Рекомендуем ознакомиться:

Подробности

Обновлено: 11 Ноябрь 2013

Создано: 13 Январь 2010

Просмотров: 120531

webmastermix.ru

Как сделать ссылку | Советы веб-мастера

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

Как сделать ссылку

Что такое ссылка и зачем она нужна

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

Если простым языком, то ссылка это есть ни что иное, как слово, фраза, предложение, картинка, символ с которого пользователь может перейти на определенную страницу размещенную в сети интернет. Пример: http://sovetywebmastera.ru это и есть ссылка, которая будет вести на главную страницу моего сайта.

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

Гиперссылка (англ. hyperlink) — часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, каталог, приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы этого объекта.

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

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

Кстати, о битых ссылках можно узнать подробнее из моей недавней статьи «Битые ссылки и как их удалить». В общем со ссылками разобрались. Давайте разберемся теперь что такое анкор ссылки, а затем я расскажу как сделать ссылку. Анкор — это сама фраза, слово, предложение и так далее, с которого или которой и ведет сама ссылка. К примеру если мы разместим ссылку со слова ЗДЕСЬ, то именно слово ЗДЕСЬ и будет является анкором ссылки. 

Более подробно почитать об анкорах, можно в моей статье «Что такое анкоры ссылок», а сейчас приведу пример с помощью кода.

<a href="<span>ВАШ САЙТ</span>"><span>ВАШ АНКОР</span></a> — ссылается на документ «ВАШ САЙТ», образуя ссылку в виде слова «ВАШ АНКОР». Где «Ваш сайт» это сама ссылка, а «Ваш анкор», это и есть анкор ссылки.

<a href="http://www.site.com"> — если код ссылки выглядит таким образом, то ссылка просто ведет на сторонний ресурс, адрес которого указан в самой ссылке.

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

Как сделать ссылку

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

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

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

Как сделать ссылку

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

Как сделать ссылку

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

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

С уважением, Евгений Вергус.

Рубрика: Видеоуроки

Загрузка...

Подпишитесь на RSS-рассылку и будьте в курсе всех новых статей

sovetywebmastera.ru