lightanddesign.ru
You might also like
Гиперссылки действительно важны — они делают Интернет Интернетом. В этой статье представлены годовые материалы, необходимые для создания ссылок, и описаны лучшие ссылки для работы со ссылками.
| Базовые знания HTML, как описано в статье Начало работы с HTML. Базовое форматирование текста в HTML, как описано в статье Базовый текстовый редактор в HTML. |
| Узнайте, как использовать эффективные гиперссылки и соединять несколько файлов. |
Что такое гиперссылка?
Гиперссылки — одно из самых интересных нововведений в Интернете. Они были характерны для Интернета с самого начала, но именно они превращают Интернет в Интернет. Они позволяют соединять документы с другими документами (или ресурсами). Они также могут связывать документы с определенными компонентами и делать приложения доступными по простому веб-адресу (по сравнению с локальными приложениями, которые необходимо устанавливать и т.п.). Почти весь организационный контент можно преобразовать в ссылки, чтобы при нажатии (или активации) можно было перейти на другой веб-адрес (URL) в интернет-браузере.
Примечание: URL-адреса могут ссылаться на HTML-файлы, текстовые файлы, изображения, текстовые документы, видео- и аудиофайлы. Другие можно найти в Интернете. Если веб-браузер не знает, как просмотреть или отредактировать файл, он спросит, хотите ли вы открыть файл (и поэтому ответственность за открытие или редактирование файла передается соответствующему тематическому приложению на устройстве) или загрузить файл (что можно попробовать настроить позже).
Например, главная страница BBC содержит множество ссылок, которые относятся к различным областям сайта (меню), страницам входа (инструменты пользователя) и т.д., а также множество новостей.
Анатомия ссылки
Простые ссылки создаются путем обертывания текста (или другого содержимого, см. блок ссылок). Он может быть преобразован в ссылку, преобразован в элемент, а затем преобразован в функцию HREF (это также известно как гиперуровень). Ссылка, содержащая веб-адрес для отображения, или цель).
Это дает следующие результаты
Информация добавляется с помощью функции заголовка
Еще одна характеристика, которую можно добавить к ссылке, — это заголовок. Используется для хранения полезной информации о ссылке. Например: какую информацию вам нужно знать о странице или о других вещах? Например:.
Вот результат (проведите курсором по ссылке, чтобы увидеть описание):.
Примечание: Описание из функции заголовка отображается только при наведении на него курсора мыши. Это означает, что навигация по сайту на основе клавиатурного управления затрудняет доступ к информации, содержащейся в заголовке. Если информация о заголовке действительно важна для удобства использования страницы, ее следует представить таким образом, чтобы все пользователи могли получить к ней доступ, например, поместив ее в простой текст.
Активное обучение: создавайте свои собственные ссылки
Время выполнения упражнения: вы хотите создать HTML-документ в текстовом процессоре вашего компьютера (работают базовые примеры).
- Попробуйте добавить один или несколько абзацев или других элементов, которые вы уже знаете, в тело HTML.
- Затем преобразуйте часть документа в ссылку.
- Добавьте к ссылке характерный заголовок.
Блок ссылок.
Как упоминалось выше, любой элемент, даже блочный, можно превратить в ссылку. Если у вас есть изображение, которое вы хотите превратить в ссылку, просто поместите его между тегами.
Примечание: В следующей статье вы узнаете больше об использовании изображений в Интернете.
Краткое руководство по URL-адресам и путям
Чтобы полностью понять адреса ссылок, необходимо понять несколько вещей об URL-адресах и путях к файлам. В этом разделе содержится информация, необходимая для достижения этой цели.
URL (или Uniform Resource Locator, но никто его так не называет) — это просто строка текста, которая определяет, где вы находитесь в Интернете. Например, домашняя страница Mozilla — https://www.mozilla.org/ru/?????.
URL-адреса используют пути для определения местоположения файлов. Путь указывает, где в файловой системе находится нужный файл. Рассмотрим простой пример структуры каталога (см. создание каталога hyperlinks).
Корнем структуры является каталог create-hyperlinks. При работе с локальным сайтом создается каталог, содержащий весь сайт. Корень содержит два файла: index.html и contacts.html. На реальном сайте index.html будет нашей домашней или целевой страницей (веб-страница, которая служит точкой входа на сайт или определенный раздел сайта).
Корень содержит два других каталога, pdf и project. Каждый из них содержит по одному файлу (project-brief.pdf и index.html). Обратите внимание, что в проект можно успешно включить два файла index.html, если они находятся в разных местах файловой системы. Многие сайты делают это. Второй index.html может быть главной целевой страницей для информации, относящейся к проекту.
Тот же каталог: если вы хотите включить ссылку внутри index.html (верхнего уровня index.html), указывающую на файл contacts.html, просто укажите имя файла для ссылки, поскольку он находится в том же каталоге. В качестве текущего файла. Таким образом, URL, который следует использовать, — это contacts.html.
Перемещение вниз в подкаталогах: если вы хотите включить ссылку внутри index.html (верхнего уровня index.html), указывающую на projects / index.html, вы должны переместиться вниз в каталог projects перед указанием нужного файла. Это делается путем указания имени каталога, за которым следует косая черта, а затем имя файла. Таким образом, URL, который следует использовать, это projects/index.html.
Возвращаясь к родительскому каталогу: если вы хотите, чтобы ссылка внутри projects/index.html указывала на pdfs/project-brief.pdf, вам нужно подняться на уровень выше, а затем перейти в каталог pdf. Перемещение на уровень каталога" обозначается двумя точками -. — Таким образом, URL, который нужно использовать, это . /pdfs/project-brief.pdf.
Примечание: При необходимости несколько экземпляров этих функций можно объединить в составной URL. Пример.
Фрагмент документа.
Помимо верхней половины документа, вы также можете ссылаться на определенные части HTML-документа (называемые фрагментами документа). Для этого необходимо сначала установить атрибут id у подключаемого элемента. Обычно имеет смысл ссылаться на конкретный заголовок, поэтому
Чтобы сослаться на конкретный идентификатор, необходимо указать его в конце 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 в каталоге проектов, относительная ссылка будет pdfs / project-brief.pdf (аналогичный абсолютный URL будет http://www.example.com/projects/pdfs/project-. кратко. pdf.).
Относительные URL указывают на разные места, в зависимости от того, где находится файл, для которого они используются. Если файл index.html перемещен из каталога проектов в корневой каталог веб-сервера (верхний уровень, не каталог), относительный URL pdfs / project-brief.pdf указывает на http: //www.example. http://www.example.com/projects/pdfs/project-brief.pdf?????com/pdfs/project-brief.pdf.
Я предлагаю вам углубиться в эту тему!
Практика написания хороших ссылок
При написании ссылок необходимо соблюдать несколько правил. Давайте посмотрим на них.
Используйте четкие формулировки для ссылок.
Добавлять ссылки на страницу очень просто. Однако этого недостаточно. Необходимо убедиться, что ссылка доступна для всех читателей, независимо от их способностей или предпочитаемого средства отображения страницы. Например:.
- Пользователям программ для чтения с экрана нравится читать адрес ссылки в тексте и переходить по ссылке на странице.
- Поисковые системы используют якорный текст для индексации файлов, поэтому рекомендуется включать в якорный текст ключевые слова, чтобы эффективно описать, куда ведет ссылка.
- Пользователи часто просматривают страницу, не читая каждое слово, и их внимание привлекает текст, который выделяется как ссылка. Им будет полезно получить объяснение, куда ведет ссылка.
Смотрите этот пример:.
Текст хорошей ссылки: скачать Firefox
Текст плохой ссылки: нажмите здесь, чтобы загрузить Firefox
- Не описывайте URL как часть текста ссылки. URL-адреса выглядят и звучат сложно, и еще сложнее, когда они прописаны в программе для чтения с экрана.
- Не пишите ‘link’ или ‘linksto’ в тексте ссылки. В этом нет необходимости. Программа чтения экрана сама дает понять, что здесь есть ссылка. Ссылки обычно подчеркиваются другим цветом, чтобы пользователи могли видеть, что на экране есть ссылка (подчеркивание ссылок помогает пользователям следовать привычным манерам).
- Текст ссылок должен быть как можно короче. Длинный текст ссылок особенно раздражает пользователей программ чтения с экрана, которым приходится вслушиваться в написанное.
- Сведите к минимуму случаи, когда несколько копий одного и того же текста ссылки указывают на разные страницы. Это может вызвать проблемы у программ чтения с экрана, которые часто вызывают списки ссылок. Множество ссылок с пометками "нажмите здесь", "нажмите здесь" или "нажмите здесь" могут привести к путанице.
Используйте релевантные ссылки, где это возможно
Из того, что вы прочитали выше, вы можете подумать, что использование абсолютных ссылок всегда хорошая идея — в конце концов, ссылки не ломаются при прокрутке страницы. Однако в пределах одного сайта рекомендуется использовать относительные ссылки везде, где это возможно (при ссылках на другие сайты следует использовать абсолютные ссылки).
- Во-первых, относительные URL обычно намного короче абсолютных, что значительно облегчает их кодирование и чтение.
- Во-вторых, относительные URL-адреса более эффективны по следующим причинам При использовании абсолютных URL браузер начинает с запроса к системе доменных имен (DNS — см. также раздел "Как работает Интернет"), чтобы определить фактическое местоположение сервера, а затем переходит на этот сервер, чтобы найти запрашиваемый файл. Относительные URL-адреса облегчают эту задачу. Браузер просто ищет запрашиваемый файл на том же сервере. Использование абсолютных URL-адресов вместо относительных всегда требует от браузера дополнительной работы.
Ссылки на не-HTML ресурсы — включайте описание
Нажмите, чтобы скачать документ PDF или Word, открыть видео, прослушать аудиофайл или получить другие неожиданные результаты (всплывающие окна, Flash-ролики), обязательно включите четкую формулировку, чтобы избежать путаницы. Отсутствие объяснений может раздражать пользователей. Примеры приведены ниже.
- Если вы используете соединение с низкой пропускной способностью и внезапно щелкаете по ссылке без описания, начинается загрузка большого файла.
- Если Flash Player не установлен, а ссылка нажата, пользователь внезапно попадает на страницу с Flash-контентом.
См. пример добавления описания.
Используйте свойства загрузки при создании ссылок
Если вы создаете ссылку на файл, который нужно скачать, а не открыть в браузере, вы можете использовать атрибут download для создания имени файла по умолчанию для сохранения. Пример ссылки на загрузку в браузере Firefox39 показан ниже.
Активное изучение: создание меню навигации
Для этого упражнения создайте ссылку на страницу в навигационном меню многостраничного сайта. Это один из самых распространенных способов создания веб-сайта. Все страницы используют одну и ту же структуру страницы, включая одно и то же навигационное меню, поэтому, когда вы нажимаете на ссылку, меню остается прежним, а содержимое остается в одном месте. Изменения.
Вам необходимо загрузить или создать следующие страницы в том же каталоге (см. navigation-menu-start).
- Добавляет неупорядоченный список в указанном месте в любой html-файл. Каталог должен состоять из названий страниц (индекс, проект и т.д.). Поскольку навигационные меню обычно представляют собой списки ссылок, семантически правильно создавать неупорядоченные списки.
- Создайте для каждого элемента списка ссылку, указывающую на эти страницы.
- Скопируйте созданное меню на каждую страницу.
- На каждой странице удалите только те ссылки, которые указывают на ту же страницу (например, на странице index.html удалите ссылки index). Важно отметить, что когда отображается страница index.html, нет необходимости отображать ссылку на меню на той же странице. Это облегчает возврат на ту же страницу, а также позволяет визуально определить, в какой части сайта вы находитесь, взглянув на меню.
После завершения отобразится следующее
Если это не удается, или вы не уверены, что сделали все правильно, обратитесь к отмеченному пункту меню навигации.
Ссылки электронной почты
При нажатии можно создать ссылку или кнопку, которая открывает новое исходящее письмо, а не ссылку на ресурс или страницу. Это делается с помощью элемента и mailto. -emailto.
Самые простые и наиболее часто используемые форматы mailto: subject, cc, bcc, body — затем напишите адрес электронной почты. Например:.
В результате появится следующая ссылка на форму. Электронное письмо никуда не отправляется.
Сам адрес электронной почты необязателен. Если оставить это поле пустым (оставить ‘mailto:’ в поле href как есть), новое исходящее сообщение будет открыто почтовой программой, а поле получателя будет пустым. Это можно использовать для кнопки "поделиться".
Функции и детали
Помимо адреса электронной почты, можно предоставить и другую информацию. Фактически, к заданному mailto-адресу можно добавить стандартные поля для отправки электронной почты. Обычно используются поля ‘subject’, ‘cc’ и ‘body’ (на самом деле это не поля заголовка, но в них можно указать дополнительную информацию о новом письме). Каждое поле и его значение определяется как условие запроса.
Вот несколько примеров, включая cc (копия сообщения, отправленного в, все получатели сообщения увидят список получателей сообщения), bcc (скрытые адреса получателей, полный список получателей не будет показан), bcc (скрытые адреса получателей, полный список получателей не будет показан). сообщение), subject (тема сообщения) и body (текст сообщения):.
Примечание: Значение каждого поля должно быть закодировано в URL (т.е. должны использоваться непечатные символы и пробелы). Точка с запятой (?) отделяет основной адрес от дополнительных полей. Обратите внимание на точку ( &), отделяющую каждое поле от URL mailto:. Для этого используется стандартное описание URL запроса. Прочитайте метод GET, чтобы лучше понять описание URL запроса.
Пример использования mailtoURL показан ниже.
Заключение
Этой информации достаточно для создания вашей ссылки! Вернитесь к этой ссылке позже, когда начнете изучать стили. Далее вы узнаете о семантике текста и некоторых более продвинутых и необычных функциях, которые могут быть полезны при создании контента сайта. В следующей главе описано расширенное форматирование текста.
