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

💖 Нравится? Поделись с друзьями ссылкой

Здравствуйте уважаемые читатели блога сайт. Сегодня мы поговорим о том как создавать гиперссылки в html , узнаем как использовать тег «А» и его атрибуты href и target, научимся делать картинку ссылкой.

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

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

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

Начнем с простого и рассмотрим создание обычных текстовых ссылок. Для создания текстовой гиперссылки достаточно любой фрагмент текста, который должен стать ссылкой, заключить в парный тег А . И в атрибуте href этого тега необходимо указать адрес целевой web-страницы в интернете:

В этом фрагменте html-кода создается абзац, который содержит ссылку. Ссылка указывает на web-страницу page15.html, которая находится в папке catalog, хранящейся в корневой папке сайта www.site.ru.

Если на странице не используются стили CSS и не применяются дополнительные атрибуты, то гиперссылки на странице по умолчанию отображаются следующим образом:

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

Полный адрес содержит содержит интернет-адрес web-сервера, и путь к файлу, который необходимо получить. Например:

Здесь www.site.ru адрес web-сервера, а /catalog/page15.html — путь к файлу на этом сервере. Вообще, обычно полные интернет-адреса используют только если необходимо создать гиперссылку, указывающую на какие-либо ресурсы находящиеся на другом web-сайте.

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

Сокращенные интернет-адреса бывают абсолютными и относительными . Абсолютный адрес задает путь к целевому файлу относительно корневой папки сайта. Такой адрес начинается с символа /(слэш), который и обозначает корневую папку. Например, адрес «/page15.html» указывает на файл page15.html, который хранится в корневой папке сайта. Или адрес «/catalog/page.html» указывает на файл page.html, который помещен в папку catalog, вложенной в корневую папку сайта.

Относительный адрес задет путь к файлу относительно файла текущей веб-страницы. Относительные адреса не содержат в начале символа слэш. Рассмотрим несколько примеров.

Например адрес «page.html» указывает на файл, который находится в той же папке, что и файл текущей web-страницы. А адрес «catalog/page.html» откроет файл page.html, хранящийся в папке catalog, вложенной в папку, в которой хранится текущая страница.

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

Ссылка на почту

С помощью языка html можно создавать почтовые гиперссылки , щелчок по которым запускает программу почтового клиента. При указании адреса в атрибуте href перед email необходимо поставить «mailto:» , т.е. примерно так: href="mailto:[email protected]". Причем после двоеточия перед почтовым адресом не должно быть пробелов.

Как сделать картинку ссылкой

Так как является строчным элементом html-страницы, то просто вставляем этот тег внутрь тега «А» вместо текста:

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

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

Изображение-карта создается в три этапа:

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

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

Якоря

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

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

Якоря создают, как и обычные гиперссылки, с помощью парного тега A, только вместо атрибута href в него помещают атрибут name или id, значение которых задает уникальный идентификатор метки. При этом сам тег «A» обычно не имеет никакого содержимого:

Есть второй способ создания якоря, при котором не надо создавать пустые элементы «А». А можно использовать уже имеющиеся в веб-странице элементы, например . Для этого в нужный элемент добавляем универсальный атрибут id:

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

Лирическое отступление:
Как-то в армии подходит ко мне начальник штаба и отдаёт приказ, цитирую:
Принеси мне вот тот документ, правда я не знаю где он и какой!! Что стоишь? Бегом давай!! Опаздываю я!!!

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

На данный момент с помощью блокнота мы создали только один HTML документ у меня он с именем index.html (зачем выбрал такое странное название index.html и зачем оно нужно смотрите в ) у Вас не знаю с каким, Вы сами имя придумывали, но думаю, Вы его помните и знаете где он лежит, если конечно Вы не мой начальник штаба:).. В этом документе мы попробуем создать ссылку на другой документ, которого у нас еще нет.. Так что прежде чем на него ссылаться, его нужно создать, благо Вы это уже умеете.

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

    Текстовые ссылки.

    Знакомимся тег (от anchor- якорь), в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут тега href задаёт имя и путь к документу на который указывает ссылка.

    Всё вместе пишется так:

    Здесь мои фотки!!

    Как Вы наверное поняли primer.html это имя нашего второго html документа, а надпись "Здесь мои фотки!!" это кусочек текста из файла index.html.

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

    Здесь мои фотки!! - Такая запись подразумевает, что в директории, где расположен наш первый html документ есть папка stranica в которой расположен файл primer.html
    Здесь мои фотки!! - А это значит, что файл primer.html размещен на уровень выше от документа
    Здесь мои фотки!! - документ расположен на сайте www.site.ru..

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

    Файл index.html:



    Делаем ссылкой кусочек текста





    Скажи мне, милый ребёнок: в каком ухе у меня жужжит?


    В правом или левом ?



    Файл primer.html:



    Перешли по ссылке сюда





    А вот и не угадал! У меня жужжит в обоих ухах.


    Ну я так не играю...


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

    link - цвет ссылки.
    alink - цвет нажатой, активной ссылки.
    vlink - цвет посещенной ссылки.

    Пишется так:

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

    Файл index.html:



    Радуга



    Посмотрите на фразу которая поможет Вам запомнить места цветов в радуге


    Р
    А
    Д
    У
    Г
    А




    Файл primer.html:



    Радуга




    Каждый
    охотник
    желает
    знать
    где
    сидит
    фазан



    вернуться на главную


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

      Про регистр.. Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.

      Правило трех кликов..

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

    Здравствуйте, уважаемые читатели блога сайт ! Как известно, для успешной раскрутки сайта и повышения его позиций в результатах поисковой выдачи, необходимо проводить качественную SEO оптимизацию сайта. Понятие “ “, которая, в свою очередь, делится на внутреннюю и внешнюю, неразрывно связано с такими понятиями, как “внутренние и внешние ссылки сайта”. Поэтому, нам очень важно знать, сколько ссылок должно быть на сайте, как проверить их количество, как убрать лишние ссылки с сайта и закрыть их от индексации, как наращивать ссылочную массу и т.д. Чтобы ответить на все эти и другие вопросы, касающиеся внутренних и внешних ссылок, давайте, для начала, разберемся, что такое ссылка (или гиперссылка) в HTML.

    В этой статье я расскажу, что такое ссылка, как сделать гиперссылку в HTML на сайте, как открыть ссылку в новом окне, как создать ссылку на адрес электронной почты (e-mail) и как сделать ссылкой картинку. Коснемся, также, таких понятий, как html-теги и атрибуты гиперссылок, анкор ссылки, html якорь (anchor) и хеш-ссылки. Итак, начнем.

    Что такое ссылка (гиперссылка).

    Если гиперссылка ведет на веб-страницу или файл, которых не существует (удалены, перемещены) или ее адрес указан неверно, то такая ссылка называется битая. Битых ссылок на сайте быть не должно, так как они вводят посетителей в заблуждение и, перейдя, по такой ссылке человек уже вряд ли вернется на Ваш сайт. Подробнее, о том, почему появляются битые ссылки, как их искать и исправлять, мы поговорим в отдельной статье. А сейчас продолжим.

    Как сделать ссылку (гиперссылку) в HTML на сайте.

    Сделать ссылку на другую страницу своего или другого сайта очень легко. Для создания гиперссылки надо указать браузеру, что является ссылкой и указать адрес документа, на который она будет вести. Делается это с помощью HTML-тега и обязательного атрибута href :

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

    Абсолютная ссылка

    Они используются для указания документа на другом сайте (внешняя ссылка).

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

    Как видите, с абсолютными ссылками все просто. Вот с относительными сложнее, поскольку при их создании надо понимать, какое значение атрибута href надо указать, так как оно зависит от исходного расположения документов. Как я уже говорил, никто с этим особо не заморачивается и делает все ссылки на сайте абсолютными. Однако, если Вам интересно подробнее узнать, как правильно создавать относительные ссылки для сайта, могу порекомендовать статью Дмитрия, автора блога ktonanovenkogo.ru . Более подробного и понятного объяснения я еще не встречал.

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

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

    На главную

    Текст ссылки (анкор)

    Цвета и оформление всплывающего текста зависят только от настроек операционной системы и браузера.

    Как открыть ссылку в новом окне.

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

    Открыть ссылку в новом окне нам поможет атрибут target тега . По умолчанию он имеет значение _self , которое обычно не прописывается. Для того чтобы открыть документ в новом окне, изменяем значение атрибута target на _blank :

    1 Новое окно

    Новое окно

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

    Как сделать ссылку на e-mail (адрес электронной почты).

    При щелчке по этой ссылке откроется программа для работы с электронной почтой, установленная у Вас по умолчанию, где уже будет заполнено поле “Кому”. Чтобы автоматически заполнялась и тема письма, надо сделать ссылку на e-mail такого вида:

    Дмитрий КтоНаНовенького советует еще один способ установки закладок в тексте веб-страницы, без использования html якорей. Для этого делаем закладку из любого HTML-тега, имеющегося на странице, прописывая ему универсальный атрибут id . Например, делаем закладку из тега заголовка h3 :

    Текст заголовка

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

    Давайте, для примера, вернемся к заголовку “ “, а потом продолжим.

    Можно использовать хеш-ссылки для перехода на нужное место не только в пределах одной страницы, но и для перехода на другую страницу сайта. Для этого мы устанавливаем html якорь в нужном месте на нужной странице, а в саму хеш-ссылку перед символом решетки прописываем адрес этой страницы. Например:

    Текст ссылки на html якорь-закладку

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

    Изменить цвет гиперссылок в html-документе можно при помощи тега и следующих его атрибутов:

    • Link – цвет не посещенных ссылок.
    • Alink – цвет активной ссылки.
    • Vlink – цвет посещенных ссылок.

    Все приведенные атрибуты можно объединять:

    1

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

    Таких длинных статей еще писать не приходилось, более 10 000 символов. Но на этом тема ссылок не исчерпана, продолжение следует.

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

    Здравствуйте, уважаемые читатели этого блога. Вы наверняка не раз замечали в интернете картинки, на которые можно было кликнуть и перейти таким образом на какую-нибудь страницу. А как это реализовывается изнутри? Как сделать в html ссылку картинку? Очень просто.

    Ссылка картинка в html

    Тут нужно поступить очень просто. Тег вставки изображения – img . Он одинарный. Тег ссылки – a . Он парный. Соответственно, нужно всего лишь в парный тег ссылки вставить img. И вот как это будет примерно выглядеть:

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

    Но это не единственный способ сделать в html ссылку картинку. Есть еще один, при котором не нужно вставлять изображение непосредственно в html-код.

    Способ номер 2

    Тут мы не вставили никакой картинки в код. Так как же мы ее получим? Через css и добавление фона к ссылке. Но для начала нужно превратить ссылку в блочный элемент и задать ей такие размеры, как картинке, которая будет выступать в качестве ее фонового изображения. Следующий код предполагает, что картинка имеет разрешение 200 на 200 пикселей.

    A{
    Display: block;
    Width: 200px;
    Height: 200px;
    Background: url(путь к изображению) no-repeat;
    }

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

    Какой способ выбрать

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

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

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

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

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



    Термины § 1. Ссылка на файл, ссылка на сайт, ссылка на страницу

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

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

    В браузере мы увидим вот, что:

    В браузере мы увидим вот, что:

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

    § 2. Создание внешних ссылок

    М ежду собой ссылки различаются на внешние и внутренние , а также на текстовые и графические . Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега (сокращение от англ. anchor - якорь). Рассмотрим его поподробнее.

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

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

    http://www.seoded.ru/">Главная страница сайта сайт

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

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

    § 2.1 Графические ссылки (ссылки-картинки)

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

    А браузер покажет:

    П о-умолчанию, браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0:

    border="0">

    Главная страница

    § 3. Внутренние ссылки

    Д ля комфортного перемещения по страницам с большим количеством контента используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается «якорь» ссылки. «Якорь» создаётся атрибутом name :

    name="имя якоря">текст

    И мя «якоря» задаётся произвольно. Тут стоит сказать, что не все браузеры понимают русские имена «якорей», поэтому рекомендую использовать латиницу. Текст между тегами для создания «якоря» не обязателен и, чаще всего, не указывается.

    «Я корь» располагается в тех местах страницы, в которые должен попасть пользователь после щелчка по ссылке.

    К ак я уже сказал выше, в атрибуте href внутренней ссылки вместо адреса указывается имя нужного «якоря» с обязательным символом решётки (# ) перед ним. Разберём на примере.

    Я создал «якорь» с именем zagolovok и разместил его в коде страницы рядом с заголовком этого урока («Гиперссылки в HTML»). Код «якоря» следующий:

    name="zagolovok">

    href="#zagolovok">К заголовку

    А в браузере так:

    Е сли ты заметил, то после перехода по внутренней ссылке к заголовку изменился URL-адрес в адресной строке браузера:


    К изначальному адресу:

    http://www..html

    http://www..html#zagolovok

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

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

    Главная страница

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

    Д опустим нам нужно сослаться на страницу klienty.html , которая лежит в одной папке с главной страницей сайта. Тогда код относительной ссылки примет вид:

    /klienty.html">Клиенты

    А теперь предположим, что в одной папке с главной страницей лежит папка zakazy и уже в ней лежит страница klienty.html Тогда код относительной ссылки станет таким:

    /zakazy/klienty.html">Клиенты

    Т еперь рассмотрим создание гиперссылок относительно исходной страницы . Допустим, у нас есть страница price.html (исходная страница) и с неё нужно сослаться на страницу klienty.html Тут бывают следующие типовые варианты:

      1. Страницы price.html и klienty.html находятся в одной папке .

      klienty.html">Клиенты


      2. в корневой папке сайта , страница price.html лежит в папке zakazy на один уровень выше ).

      Код станет таким:

      ../klienty.html">Клиенты

      Две точки показывают, что нужно выйти из текущей папки на уровень выше.


      3. Страница klienty.html и папка zakazy находятся в корневой папке сайта , папка mebel лежит в папке zakazy , страница price.html лежит в папке mebel (т. е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше ).

      ../../klienty.html">Клиенты

      Т. е. каждый уровень обозначается двумя точками и слешем «/ ».


      4. в корневой папке сайта , страница klienty.html лежит в папке zakazy (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже ).

      zakazy/klienty.html">Клиенты

      В этом случае точки и слеши не ставятся.


      5. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта , папка mebel лежит в папке zakazy , страница klienty.html лежит в папке mebel (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже ).

      zakazy/mebel/klienty.html">Клиенты


      6. В корневой папке сайта лежат две папки : zakazy и oplata. Страница klienty.html лежит в папке zakazy , исходная страница price.html лежит в папке oplata (т. е. обе страницы лежат в разных папках на уровень ниже от корневой папки сайта).

      ../zakazy/klienty.html">Клиенты

    § 5. Ссылка на электронную почту

    Д ля того, чтобы создать ссылку на электронную почту , нужно вместо URL-адреса в значении атрибута href написать адрес электронной почты с указанием протокола (mailto: ). И тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» адресом электронной почты. В HTML-коде это выглядит так:

    mailto:[email protected]">Моя почта

    А в браузере так.

    Рассказать друзьям