Как подняться на уровень выше в директории html

Папка вверх

Либо указать напрямую из корневой директории сайта <img src=»/img/logo.jpg»> ( / слеш вначале указывает, что папка img находится в корневой директории сайта), либо так: <img src=»../img/logo.jpg»> ( ../ означает подняться на уровень выше, а затем зайти в папку img , где лежит ваш файл logo.jpg ).

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43304

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

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

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

Заключение

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

Ссылки в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой. и не дают уснуть вовремя ��

Ссылки бывают разные, но чаще всего встречаются такие:

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

Ссылка создаётся с помощью тега <a> (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href . Сам адрес пишется в кавычках. Между тегами <a></a> указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа «Жми сюда».

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

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

Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: «планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41». А может просто сказать «да вот его квартира, слева от меня». В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором — относительную.

Абсолютные ссылки используются для перехода на другой сайт. Они соответствуют требованиям обозначения URL-адреса , т.е. содержат протокол передачи данных (например http:// ), доменное имя сайта и путь к конкретной странице сайта. Если путь не указан, то по умолчанию откроется главная страница. В примере выше указана абсолютная ссылка, ведущая на главную страницу сайта.

Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки ��

Ссылка на документ в той же папке

Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html

Абсолютный и относительный путь в веб-программировании

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

начинается с указания протокола передачи данных и содержит имя сайта. Например, абсолютными являются адреса http://localhost/test/index.html и https://html.okpython.net , где первый адрес указывает абсолютный путь к корневой папке сайта на локальном сервере, а второй – в сети Интернет.

Следует отметить, что стандартизированным способом записи адреса ресурса в сети Интернет является (от англ. Uniform Resource Locator – единый указатель ресурса), который как раз и представляет собой абсолютный адрес, позволяющий не только однозначно находить в Интернете нужную страницу, но и обмениваться с сервером информацией при помощи GET -запросов. В общем случае URL можно схематично представить в виде:
<схема>://<логин>:<пароль>@<хост>:<порт>/<url-путь>?<параметры_get-запроса>#<якорь> , где

• – это способ обращения к ресурсу; в большинстве случаев имеется в виду , который представляет собой набор правил, позволяющий осуществлять соединение и обмен данными между двумя и более включёнными в сеть устройствами; указанный в URL тип сетевого протокола отделяется от хоста комбинацией символов :// ; примерами сетевых протоколов могут служить:
  • (от англ. File Transfer Protocol – протокол передачи файлов) – стандартный протокол, предназначенный для передачи файлов по TCP -сетям; FTP -протокол часто используется для загрузки сетевых страниц и других документов с компьютера разработчика на сервер хостинг-провайдера;
  • (от англ. HyperText Transfer Protocol – протокол передачи гипертекста) – протокол прикладного уровня, который до недавнего времени использовался в интернете для обмена информацией с веб-сайтами;
  • (от англ. HyperText Transfer Protocol Secure) – повсеместно использующееся в настоящее время расширение протокола HTTP , поддерживающее шифрование данных;
  • и ряд других сетевых протоколов;

  Для большей наглядности, приведем в качестве примеров абсолютных путей почти реальные url -адреса:

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

  Относительные ссылки

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

  Пусть наша гиперссылка находится в документе, расположенном на сервере по адресу https://site.name/site/ doc_1/ doc_2/ . /doc_n/ web_page.html , где doc_n – папка n -го уровня вложенности. В этом случае папка doc_n , в которой находится наш документ с гиперссылкой, автоматически принимается за основу, относительно которой и строится вся адресация. Итак:

  • Если нужно, чтобы ссылка вела на целевой документ new_page.html , расположенный в той же папке doc_n , что и наш исходный документ с гиперссылкой, то в качестве значения атрибута href ссылки нужно просто задать имя целевого документа: href = «new_page.html» .
  • Для перехода к целевому документу new_page.html , расположенному в папке https://site.name/ doc_1/ doc_2/ . /doc_n/ doc_n_1/ . doc_n_k/ , значение атрибута href ссылки должно включать только папки, вложенные в doc_n , и, конечно же, имя целевого документа: href = «doc_n_1/ . doc_n_k/ new_page.html» . Таким образом, мы указываем браузеру, что он должен зайти в папку doc_n_1 , расположенную в папке doc_n с исходным документом, в котором прописана гиперссылка, затем в папку doc_n_2 и так далее, пока не попадет в папку doc_n_k с находящимся там целевым документом, который он и должен открыть.
  • Чтобы попасть в папку на уровень выше исходной, используется специальная комбинация символов ../ . Для перехода на n уровней вверх нужно записать комбинацию ../ n раз подряд. Так в нашем случае, чтобы перейти по ссылке к целевому документу https://site.name/ doc_1/ doc_2/ . /doc_n-3/ new_page.html атрибут href ссылки должен иметь значение «../../../new_page.html» . Тем самым мы сообщаем браузеру, что он должен подняться в папку doc_n-1 , затем doc_n-2 и doc_n-3 , после чего открыть находящийся там целевой документ new_page.html .
  • Если же необходимо не просто подняться на несколько уровней вверх, но и зайти там в папку (или несколько вложенных папок), для получения доступа к целевому документу, то в значении атрибута href ссылки сперва нужно прописать требуемое количество уровней поднятия вверх при помощи символов «../» , а затем дописать путь из полученной папки к целевому документу. Например, если целевой документ расположен в папке new_doc и адресный путь к нему имеет вид https://site.name/ doc_1/ doc_2/ . /doc_n-3/new_doc/ new_page.html , то атрибут href ссылки должен иметь значение «../../../new_doc/new_page.html» . Т.е. мы указываем браузеру, что он должен подняться на три уровня вверх относительно исходной папки doc_n , в которой находится документ с гиперссылкой, а затем зайти в папку new_doc и открыть целевой документ new_page.html

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

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

  Похожие публикации:

  1. Mycdn me что это
  2. Nuendo что за программа
  3. Как подключить старый принтер к windows 10
  4. Как сделать ворд белым