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

     

     

    Гиперссылки в HTML. Г лавным признаком HTML-документа является наличие в нём гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т.д. Именно возможность вставлять в страницы ссылки на объекты вне неё и сделала Интернет столь популярным и удобным для использования. Поэтому при создании своего сайта всегда помни про «магию» ссылок. В этом уроке мы поговорим о том, как создать ссылку на сайт, на его отдельную страницу или файл. Ты узнаешь о том, как изменить текст ссылки, как открыть её в новом окне, как сделать ссылкой картинку, что такое внешние и внутренние ссылки и многое другое. Плюс, у тебя уже есть информация о работе с ссылками, которой мы касались в прошлых уроках (например, о том, как можно поменять цвет ссылки мы говорили в уроке про тег body). В общем, этот урок сделает твоё представление о создании ссылок законченным и достаточным. Ты поймёшь, как создать гиперссылку в HTML и зачем. И научишься управлять её свойствами. § 1. Ссылка на файл, ссылка на сайт, ссылка на страницу. М ногочисленные вопросы о том, чем отличается ссылка на файл от ссылки на сайт или его отдельную страницу, вынудили меня вынести ответ на него в самое начало этого урока. Ответ такой: ничем. Все перечисленные ссылки являются внешними по отношению к исходной странице и создаются одним и тем же способом. Д абы не растекаться мыслью по древу, покажу всё на примере. И так, код ссылки на сайт выглядит так: В браузере мы увидим вот что: К од ссылки на страницу выглядит так: В браузере мы увидим вот что: К од ссылки на файл выглядит так: В браузере мы увидим вот что: К ак видишь, все типы ссылок создаются абсолютно одинаково. Разница только в адресе объекта, на который нужно сослаться. А теперь перейдём к основной части урока. § 2. Создание внешних ссылок. М ежду собой ссылки различаются на внешние и внутренние , а также на текстовые и графические . Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее. Д ля создания внешней ссылки на сайт, страницу или файл служит атрибут тега — href . В качестве значения этот атрибут принимает URL-адрес сайта, страницы или файла (об этом мы говорили выше). Между тегами и располагается видимая часть ссылки (анкор ссылки), т. е. то, что мы видим на экране браузера. Анкор ссылки может быть как обычным текстом (текстовая ссылка), так и графическим изображением (ссылка-картинка). Ссылка-картинка создаётся вставкой знакомого нам по прошлому уроку тега между тегами и . В общем, синтаксис создания ссылки выглядит так: Н апример, чтобы создать текстовую ссылку на главную страницу этого сайта, нужно написать следующий HTML-код: В браузере это будет выглядеть так: К ак я писал в самом начале этого урока, цвет текста ссылок (анкора) можно изменить с помощью атрибутов тега BODY. Вообще, к тексту ссылок можно применять все те же варианты форматирования, что и к основному тексту страницы, т. е. выделять жирным, курсивом, использовать заголовки и т. д. § 2.1 Графические ссылки (ссылки-картинки) К ак я уже сказал выше, для того, чтобы создать ссылку-картинку, нужно вместо текста использовать изображение. Пример такой ссылки выглядит так: А браузер покажет: П о-умолчанию, браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0: Т екстовые и графические ссылки можно комбинировать. Если написать: , то ссылкой будет как картинка, так и текст «Главная страница» § 3. Внутренние ссылки. Д ля комфортного перемещения по страницам с большим количеством контента используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается якорь ссылки. Якорь создается атрибутом name : И мя якоря задается произвольно. Тут стоит сказать, что не все браузеры понимают русские имена якорей, поэтому рекомендую использовать латиницу. Текст между тегами для создания якоря не обязателен и чаще всего не указывается. Я корь располагается в тех местах страницы, в которые должен попасть пользователь после щелчка по ссылке. К ак я уже сказал выше, в атрибуте href внутренней ссылки вместо адреса указывается имя нужного якоря с обязательным символом решётки ( # ) перед ним. Разберём на примере. Я создал якорь с именем zagolovok и разместил его рядом с заголовком этого урока («Гиперссылки в HTML»). Код якоря следующий: H TML-код внутренней ссылки будет выглядеть так: , а в браузере так: П осле щелчка по этой ссылке, ты попадёшь к заголовку этого урока. Е сли ты заметил, то после перехода по внутренней ссылке к заголовку изменился URL-адрес в адресной строке браузера: К изначальному адресу: Д обавилась внутренняя ссылка: И спользуя эту особенность, можно ссылаться на определённое место страницы с любого ресурса в Интернете! Т. е., допустим, ты создал страницу с объёмной статьёй о чём-то (или выложил на странице большое число фотографий) и разметил её внутренними ссылками. Находясь в социальной сети ВКонтакте, тебе потребовалось сослаться не просто на страницу со статьёй (или фотографиями), а на определённое место на ней (или определённую фотографию). Используя вариант с внутренней ссылкой в адресе, ты с лёгкостью добьёшься нужного. § 4. Абсолютные и относительные ссылки. Т акже ссылки бывают абсолютными и относительными . Абсолютная ссылка — это обычная ссылка вида: А вот с относительными ссылками немного посложнее. В таких ссылках адрес указывается либо относительно корневой папки сайта (той, в которой лежит главная страница), либо относительно исходной страницы. Такие ссылки нужны, например, в том случае, если сайт лежит на домашнем компьютере. Или это не сайт, а страница-указатель на другие документы. Р азберём сначала создание ссылки относительно корневой папки сайта. Д опустим нам нужно сослаться на страницу klienty.html , которая лежит в одной папке с главной страницей сайта. Тогда код относительной ссылки примет вид: А теперь предположим, что в одной папке с главной страницей лежит папка zakazy и уже в ней лежит страница klienty.html Тогда код относительной ссылки станет таким: Т . е. при формировании ссылки относительно корневой папки сайта мы опускаем начальную часть адреса http://www.site.ru и оставляем всё остальное. Использование слеша « / » в начале обязательно ! Т еперь рассмотрим создание гиперссылок относительно исходной страницы . Допустим, у нас есть страница price.html (исходная страница) и с неё нужно сослаться на страницу klienty.html Тут бывают следующие типовые варианты: 1. Страницы price.html и klienty.html находятся в одной папке . Тогда код ссылки будет таким: 2. Страница klienty.html и папка zakazy находятся в корневой папке сайта , страница price.html лежит в папке zakazy (т. е. страница klienty.html относительно исходной страницы price.html лежит на один уровень выше ). Код станет таким: Две точки показывают, что нужно выйти из текущей папки на уровень выше. 3. Страница klienty.html и папка zakazy находятся в корневой папке сайта , папка mebel лежит в папке zakazy , страница price.html лежит в папке mebel (т. е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше ). Код ссылки примет вид: Т. е. каждый уровень обозначается двумя точками и слешем « / ». 4. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта , страница klienty.html лежит в папке zakazy (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже ). Теперь код ссылки будет таким: В этом случае точки и слеши не ставятся. 5. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта , папка mebel лежит в папке zakazy , страница klienty.html лежит в папке mebel (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже ). Код ссылки такой: 6. В корневой папке сайта лежат две папки : zakazy и oplata. Страница klienty.html лежит в папке zakazy , исходная страница price.html лежит в папке oplata (т. е. обе страницы лежат в разных папках на уровень ниже от корневой папки сайта). Код ссылки станет следующим: По аналогии создаются относительные ссылки и в том случае, если страницы лежат на разных уровнях относительно корневой папки. Будет меняться лишь количество указателей уровня (две точки и слеш) и адрес страницы, на которую ставится ссылка. § 5. Ссылка на электронную почту. Д ля того, чтобы создать ссылку на электронную почту , нужно вместо URL-адреса в значении атрибута href написать адрес электронной почты с указанием протокола ( mailto: ). И тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» адресом электронной почты. В HTML-коде это выглядит так: , а в браузере так: § 6. Атрибуты тега «A» У тега , как и у остальных тегов в HTML, есть свои атрибуты. Рассмотрим некоторые из них. § 6.1 Атрибут target. П о-умолчанию, браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это, используется атрибут тега A target . Он имеет следующие значения: _blank — открывает ссылку в новом окне (в современных браузерах в новой вкладке). _parent — загружает ссылку в родительском окне. _self — по умолчанию. Открывает ссылку в этом же окне. Э то не все значения атрибута target , но это самые основные. Пример использования этого атрибута: § 6.2 Атрибут title. § 7. Заключение. Э то основные сведения о создании ссылок в HTML . На этом данный урок можно считать законченным. А сей факт говорит о том, что большую часть основ HTML ты уже освоил. Р екомендую тебе сейчас ещё раз пробежаться по предыдущим разделам, а затем создать полноценную HTML-страницу, посвященную, например, тебе любимому. По твоему дизайну и сообразно твоим желаниям. После чего выложить её на какой-нибудь бесплатный хостинг (конечно, если у тебя есть платный хостинг, то на него) и уже полноценно полюбоваться на свой первый сайт. М ожешь показать его друзьям или ещё кому. В общем, почувствовать себя сайтовладельцем. А затем, после небольшого загула по случаю такого события, переходить к следующему разделу, в котором я расскажу тебе о создании таблиц в HTML. И это уже будет первый шаг на пути к превращению личной странички в серьёзный ресурс.

     

    Предыдущая страница   Следущая страница




Рейтинг@Mail.ru