Г лавным признаком 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]">Моя почта
А в браузере так:
В теге можно также использовать атрибут title . С его помощью создаётся всплывающая подсказка, которая появляется при наведении мыши на ссылку.title="Перейти на главную страницу">Главная страница
§ 7. Заключение
Э то основные сведения о создании ссылок в HTML . На этом данный урок можно считать законченным. А сей факт говорит о том, что большую часть основ HTML ты уже освоил.
Р екомендую тебе сейчас ещё раз пробежаться по предыдущим разделам, а затем создать полноценную HTML-страницу, посвященную, например, тебе любимому. По твоему дизайну и сообразно твоим желаниям. После чего выложить её на какой-нибудь (конечно, если у тебя есть , то на него) и уже полноценно полюбоваться на свой первый сайт.
М ожешь показать его друзьям или ещё кому. В общем, почувствовать себя сайтовладельцем. А затем, после небольшого загула по случаю такого события, переходить к следующему разделу, в котором я расскажу тебе о создании таблиц в HTML.
И это уже будет первый шаг на пути к превращению личной странички в серьёзный ресурс.
Гипертекст представляет собой текст, содержащий ссылки на другой текст. Примером могут служить примечания автора на сложные определения или сноски переводчиков внизу страницы книги, если в ней встречается текст на иностранном языке. Сайты Интернета представляют собой сложную систему гипертекстовых переходов с одной страницы на другую, в пределах самой страницы, а также между несвязанными единой тематикой ресурсами. Такая структура практична, экономит много времени, позволяет посетителю быстро найти необходимую информацию и не растеряться в большом количестве переходов.
Вставка гиперссылки
В HTML для вставки гиперссылки используется дескриптор (тег) , который вставляется в нужное место. Обычно его располагают среди текста, так как гиперссылка сама по себе является текстовой структурой. Но ссылки бывают ещё графическими (иконки, кнопки, картинки); о них будет рассказано дальше. Их расположение на веб-странице не ограничивается текстом, а зависит от дизайнерского решения создателя сайта.
Это пример того, как вставить гиперссылку в 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, который лаконично описывает страницу перехода. Синтаксис применения атрибута такой:
- Пользователь должен получить правдивую информацию о файле, который будет скачан при переходе по ссылке.
Попав не на ожидаемую страницу или скачав не тот файл, пользователь в 99% случаев тут же покинет сайт и в будущем никогда на него не зайдёт.
Анти-Seo при создании гиперссылок
Кроме технической стороны вопроса о том, как вставить гиперссылку в HTML, следует осветить ещё и нравственный аспект. Существует много сайтов, доступ к которым пользователям блокируется программами безопасности (антивирусом) или даже государством. Это те сайты, которые были созданы нечистыми на руку веб-программистами.
Одна из уловок, к которой они прибегают, - это вставка «невидимых» гиперссылок на веб-страницу. Мошенники знают, как создать гиперссылку в HTML, а при помощи атрибутов убрать подчёркивание ссылки и назначить ей цвет окружающего текста с тем, чтобы рядовой пользователь не увидел её. А при помощи других инструментов веб-технологий (CSS, JavaScript, PHP) можно запрограммировать их поведение. К примеру, событие OnMouseOver языка JavaScript активирует действие элемента веб-страницы. Когда пользователь проводит курсором по невидимой ссылке, он попадает на рекламную страницу другого сайта. Или ещё хуже, когда присутствует невидимая ссылка на файл и на его компьютер начинает скачиваться и устанавливаться ненужное программное обеспечение. Обычно это вирусы, которые меняют домашнюю страницу браузера, захламляют жёсткий диск массой программ и прочее.
Скоро такие сайты попадают в «чёрный список» вирусных баз, систем безопасности и среди самих пользователей Интернет. Такие сайты долго не живут, и им приходится менять свои названия, бесконечно мигрировать по Интернету, меняя хост-провайдеров. Это не способствует раскрутке сайта, к чему всегда стремится его создатель, никогда не сделает его мегапорталом, таким как, например, соцсети. Кроме прочего, такие уловки вызывают много отрицательных эмоций у пострадавших от этих действий людей.
Привет всем. Каждый из нас встречался со ссылками на страницах сайтов в интернете. А знаете ли вы как сделать гиперссылку в документе Word? На самом деле гиперссылки можно создавать в любой программе Microsoft Office: PowerPoint, Excel и Word.
Что такое гиперссылка?
Гиперссылка — это объект, который включает в себя информацию о том, в каком месте расположен другой объект. Объектом может быть любой документ или файл на компьютере, также может быть ссылка на любую страницу в интернете. Процесс создания гиперссылки обычный такой же как и во многих других программах. Ссылка является объектом, которая, при клике по нему ведет на нужную нам страницу или документ.
Как сделать ссылку в роли закладки
- Откройте ваш документ и найдите то предложение, на котором вы хотите сделать закладку.
- Поставьте курсор слева от начала строки.
- Откройте вкладку «Вставка». Найдите пункт «Ссылки». Нажмите стрелку вниз и выберите пункт «Закладка».
- Теперь сделайте следующие настройки в окне «Закладки».
- Напишите имя Закладки. Закладка будет вести туда, где стоит курсор в документе. Если вам нужно сделать закладку на другую строку, нажмите кнопку «Отмена» и поставьте курсор в нужном месте.
- Если вам надо, чтобы ваши закладки были скрыты поставьте галочку в соответствующем пункте.
- Нажмите кнопку «Добавить» и закладка будет ссылаться на это место.
- Сохраните документ, если вы этого не сделать, то Word не будет знать, где расположены ваши закладки.
- Сделаем ссылку на закладку.
- В начале документа поставьте ваш курсор в том месте, где будет сделано содержание.
- Дайте название и выделите его, зажав левую кнопку мыши.
- Теперь откройте вкладку «Вставка» найдите пункт «Ссылки» и выберите пункт меню «Гиперссылка».
- В разделе “Связать с” выберите “Место в документе”. Вы увидите список всех закладок в текущем документе.
- Выбрав нужную закладку, вам всего лишь останется нажать кнопку ОК и выделенные слова станут гиперссылкой.
Как сделать гиперссылку на документ в компьютере
Если вы желаете, чтобы ваши документы, на которые вы ссылаетесь, были доступны другим, создайте одну папку, где вы разместите все документы, в том числе и тот, над которым вы работаете.
Нажав на кнопку «Подсказка», можно ввести текст, который будет отображаться, когда курсор будет над гиперссылкой.
Как сделать гиперссылку на сайт в интернете
Видео: Как сделать ссылку в Word?
Или же, кликнув правой кнопкой мышки по выделенному тексту, выбрать пункт меню Гиперссылка .
В появившемся диалоговом окне Вставка гиперссылки , в области Связать с выберите файлом, веб-страницей. В области Папка можете указать путь к файлу. В поле Адрес автоматически будет отображен путь к нужному файлу.
Чтобы во время наведения курсора мышки на текст гиперссылки выводилась подсказка, то в этом же диалоговом окне Вставка гиперссылки , нажмите на кнопку Подсказка Подсказка для гиперссылки введите текст подсказки.
Мне нужно в презентационное письмо вписать email, но не сам мейл, а типа ссылка на него, чтобы у человека, который кликает на тексте, например, "…. написать письмо", автоматически создавалось сообщение на нужный мне адрес так же, как это делается при клике на адресе почтового ящика вставленного в Ворд. Подскажите, как это сделать?!
Вам нужно создать гиперссылку на пустое сообщение электронной почты. Для этого достаточно выделить необходимый текст (рисунок), который будет гиперссылкой, и перейти с помощью контекстного меню Гиперссылка в диалоговое окно Вставка гиперссылки или на вкладке Вставка в группе Связи кликнуть на кнопку Гиперссылка .
В области Связать с выберите Электронная почта . В поле Адрес эл. почты введите адрес, на который вы хотите, что бы сообщения отправлялись. В поле Тема введите тему сообщения, которое вам будут присылать.
Нажав на кнопку Подсказка , вы можете написать подсказку к созданной гиперссылке.
Для вставки гиперссылки на текст внутри документа необходимо сначала отметить это место в документе. Для этого, выделите текст, на который должна перенаправлять гиперссылка (можно даже установить курсор в начале текста, если он объемный). На вкладке Вставка в группе Ссылки нажмите кнопку Закладка . В появившемся диалоговом окне Закладка в поле Имя закладки введите ее имя. И нажмите кнопку Добавить .
Обратите внимание! Имя закладки должно начинаться с буквы, но может содержать и цифры. В имени закладки нельзя ставить пробелы, для этого придется воспользоваться подчеркиванием.
Теперь выделите текст (рисунок), который будет гиперссылкой, и с помощью правой кнопки мыши выберите меню Гиперссылка , или в меню ленты Вставка-Ссылки-Гиперссылка , перейдите в диалоговое окно Вставка гиперссылки . В области Связать с выберите местом в документе . В области Выберите место в документе выберите нужную вам закладку. Как и во время работы с обычной гиперссылкой, вы можете написать всплывающую подсказку, нажав на кнопку Подсказка .
Как видно с рисунка, вы можете сделать ссылку на целый раздел вашего документа, выбрав вместо Закладки необходимый Заголовок , в диалоговом окне Вставка гиперссылки . Но у вас должны быть проставлены заголовки в документе, с помощью одного из встроенных стилей заголовков Microsoft Word. Для этого достаточно в меню Главная группе Стили выбрать один из имеющихся эксресс-стилей с значением Заголовок .
Для создания связи с определенным местом в другом документе необходимо сначала, как и в предыдущем примере, с помощью Закладки отметить такое место в документе. В файле, который будет содержать гиперссылку, выделите текст (рисунок), который будет гиперссылкой. С помощью контекстного меню Гиперссылка в диалоговом окне Вставка гиперссылки в области Связать с выберите файлом, веб-страницей . Выберите файл, на который должна перенаправлять ссылка и нажмите на кнопку Закладка . Здесь вы увидите все закладки выбранного документа. Выбрав нужную закладку, нажмите ОК.
Обратите внимание! Создание ссылки на часть другого документа, можно только ссылаясь на Закладку в документе , ссылка на Заголовок не создается.
Для вставки гиперссылки на определенную часть в документе Microsoft Excel, необходимо сначала присвоить имя этой части документа. Для этого зайдите в документ Microsoft Excel и выделив необходимый диапазон ячеек/начальную ячейку перейдите на вкладку Формулы группы Определенные имена . Нажмите на кнопку Присвоить имя . В открывшемся диалоговом окне Создание имени введите имя области.
Имя области должно начинаться с буквы и не должно содержать пробелов. В поле Область необходимо выбрать Книга .
Теперь вернемся к нашему документу Microsoft Word, выделим текст гиперссылки и с помощью контекстного меню Гиперссылка или меню Вставка-Связи-Гиперссылка перейдем в окно Вставка гиперссылки . В области Связать с выберите файлом, веб-страницей . Выберите файл, на который должна перенаправлять ссылка и в конце имени файла в поле Адрес введите знак номера #, а вслед за ним имя нужного вам диапазона.
Как сделать, что бы для перехода по гиперссылкам в документе не надо было зажимать CTRL?
Чтобы переход по гиперссылке осуществлялся одним щелчком мыши, нажмите на кнопку Office в левом верхнем углу документа Microsoft Word и перейдите в Параметры Word. В открывшемся диалоговом окне нажмите кнопку Дополнительно и в разделе Параметры правки снимите флажок с CTRL + щелчок для выбора гиперссылки.
Доброго всем времени суток, мои дорогие друзья и читатели. Я надеюсь, что вы решили все таки решили принять участие в моем конкурсе и уже пишите про свой блогерский путь. Ну а я хотел бы продолжить наше изучение языка html и сегодня я вам хотел бы рассказать про одну из важнейших составляющих, а именно гиперссылках.
Да, без таких гиперссылок интернет был бы не таким удобным. Нет, вру. Он был бы вообще не удобным в плане навигации. Вы можете представить интернет без них? Я лично нет.
И сегодня мы с вами узнаем, как вставить гиперссылку в html. Но сначала я хотел бы вас спросить: Знаете ли вы, что такое вообще гиперссылка и чем она отличается от обычной ссылки? Тут на самом деле всё просто: ссылка — это простое написание информации ссылающееся на какой-нибудь документ. При этом нажать вы на этот текст не можете (ничего не будет), но зато вы знаете, где искать информацию.
Пример: О том как выделять волосы в фотошопе вы можете узнать по адресу //сайт/adobe-photoshop/kak-vydelit-volosy/
Гиперссылка — это такой же текст, только суть его заключается в том, что на этот текст можно нажать и попасть на желаемую страницу, сайт или любой другой объект. Причем сам текст может быть любой, тем временем как адрес прописывается уже внутри отдельно и может быть совершенно другим. Но как бы то не было, все равно в разговорной речи их называют просто ссылками. Вот пример гиперссылки:
О том, как правильно выделять волосы в фотошопе вы можете прочитать в одной из моих .
Ну да ладно. Хорош теории. Теперь перейдем к практике и посмотрим какие и отвечают за все эти дела.
За гиперссылку отвечает парный тег , но сам по себе он ничего из себя не представляет. Он всегда идет в связке с атрибутом. И в данном случае нам нужно постоянно прописывать этот самый href. В значении атрибута мы ставим саму ссылку на желаемый ресурс. А в самом содержимом мы пишем сам текст, который должен стать кликабельным (работать по нажатии). Посмотрите пример и думаю, что вы всё поймете.
Поисковая система Яндекс
Как вы поняли, в этом примере я написал, что при нажатии на кусок текста «Поисковая система Яндекс», человек направится по адресу, написанному в значении атрибута href .
Я думаю, что многие из вас знают, что существуют внутренние и внешние ссылки. Внутренние осуществляются внутри одного каталога, то бишь сайта, а внешние ссылки ведут на какой-то сторонний ресурс. И сейчас я покажу как делать и те, и другие.
Файл в той же папке
Но такой переход будет работать при условии, если файл, на который вы ссылаетесь будет находится в той же папке, что и файл, в котором вы ставите ссылку. Для других вариантов все немножко по другому.
Файл в другой папке
- Откройте в Notepad++ файл pushkin.html
- Теперь найдите слово фото и заключите его в теги<a href> .
- А теперь внимание! В значении атрибута прописываем путь относительно редактируемого файла, то есть самого pushkin.html. У вас должно будет получиться так:
Что мы сейчас сделали? А сделали мы следующее: так как путь к фотографии лежит в отдельной папке img, которая находится в одной папке с файлом pushkin.html, то в значении атрибута нам приходится сначала написать название папки, а потом через слеш (/) полное название документа (в нашем случае фотографии).
А вот теперь сохраните и запустите файл pushkin.html в браузере. Вы увидите, что слово «Фото» стало выделено синим цветом и стало кликабельным, а это значит, что нажав на эту ссылку мы попадем на файл fofo.jpg, который находится в папке img.
Ну как? Всё понятно? Вы в случае чего спрашивайте, не стесняйтесь.
Внешние переходы
Ну и конечно же нельзя не упомянуть о внешних ссылках, после нажатия на которые мы попадем на совершенно другой сайт. Но тут ничего сложного нет. Вся суть состоит в том, что вы в значение href кидаете полный адрес сайта или веб-страницы. Пример с яндексом я показывал выше. Но вот вам еще один пример:
Я буду учиться на мастера социальных проектов .
Здесь мы попадаем на конкретную страницу конкретного сайта.
Открытие в новом окне
По умолчанию при нажатии на ссылку документ открывается в том же окне, что и ваша страница, т.е. ваша страница захлопнется. А это не есть хорошо. В частности для продвигаемых контентных проектов или блогов рекомендуется делать так, чтобы при нажатие на ссылку, документ открывался в новом окне или вкладке, не закрывая вашу страницу.
В этом нам поможет атрибут target со значением «_blank» . Тут сложного ничего нет. Вам просто надо будет вставить это внутри открывающего тега после значения атрибута href . Давайте возьмем тот отрывок из файла lukomorye.html, где мы делали ссылку на страницу pushkin.html, только теперь пропишем этот самый атрибут. Выглядеть это должно так:
Из поэмы Руслан и Людмила (Автор - А.С. Пушкин)
Ну тут всё понятно. Теперь при нажатии на содержимое нужная страница откроется в новом окне. Эта вещь очень нужная, так как если ее не прописать, то пользователь просто напросто уйдет с вашей страницы. А так он в любом случае останется на ней, только если сам специально не закроет ее. Попробуйте проделать всё сами, только делайте всё своими ручками прекрасными. Не надо копировать и вставлять.
Ну вот как-то так. Вроде всё самое важное рассказал, но если вы хотите двигаться в этом направлении и изучить HTML и CSS для создания профессиональных сайтов, блогов и даже интернет-магазинов, то обязательно посмотрите отличный видеокурс на эту тему. Уроки действительно превосходные и рассказывается действительно для людей, которые с сайтостроением еще мало знакомы или незнакомы вовсе.
Ну а на этом наш сегодняшний урок закончен. Я надеюсь, что вам моя статья понравилась и буду рад, если вы станете моим постоянным читателем. Поэтому не забудьте подписаться на обновления моего блога, дабы не пропустить чего-то интересного. Ну а вам я желаю успехов во всем ваших начинаниях. Пока-пока!
С уважением, Дмитрий Костин.