Адресація файлів в html. Статті про верстці. Проект "Відкриті уроки"

  1. абсолютна адресація
  2. відносна адресація
  3. Адресація отностительно кореня сайту
  4. Адресація отностительно кореня сайту в Windows
  5. Підключення віртуального диска
  6. Примітки
  7. Обговорення уроку на форумі
  8. Автор уроку

Основа основ інтернету - можливість швидко переміщатися від одного документа до іншого. Ми натискаємо на посилання - і ось перед нами вже зовсім інша сторінка. Для розміщення картинки або відеоролика на сторінці потрібно вказати посилання на потрібний медіа-файл, щоб підключити таблиці стилів вказати посилання на css-файл.

Що б все посилання працювали правильно - потрібно правильно вказати адресу документа. Існує два типи адресації:

  • абсолютна
  • відносна

абсолютна адресація

Абсолютна адресація застосовується в разі, коли потрібно послатися на файл, розташований на іншому сайті. Потрібно вказати повну адресу документа, включаючи протокол доступу (як правило, http: //), назва сайту (доменне ім'я) і шлях до файлу на сайті.

правильно

  • http: // www.avalon.ru / OpenLessons / WebDev /

неправильно

  • www.avalon.ru/OpenLessons/WebDev/ - не вказано протокол доступу
  • http: /// OpenLessons / WebDev / - не вказано назву сайту

Для завдання абсолютного адреси необхідно, щоб файли сайту були опубліковані в інтернеті, або необхідно встановити веб-сервер на свій домашній / робочий комп'ютер.

відносна адресація

Відносна адресація - посилання від одного файлу сайту на інший файл цього ж сайту. Цей тип адресації використовується набагато частіше.

Уявімо собі простий сайт, що складається з головної сторінки і двох розділів першого рівня - «Про компанію» і «Послуги». Усередині кожного розділу знаходиться пара підрозділів. Також є логотип logo.png, розташований в каталозі i і таблиця стилів style.css в каталозі css.

css в каталозі css

Щоб послатися на файл всередині сайту, потрібно розповісти браузеру, який шлях він повинен виконати, щоб прийти до потрібного файлу. Підключення логотипу потрібно буде робити в такий спосіб:

Файл головної сторінки сайту index.html - зайти в каталог i і приєднати файл logo.png - i / logo.png
Файл index.html в каталозі about - вийти з каталогу about, потім зайти в каталог i і приєднати файл logo.png - ../i/logo.png
Файл index.html в каталозі services / moneyback - вийти з каталогу moneyback, потім вийти з каталогу services, потім зайти в каталог i і приєднати файл logo.png - ../../i/logo.png

Узагальнимо вишенаписанное: що б вказати шлях від одного файлу до іншого потрібно дістатися до каталогу, що є загальним для обох файлів, а потім пройти шлях до потрібного файлу. Кожен вихід в попередній каталог записується символами ../.

Такий спосіб посилань працює завжди, навіть при відсутності веб-сервера, але залежить від розташування вихідного файлу всередині файлової системи. Якщо ми переносимо або копіюємо файл їх одного каталогу в інший - ссиилкі перестануть працювати.

Адресація отностительно кореня сайту

Корінь сайту - папка, в якій лежать всі файли сайту. Можна ставити посилання на документи, починаючи від цієї папки. У цьому випадку посилання на логотип будуть виглядати наступним чином:

  • Файл головної сторінки сайту index.html - /i/logo.png
  • Файл index.html в каталозі about - /i/logo.png
  • Файл index.html в каталозі services / moneyback - /i/logo.png

При використанні адресації щодо кореня сайту посилання на логотип записується однаково, незалежно від положення файлу, до якого ми додаємо логотип. Щоб браузер зрозумів, що пошук файлу потрібно вести щодо кореня сайту - адреса повинна починатися з символу /.

Адресація отностительно кореня сайту в Windows

Адресація отностительно кореня сайту значно зручніше, оскільки посилання на один і той же файл являестя постійною. Однак в назві присутнє словосполучення «корінь сайту», яке означає, що нам потрібен веб-сервер. В операційній системі Windows під коренем сайту при відсутності веб-сервера такі посилання будуть розраховуватися отностительно кореневої папки диска (з :, d :, e: і т.д.)

Таким чином, якщо файли сайту будуть лежати в каталозі sites / mysite / на диску d:, то при завданні посилання виду /i/logo.png браузер буде шукати такий файл: d: \ i \ logo.png (Windows використовує зворотну косу риску для вказівки шляху до файлу, але в html все одно потрібно використовувати пряму). Виходить, що зручний і корисний спосіб адресації можна використовувати в момент створення сайту?

Підключення віртуального диска

Як то кажуть, «якщо гора не йде до Магомета». Раз вже Windows хоче, щоб файли лежали в кореневій папці диска, то може є спосіб представити нашу папку з сайтом d: \ sites \ mysite \ як окремий диск? Так, такий спосіб є

  1. Дізнайтеся, які букви дисків у вас вільні, відкривши каталог «Мій компрьютер». Припустимо, що у нас вільний диск Z:
  2. Запустіть програму з меню Пуск> Всі програми> Стандартине> командного рядка - відкриється чорне вікно з білими буквами
  3. Наберіть команду subst z: d: \ sites \ mysite \ і натисніть Enter
  4. У каталозі «Мій комп'ютер» з'явиться новий диск z :, що є посиланням на каталог d: \ sites \ mysite \.

Припустимо, що у нас вільний диск Z:   Запустіть програму з меню Пуск> Всі програми> Стандартине> командного рядка - відкриється чорне вікно з білими буквами   Наберіть команду subst z: d: \ sites \ mysite \ і натисніть Enter   У каталозі «Мій комп'ютер» з'явиться новий диск z :, що є посиланням на каталог d: \ sites \ mysite \

Тепер можна відкрити файли на диску Z і перевірити, що адресація щодо кореня сайту працює.

Примітки

  1. Щоб відключити віруальний диск - наберіть в командному рядку subst z: / D
  2. Віртульльний диск відключається після виключення або перезавантаження комп'ютера. Файли при цьому зберігаються в цілості й схоронності в вихідному каталозі (d: \ sites \ mysite \). Процес автоматичного створення віртуального диска при запуску ОС описаний в статті на wikipedia.org . Також можете спробувати скористатися програмою FolderToDrive.
  3. Найпростіший спосіб отримати віртуальних сервер на домашньому / робочому комп'ютері - установка пакета DenWer .

Обговорення уроку на форумі

обговорити урок

Автор уроку

Найближчі курси по темі

DEV-P13. Професійна верстка сайтів

Курс поки не поставлений в розклад. Залишити заявку на курс

blog comments powered by

Виходить, що зручний і корисний спосіб адресації можна використовувати в момент створення сайту?
Раз вже Windows хоче, щоб файли лежали в кореневій папці диска, то може є спосіб представити нашу папку з сайтом d: \ sites \ mysite \ як окремий диск?