Как указать относительный путь к файлу, который лежит на уровень ниже?
Как указать относительный путь к файлу, который лежит на 1-2 уровня ниже? На раб столе есть папка site . В этой папке файл Main.html и папка menu_5 . В папке menu_5 лежит файл menu_5.html и мне в этом файле надо указать путь к файлу Main.html . Как это сделать ?
Отслеживать
6,488 6 6 золотых знаков 24 24 серебряных знака 31 31 бронзовый знак
задан 4 дек 2017 в 13:36
13 2 2 серебряных знака 5 5 бронзовых знаков
HTML Путь к файлу
Путь к файлу описывает расположение файла в структуре папок веб сайта.
Примеры пути к файлам
| Путь | Описание |
|---|---|
| picture.jpg находится в той же папке, что и текущая страница | |
 |
picture.jpg находится в папке images в текущей папке |
 |
picture.jpg находится в папке images в корне текущего веб-сайта |
 |
picture.jpg находится в папке на один уровень выше текущей папки |
Пути к HTML файлам
Путь к файлу описывает расположение файла в структуре папок вебсайта.
Пути к файлам используются при связывании с внешними файлами, например:
- Веб-страницы
- Изображения
- Таблицы стилей
- JavaScripts
Абсолютные пути к файлам
Абсолютный путь к файлу — это полный URL адрес файла:
Пример
Теги и атрибуты src и alt описаны в главе HTML Изображения.
Относительные пути к файлам
Относительный путь к файлу указывает на файл относительно текущей страницы.
В этом примере путь к файлу указывает на файл в папке images, расположенной в корне текущего веб-сайт:
Пример
В этом примере путь к файлу указывает на файл в папке images находятся в текущей папке:
Пример
В этом примере путь к файлу указывает на файл в папке images находятся в папке на один уровень выше текущей папки:
Пример
Практика HTML лучше всего
Рекомендуется использовать относительные пути к файлам (если возможно).
При использовании относительных путей к файлам, веб-страницы не будут привязаны к вашему текущему базовому URL-адрес. Все ссылки будут работать на вашем собственном компьютере (localhost), а также на вашем текущем общественном домене и вашем будущем публичном домене.
Мы только что запустили
SchoolsW3 видео
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
Schoolsw3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Смена каталога с помощью cd
Смените каталог легко, если вы знаете где вы находитесь в данный момент (ваш текущий каталог) и куда вы хотите отправиться. Каталог, в который вы хотите попасть, выше или ниже текущего?
Чтобы сменить каталог, выполните команду cd . Команда в таком виде перенесёт вас в ваш домашний каталог; чтобы перейти в другой каталог необходимо указать путь к нему.
Вы можете использовать абсолютные или относительные пути. Абсолютные пути указываются от верхнего каталога / (называемого корнем) до указанного каталога; относительные пути указываются от текущего каталога, где бы он не находился. Дерево, показанное ниже, приведено в качестве примера, помогающего понять команду cd .
/ directory1 directory2 directory3
Если вы находитесь в directory3 и хотите перейти в directory1 , вы должны подняться в дереве каталогов выше.
Если вы введете:
находясь в каталоге directory3 , вы получите сообщение об ошибке, сообщающее о том, что нет такого каталога. Это происходит потому что, действительно, нет каталога directory1 в каталоге directory3 .
Чтобы подняться к каталогу directory1 , вы должны ввести:
Это абсолютный путь. Он указывает Linux начать сверху и опуститься в каталог directory1 .
Запомните, абсолютные пути перенесут вас В любой каталог ИЗ любого, а относительные пути, перенесут вас в каталоги, расположенные ниже текущего.
Рисунок 10-3. Абсолютные пути указывают полный путь
Путь является абсолютным, если первый символ в нём / ; в противном случае это относительный путь.
Рисунок 10-4. Относительные пути указываются относительно текущего расположения
Ниже приведено упражнение с относительными и абсолютными путями. В вашем домашнем каталоге введите относительный путь:
Команда cd .. указывает системе подняться на один уровень выше текущего каталога. Очевидно, команда cd ../.. перенесёт вас выше на два каталога.
Выполнив полностью команды этого примера, вы должны оказаться в каталоге /X11 , в котором хранятся конфигурационные файлы и каталоги, относящиеся к X Window System.
Взгляните на последнюю команду cd . Вы должны указать системе:
Подняться на один уровень выше к родительскому каталогу вашего домашнего каталога (вероятно, это будет /home )
Затем поднимитесь к родительскому каталога текущего (вероятно, вы окажетесь в / )
Затем спуститесь к каталогу etc
Наконец, перейдите в каталог /X11
Укажите абсолютный путь, чтобы быстрее перейти к каталогу /X11 . Введите:
Всегда проверяйте где вы находитесь, прежде чем указать относительный путь к каталогу или файлу. Однако если вы будете использовать абсолютные пути, вам не придётся задумывать об этом. Если вы не знаете, где вы находитесь, введите pwd .
Таблица 10-2. Параметры команды cd
| Команда | Функция |
|---|---|
| cd | переносит вас в ваш домашний каталог |
| cd ~ | также переносит вас в ваш домашний каталог |
| cd / | переносит вас в корневой каталог всей системы |
| cd /root | переносит вас в домашний каталог пользователя root, или супер-пользователя, учётной записи, созданной во время установки системы |
| cd /home | переносит вас в каталоге home, в котором находятся каталоги пользователей |
| cd .. | переносит вас на один уровень выше |
| cd ~otheruser | переносит вас в домашний каталог пользователя otheruser , если только пользователь otheruser дал вам соответствующие разрешения |
| cd /dir1/subdirfoo | Вне зависимости от того, где вы находитесь, этот абсолютный путь перенесёт вас прямо в каталог subdirfoo , подкаталога, вложенного в dir1 |
| cd ../../dir3/X11 | Этот относительный путь сначала поднимет вас на два уровня выше, затем спустит в dir3, и наконец, в каталог X11. |
Теперь когда вы начали понимать как менять каталоги, посмотрите, что произойдет, если вы перейдёте в домашний каталог пользователя root (суперпользователя). Введите:
Если вы не зарегистрированы под именем root, при обращении к этому каталогу вы получите сообщение «в доступе отказано».
Запрещая доступ к учётным записям root и других пользователей (или их домашним каталогам), ваша система Linux защищается от случайного или преднамеренного повреждения. Обратитесь к разделу Владение и разрешения
Чтобы перейти в каталог root, воспользуйтесь командой su . Введите эту последовательность команд:
[newuser@localhost newuser]$ su Password: ваш пароль root [root@localhost newuser]# cd /root [root@localhost /root]#
Как только вы введете правильный пароль root, вы заметите, что ваше приглашение изменилось и теперь в нём отмечено ваше звание суперпользователя, в начале приглашения учётной записи root отображается символ «#» (как показано на Рисунке 10-5 ).
Рисунок 10-5. Превращение в root
Теперь, если вы выполните cd для перехода к домашнему каталогу пользователя root, вы получите к нему доступ.
Завершив работу под именем root, просто введите в приглашении exit .
[root@localhost /root]# exit exit [newuser@localhost newuser]$
| Назад | Начало | Вперед |
| Определение вашего текущего каталога с помощью pwd | Вверх | Просмотр содержимого каталога с помощью ls |
Абсолютные и относительные ссылки
Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.
Абсолютные ссылки
Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
https://htmlacademy.ru https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2 Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.
Относительные ссылки
То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:
Предположим, мы загрузили страницу по такому адресу:
https://htmlacademy.ru/blog/frontend/html/index.html Во всех примерах ниже приведены относительная ссылка и полный путь, в который браузер расшифровывает ссылку.
Ссылка на файл в той же папке
1.html https://htmlacademy.ru/blog/frontend/html/1.html Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.
Ссылка на файл в папке ниже текущей
directory/3.html https://htmlacademy.ru/blog/frontend/html/directory/3.html Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.
dir1/dir2/5.html https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html Страница находится на две папки ниже текущей.
Ссылка относительно корня сайта
/2.html https://htmlacademy.ru/2.html Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.
/dir1/dir2/4.png https://htmlacademy.ru/dir1/dir2/4.png Файл на два уровня ниже корня сайта.
Ссылка на папку выше текущей
../6.html https://htmlacademy.ru/blog/frontend/6.html На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .
../../7.html https://htmlacademy.ru/blog/7.html На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.
Комбинированная ссылка
../../../dir1/dir2/8.html https://htmlacademy.ru/dir1/dir2/8.html На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .
Все приведённые примеры одной картинкой:
id-ссылки (якорные ссылки)
Якорные ссылки пригодятся, если нужно сослаться на определенное место документа — например, на заголовок. Для этого заголовку нужно установить определенный атрибут id , а в ссылке через # дописать этот атрибут в конце.
Содержание первой главы Ставим якорную ссылку на той же странице:
Ставим якорную ссылку на другую страницу:
Пройдите интерактивный тренажёр по якорным ссылкам, чтобы узнать наверняка, как это делается.
Что будет, если ошибиться
Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.
Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .
Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.
Ссылки — сила:
- Что такое ссылки и как их ставить. Тег a
- Как ставить пустые ссылки
- Что лучше использовать: ссылки или кнопки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
Что такое HTML?
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
Теги обычно идут парами: открывающий тег
Мой заголовок
Это мой первый абзац. Привет, мир!
Некоторые теги можно не закрывать:
Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:
Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:
Таблицы
Имя Возраст Джон 30 Элис 25
Использование изображений
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
Заголовок статьи
Первый абзац статьи.
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023