Как создать гиперссылку с помощью KompoZer

Возможность создать ссылку в документе, который приведет вас к другому документу, возможно, в сети, находящейся на полпути по всему миру, является, пожалуй, самой важной причиной, по которой была изобретена Всемирная паутина. Эти ссылки, называемые гиперссылками, являются «H» в HTML (язык разметки гипертекста). Без гиперссылок Интернет был бы не очень полезен. Не было бы никаких поисковых систем, социальных сетей или баннерной рекламы (хорошо, большинство из нас могло бы стоять, чтобы увидеть это).

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

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

Создание гиперссылки с помощью KompoZer

Доступ к инструментам гиперссылки KompoZer можно получить, нажав кнопку «Ссылка» на панели инструментов. Чтобы создать гиперссылку:

  1. Поместите курсор на страницу, где вы хотите разместить гиперссылку.
  2. Нажмите кнопку «Ссылка» на панели инструментов. Откроется диалоговое окно «Свойства ссылки».
  3. Первое поле, которое вам нужно заполнить, это поле «Текст ссылки». Введите текст, который вы хотите, чтобы появиться на странице для вашей гиперссылки.
  4. Второе поле, которое вам нужно заполнить, это поле Link Location. Введите URL-адрес страницы, по которой ваша гиперссылка примет пользователя при нажатии. Рекомендуется скопировать и вставить URL-адрес из адресной строки вашего браузера. Таким образом, вероятность того, что вы совершите ошибку, намного ниже, и вы знаете, по крайней мере, во время создания своей ссылки, что страница жива и эта ссылка не повреждена.
  5. Нажмите кнопку ОК, и диалоговое окно «Свойства ссылки» закроется. Ваша ссылка теперь появится на вашей странице.

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

Создание якорной ссылки с KompoZer

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

KompoZer позволяет создавать якоря, на которые вы можете ссылаться с помощью инструмента «Якорь» на панели инструментов.

  1. Нажмите на область вашей страницы, где вы хотите привязку. То есть туда, куда вы хотите, чтобы просмотрщик страниц переходил при нажатии на ссылку привязки. В этом примере я щелкнул непосредственно перед «F» в заголовке «Любимая музыка».
  2. Нажмите кнопку привязки на панели инструментов. Откроется диалоговое окно Свойства именованной привязки.
  3. Каждый якорь на странице должен иметь уникальное имя. Для этого якоря я использовал название «музыка».
  4. Нажмите кнопку ОК, и вы должны увидеть, и символ привязки появится в том месте, где вы хотели привязку. Этот символ не будет отображаться на вашей веб-странице, просто KompoZer показывает вам, где находятся ваши якоря.
  5. Повторите процедуру для любых других областей страницы, на которые вы хотите, чтобы пользователи могли переходить. Если на странице много текста, разделенного заголовками или каким-либо другим логическим разделителем, привязки – это простой способ навигации по странице.

Далее мы создадим ссылки, которые приведут читателя к якорям, которые вы создали.

Создание навигации по страницам с помощью KompoZer

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

Создание гиперссылок на якоря с помощью KompoZer

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

  1. Выберите текст, который вы хотите превратить в ссылку. В этом примере я выбрал текст «Любимая музыка», который находится в первой ячейке таблицы вверху страницы.
  2. Нажмите кнопку «Ссылка» на панели инструментов. Откроется диалоговое окно «Свойства ссылки».
  3. В этом случае мы выбрали текст, прежде чем нажать кнопку «Ссылка», поэтому раздел «Текст ссылки» окна уже заполнен и не может быть отредактирован. Нажмите стрелку вниз в разделе Расположение ссылки. Вы увидите список якорей, которые вы создали на предыдущих шагах. Для этого примера я выбрал #music anchor.
  4. Нажмите ОК. Текст «Любимая музыка» на панели навигации превращается в ссылку, которая заставит зрителя при нажатии перейти в этот раздел на странице.

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

Создание гиперссылки из изображения с помощью KompoZer

Знаете ли вы, что вы можете создать ссылку из изображений, а также текст? KompoZer позволяет сделать это всего за несколько кликов. Здесь я вставил маленькое изображение значка со стрелкой, указывающей вверх, и текстом «TOP» внизу страницы. Я собираюсь использовать это изображение в качестве ссылки, чтобы вернуться к началу страницы.

  1. Щелкните правой кнопкой мыши изображение и выберите «Свойства изображения и ссылки» в контекстной метке. Откроется диалоговое окно «Свойства изображения».
  2. На вкладке «Местоположение» вы увидите имя файла изображения и эскиз, который уже заполнен. Вы должны ввести текст в поле «Альтернативный текст». Это то, что появляется, когда вы наводите курсор мыши на изображение, а также то, что читается программой чтения с экрана, когда человек с нарушениями зрения читает веб-страницу.
  3. Нажмите на вкладку Ссылка. Здесь вы можете выбрать якорь из меню, как мы сделали со ссылками на якорь. На самом деле, это изображение используется как якорная ссылка. Я выбрал якорь #Links_Of_Interest, который вернет нас к вершине.
  4. Нажмите ОК. Изображение теперь при нажатии нажимает на верхнюю часть страницы.
Оцените статью
Solutics.ru
Добавить комментарий