Товаров: 0 (0р.)

Как сделать ссылку на сайт чтобы переходили нажав на слово: инструкция по добавлению ссылок в текст страницы

Содержание

инструкция по добавлению ссылок в текст страницы

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

Ссылки добавляются как при создании новых страниц, так и при редактировании уже существующих.

Выделите мышкой в тексте слово или фразу, которые будут являться ссылкой.

Затем нажмите на кнопку «Вставить/ Редактировать ссылку» (она напоминает перевернутую восьмерку со знаком плюс).

У вас открылось окно, в которое нужно будет вставить ссылку.

Скопируйте адрес той страницы, на которую должна вести ссылка.

Если вы ссылаетесь на какую-либо страницу чужого сайта, то скопируйте ее адрес полностью.

Если это другая страница вашего же сайта, то скопируйте не весь адрес целиком, а только ту часть, которая идет после доменного имени. Например, если у вас сайт

nubex.ru, и вы хотите сослаться на страницу http://nubex.ru/ru/support/faq/library/picture/, скопируйте то, что идет после .ru — /ru/support/faq/library/picture/

Вернитесь на страницу с админкой сайта и вставьте то, что скопировали, в открытое окно для ссылки.

Если ваша ссылка ведет на чужой сайт, можно сделать так, чтобы она открывалась у пользователя в новой вкладке; при этом он посмотрит ссылку, но не уйдет с вашего сайта. Чтобы это сделать при добавлении ссылки откройте вкладку «Цель

» и выберите там пункт «Новое окно».

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

Когда вы добавили ссылку, нажмите кнопку «ОК».

Ссылка добавлена к тексту. Осталось сохранить страницу, чтобы изменения отобразились на сайте.

Видео: как вставить ссылку на своем сайте

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

«Как сделать ссылку на сайт?» — вопрос, которым задаются многие владельцы сайтов, блогеры и SEO-разработчики. Сложностей мало, если подобрать соответствующий алгоритм. Ссылка — это определенный элемент текста, который открывает другую страницу или закладку исходного документа. В любом коде (HTML или JavaScript) она отображается в следующем виде:

  • <a> — указывающий тег. Обязателен к размещению. Помните, что его необходимо закрывать.
  • Адрес — это административное имя нового веб-сайта, который будет открываться при нажатии.
  • Анкор — текстовое отображение перехода. Вставляется в статьи, выделяется синим/голубым цветом или подчеркиванием.

Чтобы понять, как сделать ссылку на страницу сайта с внутренней закладкой, понадобится сменить код для ссылки:

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

Атрибуты

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

Элемент <а> имеет свою атрибутику. Выглядит она так:

Обязательно проставляйте знак равенства и кавычки. В противном случае ничего не сработает.

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

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

В HTML рекомендуется ввести новый тег target со значением _blank. Последний атрибут — указатель перехода на новое окно. Результат:

Как вставить описание к ссылке?

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

Для этого понадобится ввести небольшой тег title. Описание будет отображаться в виде всплывающей подсказки.

Rel=»значение» — важно и нужно ли?

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

  • nofollow. Регулирует команду отказа передачи веса странички, где она расположена. Веб-мастер таким образом демонстрирует системам свое нежелание передачи части своего авторитета или усиления другому файлу. Это подходящее решение для продвижения, где ценится вес.
  • sidebar. Дает уникальную возможность закрепить полезный материал непосредственно в закладках. Это полезный и оригинальный прием, который ценится потенциальной аудиторией. Внедрите ее, и вы увидите, что количество сохранений намного улучшится. Это сразу же отобразится на вашей статистике активности.

Что такое якоря?

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

Якорь располагается исключительно в том месте, куда будет совершаться пролистывание. Пример:

Работа с конструкторами

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

  • Зайдите в редактор, где уже будет отображен текстовый материал, размещенный, например, в блоге. Выделите словосочетание, которое послужит переходным анкором. Нажмите кнопку на панели, отображающую связывание.
  • В окне необходимо вставить URL веб-страницы, на которую пользователь должен перейти.
  • Нажмите «Добавить».

Как сделать внешние ссылки на сайт

Неотъемлемая часть поисковой оптимизации — внешние или входящие анкоры. Это помогает поисковым роботам чаще «посещать» ваш веб-ресурс. Дополнительный плюс — поисковики повысят вас в выдаче, так как будут считать, что на вас часто ссылаются. Такие голоса определяют рейтинг интернет-площадки. Соответственно, чем их больше, тем выше ваши позиции в ТОПе.

Один из популярных путей получения — привлечение других интернет-ресурсов. Обратите внимание, что вам понадобится предложить уникальный контент. Источники, на которые ссылаются, схожие по тематике. Это поможет определить показатель тИЦ (формируется Яндексом). Получить желаемый показатель не всегда удается, поэтому рекомендуется применить другой метод — приобретение ссылок.

Безопасные варианты получения:

  • Регистрировать в специализированных каталогах или картах.
  • Отвечать в комментариях со ссылками на ваш сайт.
  • Размещать тематические посты с указанием вашего интернет-ресурса.
  • Сервисы отзывов.
  • Упоминать свой URL на форумах, группах, социальных сетях.

Каких методик следует избегать:

  • Получать через биржи.
  • Приобретать, оставляя спам.

Последние способы могут привести к блокировке поисковиками. При приобретении обратите внимание на коэффициент PR (PageRank, параметр, определяющий важность страницы для Гугл; рассчитывается на основании качества и количества ссылок на эту страницу). Он может привести к попаданию в черный список. С одной стороны, они полезны. Другая сторона медали — Google не считает их естественными.

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

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

Ссылка-картинка добавляется аналогично обычной ссылке: вставьте картинку в текст, выделите ее и нажмите «Вставить/редактировать ссылку». Поле «Отображаемый текст» заполнять не нужно. Используйте alt. Он выведет оптимизацию на желаемый уровень.

Ссылка-кнопка CSS стилями

Когда рекомендуется прибегнуть именно к такому типу отображения? Кнопка размещается в любом участке, но чаще всего это центр. Кликабельность (то есть возможность нажать на кнопку) будет присваиваться исключительно в области расположения фигуры. Это очень удобно, так как они интуитивно понятны и выступают призывом к действию. Примеры надписей: «Зарегистрироваться», «Стать участником курса» и т.д.

Создать ее просто, следуйте классическому алгоритму введения гиперссылки. Единственное отличие — наличие ID. Он дописывается к <a>, выставляется знак равенства. Далее понадобится прописать стиль оформления style.css. Как все выглядит:

Единственная проблема, которая может возникнуть, — название ID. Если на сайте уже есть такие имена, то произойдет конфликт. Тогда придется везде видоизменять заголовки.

Как сделать ссылку активной на сайте: рекомендации и советы по внедрению

Чтобы портал был интересным и качественным, без перенасыщения, воспользуйтесь следующими рекомендациями:

  • Применяйте изображения. Это поможет разбавить обычный текст, оформить его, изменить компоновку. К тому же они лучше воспринимаются посетителями и, соответственно, улучшают поведенческий фактор.
  • Активность ссылок. Перемещение будет работать при любом способе, который был указан выше. Подберите подходящий вариант для себя. Не забудьте в теге прописать ключевое слово, оно увеличит активность. Такая методика простая, но действенная, используется всеми веб-мастерами. Если вы планируете войти в их число, то попробуйте. Внимание: помните обо всех символах, нужных при добавлении ссылки (кавычках, знаках равенства и пр.), и не удаляйте их. Без них ничего не будет работать. Проверьте результат после повторной загрузки документа.
  • Знайте меру. Логично, что не каждый интернет-портал состоит из большого количества разделов. Запомните: чем меньше ваш блог, тем меньше на нем должно присутствовать ссылок. Если вы не можете определиться с количеством, то воспользуйтесь негласным правилом: число активных ссылок на сайте не превышает 100.
  • Читабельность. Анкор, как и любой текстовый элемент, должен быть понятным. Для этого позаботьтесь о нормальном звучании всего предложения в посте. Здесь имеется в виду, что текст ссылки должен иметь логическую связь со всей остальной информацией. Пример: нельзя писать об особенностях выращивания рассады в домашних условиях, а ссылку ставить на утюжки для волос. Лучше, когда читатель сразу понимает, о чем идет речь. Переход — это своеобразное продолжение мысли, а не ее обрыв.
  • Заботьтесь о посетителях. Если материал, который откроется после нажатия, имеет большой объем, предупредите их об этом. Вы не потеряете аудиторию и заработаете себе дополнительный балл. Как это можно реализовать? Например, допишите перед ссылкой: «Объемный материал по теме представлен на странице».
  • Проверяйте внешние файлы. Ссылаясь на данные другого информационного ресурса, убедитесь в его корректности. Вам потребуется: проверить источник на работоспособность, заспамленность и вирусы, наличие платных нажатий и всплывающих окон. Если вы отнесетесь к этому халатно, то есть шанс попасть под санкции. Они могут быть наложены на вас после поисковой индексации. Если вы не можете избежать такого партнерства, то уведомите об этом роботов ― исключите ссылку из индексации поисковиками. Введите в кодовую конфигурацию rel, пропишите значение nofollow. Так вы точно сохраните свою репутацию.
  • Избегайте «битых» перемещений. Со временем некоторые данные устаревают, их попросту удаляют. Соответственно, вставка будет вести в никуда. Ежемесячно устраивайте технический аудит, чтобы сохранить актуальность файлов. В результате это сэкономит вам время и нервы. Не нужно нажимать на каждую ссылку. Воспользуйтесь бесплатными сервисами: Broken link checker или Xenu Link Sleuth.

Не относитесь халатно к текстам адресов. Это один из существенных моментов перелинковки. Ключевые нюансы процесса:

  • Информативность. Во фразах лучше не злоупотреблять словами «здесь», «тут», «сюда». Они, безусловно, хорошо воспринимаются людьми и роботами, однако всего должно быть в меру. Полезность и естественность — ключевые указатели. Никто не кликнет на пустой или просто неинтересный адрес. Не забывайте о тематике. Информация о машинах никого не заинтересует в блоге о моде.
  • Лаконичность. Не надо придумывать заголовок длиной в абзац. Достаточно обычного словосочетания. Человек не будет тратить свое время на вычитку всего текстового сообщения. Большие объемы текста отпугивают, в названии — тем более. Заголовок нужен, чтобы продемонстрировать, о чем речь пойдет дальше. Если там много текста, посетители не станут даже обращать внимание. Традиционные временные затраты на чтение — не более 1-2 секунд. Уложились в этот показатель? Отлично!
  • Стандарты оформления. Придерживайтесь классического отображения анкорных данных: подчеркивание, синий или голубой оттенок. Дизайнерские нововведения могут попросту запутать пользователя. Не нужно подстраивать оттенок под цвет букв в статье. В противном случае человек и не поймет, что там стоит ссылка, по которой можно перейти.
  • Уникальность. Обратите внимание на этот параметр. Не ленитесь и старайтесь постоянно придумывать оригинальное и необычное название. Неопытные оптимизаторы иногда вставляют один и тот же текст ссылок на всех продвигаемых страницах. Ни к чему хорошему это не приводит, поисковые роботы их склеивают, и результат получается нулевой. Поэтому возьмите себе за правило: каждой странице — уникальный анкор.

Особенности использования внешних ссылок с точки зрения Яндекса

  1. Партнерские ссылки должны содержать нормальное описание ресурса. Обычный адрес необходимо дополнить описаниями.
  2. При использовании ссылки в средствах массовой информации необходим корректный анкор, то есть фраза, определяющая смысл страницы, на которую ссылаются.
  3. Регистрация в каталогах — неплохой способ продвижения. Но для достижения положительного результата необходимо подобрать качественный каталог. Признаки такого сервиса:
    • Наличие модерации.
    • Удобная с точки зрения пользователя навигация по сайту.
    • Размещение в соответствующих разделах ссылок на лидеров в нише (если крупные игроки на рынке поддерживают партнерство с каталогом, это свидетельствует о надежности последнего).
    • Грамотность и читабельность текста ссылок.
    • Отсутствие назойливой рекламы, которая мешает воспринимать контент.

Пользуясь этими советами, вы сможете провести качественную внешнюю оптимизацию.

Как сделать ссылку ВКонтакте словом

Всем привет! Эта статья будет небольшой, но полезной. Сегодня я вам расскажу о некоторой возможности ВКонтакте, а именно: ссылка словом. Что значит ссылка словом? Знаете во многих группах в записях вставляют ссылку с надписью «Читать далее» или «смотрите в источнике» и т.д. При нажатии на неё нас перекидывает на другую группу, оттуда снова на другую и так бывает надо пройти групп 5, чтобы дойти до оригинала записи. Меня это очень раздражает, но что поделаешь… Без рекламы никуда…

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

  1. [ссылка|слово]
  2. @ссылка (слово)
  3. *ссылка (слово)

Под словом «ссылка» подразумевается не внешняя ссылка на какой-то другой сайт, а id человека, страницы или группы в ВК. Второй и 3 варианты я считаю проще, так как установив знак @ или *, сразу же появятся подсказки.

Сами ссылки можно вставлять краткими (только ИД пользователя или сообщества) или полностью (начиная с https://vk.com), например, ссылка на статью в ВК.

Пользоваться всем этим очень просто!

  1. Если мы хотим сделать ссылку на человека ВКонтакте, то просто берём его id и вместо слова «ссылка» вставляем этот id. Ну а слово пишем такое, какое захотим. Например вот так: @andreyorlov96 (Андрей) или так [id26649873|Андрей], что то же самое. В этом случае будет ссылка на мою страницу. При наведении на ссылку вы увидите имя и фамилию человека, его статус и аватар.
  2. Если мы хотим сделать ссылку на группу или страницу, то делаем то же самое, что и в первом случае. Берём id группы и пишем его вместо слова «ссылка». Например вот так: @computerism (Computer Blog). В случае с группами мы увидим название группы, аватар и количество участников.
  3. Если необходимо сделать ссылку на статью в ВК, то после знака * или @ ссылку необходимо писать полностью, начиная с https://vk.com.
  4. Если же мы хотим сделать ссылку на внешний сайт, то просто пишем домен сайта, например, computerism.ru и эти слова сами станут ссылкой. Либо мы можем прикрепить картинку и так же написать адрес сайта, тогда эта ссылка прикрепится к картинке.

Огромная просьба! Когда вставляете ссылку словом, меняйте, пожалуйста, саму ссылку. А то уже очень много раз вставляли ссылку на меня в различных записях, что дезинформирует других людей.

Ну а насчёт последнего пункта, к сожалению, я пока что не знаю как можно сделать ссылку на внешний сайт словом кроме как в вики разметке. О ней вы можете почитать в группе ВКонтакте.

На этом всё! Если возникли какие-либо вопросы, обращайтесь через форму обратной связи либо в комментариях.

Автор: Андрей Орлов

Создание и изменение гиперссылок — Office

Вы можете создавать гиперссылки для перехода в документ Word или письмо Outlook, которое содержит стили заголовков или закладки. Также можно добавлять ссылки на слайды и произвольные показы в презентациях PowerPoint и отдельные ячейки и листы Excel.

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

  1. Выделите текст или рисунок, который должен представлять гиперссылку.

  2. Нажмите CTRL+K.

    Можно также щелкнуть текст или рисунок правой кнопкой мыши и в shortcut-меню щелкнуть ссылку.

  3. В разделе Связать с выберите параметр Место в документе.

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

Необязательно: Чтобы изменить подсказку, которая появляется при наведении указателя на гиперссылку, нажмите кнопку Подсказка в правом верхнем углу диалогового окна Вставка гиперссылки и введите текст.

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

  1. Выделите текст или рисунок, который должен представлять гиперссылку.

  2. Нажмите CTRL+K.

    Можно также щелкнуть текст или рисунок правой кнопкой мыши и в shortcut-меню щелкнуть ссылку.

  3. В группе Связать с щелкните элемент файлом, веб- страницей.

  4. В поле Искать в щелкните стрелку вниз, а затем найдите и выберите файл, на который должна указывать ссылка.

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

Необязательно: Чтобы изменить подсказку, которая появляется при наведении указателя на гиперссылку, нажмите кнопку Подсказка в правом верхнем углу диалогового окна Вставка гиперссылки и введите текст.

Ссылки. Гиперссылки в html. Учебник html

Глава 5

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

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

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

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

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

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

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

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

<a href=»primer.html»>Здесь мои фотки!!</a>

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

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

<a href=» stranica/primer.html»>Здесь мои фотки!!</a> — Такая запись подразумевает, что в директории, где расположен наш первый html документ есть папка stranica в которой расположен файл primer.html
<a href=»../primer.html»>Здесь мои фотки!!</a> — А это значит, что файл primer.html размещен на уровень выше от документа
<a href=»http://www.site.ru/primer.html»>Здесь мои фотки!!</a> — документ расположен на сайте www.site.ru..

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

Пример:

Файл index.html:

<html>
<head>
<title>Делаем ссылкой кусочек текста</title>
</head>
<body>
<div align=»center»>
<br><br><br><b>Скажи мне, милый ребёнок: в каком ухе у меня жужжит?</b>
<br><br><br>
В <a href=»primer.html»>правом</a> или <a href=»primer.html»>левом</a>?
</div>
</body>
</html>

Файл primer.html:

<html>
<head>
<title>Перешли по ссылке сюда</title>
</head>
<body>
<br><br><br><br>
<div align=»center»><font size=»+2″>А вот и не угадал! У меня жужжит в обоих ухах.</font></div>
<br><br><br>
<div align=»center»><a href=» index.html»>Ну я так не играю…</a></div>
</body>
</html>

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

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

Пишется так:

<body link=»#008000″ alink=»#ff0000″ vlink=»#ffff00″>

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

Пример:

Файл index.html:

<html>
<head>
<title>Радуга</title>
</head>
<body link=»#008000″ alink=»#ff0000″ vlink=»#ffff00″>
<center>
<h4>Посмотрите на фразу которая поможет Вам запомнить места цветов в радуге</h4>
<br>
<a href=»primer2.html»>
<font size=»+1″ color=#ff0000>Р</font>
<font size=»+2″ color=#ff8c40>А</font>
<font size=»+3″ color=#ffff00>Д</font>
<font size=»+3″ color=#008000>У</font>
<font size=»+2″ color=#0000ff>Г</font>
<font size=»+1″ color=#800080>А</font>
</a>
</center>
</body>
</html>

Файл primer.html:

<html>
<head>
<title>Радуга</title>
</head>
<body link=»#008000″ alink=»#ff0000″ vlink=»#ffff00″>
<center>
<font size=»+3″>
<font color=#ff0000>Каждый</font>
<font color=#ff8c40>охотник</font>
<font color=#ffff00>желает</font>
<font color=#008000>знать</font>
<font color=#40caff>где</font>
<font color=#0000ff>сидит</font>
<font color=#800080>фазан</font>
</font>
<br><br><br>
<a href=»index.html»>вернуться на главную</a>
</center>
</body>
</html>

Такие вот дела…

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

Вот так:

<a href=»primer3.html»><img src=»knopa.gif»></a>

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

Пишется так:

<a href=»primer3.html» target=»_blank»>открыть в новом окне</a>

Пример:

Файл index.html:

<html>
<head>
<title>кнопка</title>
</head>
<body>
<center>
<h2> Не в коем случае не нажимайте на эту кнопку!!!</h2>
<br>
<a href=»primer3.html» title=»Не нажимать!!!» target=»_blank»><img src=»graphics/knopa.gif» border=»0″ alt=»Не нажимать!!!» ></a>
</center>
</body>
</html>

Файл primer.html:

<html>
<head>
<title>итог..</title>
</head>
<body>
<div align=»center»><font size=»+3″>Ракеты ушли… Америки больше нет…</font></div>
</body>
</html>

Я надеюсь, Вы не додумались нажать большую красную кнопку? Ох уж этот русский менталитет.. 🙂

Что ещё можно почерпнуть из этого примера?

Во-первых. Мы применили уже знакомые атрибуты описания title=»Не нажимать!!!» для тега <a> и одновременно alt=»Не нажимать!!!» для тега <img> если Вы помните, эти атрибуты позволяют сделать нам всплывающие подсказки. Но зачем я их продублировал? Один для ссылки, а другой для рисунка, если сам по себе рисунок является ссылкой?.. долгая история, когда ни будь напишу статью: «Спецификации HTML, браузеры и головная боль..» — а сейчас скажу лишь то, что разные браузеры не всегда воспринимают те или иные теги и их атрибуты. А описание для ссылки картинки нам просто таки необходимо! Помните, я рассказывал, что есть люди, умышленно отключающие загрузку рисунков?- это для них.

Во-вторых. В примере использован атрибут тега <img> border=»0″ — рамка рисунка. 0 — это значит выключить рамку, так как она портит весь вид страницы в данном примере, но бывают случаи когда рамки рисунка вполне актуальны и так сказать вписываются в страницу. Здесь нужно помнить, что когда рисунок является ссылкой, его рамка окрашивается в цвета ссылки: link — цвет ссылки, alink — цвет нажатой, активной ссылки, vlink — цвет посещенной ссылки тега <body>.

Я тут Вас чуть-чуть с толку сбил, вроде бы договаривались вместе писать полноценный сайт, а я тут какие то мелкие примерчики выкладываю.. Не волнуйтесь! В конце главы покажу готовый сайт про Карлсона целиком. А сейчас думаю так будет удобнее Вам читать, и мне писать.. : Да и подразумеваю что Вы уже самостоятельно можете вставлять теги в нужные места.

Напишите мне письмо.. — строчка из того примера..

Для того что бы сделать текст или рисунок ссылкой на e-mail — почтовый ящик его нужно заключить в тег <a>, но не простой, а с использованием mailto

Пишем так:

<a href=»mailto:[email protected]»> Напишите мне письмо.. </a>

Эта непривычная запись будет говорить что, кликнув по тексту ссылке «Напишите мне письмо..» посетитель сайта попадет в свою почтовую программу, которая выдаст ему бланк для отправки письма, где в строчке Кому: уже будет указан нужный нам почтовый ящик [email protected]

Пример:

<html>
<head>
<title>e-mail</title>
</head>
<body>
<center><h3>
<a href=»mailto:[email protected]»> Напишите мне письмо.. </a>
</h3></center>
</body>
</html>

Помимо этого в почтовом бланке можно заранее прописать следующие вещи:

?subject= — Тема пиcьма
&Body= — Текст сообщения
&cc= [email protected],[email protected] — Копии письма
&bcc= [email protected],[email protected] — Скрытые копии письма

Адреса ящиков для копий и скрытых копий письма пишутся через запятую.

Пример:

<html>
<head>
<title>e-mail</title>
</head>
<body>
<center><h3>
<a href=»mailto:[email protected]?subject=А у вас молоко убежало.. &Body=Текст письма &[email protected] &[email protected]»>Напишите мне письмо.. </a>
</h3></center>
</body>
</html>

Закладки или якоря — это особый вид ссылок. Данные ссылки, как правило, не ведут к какому либо документу, а предназначены для навигации внутри страницы.

Предположим на странице в удобном месте находится некое содержание или меню.. по принципу:

Глава1
Глава2
Глава3

А далее идет большой текст с этими главами, так вот чтобы посетитель страницы нажав на одну из этих глав «перенёсся» в нужное место текста нам нужно сделать две вещи:

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

Вот так:

<а name=»glava1″>Глава1 </а>
<а name=»glava2″>Глава2 </а>
<а name=»glava3″>Глава3 </а>

Имя можно присвоить любое необязательно glava1

А теперь собственно прописываем на них ссылки в нашем меню, содержании.

Вот так:

<a href=»#glava1″> Глава1</a>
<a href=»#glava2″> Глава3</a>
<a href=»#glava3″> Глава3</a>

Замете перед каждым именем ставим знак решётки #.

Ладно, думаю, на примере будет понятнее:

<html>
<head>
<title>Закладки</title>
</head>
<body>
<h3>А. С. ПУШКИН</h3>
<a href=»#skazka1″>Сказка о попе и работнике его Балде</a><br>
<a href=»#skazka2″>Сказка о рыбаке и рыбке</a><br>
<a href=»#skazka3″>Сказка о царе Cалтане</a>
<h4><a name=»skazka1″>Сказка о попе и работнике его Балде</a></h4>
<pre>
Жил-был поп,
Толоконный лоб.
… … …
</pre>
<h4><a name=»skazka2″>Сказка о рыбаке и рыбке</a></h4>
<pre>
Жил старик со своею старухой
У самого синего моря.
… … …
</pre>
<h4><a name=»skazka3″>Сказка о царе Cалтане</a></h4>
<pre>
Три девицы под окном
Пряли поздно вечерком.
… … …
</pre>
</body>
</html>

Хотя, как я уже говорил, закладки используют для навигации внутри страницы, на них всё же можно ссылаться с других страниц или сайтов

<a href=»primer.html#glava1″> идем к главе1 с другой страницы сайта</a>
<a href=»http://www.site.ru/ primer.html#glava2″> разместив такую ссылку на любом другом сайте мы согласно указанному пути сначала попадаем на наш сайт www.site.ru надём там документ primer.html и сразу начинам читать главу2</a>

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

Файл index.html:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text=»#484800″ bgcolor=»#ffffff» background=»graphics/fon.jpg»>
<center>
<table cellpadding=»5″ cellspacing=»2″ border=»1″>
<tr>
<td colspan=»3″ bgcolor=»#b2ff80″>
<center><img src=»graphics/privet.jpg» alt=»Привет мир!!!»></center>
</td>
</tr>
<tr>
<td bgcolor=»#ffa0cf»>
<center><b><a href=» index.html»>Обо мне!!!</a></b></center>
</td>
<td bgcolor=»#c0e4ff»>
<center><b><a href=» myfoto.html»>Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor=»#c0e4ff»>
<center><b><a href=»mailto:[email protected]»>Напишите мне письмо..</a></b></center>
</td>
</tr>
<tr>
<td colspan=»3″ valign=»top» bgcolor=»#b2ff80″>
<img src=»graphics/foto.jpg» align=»left» hspace=»10″ alt=»Это моя фотка!!!»>
<p align=»justify»>&nbsp;&nbsp;&nbsp;Разрешите представиться Карлсон! … … …</p>
</td>
</tr>
</table>
</center>
</body>
</html>

Файл myfoto.html:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text=»#484800″ bgcolor=»#ffffff» background=»graphics/fon.jpg»>
<center>
<table cellpadding=»5″ cellspacing=»2″ border=»1″>
<tr>
<td colspan=»3″ bgcolor=»#b2ff80″>
<center><img src=»graphics/privet.jpg» alt=»Привет мир!!!»></center>
</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff»>
<center><b><a href=» index.html»>Обо мне!!!</a></b></center>
</td>
<td bgcolor=»#ffa0cf»>
<center><b><a href=» myfoto.html»>Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor=»#c0e4ff»>
<center><b><a href=»mailto:[email protected]»>Напишите мне письмо..</a></b></center>
</td>
</tr>
<tr>
<td colspan=»3″ valign=»top» bgcolor=»#b2ff80″>
<img src=»graphics/foto1.jpg» align=»middle» vspace=»10″ hspace=»10″ alt=»Это моя фотка!!!»>
это я <br>
<img src=»graphics/foto2.jpg» align=»middle» vspace=»10″ hspace=»10″ alt=»Это моя фотка!!!»>
и это я <br>
<img src=»graphics/foto3.jpg» align=»middle» vspace=»10″ hspace=»10″ alt=»Это моя фотка!!!»>
снова я
</td>
</tr>
</table>
</center>
</body>
</html>

Фух.. ну вроде всё.. Думаю, на этом примере с Карлсоном мы распрощаемся, разросся он через чур.. да и как сайт с точки зрения построения имеет законченный вид…

Он улетел — но обещал вернуться!.. 🙂

Вполне нормальный сайт-визитка получился.. конечно, дизайн не вдохновляет, но зато теперь у Вас будет стимул сделать лучше!! Теперь этот сайт можно выложить в свет, как это сделать читайте в статье «Публикация сайта»

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

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

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

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

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



Создание гиперссылок — Изучение веб-разработки

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

Предварительные требования:Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
Задача:Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.

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

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

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

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите  Ссылки-блоки), который вы хотите превратить в ссылку, в элемент <a>, и придания этому элементу атрибута href (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.

<p>Я создал ссылку на
  <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.
</p>

Это дало нам следующий результат:

Я создал ссылку на домашнюю страницу Mozilla.

Добавляем информацию через атрибут title

Другим атрибутом, который вы можете добавить к своим ссылкам, является — title. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:

<p>Я создал ссылку на
  <a href="https://www.mozilla.org/ru/"
     title="Лучшее место для поиска дополнительной информации
     о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla
  </a>.
</p>

Вот что получилось (описание появится, если навести курсор на ссылку):

Я создал ссылку на домашнюю страницу Mozilla.

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

Активное изучение: создаём собственную ссылку

Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш базовый пример подойдёт.)

  • Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
  • Теперь превратите некоторые фрагменты документа в ссылки.
  • Добавьте ссылкам атрибут title.

Ссылки-блоки

Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <a></a>.

<a href="https://www.mozilla.org/ru/">
  <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу">
</a>

Примечание: вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.

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

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/.

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

Корень структуры — каталог  creating-hyperlinks. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html. На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).

В корне есть ещё два каталога —  pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.

  • Тот же каталог: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html), указывающую на contacts.html, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — contacts.html:

    <p>Хотите связаться с конкретным сотрудником?
   Найдите подробную информацию на нашей
  <a href="contacts.html">странице контактов</a>.
</p>

  • Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html), указывающую на projects/index.html, вам нужно спуститься ниже в директории projects перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете — projects/index.html:

    <p>Посетите мою
  <a href="projects/index.html">домашнюю страницу проекта</a>.
</p>

  • Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри projects/index.html, указывающую на pdfs/project-brief.pdf, вам нужно будет подняться на уровень каталога, затем спустится в каталог pdf. «Подняться вверх на уровень каталога» обозначается двумя точками — .. — так, URL-адрес, который вы используете ../pdfs/project-brief.pdf:

    <p>Ссылка на
  <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>.
</p>

Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: 
../../../сложный/путь/к/моему/файлу.html.

Фрагменты документа

Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут id элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

<h3>Почтовый адрес</h3>

Затем, чтобы связаться с  этим конкретным  id, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

<p>Хотите написать мне письмо? Используйте наш
  <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>.
</p>

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

<p>
  <a href="#Почтовый_адрес">Почтовый адрес кампании</a>
  можно найти в нижней части этой страницы.
</p>

Абсолютные и относительные URL-адреса

Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL:

Абсолютный URL
Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница index.html загружается в каталог, называемый projects, который находится внутри корня веб-сервера, а домен веб-сайта — http://www.example.com, страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/), так как большинство веб-серверов просто ищет целевую страницу, такую ​​как index.html, для загрузки, если он не указан в URL-адресе.).

Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.

Относительный URL
Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла —  project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории pdfs внутри каталога projects, относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf.).

Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf.

Советуем вам основательно разобраться в этой теме!

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

Используйте чёткие формулировки описания ссылок

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

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

Взгляните на этот пример:

Хороший текст ссылки: Скачать Firefox

<p><a href="https://firefox.com/">
  Скачать Firefox
</a></p>

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

<p><a href="https://firefox.com/">
  Нажми сюда
</a>
чтобы скачать Firefox</p>

Советы:

  • Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
  • Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
  • Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
  • Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.

Используйте относительные ссылки, где это возможно

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

  • Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
  • Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.

Создавая ссылки на не HTML ресурсы — добавляйте описание

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

  • Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
  • Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.

Посмотрите на примеры, чтобы увидеть, как добавить описание:

<p><a href="http://www.example.com/large-report.pdf">
  Скачать отчёт о продажах (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Посмотреть видео (видео откроется в отдельном окне, HD качество)
</a></p>

<p><a href="http://www.example.com/car-game">
  Играть в гонки (необходим Flash)
</a></p>

Используйте атрибут download, когда создаёте ссылку

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Скачать Firefox 39 для Windows
</a>

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

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

Что делать:

  1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
  2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
  3. Скопируйте созданное меню в каждую страницу.
  4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.

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

Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент <a> и mailto: — адрес почты.

Самыми простыми и часто используемыми формами mailto: являются  subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

<a href="mailto:[email protected]">Отправить письмо для nowhere</a>

В результате получим ссылку вида: Отправить письмо для nowhere.

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только «mailto:»), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки «Поделиться».

Особенности и детали

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

<a href="mailto:[email protected][email protected]&[email protected]&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

Вот несколько примеров использования mailto URLs:

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

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

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

Первый вариант создания гиперссылки в Word.

Самый простой способ сделать гиперссылку в Word – это ввести адрес существующей веб-страницы, например, напечатать адрес типа https://www.compgramotnost.ru/ и нажать после этого на пробел или на Enter.

В результате автоматически появляется гиперссылка вида: https://www.compgramotnost.ru

Второй вариант как можно сделать гиперссылку в Word.

Рассмотрим создание гиперссылки такого типа: компьютерная грамотность.
Для этого достаточно выделить необходимый текст. По выделенному тексту кликнуть правой кнопкой мыши и в выпадающем меню выбрать опцию «Гиперссылка»:

Кликнув по опции «Гиперссылка», получаем:

Нам нужно текст «компьютерная грамотность» связать с веб-страницей https://www.compgramotnost.ru, то есть сделать так, чтобы после клика по приведенному тексту открывался указанный сайт. Поэтому кликаем по окошку «файлом, веб-страницей», а в поле адрес вводим https://www.compgramotnost.ru. Нажимаем OK и в результате получаем гиперссылку в Word: компьютерная грамотность.

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

Для удаления гиперссылки достаточно:
выделить гиперссылку,
ПКМ (правой кнопкой мыши) кликнуть по гиперссылке:

В результате остается обычный текст без гиперссылки, а именно: компьютерная грамотность.

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

Упражнения по компьютерной грамотности:

Сделайте две гиперссылки в Word, используя два варианта, рассмотренных выше:

1) Первую гиперссылку – с помощью пробела или клавиши Enter.

2) Выделите какой-либо текст в редакторе Word и затем, пользуясь ПКМ (правой кнопкой мыши), сделайте вторую гиперссылку для выделенного текста на какую-нибудь веб-страницу в Интернете.

Рекомендую также прочитать:

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

Встроенная справка о гиперссылке в Ворде

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

Как рисовать в Word?

Гиперссылки и их основные виды



Получайте актуальные статьи по компьютерной грамотности прямо на ваш почтовый ящик.
Уже более 3.000 подписчиков

.

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

Автор: Надежда Широбокова

31 мая 2011

Как добавить гиперссылку в документ Microsoft Word

Мы любим книги. Но на бумаге вы не можете ссылаться на другую книгу.По крайней мере, на этом уровне электронные СМИ имеют явное преимущество. А с Microsoft Word легко добавить гиперссылку в документ.

Но как это работает? В этом посте мы рассмотрим, как добавить ссылку в Microsoft Word, а также как редактировать и удалять гиперссылки в документе.

Как встроить гиперссылку в документ

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

Однако в большинстве случаев вам нужно встроить ссылку в текст. Для этого:

  • Выделите текст, который хотите использовать в качестве ссылки
  • Перейти к Вставить > Ссылки > Ссылка (или щелкните текст правой кнопкой мыши и выберите Ссылка)
  • Введите URL-адрес назначения ссылки в поле Адрес
  • Нажмите ОК , чтобы создать гиперссылку
Меню гиперссылок.

Выделенный текст станет гиперссылкой.

Чтобы проверить ссылку, удерживайте CTRL и щелкните левой кнопкой мыши (или щелкните правой кнопкой мыши и выберите Открыть гиперссылку ). Это откроет место назначения в вашем веб-браузере по умолчанию.

Параметры ссылки в контекстном меню.

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

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

Как редактировать гиперссылки

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

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

Считаете это полезным?

Подпишитесь на нашу рассылку и получайте советы по написанию от наших редакторов прямо на свой почтовый ящик.

  • Текст, который будет использоваться для гиперссылки
  • Назначение ссылки (т. Е. Путь к файлу или URL-адрес)

Если после этого вы нажмете OK , ссылка будет обновлена ​​автоматически.

Как форматировать гиперссылки

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

А если вы хотите изменить стиль гиперссылки по умолчанию, просто:

  • Открыть меню стилей
  • Найдите стиль «Гиперссылка»
  • Щелкните правой кнопкой мыши имя стиля и выберите Изменить…
  • Примените необходимые параметры форматирования и нажмите ОК
Форматирование ссылки в меню «Стили».

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

Как удалить гиперссылку в Microsoft Word

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

Однако, чтобы удалить ссылку и сохранить текст, у вас есть два варианта.

  1. Перейдите к Insert > Links > Link и выберите Remove Link в меню
  2. Щелкните ссылку правой кнопкой мыши и выберите в меню Удалить гиперссылку

MS Word удалит ссылку и любое форматирование из выделенного текста.

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

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

Видео: создание доступных ссылок в Word

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

Создайте более содержательную гиперссылку

  1. Скопируйте ссылку, с которой хотите работать, в документ Word и превратите ее в гиперссылку.

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

  2. Выберите весь URL-адрес, включая «http» в начале и домен в конце.

  3. Щелкните правой кнопкой мыши, чтобы открыть контекстное меню, затем найдите и выберите Изменить гиперссылку .

  4. В диалоговом окне найдите текстовое поле с надписью Текст для отображения . Введите желаемый текст описания.

  5. Нажмите ОК .

Хотите больше?

Специальные возможности в Microsoft 365

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

Вот типичный URL в тексте документа.

Для зрячего пользователя это может показаться нормальным.

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

«http: //www.nps.gove/olym/planyourvisit/lodging.htm»

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

Просто щелкните правой кнопкой мыши гиперссылку на странице и выберите Изменить гиперссылку .

Когда вы выбираете ссылку таким образом, Word автоматически копирует ее в диалоговое окно Edit Hyperlink .Но мы можем изменить отображаемый текст на обычный язык, который людям и программам чтения с экрана будет легче понять.

В поле Text to display введите «National Park Reservations».

. Нажмите ОК .

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

Ссылка для бронирования национальных парков.

И последнее, о чем следует помнить: при добавлении отображаемого текста избегайте таких фраз, как «Щелкните здесь» или «Подробнее».

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

Если отображаемый текст для всех этих ссылок представляет собой одну и ту же общую фразу, это может звучать примерно так:

«Нажмите здесь, ссылку. Нажмите здесь, ссылку, нажмите здесь, ссылку».

Не очень помогает.

Подробнее о создании доступных документов см. На сайте aka.ms/accessible.

Гиперссылки в Word для Интернета

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

В Word для Интернета вы можете вставлять и редактировать гиперссылки, ведущие на веб-адреса или адреса электронной почты, но вы не можете создавать гиперссылки, ведущие в другое место в том же документе (закладки или перекрестные ссылки). Если вам нужно это сделать, нажмите Открыть в Word .

Чтобы создать гиперссылку, щелкните Вставить > Ссылка .

В поле Отображать текст введите текст, по которому люди будут нажимать.Чтобы создать ссылку на веб-адрес, введите или вставьте адрес в поле Адрес .

Совет: Если вам не нужен более удобный для чтения текст, чем веб-адрес, просто введите веб-адрес. Когда вы нажимаете пробел или клавишу Enter, Веб-приложение Word автоматически превращает адрес в гиперссылку.

Чтобы создать ссылку на адрес электронной почты, введите mailto: , а затем адрес электронной почты человека в поле Адрес .

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

Совет: Чтобы отредактировать ссылку, которая уже есть в документе, щелкните в любом месте ссылки, а затем нажмите Вставить > Ссылка . Если вы используете мышь, щелкните ссылку правой кнопкой мыши и выберите Изменить гиперссылку . (на сенсорном устройстве нажмите и удерживайте ссылку, чтобы получить контекстные команды.

Как добавить гиперссылки в документ Word

Гиперссылки есть повсюду, и вы можете использовать их в своих документах Microsoft Word, чтобы помочь вашему читателю перейти на веб-сайты или в другие места в документе. Вот как.

Изображение: Pavel_R, Getty Images / iStockphoto

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

SEE: Резюме: Microsoft Build 2020 (бесплатный PDF) (TechRepublic)

В этой статье вы узнаете, как добавлять гиперссылки в документ Word. (То, что вы узнаете, применимо и к Outlook. Кроме того, я буду использовать термин, связанный с этой статьей.)

Я использую Microsoft 365, но вы можете использовать более ранние версии. Вы можете работать со своим собственным текстом или использовать загружаемый демонстрационный файл .docx. Эта статья не подходит для версии Word для браузера.

Как сделать ссылку на веб-страницу

Ссылка на веб-страницу — это просто и становится обычной практикой. Как правило, ссылка может привести вас к веб-форме или дополнительной информации по определенной теме. Давайте проиллюстрируем это быстрым примером:

  1. Откройте браузер, перейдите на любую страницу и скопируйте URL-адрес в буфер обмена.Для наших целей вы можете скопировать это: https://www.wildflower.org/plants/.
  2. Перейдите к тексту, к которому вы хотите добавить ссылку, выберите его и щелкните правой кнопкой мыши. В нашем демонстрационном файле это будут первые два слова в первом абзаце (, рис. A, ).
  3. Выберите «Ссылка» в появившемся подменю.
  4. В появившемся диалоговом окне щелкните внутри элемента управления Адрес и вставьте скопированный URL. Обратите внимание, что отображаемый текст отображает выделенный текст Virginia bluebell .
  5. Нажмите ОК.

Рисунок A

Добавьте URL-адрес к выделенному тексту.

Чтобы использовать ссылку, удерживайте нажатой клавишу Ctrl и щелкните форматированный текст — стиль Word для ссылок универсален: подчеркнутый синий шрифт. Вы можете изменить формат, но ссылка не будет видна вашим читателям.

Ссылка откроет ваш браузер на связанный URL. Как вы можете видеть на рис. B , URL-адрес и инструкции по переходу отображаются на экране в виде подсказки.

Рисунок B

Ссылка приведет вас на связанную страницу.

Как создать ссылку на контент в том же документе

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

  1. Начнем с добавления заголовка к короткому абзацу на колокольчиках и оформим его как Заголовок 3, а затем сразу добавим курсив.
  2. Затем выберите изображение колокольчика, щелкните правой кнопкой мыши и выберите «Ссылка» (, рисунок C, ). (Изображение частично закрыто подменю.)
  3. В открывшемся диалоговом окне нажмите «Поместить в этот документ» на панели «Ссылка на» (слева).
  4. При необходимости разверните узел «Заголовки» в списке «Выберите место в этом документе» ( Рисунок D ).
  5. Нажмите ОК.

Рисунок C

Щелкните изображение правой кнопкой мыши, чтобы начать процесс.

Рисунок D

Определите заголовок, содержащий контент, на который вы хотите создать ссылку.

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

  1. Сначала скопируйте текст заголовка ( Mertensia virginica ) в буфер обмена.
  2. Щелкните изображение правой кнопкой мыши и выберите «Редактировать ссылку».
  3. В открывшемся диалоговом окне щелкните всплывающую подсказку (вверху справа).
  4. В появившемся диалоговом окне вставьте текст заголовка ( Рисунок E ).
  5. Дважды нажмите ОК.

Теперь, когда вы наводите указатель мыши на изображение колокольчика, в подсказке на экране отображается заголовок раздела, к которому будет обращаться ссылка ( Рисунок F ).

Рисунок E

Введите или вставьте текст подсказки на экране.

Рисунок F

На подсказке экрана отображается текст заголовка.

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

Как создать ссылку на закладку

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

  1. Щелкните вкладку «Вставка», а затем щелкните «Закладка» в группе «Ссылки».
  2. В открывшемся диалоговом окне введите или вставьте имя закладки. Как вы можете видеть на рис. G , между родом и видом нет места. Закладки должны начинаться с буквенного символа и не могут содержать пробелов.
  3. Щелкните «Местоположение» (поскольку мы создаем ссылку).
  4. Щелкните «Добавить», затем щелкните «ОК».

Рисунок G

Введите имя закладки.

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

SEE: Microsoft Word: Как использовать автозамену для обработки нежелательных слов (TechRepublic)

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

Следите за обновлениями

Вскоре мы рассмотрим те же типы примеров, используя подсказки на экране вместо ссылок.

См. Также

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

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

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

Создание гиперссылки на определенное место в том же документе Word