Создание гиперссылок
Гиперссылки действительно важны — они делают Интернет Интернетом. В этой статье представлен синтаксис, необходимый для создания ссылки, а также обсуждаются лучшие практики обращения со ссылками.
| Предварительные требования: | Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML. |
|---|---|
| Задача: | Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе. |
Что такое гиперссылка?
Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес (URL.)
Примечание: URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).
Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.
Анатомия ссылки
Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите Ссылки-блоки), который вы хотите превратить в ссылку, в элемент <a> , и придания этому элементу атрибута href (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.
Это дало нам следующий результат:
Добавляем информацию через атрибут title
Другим атрибутом, который вы можете добавить к своим ссылкам, является — title . Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:
Вот что получилось (описание появится, если навести курсор на ссылку):
Примечание: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.
Активное изучение: создаём собственную ссылку
Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш базовый пример подойдёт.)
- Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
- Теперь превратите некоторые фрагменты документа в ссылки.
- Добавьте ссылкам атрибут title .
Ссылки-блоки
Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <a></a>.
Примечание: вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.
Краткое руководство по URL-адресам и путям
Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про 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 :
Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: ../../../сложный/путь/к/моему/файлу.html .
Фрагменты документа
Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут id элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:
Затем, чтобы связаться с этим конкретным id , вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:
Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:
Абсолютные и относительные 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
Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox
- Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
- Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
- Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
- Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.
Используйте относительные ссылки, где это возможно
Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта (при ссылке на другие сайты необходимо использовать абсолютную ссылку):
- Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
- Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.
Создавая ссылки на не HTML ресурсы — добавляйте описание
Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:
- Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
- Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.
Посмотрите на примеры, чтобы увидеть, как добавить описание:
Используйте атрибут download, когда создаёте ссылку
Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download , чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:
Активное изучение: создание меню навигации
Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространённых способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создаётся впечатление, что вы остаётесь в одном месте: меню остаётся на месте, а контент меняется.
Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):
- Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
- Создайте ссылки каждому элементу списка, ведущие на эти страницы.
- Скопируйте созданное меню в каждую страницу.
- На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.
Когда закончите задание, посмотрите, как это должно выглядеть:

Примечание: Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.
Ссылки электронной почты
Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент <a> и mailto: — адрес почты.
Самыми простыми и часто используемыми формами mailto: являются subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:
В результате получим ссылку вида: Отправить письмо для nowhere.
Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только «mailto:»), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки «Поделиться».
Особенности и детали
Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto . Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.
Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):
Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.
Вот несколько примеров использования mailto URLs:
Заключение
Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.
Как управлять браузером без мышки: список горячих клавиш и команд
![]()
Вам хотелось бы узнать, как пользоваться браузером без мышки? Ведь ситуации бывают разные , и такое умение может пригодиться в любую минуту. К примеру , может выйти из строя ваша компьютерная мышь, что вы тогда будете делать, если работу нужно выполнить срочно, а бежать за новой мышью просто нет времени?
А может быть , вы просто расслабились на работе . Например , включили себе киношку на рабочем компьютере, пока шефа нет. Сами «растеклись» и «вмялись» в рабочее кресло, пожевывая бургер и попивая кофе. И тут входит шеф. Что делать? До мыши не дотянуться, да и в спешке можно «промахнуться» курсором и закрыть не то , что надо, но зато под руками клавиатура. Всего несколько комбинаций , и фильм закрыт, а рабочий процесс «продолжается».
В общем, есть несколько полезных комбинаций на клавиатуре, которые было бы неплохо знать, чтобы научиться управлять браузером без мышки.
Как пользоваться браузером без мышки
- ускоряет вашу работу в сети;
- удивляет ваших коллег, которые никогда не расстаются с мышью;
- отсутствие мыши не достави т вам никакого неудобства.
Комбинации клавиш, чтобы пользоваться браузером без мышки
Для удобства запоминания и поиска нужной комбинации кнопок клавиатуры, мы разбили их на небольшие группы.
Работа в строке обозревателя интернета
- «Ctrl+L», «Ctrl+D» — выделение текста в строке браузера;
- «Ctrl+Enter» — дописывает «www.» вначале (сейчас в этом нет необходимости), но при этом может также добавить «.com» в конце и презентовать страницу;
- «Alt+Enter» — представляет для работы новую вкладку с набранным адресом.
Взаимодействие с вкладками
- «Ctrl+1-8» — такое сочетание переключит вас на вкладку в «панели вкладок», где цифра будет означать порядковую нумерацию вкладки;
- «Ctrl+9» — переключ ает на последнюю вкладку , и неважно , сколько их будет всего;
- «Ctrl+Tab» — переключает на последующую вкладку, двигаясь слева направо;
- «Ctrl+Shift+Tab» — переключает предыдущую вкладку, двигаясь справа налево;
- «Ctrl+W», «Ctrl+F4» — закрывает открытую вкладку;
- «Ctrl+Shift+T» — представляет для работы только что закрытую вкладку;
- «Ctrl+Т» — представляет для работы новую вкладку;
- «Ctrl+N» — представляет для работы новое окно обозревателя;
- «Alt+F4» — закрывает открытое окно обозревателя.
Взаимодействие с навигацией
- «Alt+», «Пробел» — это «назад»;
- «Alt+», «Shift+Backspace» — это «вперед»;
- «F5» — обновление;
- «Ctrl+F5» — обновление, но происходит игнорирование кэша;
- «Esc» — останавливает загрузку;
- «Alt+Home» — представляет вашему вниманию домашнюю веб — страницу.
Взаимодействие с масштабированием
- «Ctrl+«плюс»» — увеличивает масштаб;
- «Ctrl+«минус»» — уменьшает масштаб;
- «Ctrl+0» — восстанавливает стандартный масштаб;
- «F11» — включение полноэкранного режима.
Работа со скроллингом
- «Пробел», «Page Down» — перемещает вниз на целый экран;
- «Shift+Пробел», «Page Up» — перемещает вверх на целый экран;
- «Home» — перемещает в начало веб — страницы;
- «End» — перемещает в конец веб — страницы.
Взаимодействие с поиском
- «Ctrl+Е», «Ctrl+К» — фокусирует ся на поиске, который встроен в сам браузер;
- «Alt+Enter» — представляет вашему вниманию новую вкладку с результатами поиска;
- «Ctrl+F», «F3» — открывает поиск по открытой странице;
- «Ctrl+G», «F3» — ищет заданное значение на открытой странице.
Работа с историей и закладками
- «Ctrl+H» — пред о ставляет вам историю браузера;
- «Ctrl+J» — пред о ставляет историю загрузок;
- «Ctrl+D» — сохраняет закладку открытого веб — сайта.
Еще парочка полезных команд
- «Ctrl+Р» — отправляет в печать открытую страницу;
- «Ctrl+S» — сохраняет веб — страницу на hard-диск;
- «Ctrl+О» — представляет для работы файлы;
- «Ctrl+U» — показывает исходный код открытой страницы.
Заключение
Как вы успели заметить, пользоваться браузером без мышки — это довольно просто, нужно всего лишь знать несколько основных команд. Их можно запомнить, а можно распечатать и держать перед глазами на всякий случай.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
joomla template



Главная
Горячие клавиши
А удиоверсия страницы "Горячие клавиши"
У важаемые пользователи! Вы сможете выполнять различные действия при посещении веб-страницы не только с помощью компьютерной мыши, но и управляя клавиатурой. Для большего удобства существуют "горячие клавиши" в браузерах. Это нажатия и сочетания нажатий клавиш для вызова тех или иных функций. Ниже представлены основные из них.
Г орячие клавиши на веб-странице
Н авигация
Backspace — Переход на предыдущую страницу
ALT + стрелка влево — Переход на предыдущую страницу
ALT + стрелка вправо — Переход на следующую страницу в истории просмотров
Shift+Backspace — Переход на следующую страницу в истории просмотров
ALT + Home — домашняя страница
F5 или CTRL + R — обновление страницы
CTRL + O — открыть файл или адрес
ALT + D — перевести фокус в строку адреса
F11 — полноэкранный режим
В кладки и окна
CTRL + T — открыть новую вкладку
CTRL + N — открыть новое окно
CTRL + W — закрыть текущую вкладку
CTRL + Shift + W — закрыть окно (кроме Internet Explorer)
CTRL + Page Up\Page Down — перейти на предыдущую\следующую вкладку (только Chrome и Firefox)
Shift + TAB — листание вкладок с визуальным превью страницы (только Opera)
С траницы
CLTR + F — поиск на странице
CTRL + D — добавить страницу в закладки
CTRL + + — увеличить масштаб страницы
CTRL — — — уменьшить масштаб страницы
CTRL + колесико мыши – увеличить/уменьшить масштаб страницы
CTRL + 0 (ноль) — вернуть 100% масштаб страницы (кроме Internet Explorer)
HOME/END — быстро перейти в начало\конец страницы
CTRL + P — печать страницы
CTRL + S — сохранить страницу
CTRL + Shift + T — открыть последнюю закрытую вкладку (кроме Internet Explorer)
Пробел — Прокрутка веб-страницы вниз
И нструменты
CTRL + H — просмотр истории
CTRL + J — просмотр загрузок
CTRL + B — просмотр закладок
П равка
CTRL + A — выделить все
CTRL + X — вырезать
CTRL + C — копировать
CTRL + V — вставить
С очетания клавиш для работы с программой "Экранная лупа"
Win + + — Запуск программы "Экранная лупа". Увеличить масштаб.
Win + — — Уменьшить масштаб
Win + Esс — Закрытие программы "Экранная лупа"
Ctrl + Alt + D — Переключение в режим "Закреплено" (увеличенная область показывается в отдельном закрепленном окне).
Ctrl + Alt + F — Переключение в режим "Во весь экран" (увеличивается весь экран).
Ctrl + Alt + L — Переключение в режим "Увеличение" (увеличивается область вокруг указателя мыши).
Ctrl + Alt + R — Изменение размера окна, отображающего увеличенную область экрана.
Ctrl + Alt + Пробел — Предварительный просмотр рабочего стола в полноэкранном режиме
Ctrl + Alt + I — Инверсия цветов
Ctrl + Alt + ↑ — Прикрепление окна с увеличенной областью к верхнему краю экрана. ("Закреплено")
Передвижение окна с увеличенной областью вверх. ("Увеличение")
Передвижение по увеличенной области вверх. ("Во весь экран")
Ctrl + Alt + ↓ — Прикрепление окна с увеличенной областью к нижнему краю экрана. ("Закреплено")
Передвижение окна с увеличенной областью вниз. ("Увеличение")
Передвижение по увеличенной области вниз. ("Во весь экран")
Ctrl + Alt + ← — Прикрепление окна с увеличенной областью к левому краю экрана. ("Закреплено")
Передвижение окна с увеличенной областью влево. ("Увеличение")
Передвижение по увеличенной области влево. ("Во весь экран")
Ctrl + Alt + → — Прикрепление окна с увеличенной областью к правому краю экрана. ("Закреплено")
Передвижение окна с увеличенной областью вправо. ("Увеличение")
Передвижение по увеличенной области вправо. ("Во весь экран")
Руководство по ссылкам HTML
Ссылки позволяют пользователям легко переходить с одной страницы на другую на любой сервер в любой точке мира.
Ссылка может вести на любой веб-ресурс, например изображение, аудио- или видеофайл, PDF-файл, HTML-документ, элемент в самом документе, и т. д.
По умолчанию ссылки отображаются в большинстве браузеров следующим образом:
- Не посещенная ссылка подчеркнута и выделена синим цветом;
- Посещенная ссылка подчеркнута и выделена фиолетовым цветом;
- Активная ссылка подчеркнута и выделена красным цветом.
Однако вы можете перезаписать эти правила с помощью CSS-стилей. См. Руководство по ссылкам в CSS.
Синтаксис HTML-ссылок
Ссылки указываются в HTML с помощью тега <a> .
Ссылка или гиперссылка может быть выражена словом, группой слов, цифрами или изображением.
Все, что находится между открывающим тегом <a> и закрывающим тегом </a> , становится частью ссылки, которую пользователь видит и нажимает в браузере. Вот несколько примеров ссылок:
Атрибут href указывает цель ссылки. Она может быть в виде абсолютного или относительного URL-адреса.
Абсолютный URL-адрес — это адрес, который включает в себя полный URL-путь — протокол, имя хоста и путь к документу или файлу, например https://www.google.com/ , https://www.example.com./form.php и т. д.
Относительный URL-адрес не включает имя домена и префикс http:// или https:// , например, contact.html , images/smiley.png и т. д.
Настройки атрибута target
Атрибут target сообщает браузеру, каким образом открыть связанный документ. Есть четыре определенные цели, и каждое имя цели начинается с символа нижнего подчеркивания ( _ ):
- _blank — открывает связанный документ в новом окне или вкладке.
- _parent — открывает связанный документ в родительском окне.
- _self — открывает связанный документ в том же окне или вкладке, что и исходный документ. Это значение по умолчанию, поэтому нет необходимости явно указывать это значение.
- _top — открывает связанный документ в полном окне браузера.
Посмотрим следующий пример, чтобы понять, как работает цель атрибут target :
Если ваша веб-страница находится внутри iframe , вы можете использовать target=»_top» в ссылках, чтобы выйти из iframe и показать целевую страницу в полном окне браузера.
Создание якорей # на странице
Вы также можете создать закладку или якорь, чтобы пользователи могли переходить к определенному разделу веб-страницы. Закладки особенно полезны, если у вас очень длинная веб-страница.
Создание закладок представляет собой двухэтапный процесс: сначала добавьте атрибут id для элемента, к которому вы хотите перейти, затем используйте значение этого атрибута id , которому предшествует знак хештега ( # ), в качестве значения атрибута href тега <a> , как показано в следующем примере:
Вы даже можете перейти к разделу другой веб-страницы, указав URL-адрес этой страницы вместе с якорем (например, #elementId в атрибуте href — <a href=»mypage.html#topicA»>Перейти к Разделу A</a> ).
Создание ссылок для скачивания
Вы можете создать ссылку для загрузки файла точно так же, как и для размещения текстовых ссылок. Просто укажите целевой URL, который вы хотите сделать доступным для загрузки.
В следующем примере мы создали ссылки для загрузки файлов .zip , .pdf и .jpg .
Когда вы щелкаете ссылку, которая указывает на PDF-файл или файл с изображением, файл не загружается непосредственно на ваш жесткий диск. Он откроется только в вашем веб-браузере, после чего вы сможете сохранить или загрузить его на жесткий диск самостоятельно.
alt=»smsc banner 728×90″ /> alt=»smsc banner 120×600″ />
alt=»etxt banner 728×90″ /> alt=»etxt banner 120×600″ />
alt=»flexbe banner 728×90″ /> alt=»flexbe banner 120×600″ />
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 4 / 5. Количество оценок: 4
Оценок пока нет. Поставьте оценку первым.
Похожие посты
- 18 декабря, 2019
- 987
Руководство по тегам и элементам в HTML
- 26 ноября, 2019
- 70
Руководство по заголовкам в HTML
- 6 ноября, 2019
- 78
Руководство по мета-тегам в HTML
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.