Вставка гиперссылок в html. Что такое ссылка и как сделать гиперссылку в HTML

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

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

Относительный адрес указывает адрес страницы относительно текущего документа и имеет вид название страницы . И сработает относительная ссылка, только если html-страница, на которую указывает ссылка, находится в той же директории где и текущий документ. Можно указывать путь от корневой директории сайта. Для этого просто ставим / перед адресом: href="/page.html" .

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

• _blank - загружает страницу в новое окно браузера;
• _self - загружает страницу в текущее окно;
• _parent - загружает страницу во фрейм-родитель;
• _top - отменяет все фреймы и загружает страницу в полном окне браузера.

По умолчанию target="_self" .

В качестве ссылок, также могут использоваться картинки. Для этого внутри тегов и нужно вставить тег : . И если кликнуть мышью по картинке image.jpg произойдет переход на страницу page.html.

С помощью ссылок также можно осуществлять переход и внутри одного html – документа. Такие переходы осуществляются с помощью меток. Для этого внутри страницы устанавливается метка: , где metka – имя метки. И на этой же странице создать ссылку .

ссылки таблицы формы видео аудио Справочник HTML Справочник CSS Вёрстка сайта

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

Одна страница у нас уже есть, создадим еще одну: index.html - это стандартное название главной страницы сайта. Если вы всерьез собираетесь делать сайт, то полезно набирать код вручную. А для ленивых и практичных: открываем предыдущую учебную html-страницу в Блокноте и задаем имя: index.html (Файл - Сохранить как).

Не забываем про тип файла и кодировку - UTF-8 (см. первый урок о создании html-страницы в Блокноте). Затем открываем файл index.html в Блокноте, редактируем его, чтобы получилось следующее:

Для тех, у кого хромает компьютерная грамотность: двойной клик левой кнопкой мыши по файлу .html откроет его в основном браузере. Чтобы открыть его в другом браузере нужно сделать по нему клик правой кнопкой мыши, выбрать в меню пункт «Открыть с помощью» - и выбрать название браузера. Там же можно выбрать Блокнот или другой редактор - для редактирования файла.

Теперь посмотрим, что у нас получилось, в браузере. Салатовый цвет фона всей страницы задан атрибутом bgcolor тега Body:

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

Чтобы задать цвет отдельных элементов, таких как абзац P или заголовки допускается применять универсальный атрибут style, пример: ... - белый цвет заголовка. Смотрите о значениях цвета в html . В таблицах Справочника для каждого тега есть колонка «Универсальные атрибуты»: легко понять, применяются они к элементу или нет.

К ак вставить изображения

Поместите любые изображения в ту же папку, где находятся две учебные html-страницы. Саму папку можно назвать, ну скажем Site1. Измените названия файлов изображений на img1, img2, img3, как на скриншоте. Либо измените в нашем коде эти названия на названия ваших изображений, а если нужно, то поменяйте и расширения (формат файлов). У меня это картинки 3D человечков, в формате.jpg:

Вы наверно слышали выражение «Корневой каталог сайта» - это директория (папка), где расположены все файлы сайта. В нем могут располагаться другие папки: с изображениями, с файлами скриптов, с отдельными разделами сайта. Чтобы потом не путаться в куче файлов с разными расширениями, уместно создать, например, отдельную папку для изображений. А для больших сайтов - несколько папок изображений для разных его разделов.

Если ваши изображения поместить в отдельную папку, например, с названием «papka», то путь к ней (значение обязательного атрибута scr) будет выглядеть так: . Если ваши изображения не отображаются в браузере, то причин всего две: указан неправильный путь к файлу или опечатка. Вы уже заметили, что элемент Img не имеет закрывающего тега. Разберем другие примененные атрибуты тега Img.

Во втором изображении img2.jpg: атрибут alt - в качестве значения используется текст, который виден, если браузер, по каким-либо причинам, не смог отобразить изображение. Рекомендуется использовать атрибут alt, прописывая в нем ключевые слова . Третье изображение помещено в тег P, а его расположение справа от текста абзаца определено значением «right» атрибута align, служащего для выравнивания картинки.

Стоит, еще отметить, что кроме формата jpg в веб-графике применяются форматы gif и png. Желательно научиться оптимизировать изображения для веб и пользоваться программой Photoshop. Оптимизированные, более «легкие по весу» изображения, меньше тормозят загрузку страниц в браузере.

Кстати, вы видите отступы (разное количество пробелов) в начале каждой строки кода - их делать не обязательно. Это делается для зрительного удобства, чтобы вебмастеру было проще редактировать документ в будущем. Но если не делать много пропусков, не оставлять пустых строк - html-страница будет меньше по размеру.

С сылки: как связать html-страницы в сайт

Ссылки (гиперссылки) - тег A с атрибутом href, значение которого - путь к файлу (URL), я поместил в элементы списка Li, что мы и наблюдаем в скриншоте (2-ом) страницы из браузера. Здесь три вида ссылок: первая ссылается на сайт, где вы сейчас находитесь. Если нажать на нее при наличии интернет-соединения, то вы попадете на главную страницу моего сайта. Если добавить в URL: «/index.html» - результат будет тот же.

Вторая ссылка, как пример, ведет на несуществующую страницу spravochnik.html, находящуюся в папке «papka» моего сайта. У этих двух ссылок указаны полные пути к документам, на который они ссылаются. У третьей гиперссылки указан относительный путь. Для того чтобы она работала необходимо наличие страницы index.html в одной папке со страницей, где эта ссылка размещена. В данном случае, она ссылается на эту же страницу (на саму себя).

Т.е. ссылки, ведущие на страницы других сайтов, могут быть только с указанием полного URL. А ссылки на внутренние страницы этого же сайта могут иметь, как полный, так и относительный адрес. Об атрибутах: значение атрибута title (не путать с тегом) - текст, который всплывает при наведении курсора на элемент, см. на 2-ом скриншоте. Title - универсальный атрибут, его можно использовать для тех же изображений. Атрибут target со значением «blank» открывает страницу в новой вкладке браузера.

Теперь свяжем наши две учебные странички в единый сайт. Добавим на обе страницы, сразу за тегом Body две такие строчки (здесь 8-ая и 9-ая) - две гиперссылки:

Первая ссылка ведет на сегодняшнюю index-страницу, другая на вторую учебную (у меня это - formatirovanie_teksta.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, примеры

1. HREF — отвечает за то, куда должна вести ссылка. Стандартная ссылка задается следующим образом: Текст ссылки.

2. TARGET — отвечает за то, в каком окне будет открываться документ. По умолчанию новый документ открывается в текущем окне браузера. Атрибут «target» позволяет открывать ссылку в новом окне браузера. Данный атрибут имеет следующие параметры:

• _blank - загружает страницу в новом окне;
• _self - загружает страницу в текущем окне;
• _parent - загружает страницу во фрейм-родитель;
• _top - отменяет все фреймы и загружает страницу в новом окне.

3. NAME — используется для перехода к конкретной области внутри страницы. После символа «решетка» указывается в кавычках ключевое слово (закладка или метка). Для перехода к этой метке используется ссылка, в которой данная метка прописывается.

Пример внешней ссылки

Перейти на сайт

Перейти на сайт Бесплатные уроки по WordPress

Пример 4. Изображения в качестве ссылок.

Пример изображения в качестве ссылки

Пример ссылки на определенное место на странице

Перейти к тексту

Текст страницы...

В данном примере на странице ставится метка «list» с помощью атрибута «name». Ссылка на эту метку обеспечит переход в определенную область страницы.

Скачать файл Написать письмо

Можно задавать цвет ссылок с помощью атрибутов, которые указываются в теге «body» в качестве параметров. Рассмотрим эти атрибуты:

• link — не посещенная ссылка, по умолчанию она отображается синим цветом;
• alink — активная ссылка, по умолчанию имеет красный цвет;
• vlink — посещенная ссылка, имеет по умолчанию фиолетовый цвет.

Пример задания цвета у ссылок ...

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

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

Вставка гиперссылки

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

главная страница Google

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

Структура тега ...

Можно заметить, что тег - парный: необходим закрывающий тег .

href—атрибут тега, указывает назначение ссылки.

https://google.com/ - значение атрибута , заключающее в себе URL-адрес ресурса, на который осуществится переход. Оно заключается в двойные или одинарные кавычки. Это зависит от структуры вложенности тегов по правилам HTML.

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

вся эта конструкция называется элементом веб-документа.

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

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

Здесь: элемент

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

содержит вложенный элемент

Гугл

Абсолютные гиперссылки

протокол://название домена/путь к файлу

Пример адреса распространённого в Америке поисковика: https://aol.com — абсолютный, так как содержит имя домена.com.

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

• http и https — наиболее часто встречающиеся; по ним осуществляется переход между интернет-страницами разных сайтов;
• ftp — протокол для загрузки файлов на сервер или скачивания пользователем с сайта;
• mailto — почтовый протокол, по которому отправляется электронная почта непосредственно с сайта, не заходя в личную почту.

Существуют ещё несколько протоколов особого назначения (gopher, telnet), встречающихся довольно редко, использование которых требует специальных знаний в программировании или системном администрировании.

Относительные гиперссылки

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

Создавая интернет-словарь, программист в начале страницы располагает алфавит, и если бы не применение ссылок, то пользователю пришлось бы очень долго крутить колесо мыши, чтобы добраться до буквы «Я».

Перейти к букве Я

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

Теперь, чтобы осуществлялся переход от алфавита в начале страницы к букве «Я», нужно сделать привязку якоря в том месте HTML-документа, в котором начинаются слова на букву «Я»:

буква Я

перед якорем стоит знак решётки, без которого переход к букве не будет работать.

Относительная адресация при создании сайта

Удобный и самый общепринятый алгоритм создания сайта программистом:

• создание папки в компьютере и расположение её в месте быстрого доступа для удобства;
• создание в этой папке главной ;
• создание второстепенных веб-страниц (index.html/page2);
• и размещение в ней графических файлов;
• создание папки и размещение в ней других объектов (файлы для скачивания, например);
• наполнение сайта контентом;
• размещение файлов сайта на хостинге.

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

Допустим, программист создал главную страницу сайта index.html, на которой имеется ссылка на другую страницу page2.html, украшенную картинкой img.png. Тогда относительный путь к этой картинке будет выглядеть так:

картинка

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

Способы переходов по гиперссылкам

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

Синтаксис применения атрибута target:

главная страница гугл

Главная страница «Гугл» откроется в новом окне.

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

Цвет гиперссылок

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

Задаются цвета ссылок в теге с помощью атрибутов и их значений, в которых выступает цвет HTML в системе rgb (#00FF00) или с прямым указанием имени цвета («green»). Существует три вида атрибутов для ссылок:

• link — задаёт цвет непосещённой ссылки;
• vlink — задаёт цвет ссылки, по которой пользователь уже переходил;
• alink — задаёт цвет ссылки в момент перехода на другую страницу. Это происходит быстро, поэтому не всегда можно уловить этот эффект.

Пример разметки:

Если применить эти атрибуты в теге , ссылки данного веб-документа будут тёмно-синими, посещённые - лилового, а активные - оранжево-красного цвета.

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

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

Широко применяется способ замены статичных кнопок () на красивые графические, созданные веб-дизайнером в редакторах графики (GIMP, Photoshop).

Для вставки графики в качестве гиперссылок на страницы сайта используется тот же синтаксис, только вместо текста используется тег вставки изображения по правилам HTML:

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

Звонки с сайта

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

...абонент ...

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

Чтобы звонки совершались с сайта, необходимо наличие не только ссылки на номер телефона абонента, но и гарнитуры (микрофон, наушники), установленной на компьютере VoIP-программа, скорость интернета должна превышать 0,5 Мб/сек. Оплата за звонки осуществляется расходом траффика. Поэтому, если Интернет безлимитный, то звонки бесплатные.

Этика создания гиперссылок

Размещая сайт в Интернете, веб-мастер должен знать, какие виды гиперссылок существуют в HTML, и не только правильно, профессионально их применять, но и придерживаться следующих положений:

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

Yandex

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

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

Анти-Seo при создании гиперссылок

Кроме технической стороны вопроса о том, как вставить гиперссылку в HTML, следует осветить ещё и нравственный аспект. Существует много сайтов, доступ к которым пользователям блокируется программами безопасности (антивирусом) или даже государством. Это те сайты, которые были созданы нечистыми на руку веб-программистами.

Одна из уловок, к которой они прибегают, - это вставка «невидимых» гиперссылок на веб-страницу. Мошенники знают, как создать гиперссылку в HTML, а при помощи атрибутов убрать подчёркивание ссылки и назначить ей цвет окружающего текста с тем, чтобы рядовой пользователь не увидел её. А при помощи других инструментов веб-технологий (CSS, JavaScript, PHP) можно запрограммировать их поведение. К примеру, событие OnMouseOver языка JavaScript активирует действие элемента веб-страницы. Когда пользователь проводит курсором по невидимой ссылке, он попадает на рекламную страницу другого сайта. Или ещё хуже, когда присутствует невидимая ссылка на файл и на его компьютер начинает скачиваться и устанавливаться ненужное программное обеспечение. Обычно это вирусы, которые меняют домашнюю страницу браузера, захламляют жёсткий диск массой программ и прочее.

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