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

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

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

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

Рис.\(1\). Образец веб-страницы с гиперссылками
Первая ссылка прописана так:

Это ссылка на страницу в интернете. В данном коде у тега \(\) используется атрибут \(href\), который задает адрес ссылки. В этом коде это ссылка на главную страницу ЯКласс. Также между тегами \(\) и \(\) прописано само название ссылки, которое отображается на веб-странице.

Вторая ссылка прописана так:
\(\)Рисунок Цветок\(\)
Это ссылка на изображение. Здесь применены все те же атрибуты, что и в предыдущей ссылке. Атрибуту \(href\) присвоено имя файла с изображением, которое открывает ссылка.

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

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

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

Как сделать гиперссылку в HTML? Гиперссылка задаётся при помощи парного тега (от английского слова Anchor — якорь). Параметр href тега содержит адрес документа.

В HTML теги гиперссылки представлены в виде и , а ссылкой считается вся информация, которую и содержат:

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

Сработает он в том случае, если конечный документ располагается в той же директории, что и текущий. Также, вы можете указать путь к файлу относительно корневой директории веб-сайта с помощью символа « / ».

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

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

Ссылка создается с помощью тега &lta href=»путь_к_ссылке»>Название ссылки&lt/a>.

Посмотрим, как это будет выглядеть в коде нашей страницы:
&lthtml>
&lthead>
&lttitle>Моя первая html страница&lt/title>
&lt/head>
&ltbody>
&ltp>Morbi quis rutrum nulla. Quisque lacinia &lta href=»http://адрес_сайта» title=»Перейти на посторонний сайт»>turpis&lt/a> nisl, non mollis nisl vestibulum at. Duis neque leo, congue at ultricies non, pharetra sed mauris. Proin elementum fringilla quam, non viverra justo luctus id. In ipsum lacus, commodo in porta ac, ultrices ac leo. &lt/p>
&lt/body>
&lt/html>

• target=»_blank» — это имя отвечает за то, что при клике по данной ссылке она откроется в новом окне.
• target=»_parent» — это имя используется для загрузки страницы в этом же окне, но при этом все предыдущие фреймы удаляются
• target=»_top»- это имя используется для загрузки страницы в этом же окне, но при этом все предыдущие фреймы удаляются
• target=»_self» — это имя используется для загрузки страницы в этом же фрейме, но естественно его можно по умолчанию не указывать.

Html страница, на которую переходят должна находиться в той же папке, где и главный файл. Если вы хотите остальные страницы держать в отдельной папке, вам необходимо написать следующее href=»название_папки/banan.html» в теге &lta>.

2. Гиперссылка — изображение

• Появилась папка images в которую в дальнейшем будем «класть» все изображения. Поэтому у адреса изображения в теге img следующее href=»images/fruits.jpg». Это сделано для того чтобы соблюдался порядок на сервере. Поэтому приучите себя сразу хранить изображения в отдельной папке.
• Созданы 3 страницы: banan.html, apple.html и persik.html.
• У каждой страницы в теге &lttitle> своё название для каждой страницы. Меню&lt/p>
  &ltul>
  &ltli>Банан&lt/li>
  &ltli>Яблоко&lt/li>
  &ltli>&lta href=»persik.html» title=»Польза персика»>Персик&lt/a>&lt/li>
  &lt/ul>

Вы, наверное, уже заметили в ссылках атрибут title. Этот атрибут очень важен при индексировании роботом вашего сайта. Он обязательно должен быть прописан для каждой ссылки. Данный атрибут можно увидеть при наведении на ссылку.

3.Ссылка на конкретную страницу. Ссылка на конкретное место данной странице

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

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

&lta name=»label»>ссылка на именованный якорь&lt/a>

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

Для перехода на место, которое отмечено именованным якорем, используется знак # и имя якоря в конце URL следующим образом:
&lta href=»page1.html#label»>переход на именованный якорь &lt/a>
Переход внутри файла «page1.html» на именованный якорь выглядит следующим образом:
&lta href=»#label»>переход на именованный якорь &lt/a>

Практическое задание 1

Создание гиперссылок
&lthtml>
&ltbody>
&ltp>
&lta href=»page1.htm»> Этот текст &lt/a> является ссылкой на страницу на этом Web-сайте.
&lt/p>
&ltp>
&lta href=»http://www.tct.ru/»> Этот текст &lt/a> является ссылкой на страницу
во Всемирной Паутине.
&lt/p>
&lt/body>
&lt/html>
Сохраните файл под именем 37ahref.html

Практическое задание 2

Изображение в качестве ссылки
Чтобы использовать в качестве ссылки изображение требуется предварительная подготовка. В папке, где у вас будет находиться файл html, создайте папку images.
&lthtml>
&ltbody>
&ltp>
Можно также использовать в качестве ссылки изображение:
&lta href=»http://www.tct.ru/»> &ltimg border=»0″ src=»images/logo.gif» width=»285″ height=»52″> &lt/a>
&lt/p>
&lt/body>
&lt/html>
Сохраните файл под именем 38ahref.html

Практическое задание 3

&lthtml>
&ltbody>
&ltp>
&lta href=»#part5″>Переход на часть 5.&lt/a>
&lt/p>

&lth1>Лекция 1&lt/h1>
&lth2>Часть 1&lt/h2>
&ltp>Это первая часть . &lt/p>

&lth2> Часть 2&lt/h2>
&ltp>Это вторая часть . &lt/p>

&lth2> Часть 3&lt/h2>
&ltp>Это третья часть . &lt/p>

&lth2> Часть 4&lt/h2>
&ltp>Это четвертая часть . &lt/p>

&lth2>&lta name=»part5″> Часть 5&lt/a>&lt/h2>
&ltp>Это пятая часть . &lt/p>

&lth2> Часть 6&lt/h2>
&ltp>Это шестая часть . &lt/p>

&lth2> Часть 7&lt/h2>
&ltp>Это седьмая часть . &lt/p>

&lth2> Часть 8&lt/h2>
&ltp>Это восьмая часть . &lt/p>

&lth2> Часть 9&lt/h2>
&ltp>Это девятая часть . &lt/p>

&lth2> Часть 10&lt/h2>
&ltp>Это десятая часть . &lt/p>

&lt/body>
&lt/html>
Сохраните файл под именем 39label.html

Задание для самостоятельной работы № 2

1.Создать ссылки
• Главная
• Книги
• Программы
• Картинки
• Уроки

2.Создать ссылки
• Главная • Книги • Программы • Картинки • Уроки

Создание ссылок в HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Похожие публикации:

1. Диспетчер загрузок на андроид где найти
2. Как подключить беспроводные наушники к телефону xiaomi
3. Как правильно фотографировать на кэнон
4. Как сделать боковой колонтитул в ворде