Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

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

Добавлено автор alexxlab

Содержание

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

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

Предварительные требования:Базовое знакомство с 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:

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

Ссылки. Гиперссылки в 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 это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.

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

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



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

Гиперссылка является мостиком для перехода в указанный пункт назначения. Документ, содержащий гиперссылку, называют гипертекстовым. Гипертекст — это система страниц с текстом, которые связаны ссылками.

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

Содержание:
1. Зачем нам гиперссылки
2. Гиперссылка на страницу ВКонтакте
3. Гиперссылка на примере группы Subcribe

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

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

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

1) Находим и открываем ВКонтакте ту страницу, на которую нужно сделать гиперссылку, например:

Рис. 1. Находим страницу ВК и ссылку на нее

2) Затем кликаем по ссылке правой кнопкой мыши для того, чтобы ее выделить (то есть, закрасить синим цветом). В появившемся меню

  • либо щелкаем “Копировать”,
  • либо нажимаем на горячие клавиши Ctrl+C:

Рис. 2. Копировать ссылку на страницу ВКонтакте

3) Теперь ссылка ВК скопирована и таким образом помещена в буфер обмена (т.е. в оперативную память компьютера). Хочу обратить ваше внимание на один важный момент. В буфере обмена может временно храниться только самый последний скопированный объект, предыдущий объект автоматически затирается (уничтожается) новым. Как говорится, «король  умер (старая копия стерта). Да здравствует король! (появилась новая копия)». Таким образом, щёлкая по кнопке «Копировать», сразу мысленно прощайтесь со старым скопированным объектом и приветствуйте новый объект.

4) Далее ссылку из буфера обмена надо вставить там, где это требуется, например, во ВКонтакте или на другом каком-то сайте.

Допустим, надо вставить ссылку на странице ВК или в комментарии. Можно написать сопроводительный текст, к примеру, “Моя страница находится здесь” (1 на стр. 3). И в том месте, где стоит курсор (а именно тут и будет вставлена гиперссылка),

  • либо кликните на правую кнопку мыши,  а затем “Вставить” (2 на рис. 3),
  • либо нажмите на горячие клавиши Ctrl+V.

Рис. 3. Вставить ссылку на страницу ВК

5) После того, как ссылка будет вставлена, нажимаем “Отправить” (1 на рис. 4):


Рис. 4. Ссылка вставлена. После нажатия на “Отправить” она превратится в гиперссылку.

Когда ссылка отправлена, она автоматически превратится в гиперссылку синего цвета (2 на рис. 4) и станет кликабельной.

Описанную выше методику вставки гиперссылки можно применять для вставки в текстовом редакторе MS Word, электронных таблицах MS Excel, презентациях Power Point и т.п.

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

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

Делаем гиперссылку на примере группы Subscribe

Рассмотрим, как вставить гиперссылку, на примере комментариев в группе «Компьютерная грамотность».

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

  • выделяем ссылку,
  • щёлкаем правой кнопкой мыши для появления меню
  • и затем левой кнопкой мыши кликаем в появившемся меню по «Копировать»:

Рис. 5. Выделяем ссылку и копируем ее

Теперь ссылка скопирована:

Рис. 6. Сюда надо вставить ссылку, которая предварительно должна быть скопирована

Возвращаемся на Subscribe.ru в группу «Компьютерная грамотность». Здесь в комментариях следует написать текст или вставить ссылку вида http://….., которая в данном случае будет восприниматься   как обычный текст. Выделяем этот текст (как показано ниже), при этом значок «цепочки» (на картинке обведен красным) становится «активным»:

Рис. 7. Вставляем гиперссылку на Сабскрайбе

Левой кнопкой мышки щёлкаем по значку «цепочки». При этом открывается окно «Добавить/ изменить ссылку». Здесь в окно «Адрес ссылки» надо ввести скопированный ранее адрес ссылки, который уже находится в буфере обмена. Для этого можно щелкнуть правой кнопкой мыши и в выпавшем при этом меню кликнуть по опции «Вставить». В окне «Открыть в …» лучше установить «новом окне».

Теперь осталось только щёлкнуть по кнопке «Вставить». Как сказала одна из участниц группы, ссылку удалось «засинить», т.е. она стала гиперссылкой с характерной синей подсветкой.

Дополнительные материалы:

1. Что такое фотохостинги или как загрузить картинку и получить ссылку

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

3. Сравнение возможностей Word и Excel для работы с таблицами



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

.

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

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

15 июня 2018

Ссылки HTML, как сделать ссылку (гиперсылку) в html. Уроки для начинающих академия


Ссылки встречаются практически на всех веб-страницах. Ссылки позволяют пользователям щелкать их путь от страницы к странице.

HTML ссылки-гиперссылки

Ссылки HTML являются гиперссылками.

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

При наведении указателя мыши на ссылку, стрелка мыши превратится в маленькую руку.

Примечание: Ссылка не обязательно должна быть текстом. Это может быть изображение или любой другой HTML-элемент.

HTML ссылки-синтаксис

В HTML ссылки определяются тегом <a>:

<a href=»url«>текст ссылки</a>

Пример

<a href=»https://html5css.ru/html/»>Посетите наш HTML Справочник</a>

href атрибут указывает адрес назначения (https://html5css.ru/HTML/) ссылки.

текст ссылки является видимой частью (см. наш учебник по HTML).

Щелчок по тексту ссылки отправит вас по указанному адресу.

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

Локальные ссылки

В приведенном выше примере используется абсолютный URL (полный веб-адрес).

Локальная ссылка (ссылка на тот же веб-узел) указывается с относительным URL-адресом (без http://www….).

Пример

<a href=»html_images.php»>HTML Images</a>

Цвета ссылок HTML

По умолчанию ссылка будет выглядеть так (во всех браузерах):

  • Непосещаемая ссылка подчеркнута и синяя
  • Посещаемая ссылка подчеркнута и пурпурная
  • Активная ссылка подчеркнута и красная

Можно изменить цвета по умолчанию с помощью CSS:

Пример


a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

HTML ссылки-целевой атрибут

Атрибут target указывает, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

  • _blank — Открытие связанного документа в новом окне или вкладке
  • _self — Открывает связанный документ в том же окне/вкладке, в котором он был нажат (по умолчанию)
  • _parent — Oручка связанного документа в родительском фрейме
  • _top — Открытие связанного документа в полном тексте окна
  • framename — Открытие связанного документа в именованном фрейме

В этом примере откроется связанный документ в новом окне обозревателя/вкладка:

Примере

<a href=»https://html5css.ru/» target=»_blank»>Visit html5css.ru!</a>

Совет: Если веб-страница заблокирована в рамке, можно использовать target="_top" для выхода из кадра:

Пример

<a href=»https://html5css.ru/html/» target=»_top»>HTML5 tutorial!</a>

HTML ссылки-изображение как ссылка

Он является общим для использования изображений в качестве ссылки:

Пример

<a href=»default.php»>
  <img src=»smiley.gif» alt=»HTML tutorial»>
</a>

Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).

Названия ссылок

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

Пример

<a href=»https://html5css.ru/html/» title=»Go to html5css.ru HTML section»>Visit our HTML Tutorial</a>

HTML ссылки-создать закладку

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

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

Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.

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

Пример

Сначала создайте закладку с атрибутом id:

<h3>Chapter 4</h3>

Then, add a link to the bookmark («Jump to Chapter 4»), from within the same page:

<a href=»#C4″>Jump to Chapter 4</a>

Or, add a link to the bookmark («Jump to Chapter 4»), from another page:

Example

<a href=»html_demo.html#C4″>Jump to Chapter 4</a>

Внешние контуры

На внешние страницы можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для ссылки на веб-страницу:

Пример

<a href=»https://html5css.ru/html/default.php»>HTML tutorial</a>

В этом примере ссылки на страницу, расположенную в папке HTML на текущем веб-узле:

Пример

<a href=»/html/default.php»>HTML tutorial</a>

В этом примере ссылка на страницу, расположенную в той же папке, что и текущая страница:

Пример

<a href=»default.php»>HTML tutorial</a>

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.

Справка

  • Используйте элемент <a> для определения ссылки
  • Используйте атрибут href для определения адреса ссылки
  • Использование атрибута target для определения места открытия связанного документа
  • Используйте элемент <img> (внутри < a >) для использования изображения в качестве ссылки
  • Используйте id атрибут (ID = «value«) для определения закладок на странице
  • Используйте href атрибут (href = «#value«) для связи с закладкой

Теги ссылок HTML

ТегОписание
<a>Определяет гиперссылку

Гиперссылки: учебник HTML:

Что такое гиперссылка?

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

Ссылка устанавливается с помощью парного тэга <A> (от английского anchor — якорь). Тэг имеет параметр HREF, который указывает адрес документа. Ссылкой является вся информация, расположенная между открывающим <A> и закрывающим </A> тэгами.

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

По умолчанию ссылки выделяются синим цветом и подчеркиваются. Ссылки на документы, которые вы уже посетили, выделяются фиолетовым цветом. Изменить эти цвета можно прямо в параметрах тэга <BODY>:

<BODY LINK=»red» VLINK=»#00FF00″ ALINK=»blue»>

Параметр LINK обозначает цвет обычной ссылки, VLINK — цвет посещенной ссылки, ALINK — цвет ссылки, над которой находится курсор мыши.

Ссылки на другие страницы сайта

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

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

<A HREF=»table.htm»> Таблицы </A>

Ссылка на документ index.html в подкаталоге primer запишется в виде:

<A HREF=»primer/index.html»> Примеры </A>

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

<A HREF=»../text/index.htm»> Примеры </A>

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

Ссылки на сайты в Интернете

Для того, чтобы сделать ссылку на сайт в Интернет, надо указать полный URL документа, включая протокол, сайт, каталог и имя файла. Например, ссылка Досье, связанная с файлом http://kpolyakov.spb.ru/dosie.htm, сделана так:

<A HREF=»http://kpolyakov.spb.ru/dosie.htm»>
Досье
</A>

Если в адресе указаны только протокол и адрес сайта, открывается главная страница сайта, которая обычно имеет имя index.htm, index.html или default.htm (это зависит от Web-сервера на этом сайте).

Тэг <A> имеет также параметр TARGET, который говорит браузеру, где открывать окно. После него может стоять имя открытого окна (если такого окна нет, то открывается новое окно с таким именем) или одно из следующих значений

  • _blank — открыть в новом окне
  • _parent — открыть в родительском окне
  • _top — открыть на полном экране

Последние два значения используются при работе с фреймами. Например, ссылка на сайт mail.ru, который всегда открывается в новом окне, сделана так:

<A HREF=»https://mail.ru»
   TARGET=»_blank»>mail.ru</A>

Ссылки внутри страницы

Язык HTML позволяет делать ссылки внутри страницы, а также в любую часть этой же или любой дроугой страницы. Для этого в нужном месте надо установить «якорь» — тэг <A> с параметром NAME, который задает имя или метку. Вот как выглядит переход на подраздел Ссылки на другие страницы сайта этой страницы:

<A HREF=»#otherrefs»>
   «Ссылки на другие страницы сайта»</A>

Чтобы ссылка сработала, в нужном месте надо установить «якорь»:

<A NAME=»otherrefs»></A>

Имя otherrefs — это метка якоря, при обращении к ней в параметре HREF надо поставить знак #, который говорит, что это метка, а не имя файла.

Можно также перейти на любую метку в другом файле. Например, переход на метку font_tag в файле texts.htm, где описаны параметры тэга FONT, выглядит так:

<A HREF=»texts.htm#font_tag»>
   параметры тэга FONT</A>

Конечно, в нужном месте файла texts.html должен стоять «якорь» с именем font_tag:

<A NAME=»font_tag»></A>

Следующий раздел рассказывает о списках.

Как сделать ссылку | htmlbook.ru

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>, который имеет единственный обязательный атрибут href. В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Абсолютная ссылка</title>
 </head>
 <body>
  <p><a href="http://www.yandex.ru">Поисковая система Яндекс</a></p>
 </body>
</html>

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

Примеры относительных адресов

/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.

/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.

manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).

Пример 2. Использование относительных ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Относительная ссылка</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p>
 </body>
</html>

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.

Как сделать ссылку в HTML

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

Простые ссылки

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

В языке HTML для создания ссылок используется тег <a> и его атрибуты.

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

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

href — атрибут тега <a>, значением которого и будет адрес ссылки. Ссылаетесь ли вы на сайт, веб-страницу или файл — не важно, отличаться будет только значение этого атрибута.

Теперь рассмотрим строку HTML-кода:

<a href="http://seostop.ru">Ссылка</a>

Вся строка создаёт ссылку, ведущую на главную страницу нашего сайта и называющуюся «Ссылка». В действии код будет выглядеть так:

Ссылка

Теперь рассмотрим каждый элемент строки.

<a> — это тег, отвечающий за создание ссылки.

</a> — закрывающий тег.

Между символами > и < расположен текст Ссылка. Его будет видеть открывший страницу пользователь, на него он будет щёлкать, чтобы перейти по заданному в ней адресу.

href=”http://seostop.ru” — атрибут и значение, благодаря которым обозреватель понимает, куда следует перейти.

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

Абсолютная ссылка — это ссылка, адрес которой указывается полностью, включая протокол и URL домена. Ссылка из примера выше как раз была абсолютной.

Относительная ссылка — это ссылка, адрес в которой указывается относительно текущей веб-страницы.

Суть и назначение относительных ссылок, а также их отличие от абсолютных, можно объяснить простым примером. Вы спрашиваете на улице: «Где находится библиотека» и вам отвечают: «За углом слева». Это относительная ссылка. А если вам отвечают: «Россия, Москва, ул. Ленина, 5» — это уже ссылка абсолютная. Она не так коротка, как относительная, но зато очень точна. Если вы перейдёте на другую улицу, относительная ссылка «За углом слева» потеряет актуальность. Абсолютный же адрес останется актуальным. В Сети — то же самое.

Относительные ссылки можно использовать внутри сайта. Например, у вас на сервере (адрес сайта test1.ru) в одной и той же папке (пусть она будет называться pages) лежат две страницы: page1.html и page2.html. Со страницы page1.html вы хотите сослаться на документ page2.html.

Абсолютная ссылка будет выглядеть так:

<a href="http://test1.ru/pages/page2.html">Текст ссылки</a>

Относительная будет такой:

<a href="page2.html">Текст ссылки</a>

Папка верхнего уровня обозначается как (..). Например, если со страницы page1.html вам надо сослаться на файл home.html, который лежит в корне сайта, ссылка будет выглядеть так:

<a href="../home.html"<Текст ссылки</a>

Внутренние ссылки

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

Чтобы на разделы страницы ссылаться, их надо как-то идентифицировать. Для этой цели используется якорь — специальное имя раздела, которое нужно будет задать в качестве значения атрибуту href, чтобы на раздел сослаться. Идентификатор должен быть уникальным (то есть на одной странице не должно быть двух одинаковых якорей) и состоять из букв латинского алфавита.

Имя якоря указывается в атрибуте id любого HTML-тега.

Например, внизу HTML-документа вы хотите разместить ссылку «Вверх», которая будет вести к его началу — заголовку «Начало страницы». Для этого вам нужно поставить в начале страницы якорь, а внизу страницы — ссылку на него.

Пусть якорь будет называться begin. Тогда в тег, к содержимому которого будет вести ссылка, нужно добавить атрибут id со значением begin.

<h2 id=”begin”>Начало страницы</h2>

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

<a href=”#begin”>Наверх</a>

Обратите внимание: перед названием якоря стоит решётка — это отличительная черта внутренних ссылок.

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

С появлением HTML 5 тег <a> превратился в контейнер, способный вмещать в себя блочные элементы, так что ссылкой теперь может быть не только текст или картинка, но даже таблица, список или целая страница.

Создаётся ссылка-картинка, как и любая другая ссылка: значением атрибута href задаётся адрес ссылки, а между тегами <a></a> вставляется любое содержимое, в рассматриваемом случае — изображение.

Например, если вы хотите сделать ссылкой на сайт mail.ru картинку с именем image.jpg, которая лежит в папке рядом с вашей веб-страницей, то нужный код будет таким (о вставке картинок на страницу читайте в другой статье):

<a href=”http://mail.ru”>
<img src=”image.jpg” alt=”Картинка-ссылка”>
</a>

Ссылки на e-mail и Skype

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

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

<a href=mailto:[email protected]>Пишите на почту!</a>

Для создания ссылки на логин Skype перед именем пользователя следует добавить skype:. Например:

<a href=”skype:mylogin”>Позвонить мне в Skype</a>

Полезные ссылки:

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

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

Советы:

  • Узнайте о добавлении закладок.

  • Чтобы добавить стиль заголовка, выберите текст заголовка, щелкните вкладку Home в Word или вкладку Format Text в Outlook и выберите стиль в группе Styles .

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

  1. Выберите текст или изображение, которое вы хотите отобразить в виде гиперссылки.

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

    Вы также можете щелкнуть правой кнопкой мыши текст или изображение и выбрать Ссылка в контекстном меню.

  3. В разделе Ссылка на щелкните Поместить в этот документ .

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

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

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

  1. Выберите текст или изображение, которое вы хотите отобразить в виде гиперссылки.

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

    Вы также можете щелкнуть правой кнопкой мыши текст или изображение и выбрать Ссылка в контекстном меню.

  3. В разделе « Ссылка на » щелкните «Существующий файл » или «Веб-страница ».

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

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

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

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

Последнее изменение: 07.12.2020, 19:04 EST

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

Интерактивная текстовая ссылка

  1. Выделите текст, на который вы хотите создать ссылку.
  2. Щелкните значок звена цепи слева от U.
  3. Появится всплывающее окно «Информация о ссылке».
  4. Выберите «Тип ссылки» (установите ссылку на внутреннюю страницу, URL-адрес, номер телефона).
    • Одна из ваших страниц — Любая страница вашего сайта.
    • Раздел (или якорь) — Любой раздел или якорь на любой странице вашего сайта.
    • Электронная почта — адрес электронной почты (при необходимости откроется приложение электронной почты зрителя)
    • Другой веб-сайт — Любой внешний URL-адрес.
    • Номер телефона — номер телефона (при необходимости откроется приложение для просмотра в телефоне)
  5. Нажмите «ОК», чтобы добавить ссылку.
  6. Нажмите «Сохранить», чтобы сохранить изменения на странице.

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

Интерактивная ссылка от объекта

  1. Щелкните объект, который хотите использовать в качестве ссылки.
  2. В меню редактирования выберите «Связать».
  3. Щелкните раскрывающееся меню рядом с «Link To», чтобы указать, куда вы хотите перейти по ссылке.
    • Одна из ваших страниц — Любая страница на вашем сайте
    • A Раздел (или якорь) — Любой раздел на любой странице вашего сайта.
    • Электронная почта — адрес электронной почты (при необходимости откроется приложение электронной почты зрителя)
    • Другой веб-сайт — Любой внешний URL-адрес. Вам нужно будет добавить http: // или https: // перед добавлением веб-адреса.
    • Номер телефона — Номер телефона (при необходимости откроется приложение для просмотра в телефоне)
    • Видео-лайтбокс — Откроется видео-лайтбокс с URL-адресом видео Youtube или Vimeo.
  4. Щелкните «Создать ссылку», чтобы создать ссылку.
  5. Нажмите «Сохранить», чтобы сохранить изменения на странице.

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

Чтобы вставить веб-ссылку:

Чтобы вставить веб-ссылку:

Вставьте внешнюю веб-ссылку

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

  1. Введите текст, который вы хотите использовать для ссылки.

  2. Выделите текст.

  3. Щелкните, вставьте гиперссылку.

  4. В поле URL-адрес связанной страницы или файла введите URL-адрес сайта, на который вы ссылаетесь (если он внешний).Если вы ссылаетесь на привязку на другой странице, вам нужно будет добавить строку «#bookmark name» к URL-адресу. Если вы устанавливаете ссылку на внутреннюю привязку, пропустите это поле и перейдите к шагу 5.

    5. Если вы не начинаете URL-адрес с соответствующего протокола (например, mailto: для ссылки адреса электронной почты или http: // для веб-сайта), откроется всплывающее окно подтверждения, предлагающее вставить правильный префикс.

  5. При необходимости выберите якорь.Любая привязка, которую вы определили в своем документе, появится в этом раскрывающемся списке привязок. Строка «#bookmark name» будет вставлена ​​в поле URL ссылки.

    6. Если вы создаете ссылку только на внутреннюю привязку, вам не нужно указывать URL. См. Раздел «Вставка якоря (закладки)».

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

  7. Щелкните «Вставить». Вы вернетесь в визуальный редактор CMS, где выделенный текст указывает на активную ссылку.

  1. Щелкните ссылку правой кнопкой мыши.

  2. Щелкните «Вставить / изменить ссылку».

  3. В окне «Гиперссылка» отредактируйте URL-адрес.

  4. Щелкните ОК.

    5. Примечание: Если вы указали коды источника или субисточника в форме пожертвования, вы можете редактировать коды, выбрав ссылку и щелкнув «Вставить ссылку» или щелкнув ссылку правой кнопкой мыши и выбрав «Вставить / изменить ссылку» в контекстном меню. .

  1. Щелкните ссылку правой кнопкой мыши.

  2. Щелкните, разорвите связь.

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

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

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

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

Любой текстовый элемент вашего веб-сайта может быть преобразован в гиперссылку, которая направляет пользователей на другую страницу вашего сайта или на любой внешний веб-сайт. Этим можно управлять с помощью вкладки «Цель» окна «Ссылка». Хотя это хорошая идея, давать ссылки на другие страницы вашего собственного сайта, как правило, не рекомендуется размещать ссылки с вашего сайта.Если на другом веб-сайте есть хорошая информация о a, вам следует разместить эту информацию на своем веб-сайте. Однако вы никогда не должны копировать и вставлять что-либо с любого другого веб-сайта и размещать это на своем веб-сайте. Поисковые системы, такие как Google, будут ранжировать вас ниже, если у вас сначала будет контент, который существовал на любом другом веб-сайте. Поэтому лучше всегда переписывать информацию своими словами.

Совет: По умолчанию гиперссылки, которые вы посетили, окрашены в фиолетовый цвет; если вы не были на этой странице, гиперссылка будет синей.

Гиперссылка на изображение

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

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

Как сделать ссылку в Конструкторе сайтов? — Поддержка

Шаг 1. Выделите текст
Шаг 2. Щелкните значок ссылки
Шаг 3. Выберите, где вы хотите создать ссылку на
Шаг 4. Выберите, должна ли ссылка открываться в новом окне
Шаг 5 — Готово!

Шаг 1. Выделите текст

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

Шаг 2. Щелкните значок ссылки

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

Шаг 3. Выберите, где вы хотите создать ссылку на

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

  • Страница в Конструкторе веб-сайтов — Ссылка на существующую страницу в Конструкторе веб-сайтов, например, страницу контактов.
  • Файл — Ссылка на файл, который находится в вашем интернет-магазине, например, PDF-файл с вашими условиями ведения бизнеса.
  • Внешний URL — Ссылка на другой веб-сайт, возможно, на интересную статью или руководство.
  • Электронная почта — Введите адрес электронной почты, на который вы хотите создать ссылку. Если посетитель нажимает на эту ссылку, в почтовой программе пользователя по умолчанию запускается новое электронное письмо.

Шаг 4. Выберите, должна ли ссылка открываться в новом окне

Вы можете открыть ссылку в новом окне браузера.Это может быть хорошей идеей, если вы ссылаетесь на внешний сайт. Таким образом, ваш посетитель по-прежнему будет открывать ваш сайт.

  1. Установите флажок в нижнем левом углу, если вы хотите открыть ссылку в новой вкладке.
  2. Нажмите Сохранить , чтобы создать ссылку.

Шаг 5 — Готово!

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

Совет: Внешний вид ссылки определяется вашими стилями глобальной ссылки .

Статьи по теме:

Как создать ссылку на изображение?
Как сделать ссылку на почту?

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

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

ПРИМЕЧАНИЕ. Создание гиперссылки отличается от связывания ячеек (которое позволяет ссылаться на ячейки на другом листе).Дополнительные сведения о связывании ячеек см. В разделе Ссылки ячеек: консолидация или поддержание согласованности данных.

Создать гиперссылку в ячейке

  1. Щелкните правой кнопкой мыши ячейку, в которую вы хотите вставить гиперссылку, и выберите Гиперссылка .

    Появится окно Hyperlink .

    СОВЕТ. Вы также можете выбрать ячейку и использовать сочетание клавиш Ctrl + K (Command + K на Mac), чтобы открыть окно гиперссылки.

  2. Выберите вариант Link to URL или Link to other Smartsheet .

    • Ссылка на URL: При выборе этого параметра введите веб-адрес веб-сайта, на который вы ссылаетесь (например, abcwebsite.com). Smartsheet автоматически добавляет «http: //».

      ПРИМЕЧАНИЕ. Длина URL-адреса ограничена 900 символами. Ссылки на внутренние серверы (например, серверы Microsoft SharePoint) не поддерживаются.

    • Ссылка на другой Smartsheet: При выборе этого параметра щелкните <выбрать лист> .Появится форма Открыть лист . Выберите лист, на который вы хотите создать ссылку, и нажмите OK .

      ПРИМЕЧАНИЕ. Ссылки на листы не отображаются на опубликованном листе. Открытый доступ к листу можно предложить только путем ссылки на опубликованный URL-адрес листа.

  3. Введите или отредактируйте текст в поле Display Text .

    ПРИМЕЧАНИЕ. Это поле обязательно, если вы выбрали параметр Связать с другим Smartsheet .Если вы выбрали опцию Ссылка на URL-адрес и ничего не вводили в это поле, отобразится URL-адрес.

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

Текст ячейки представляет собой действующую ссылку на веб-сайт или другой лист.

ПРИМЕЧАНИЕ. URL-адреса, которые вы вводите непосредственно в ячейку, также будут отображаться как интерактивные ссылки.

Изменение URL-адреса гиперссылки и отображаемого текста

Если вам нужно изменить отображаемый текст или саму ссылку:

  1. Щелкните ячейку правой кнопкой мыши и выберите Гиперссылка .
  2. Внесите желаемые изменения в ссылку и нажмите OK .

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

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

Удалить гиперссылку и любой отображаемый текст

Для полного удаления ОБЕИ ссылки и связанного с ней отображаемого текста (оставив ячейку пустой):

  1. Выберите ячейку, содержащую гиперссылку.
  2. Нажмите клавишу удалить (или backspace ) на клавиатуре.
Удалить гиперссылку и сохранить любой отображаемый текст

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

  1. Выберите ячейку, содержащую гиперссылку.
  2. Нажмите клавиши Ctrl + C (command + C на Mac) на клавиатуре.
  3. Щелкните правой кнопкой мыши ячейку, содержащую гиперссылку, и выберите «Специальная вставка».

    Появится форма «Специальная вставка».

  4. Выберите значений.

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

Ссылки на сайты | Справка Blackboard

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

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

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

На панели «Новая ссылка» введите имя и необязательное описание. Если вы не добавите имя для ссылки, новая ссылка и дата появятся для студентов на странице «Материалы курса». Вставьте или введите URL-адрес и выберите значок земного шара для предварительного просмотра веб-сайта. Ссылка скрыта от учащихся, пока вы не решите ее показать. Выберите видимость, чтобы изменить ее. По завершении выберите Сохранить.

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

Студенты не видят цели, которые вы согласовываете с помощью веб-ссылки.

На странице «Материалы курса» откройте меню ссылки. Выберите «Изменить», а затем выберите «Согласовать с целями», чтобы найти доступные цели для согласования с этим элементом.

Подробнее о том, как согласовать цели с содержанием курса

Вы можете вернуть и отредактировать информацию в любое время.Укажите ссылку, чтобы раскрыть ее функции управления. Выберите значок «Переместить» и перетащите ссылку в новое место в списке содержимого. Откройте меню ссылки, чтобы удалить или отредактировать ссылку. Например, вы можете изменить название ссылки.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *