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

В 80-е годы прошлого века термин «гипертекст» в филологическом смысле употреблял известный структуролист-нарратолог Жерар Женетт в своей книге «Палимпсесты«,рассуждая о различных видах интертекстуальных связей. Жерар Женнет разработал практическую модель исследования межтекстовых отношений, уделяя основное внимание не частным текстуальным связям, а произведению как целостной структуре. Он предложил собственную классификацию разных типов взаимодействия текстов. Однако термин «гипертекст» в рамках концепции Женетта имел более узкое значение, чем в компьютерных разработках, где он становится ключевым словом.

Существует множество определений гипертекста. Самое простое из них можно найти почти в любом руководстве по веб-дизайну:

Гипертекст -- это текст, связанный ссылками с другими текстами.

Тед Нельсон определял гипертекст следующим образом:

«Под гипертекстом я понимаю не последовательное сочинение (non-sequential writing) а текст, который разветвляется и позволяет читателю выбирать <…>. Проще говоря, это ряд кусков текста (a series of text chunks), соединенных линками, предлагающими читателю различные пути«.

Словарь культуры XX века В.Руднева дает следующее определение гипертекста:

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

Для полноты картины приведем и другие достаточно типичные дефиниции гипертекста собранные из разных источников.

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

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

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

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

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

6. Гипертекст -- это представление информации как связанной (linked) сети гнезд (nodes), в которых читатели свободны прокладывать путь (navigate) нелинейным образом. Он допускает возможность множественности авторов, размывание функций автора и читателя, расширение работы с нечеткими границами и множественность путей чтения».

Почти о том же писал и Р.Барт: «…текст пронизан сетью бесчисленных, переплетающихся между собой внутренних ходов, не имеющих друг над другом власти; он являет собой галактику означающих, а не структуру означаемых; у него нет начала, он обратим; в него можно вступить через множество входов, ни один из которых нельзя признать главным; вереница мобилизуемых им кодов теряется где-то в бесконечной дали, они «неразрешимы» (их смысл не подчинен принципу разрешимости, так что любое решение будет случайным, как при броске игральных костей); этим сугубо множественным текстом способны завладеть различные смысловые системы, однако их круг не замкнут, ибо мера таких систем -- бесконечность самого языка«.

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

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

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

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

Для определения ссылки в HTML используется тег , структура которого имеет вид Текст ссылки, где filename -- имя файла или адрес в Интернете, на который необходимо сослаться, а Текст ссылки -- текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе.

· Мои работы -- ссылается на документ my_work.html, образуя гипертекстовую ссылку в виде слова «Мои работы»;

· Мой фотоальбом -- ссылается на файл my_photo.html, расположенный в каталоге photo, и образует ссылку в виде текста «Мой фотоальбом»;

· -- ссылается ресурс, расположенный на удаленном сервере.

Адресация в интернет

Доменное имя

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

Структура адреса

IP-адрес состоит из двух частей: номера сети и номера узла. В случае изолированной сети её адрес может быть выбран администратором из специально зарезервированных для таких сетей блоков адресов (192.168.0.0/16, 172.16.0.0/12 или 10.0.0.0/8). Если же сеть должна работать как составная часть Интернета, то адрес сети выдаётся провайдером либо региональным интернет-регистратором. Номер узла в протоколе IP назначается независимо от локального адреса узла. Маршрутизатор по определению входит сразу в несколько сетей. Поэтому каждый порт маршрутизатора имеет собственный IP-адрес. Конечный узел также может входить в несколько IP-сетей. В этом случае компьютер должен иметь несколько IP-адресов, по числу сетевых связей. Таким образом, IP-адрес характеризует не отдельный компьютер или маршрутизатор, а одно сетевое соединение.

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

Полное доменное имя состоит из непосредственного имени домена и далее имён всех доменов, в которые он входит, разделённых точками. Например, полное имя ru.wikipedia.org обозначает домен третьего уровня ru, который входит в домен второго уровня wikipedia, который входит в домен верхнего уровня org, который входит в безымянный корневой домен. В обыденной речи под доменным именем нередко понимают именно полное доменное имя.

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

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

Виды ссылок

Путь бывает абсолютным и относительным. Абсолютный путь состоит из 4 частей:

  1. часть - протокол, т.е. способ передачи файлов по сети. Их существует довольно много, но за весь курс нам будут нужны только 3 протокола - HTTP, mailto и FTP. Первый служит для отображения данных, второй - для отправки сообщений по электронной почте, третий - для загрузки данных на сервер. Поскольку мы создаем ссылки для отображения страниц, файлов, нас интересует только HTTP. Первая часть ссылки пишется так: http://
  2. часть - домен, т.е. сетевое имя. Это имя дается сайту и в так называется папка на сервере, где и хранится весь сайт. Домен может иметь такие виды: www.***.com, www.***.ru, ru.***.org. Как правило, настоящие домены имеют в своем составе три слова, разделенных точками. Если одно из слов - www(org), а второе - сокращенное название языка(или com), то это - просто домен..е. содержит только язык, то это называется субдоменом.
  3. часть - путь к файлу. На сайте может быть несколько папок, вложенные папки также допускаются. Например, на этом сайте все изображения хранятся в папке images. Если путь содержит несколько вложенных папок, то они отделяются прямым слэшем.
  4. часть - имя файла и его расширение. Если файл имеет допустимое для браузера расширение, он его откроет. В противном случае, попытается сохранить. К сожалению, некоторые браузеры пытаются открыть такие форматы, как exe или djvu.

Итак давайте сложим все вместе. В качестве примера возьмем изображение lesson1.jpg, хранящееся в папки images нашего сайта. Путь будет таким:

http:// сайт/images/ lesson1.jpg

Для удобства разные части пути были по разному выделены. Теперь добавим путь к файлу в ссылку:

lesson1

Если Вы пишете ссылку на главную страницу какого либо сайта, последние 2 части опускают; точнее 3 части тогда не существует, т.к. главная страница располагается непосредственно на самом сайте, а не в его папках. Имя главной страницы стандартаризированно - это index.html(или др. расширение), либо default.html.

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

Возможно несколько случаев:

  • Файл, на который ссылаются, расположен в той же папке, что и файл, с которого ссылаются. Этот вариант самый простой, т.к. тогда нужно указать только имя файла и его расширение.
  • Допустим, у Вас в одной папке есть файл index.html и папка things, в которой есть файл dog.html. Если Вам нужно сделать ссылку с файла index.html на dog.html, то в пути к файлу нужно приписать название папки. Это будет так: things/dog.html
  • Возьмем предыдущий случай, но теперь будем ссылаться из файла dog.html на файл index.html. В этом случае Вам не нужно указывать имя папки, но нужно указать то, что файл находится в более "высокой" папке. Для этого в путь файла пишем ../ (две точки прямой слэш). Тогда ссылка будет выглядеть так: ../index.html. Для поднятия на каждый уровень выше пишем по одной такой конструкции последовательно, друг за другом. Например, в папке things есть также папка items, содержащая файл books.html. Тогда ссылка на файл index.html из файла books.html будет выглядеть так: ../../index.html. В свою очередь, ссылка на файл books.html из index.html выглядит так: things/items/books.html
  • Вы можете комбинировать эти способы, если у Вас есть много вложенных папок. Например, на сайте есть две одноуровневые папки: icons и images. В первой папке есть файл icons.html, во второй - images.html. Ссылка с первого файла на второй будет выглядеть так: ../images/images.html, со второго на первый: ../icons/icons.html

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

Если вы хотите, чтобы пользователи писали на ваш ящик электронной почты, вам не нужно убеждать открыть их свою программу отсылки сообщений(типа Outlook), или сайт типа Mail.ru. Достаточно вставить ссылку на адрес электронной почты с вашим адресом. Когда пользователь щелкнет по этой ссылке, она сама откроет ему либо его любимый почтовый редактор, либо сайт отправки сообщений.

Вторая часть - Ваш адрес электронной почты, включая почтовый сервис (Например mail.ru, yandex.ru). Все вместе выглядит так:

Отправьте мне письмо

У тега есть также атрибут title, его назначение такое же, как у атрибута title тега - отображать подсказку. Текст подсказки и является значением атрибута.

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

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

Для использования такой ссылки, нужно разместить в определенное место страницы, на которое ссылается ссылка, специальный тег с атрибутом name вместо href (ссылка-якорь). Значение атрибута name - имя раздела, Вы придумываете сами. Однако, значение этого атрибута еще пригодится. На месте, где Вы хотите сделать ссылку, вы пишите обычный тег , в атрибут href пишите путь до страницы; если это ссылка на ту же страницу, то Вы ничего не пишите, затем добавляете # и значение атрибута name того раздела, куда Вы ссылаетесь. Внимание! Все это пишется без пробелов!

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

Все ссылки, кроме якорей, могут иметь атрибут target, показывающий, как будет отображаться открытое окно. Он принимает такие значения: _blanc(страница в новом окне), _self(то же окно), _top(целое окно браузера). Если Вы не будете изучать фреймы , то _top и _self для Вас - одно и то же. Лучше использовать _self. Вы также можете поместить тег между тегами . Этот тег также может иметь атрибут target. Присвоив ему одно из вышеперечисленных значений, Вы можете присвоить этот способ открытия страниц по умолчанию.

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

Либо на элементы этого объекта.

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

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

Гиперссылки HTML-страницы

  • указывающий на другой файл, который может быть расположен в Интернете ;
  • содержащая полный путь (URL) к этому файлу.

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

Гиперссылка на другую HTML-страницу

Для определения ссылки в HTML используется тег , структура которого имеет вид Текст ссылки , где filename - имя файла или адрес в Интернете, на который необходимо сослаться, а Текст ссылки - текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе.

  • Мои работы - ссылается на документ my_work.html, образуя гипертекстовую ссылку в виде слова «Мои работы»;
  • Мой фотоальбом - ссылается на файл my_photo.html, расположенный в каталоге photo корневой директории, и образует ссылку в виде текста «Мой фотоальбом»;
  • - ссылается на ресурс, расположенный на удаленном сервере.

См. также


Wikimedia Foundation . 2010 .

Синонимы :

Смотреть что такое "Гиперссылка" в других словарях:

Книги

  • Гиперссылка в реальность , Владимир Саньков. Alchemist -талантливый хакер, способный развалить циничные планы крупного дельца от власти, не выходя из дома. Но есть хакер и покруче. Alchemist ловко выдает черное за белое. Но ему только…

Гиперссылка: понятие.

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

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

Состав ссылки.

Абсолютно любая ссылка представляет собой две взаимосвязанные части. Первая называется указателем (anchor) – это видимая часть ссылки, представленная в виде названия. Вторая часть – это URL – адрес, на который переходит браузер после нажатия клавиши мыши. Также у ссылки могут быть дополнительные атрибуты, так как как: target, rel, title, alt и др.

Ссылка в HTML.

Каждая ссылка в html должна быть представлена в определенном виде, то есть с присвоением ей определенных параметров. Непосредственно перед самим названием ссылки в ее структуре должен содержаться тег. Далее присваивается значение «href», которое в свою очередь предполагает адрес перехода по ссылке – URL, который может быть как абсолютным, так и относительным. Если в адресе не указывается сервер или раздел, на который необходимо перейти, то переход по такой гиперссылке будет осуществляться внутри данного сервера или раздела.

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

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

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

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

"Посещение" связанного ресурса

Активировав эту ссылку (щелчком мыши, вводом с клавиатуры, голосовой командой и т.п.), пользователь может посетить этот ресурс. Заметьте, что атрибут href в каждом якоре специфицирует адрес якоря назначения с применением URL.

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

Якоря назначения в документах HTML могут быть специфицированы элементом A (атрибутом name ) или любым другим элементом (атрибутом id ).

Так, например, автор может создать оглавление, вхождения которого связаны с элементами H2 , H3 и т.д. в этом же документе. Используя элемент A для создания якоря назначения, мы могли бы написать:

Оглавление

Введение
Фон
Несколько заметок

Введение

...раздел 1...

Фон

...раздел 2...

Несколько заметок

...раздел 2.1...

Того же эффекта можно достичь, сделав элементы-заголовки якорями :

Оглавление

Введение
Фон
Несколько заметок
...остальная часть оглавления... ...тело документа...

Introduction

...раздел 1...

Фон

...раздел 2...

Несколько заметок

...раздел 2.1...

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

Чаще всего гиперссылки используются для запроса другого ресурса Web, как в предыдущих примерах. Однако, авторы могут включать в свои документы гиперссылки , которые не только выполняют действия типа "активировать эту ссылку для посещения соответствующего ресурса". Гиперссылки , выражающие соотношения других типов, имеют тот или иной тип ссылок, специфицированный в якоре этого ресурса.

Например, ссылки, определённые элементом LINK , могут описывать позицию документа в серии документов. В следующем отрывке гиперссылки в документе, озаглавленном " Chapter 5", указывают на следующую и предыдущую главы:

...другая информация "шапки"... Chapter 5

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

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

Спецификация якорей и гиперссылок

Хотя гиперссылки на другие ресурсы создаются разными элементами и атрибутами (напр., элемент IMG , элемент FORM и т.д.), в этом разделе рассматриваются гиперссылки и якоря , создаваемые элементами LINK и A .

Элемент LINK может появляться только в "шапке" документа.

Элемент A может появляться только в теле документа .

Если в элементе A установлен атрибут href , этот элемент определяет якорь -источник гиперссылки , который может быть активирован пользователем для запроса Web-ресурса. Якорь источника это размещение объекта A , а якорь назначения - это ресурс Web.

Запрошенный ресурс может быть обработан ПА различными способами:

  • открытие нового документа HTML в том же окне ПА,
  • открытие нового документа HTML в другом окне,
  • запуск другой программы для обработки ресурса и т.д.

Поскольку элемент A имеет содержимое (текст, изображения и т.п.), ПА могут обозначить наличие этого содержимого, например, подчёркиванием гиперссылки .