Как создать гиперссылку в html. Как создать гиперссылку на сайт


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

Гиперссылка — основной элемент гипертекста, отличительная черта HTML-документов, связывающая веб-страницы и другие файлы между собой. У многих людей слово «Ссылка» небезосновательно ассоциируется со словом «Интернет».

Простые ссылки

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

В языке HTML для создания ссылок используется тег <a> и его атрибуты.

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

<a> — тег создания ссылки. Внутри него содержится отображающийся на экране текст, на который пользователь должен будет нажать, чтобы перейти по заданному адресу.

href — атрибут тега <a>, значением которого и будет адрес ссылки. Ссылаетесь ли вы на сайт, веб-страницу или файл — не важно, отличаться будет только значение этого атрибута.

Теперь рассмотрим строку HTML-кода:

<a href="http://seostop.ru">Ссылка</a>

Вся строка создаёт ссылку, ведущую на главную страницу нашего сайта и называющуюся «Ссылка». В действии код будет выглядеть так:

Ссылка

Теперь рассмотрим каждый элемент строки.

<a> — это тег, отвечающий за создание ссылки.

</a> — закрывающий тег.

Между символами > и < расположен текст Ссылка. Его будет видеть открывший страницу пользователь, на него он будет щёлкать, чтобы перейти по заданному в ней адресу.

href=”http://seostop.ru” — атрибут и значение, благодаря которым обозреватель понимает, куда следует перейти.

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

Абсолютная ссылка — это ссылка, адрес которой указывается полностью, включая протокол и URL домена. Ссылка из примера выше как раз была абсолютной.

Относительная ссылка — это ссылка, адрес в которой указывается относительно текущей веб-страницы.

Суть и назначение относительных ссылок, а также их отличие от абсолютных, можно объяснить простым примером. Вы спрашиваете на улице: «Где находится библиотека» и вам отвечают: «За углом слева». Это относительная ссылка. А если вам отвечают: «Россия, Москва, ул. Ленина, 5» — это уже ссылка абсолютная. Она не так коротка, как относительная, но зато очень точна. Если вы перейдёте на другую улицу, относительная ссылка «За углом слева» потеряет актуальность. Абсолютный же адрес останется актуальным. В Сети — то же самое.

Относительные ссылки можно использовать внутри сайта. Например, у вас на сервере (адрес сайта test1.ru) в одной и той же папке (пусть она будет называться pages) лежат две страницы: page1.html и page2.html. Со страницы page1.html вы хотите сослаться на документ page2.html.

Абсолютная ссылка будет выглядеть так:

<a href="http://test1.ru/pages/page2.html">Текст ссылки</a>

Относительная будет такой:

<a href="page2.html">Текст ссылки</a>

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

<a href="../home.html"<Текст ссылки</a>

Внутренние ссылки

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

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

Имя якоря указывается в атрибуте id любого HTML-тега.

Например, внизу HTML-документа вы хотите разместить ссылку «Вверх», которая будет вести к его началу — заголовку «Начало страницы». Для этого вам нужно поставить в начале страницы якорь, а внизу страницы — ссылку на него.

Пусть якорь будет называться begin. Тогда в тег, к содержимому которого будет вести ссылка, нужно добавить атрибут id со значением begin.

<h2 id=”begin”>Начало страницы</h2>

Якорь установлен, и теперь остаётся только добавить ведущую на него ссылку. В нашем случае она будет выглядеть так:

<a href=”#begin”>Наверх</a>

Обратите внимание: перед названием якоря стоит решётка — это отличительная черта внутренних ссылок.

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

С появлением HTML 5 тег <a> превратился в контейнер, способный вмещать в себя блочные элементы, так что ссылкой теперь может быть не только текст или картинка, но даже таблица, список или целая страница.

Создаётся ссылка-картинка, как и любая другая ссылка: значением атрибута href задаётся адрес ссылки, а между тегами <a></a> вставляется любое содержимое, в рассматриваемом случае — изображение.

Например, если вы хотите сделать ссылкой на сайт mail.ru картинку с именем image.jpg, которая лежит в папке рядом с вашей веб-страницей, то нужный код будет таким (о вставке картинок на страницу читайте в другой статье):

<a href=”http://mail.ru”> <img src=”image.jpg” alt=”Картинка-ссылка”> </a>

Ссылки на e-mail и Skype

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

Чтобы вставить ссылку на e-mail, перед адресом электронной почты в значении атрибута href стоит написать mailto:. Например:

<a href=mailto:[email protected]>Пишите на почту!</a>

Для создания ссылки на логин Skype перед именем пользователя следует добавить skype:. Например:

<a href=”skype:mylogin”>Позвонить мне в Skype</a>

www.seostop.ru

Как создавать ссылки?

Для новичка, не имеющего представления об HTML-тегах, создание правильной ссылки может стать невыполнимой задачей. Именно поэтому в данной статье мы решили рассказать понятным и доступным языком, как создавать ссылки. Дочитав представленный материал, вы убедитесь, что ничего сложного в этом нет. Первым делом необходимо определиться с текстом ссылки и, собственно, адресом страницы, на которую вы планируете ссылаться. В качестве примера, мы возьмем текст «xxxxx» и адрес несуществующего сайта «www.yyyyy.zz». Для того чтобы ссылка заработала, необходимо вставить эти данные в тег:

<a href="page.html"></a>

Таким образом, у нас получится строчка:

<a href="www.yyyyy.zz">xxxxx</a>

Далее размещаем ее на необходимой вам странице и получаем полноценную анкорную ссылку. Теперь, кликнув по фразе «xxxxx», браузер пользователя переведет его на главную страницу нашего вымышленного сайта.

Другие типы ссылок

Вышерасположенный наглядный пример – это самый простой вариант сделать ссылку. Для получения особых возможностей, в базовый тег можно добавлять дополнительные атрибуты. Так, к примеру, если вы хотите, чтобы страница открывалась в новой вкладке, необходимо в вышеупомянутую строку добавить атрибут «target». В итоге, мы получим:

<a href="www.yyyyy.zz" target="_blank">xxxxx</a>

Если вы хотите, чтобы ссылка не индексировалась поисковыми роботами Яндекса, Гугла и прочих систем, в теге можно расположить атрибут «nofollow». В таком случае, выглядеть строчка будет следующим образом:

<a href="www.yyyyy.zz" rel="nofollow">xxxxx</a>

Картинки-ссылки

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

<img src="src" />

Объединив его с  первым представленным в этой статье  тегом<a>, вы сможете делать ссылки-картинки. Выглядеть это будет следующим образом:

< a href="www.yyyyy.zz"><img src="www.yyyyy.zz/*.jpg" /></a>

Как несложно догадаться, сс

elhow.ru

Как создать гиперссылку на сайте в Dreamweaver

Июн-1-2009 Автор: VeryOldMan

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

Создавая сайт, не забывайте о такой ответственной задаче, как создание навигации по сайту. Создается навигация для сайта с помощью гиперссылок. Как создать гиперссылку? Создание гиперссылок в редакторе Dreamweaver несложно, как, впрочем, и все остальное. Убедитесь сами. В общем-то сайт — это комплект web-страниц, которые связаны одна с другой.  Если возникнет необходимость сделать ссылку на какую-либо страницу сайта, то здесь и приходят на помощь так называемые гиперссылки.

Гиперссылки — особенные связи, которые ведут от одной страницы сайта к другой. Они представляют собой фрагменты текста, выделенные особенным образом (как правило с помощью синего цвета и подчеркивания. Что стало уже стандартом). Когда на подобной гиперссылке кликнуть мышкой, web-обозреватель загрузит страницу, интернет-адрес которой указан в параметрах гиперссылки. Гиперссылкой может быть и изображение.

Итак, создание гиперссылок

Давайте сделаем ссылку из главной страницы на страницу Черные. Откроем в Dreamweaver страницу  index.html. В меню выделим слово Черные:

Создание гиперссылок на сайте

В правом нижнем углу нижнего дока найдите окошко Ссылка (Link) и введите в него название страницы, на которую будем ссылаться, нажмите Enter:

Ссылка готова. Точно так же можно и нужно создавать гиперссылки  на другие страницы — green.htmlи.т.д.Откроем теперь наш шаблон. Проще всего это сделать в панели Файлы (File) двойным щелчком левой клавиши мышки. Выделим фразу  —  На главную:

В окошке Ссылка (Link) введите адрес главной страницы и нажмите Enter:

Сохраняем шаблон. На вопрос редактора Обновить все файлы, основанные на этом шаблоне? — ответить Обновить. После обновления, в окошке Обновление страниц нажать Закрыть.

Откройте страницу black.htm lв редакторе. Откройте страницу браузером. Видите, надпись  «На главную»  стала ссылкой? Правда вид у нее не очень … Ну, это мы решим чуть позже. А теперь щелкните левой клавишей мышки на ней. Если вы все сделали правильно, то перейдете на главную страницу. Если на главной странице щелкнуть на надписи Черные – перейдем на соответствующую страницу.

Создание гиперссылок на ресурсы в Сети практически ничем не отличается от вышеизложенного.  Только нужно задавать полный адрес, вот такой, например http://www.yandex.ru. Это ссылка на Яндекс.

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

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

Очень часть якорь используется для перехода из конца страницы в начало, если она очень длинная, чтобы не прокручивать ее мышкой. Давайте проделаем эту операцию. Откройте страницу.  Добавим в страницу побольше текста, чтобы она стала длиннее. Ставим текстовый курсор в начало страницы, в место установки якоря. Пусть это будет перед заглавием. В панели инструментария объектов активируем пункт Общий (Common). И щелкнем левой клавишей мышки на значке якоря:

В появившемся окошке задаем имя якоря – например r1:

Создание гиперссылок на сайте

Жмем ОК и видим якорь:

В конце страницы сделаем надпись Наверх:

Выделим ее и в окошке Ссылка (Link) привяжем к адресу якоря:

Не забывайте про знак решетки! Жмем Enter. Откроем страницу браузером, прокрутим ее в самый конец, щелкнем по ссылке Наверх и попадаем в начало страницы.  Чтобы изменить адрес якоря, достаточно щелкнуть по нему мышкой и проделать это в панели Свойства (Properties).

Вот такое оно создание гиперссылок в редакторе Dreamweaver. И, чтобы закончить с созданием гиперссылок, разберемся с их стилями css. Да, у них тоже есть свои стили! Называются они псевдостили гиперссылок. Псевдостилями гиперссылок называютспециальные стили, которые позволяют в довольно свободных пределах менять внешний вид гиперссылок на ваших страницах. Они не имеют отношения ни к стилевым классам, ни к стилям переопределения тегов. Всего их четыре:

  • a:link — обычная гиперссылка
  • a:active — стиль активной гиперссылки (той, на которой посетитель кликает мышкой в данный момент)
  • a:visited — стиль посещенной гиперссылки (указывающей на страницу, гдепосетитель уже побывал)
  • a:hover — стиль гиперссылки, на которой в настоящий момент находится курсор мыши

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

Создание гиперссылок на сайте

Жмем ОК. В категории Тип – шрифт Arial, цвет – белый, декорирование – нет. Жмем ОК.

Создаем еще один стиль:

Создание гиперссылок на сайте

Жмем ОК. В категории Тип – шрифт Arial, цвет – красный, декорирование – нет. Жмем ОК. Все. Проверяем браузером.

Надеюсь вам теперь понятно, как сделать гиперссылку на web-странице и что  создание гиперссылок в редакторе Dreamweaver- дело не сложное.

Вот так и создаются страницы сайта. C одной стороны вроде бы и не сложно, а с другой, если пропустишь какую-то, казалось бы незначительную мелочь, то долго потом разбираешься где же она эта ошибка. Поэтому будьте внимательны, почаще проверяйте свою работу браузерами. Загрузите их штуки три. Оперу, «лису» и обязательно, InternetExplorer. Успехов вам!

stroimsajt.ru

Создание гиперссылок в html | Как создать свой сайт

Мар-17-2010 Автор: VeryOldMan

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

Гипертекстовые ссылки (гиперссылки) – это объекты гипертекстового документа, содержащие указатели на другой гипертекстовый документ или сайт и предназначающиеся для реализации перехода к указанному документу или сайту. Реализует html гиперссылку тег a. Без этого тега Интернет перестанет существовать. В общем виде, синтаксис html гиперссылки имеет такой вид:

<a href=»URL»>текст ссылки</a>

Тэг <a href=»URL»> открывает описание гиперссылки, а тэг </a> — закрывает его. Любой текст, который находится между этими двумя тегами подсвечивается особым образом браузерами. По умолчанию — текст синего цвета и подчеркнутый. Естественно, с помощью стилей css, можно задать любые и вид и цвет html гиперссылки.Текст, который обозначает URL, браузерами не отображается, а выполняет предписанные ему действия при активации ссылки. Ну а активация ссылки, как правило, осуществляется щелчком мышки на тексте гиперссылки. Например:

Для перехода на сайт нажми <a href=»http://bems.com/index.html»> эту ссылку </a>

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

Для перехода на сайт нажми эту ссылку

Атрибуты html тега а:

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

http:// — создает ссылку на web документ;ftp:// — создает ссылку на ftp сайт или размещенный на нем файл;mailto: — загружает почтовую программу-клиент, в которой заполнено поле имени получателя;news: — создает ссылку на сервер новостей;telnet: // — создает ссылку на telnet сессию с удаленным компьютером;wais:// — создает ссылку на WAIS сервер сетевой информационной поисковой системы;gopher:// — создает ссылку на GOPER сервер распределённого поиска и передачи документов;

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

——————————————————————————

<a name=»news»>Новости спорта</a>…<a name=»records»>Рекорды</a>…Перейти к разделу<a href=»#news»>Новости спорта</a>Перейти к разделу<a href=»# records»> Рекорды </a>

——————————————————————————

В этом случае область Новости спорта помечена как«news» а область Рекорды как «records». Ссылки на эти области можно расположить в любой части документа. Щелкнув мышкой по любой из них можно перейти на соответствующую область. В редакторе Dreamweaver создавать html гиперссылки очень удобно в визуальном режиме, как кстати и делать html верстку сайта в режиме Код.

stroimsajt.ru

Как создать гиперссылку. Пособие на сайте — proglama.ru

Когда-то давно я начал зарабатывать в интернете написанием рекламных статей для сайтов. Работа была несложная. Платили хорошо. Но, вот однажды появился заказчик, который заказал десять статей определенной тематики, и, самое главное, в каждой статье нужно было разместить несколько гиперссылок. Когда идет большой объем работы, такой фактор, как компьютерная грамотность, даже не обговаривается. Априори исполнитель задания должен обладать нужными знаниями. И, вот тут оказалось, что некоторые люди, которым я делегировал часть полномочий, не знали, как сделать гиперссылку в ворде.

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

Тем более что самое лучшее пособие «Как создать гиперссылку» находится исключительно на этом сайте посвященном интернет технологиям. Тут даже можно бесплатно заказать создание собственного сайта!

Что такое гиперссылка?

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

Как создать гиперссылку в ворде?

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

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

Гиперссылка в одном документе

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

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

Гиперссылка на другой документ

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

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

Гиперссылка на элемент другого документа

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

Гиперссылка на новый документ

Сделать гиперссылку на новый документ в ворде еще проще. Действуя по описанным выше шагам, вы связываете гиперссыллку с «Новым документом», где вписываете то имя файла, которое будет ему присвоено позже, а также указываете место на диске, где будет находиться файл. Чтобы это сделать, нажимайте на кнопку «Изменить», далее выбираете нужный раздел и выбираете «Позже» в разделе «Когда вносить правку в новый документ». Если все сделаете правильно, то, после нажатия на гиперссылку у вас должен открыться новый документ.

Сайт internet-technologies от А до Я также подробно рассказывает и о создании гиперссылки на адрес электронной почты. Для этого, после стандартных шагов по открытию окна «Гиперссылка», вы выбираете пункт «Связать с»-«Электронной почтой», где в поле «Адрес» вводите нужный электронный адрес почты. После этого, после нажатия на гиперссылку автоматически будет создаваться шаблон для письма.

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

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

Есть вопросы? Внизу страницы сайта есть пункт «Обратная связь». Воспользуйтесь ею, чтобы узнать больше.

Другие интересные статьи

Групповое переименование файлов: быстро, легко и у...

Илон Маск показал новый пилотируемый корабль Space...

Как вводить текст голосом — преобразова...

proglama.ru