Jalur relatif dan absolut ke file. HTML: Tautan absolut dan relatif

Dalam tutorial ini, kami akan menjelaskan kepada pemula apa itu jalur absolut dan relatif ke suatu file, dan juga dalam hal mana yang lebih baik untuk digunakan. Jika Anda sudah familiar dengan topik ini, Anda dapat melanjutkan ke pelajaran berikutnya.

Jadi, mari kita mulai dengan definisi istilah “jalan” itu sendiri:

Path (jalur bahasa Inggris) - sekumpulan karakter yang menunjukkan lokasi file dalam sistem file, alamat direktori.

Wikipedia

Jika kita berbicara tentang situs, maka jalurnya sama dengan link. Tautan bisa bersifat absolut atau relatif. Mari kita lihat kedua opsi tersebut secara lebih rinci.

Apa yang dimaksud dengan jalur file absolut

https://www.google.com/images/branding/googlelogo.png

Jalur absolut dapat digunakan di CSS. Misalnya, untuk menyetel gambar sebagai latar belakang, Anda dapat mengambil URL absolut ke file gambar DAN menentukannya di stylesheet:

Gambar latar belakang: url(http://www.example.com/img/bg.png);

Apa itu jalur file relatif

Dengan alamat relatif, semuanya jauh lebih menarik - dapat dihitung baik dari root situs maupun dari dokumen saat ini. Jalur relatif root- ini adalah jalur yang menunjukkan lokasi file relatif terhadap direktori root situs. Dalam hal ini, alamat tersebut tidak berisi protokol atau nama domain, dan dimulai dengan garis miring / , yang menunjukkan folder root. Alamat ini terlihat seperti ini:

Gambar latar belakang: url(/img/bg.png);

Bagaimana cara mudah menentukan alamat relatif root? Ambil saja tautan absolut dan hapus protokol dan nama domain darinya, tinggalkan garis miring dan semua karakter setelahnya.

Jalur file relatif dari dokumen adalah jalur ke file relatif terhadap dokumen saat ini. Alamat ini bergantung pada lokasi file tempat penulisannya. Jadi, ketika tautan relatif ditentukan dalam stylesheet, jalur file dihitung berdasarkan stylesheet, bukan halaman web atau folder akar saat ini. Mari kita berikan beberapa contoh.

Contoh I

Jika stylesheet style.css dan file gambar latar belakang bg.png berada dalam folder yang sama (belum tentu root), maka jalur relatif dari tabel ke gambar akan terlihat seperti ini:

Gambar latar belakang: url(bg.png); /* anda tinggal menulis nama filenya */

Contoh II

Jika stylesheet ada di root dan gambar ada di folder img, link relatifnya akan seperti ini:

Gambar latar belakang: url(img/bg.png); /* tidak perlu menggunakan garis miring */

Contoh III

Jika style sheet ada di dalam folder, dan gambar bersebelahan dengan folder ini, maka jalur relatifnya akan seperti ini:

Gambar latar belakang: url(../bg.png); /* dua titik - naik satu tingkat */

Contoh IV

Jika style sheet ada di dua folder, dan gambar bersebelahan dengan folder pertama, maka jalur relatifnya adalah sebagai berikut:

Gambar latar belakang: url(../../bg.png); /* naik dua level */

Dua titik dan garis miring di awal jalur relatif berarti naik satu tingkat. Bergantung pada jumlah level (direktori) yang ingin Anda naiki, Anda harus memasukkan jumlah titik yang diperlukan dengan garis miring. Misalnya, jika style sheet tidak terletak di dua, tetapi di empat folder, maka entrinya adalah sebagai berikut:

Gambar latar belakang: url(../../../../bg.png);

Jika gambar disembunyikan di folder img, dan style sheet disembunyikan di folder css, Anda harus keluar dari folder css dan masuk ke folder img. Seperti ini:

Gambar latar belakang: url(../img/bg.png);

Jika ada beberapa folder, Anda juga harus mendaftarkannya. Mari kita ubah contoh sebelumnya: bayangkan di folder img ada folder background lain yang berisi gambar kita. Jalur relatifnya akan seperti ini:

Gambar latar belakang: url(../img/backgrounds/bg.png);

Cara mana yang lebih baik untuk digunakan

Alamat tautan mutlak Anda harus menggunakannya jika file yang Anda tautkan ada di situs lain. Dalam satu situs, jalur absolut praktis tidak digunakan (meskipun akan berhasil). Hal ini disebabkan oleh beberapa hal: pertama, tautan tersebut bisa sangat rumit, dan kedua, jika nama domain diubah, masalah akan muncul - semua tautan akan mengarah ke domain lama, yang dapat menyebabkan banyak kesalahan dan tautan rusak.

Jalur relatif root akan berfungsi di server web, tetapi tidak berguna saat dikembangkan di komputer lokal. Namun keuntungan dari tautan jenis ini adalah Anda dapat memindahkan style sheet Anda ke folder mana pun di situs dan tidak takut URL gambar latar belakang rusak.

Jalur relatif dari dokumen- pilihan terbaik untuk pengembangan web di mesin lokal tanpa menggunakan server. Di browser, Anda akan dapat melihat halaman web yang disimpan di komputer Anda secara normal, dan alamat file akan berfungsi. Mereka akan bekerja di situs langsung, tetapi dengan satu syarat - jika Anda tidak memindahkan style sheet ke tempat lain (jika tidak, Anda harus menyesuaikan jalurnya).

Cobalah berlatih menggunakan jalur relatif di komputer lokal dan server web Anda. Memahami cara kerjanya tentu akan berguna bagi Anda dalam proyek apa pun.

Lebih lanjut dalam tutorial: properti background-repeat - mengontrol pengulangan gambar latar belakang.

Artikel tersebut berisi potongan kode. Versi lengkapnya dapat diunduh di sini - https://bitbucket.org/okiseleva/html-and-css-learn/src. Folder - “absolute_path_lvl_1” dan semua subfolder.

Jalurnya bisa absolut atau relatif.

Jalan mutlak

Jalur absolut adalah jalur dari folder root ke file.

Jalurnya terdiri dari semua folder yang perlu kita lihat, dipisahkan dengan garis miring. Mari kita lihat sebuah contoh:

/absolute_path_lvl_1/level_2.1/level_3.1/Kevin.png

Jalur absolut ke file

Jalur relatif

Jalur relatif adalah tautan yang mengarah ke laman lain di situs Anda relatif terhadap laman web yang tautannya sudah ada.

Jika kita memindahkan folder ke bawah, kita juga memisahkannya menggunakan “/”. Jika Anda perlu naik level, tulis “..”

1. Contoh paling sederhana dari jalur relatif hanyalah nama file. jika file tersebut ada di dekatnya, cukup sebutkan namanya

Halo.png

Jalur relatif, file terdekat


2. Naik satu folder

../Kevin_lvl_2.png

Jalur relatif 2

3. Contoh yang lebih rumit, dari Diff_paths.html ke foto bersama Kevin

../level_2.1/level_3.1/Kevin.png

Jalur relatif 3


Apa perbedaan antara jalur absolut dan relatif?

Ini sangat sederhana. Jika jalur ditentukan dari root sistem, maka ini adalah jalur absolut. Ini seperti alamat pos dalam kehidupan nyata - ke mana pun Anda pergi, tetapi dengan alamat yang tepat Anda akan selalu menemukan tempat yang tepat.

Jika root tidak ditentukan di awal jalur, maka jalur ini akan bersifat relatif, dan akan dibangun dari posisi saat ini. Dalam kehidupan nyata, ini seperti jalan menuju toko minuman keras - "dua blok ke kiri dan lurus sepanjang waktu". Jalur ini hanya dapat dicapai dari titik tertentu. Dari yang lain Anda akan berakhir di tempat yang sama sekali berbeda.

Dalam berkas absolute_path_lvl_1/level_2.2/Diff_paths.html Anda dapat melihat contoh halaman HTML dengan jalur file berbeda.

Berikut adalah contoh jalur absolut dan relatif untuk file yang sama dengan Kevin.


D:/hgprojects → Saya mengunduh proyek “html-and-css-learn” di sini. Anda mungkin punya cara lain


PS - lebih detail di buku "

Bahkan pengembang yang cukup berpengalaman pun sering bingung dengan jalur absolut di CSS.

Jalur mutlak

Dengan yang absolut semuanya menjadi sederhana. Mereka bekerja dengan cara yang sama di CSS dan HTML..jpg akan mengarah ke http://site/img/miimage.jpg tidak peduli halaman apa yang dibuka pengguna.

Jalur relatif dalam HTML

Jalur relatif, jika halaman tidak memiliki tag dasar, diukur relatif terhadap jalur halaman saat ini..zip">test akan menunjuk ke http://site/blog/post/test.zip.

< head > < base href = " http://сайт/ " /> < body > < a href = " test.zip " >tes

Jalur relatif dalam CSS

Dalam CSS, jalur relatif tidak diukur dari jalur halaman, melainkan dari jalur menuju CSS itu sendiri.

Misalnya untuk file http://site/css/test.css

badan ( latar belakang: url (" tes .png " ) ; )

browser akan mencoba memuat gambar di http://site/css/test.png.

Komentar RSS

    Anehnya, "pengembang pemula" ini tidak pernah membaca dokumentasi atau mencoba mencari tahu sendiri sebelum bertanya. Semoga sebagian besar dari mereka setidaknya bertanya pada mesin pencari terlebih dahulu.

    Terkadang mereka mengganggu Anda dengan pertanyaan yang sama. Saya menjalankan bagian tentang pemrograman di satu forum, tetapi sebagian besar pendatang baru (menurut saya setidaknya 60-80%) tidak mencoba menulis program mereka dalam Pascal sebelum bergabung dengan forum. Tampaknya, orang-orang ini tidak pernah mencoba berpikir sendiri. Dan alangkah baiknya jika mereka bertanya tentang beberapa kasus khusus, tetapi mereka malah bertanya tentang implementasi algoritma populer seperti mencari pembagi persekutuan terbesar.

    Tetapi orang-orang seperti itu juga dibutuhkan, jika tidak, dengan latar belakang siapa para profesional akan terlihat bagus? ;)

    Saya berharap saya dapat menulis tentang hal ini, karena dasar-dasarnya telah ditulis.

    Mana yang lebih baik untuk digunakan: tag dasar atau tautan absolut (dengan host situs)? IE, misalnya, menambahkan konten tag dasar ke tautan jangkar (#foo lama http://site.com#foo).

    Ekstasi, jadi sama saja tanpa./ . Atau tentang segala macam...?

    Kosteg, tergantung situasinya.

    Tentang segala macam...

    Sederhana dan jelas, mungkin melanjutkan topik Anda bisa membuat beberapa postingan “cara membuat jalur di PHP menggunakan array global”

    Dari pengalaman saya tahu bahwa lebih baik menulis basis. Jika tidak, menari dengan browser mungkin akan dimulai.

    Eksperimen saya menunjukkan bahwa tag hanya memengaruhi tautan seperti ./index.html Dan indeks.html. Tetapi /index.html mengarah ke root situs yang diatur dengan metode lain...

    Saya tidak ingin berbicara buruk tentang orang pintar yang berbicara buruk tentang pendatang baru. Namun terlepas dari banyak hal yang telah dikatakan, masih ada satu pertanyaan (dan ini mungkin yang membuat khawatir semua pemula). Apakah mungkin untuk mendaftarkan jalur untuk gambar yang sama jika halaman dan gambar berada di folder berbeda? Itu. Anda memerlukan jalur absolut, tetapi tidak ada gunanya menggunakannya, karena semua ini ada di localhost. Tapi ada kebutuhan mendesak untuk melihatnya di komputer lain, dan localhost sudah berbeda. Anda membawa semua beban berat ini pada flash drive di dalam saku yang menggantung dari beban, dan pada akhirnya Anda tidak melihat satu gambar atau halaman pun selain halaman beranda. Newbie itu menatapku sambil berkata, kok sudah berminggu-minggu aku tidak tidur, tapi di mana? Tetapi hanya di komputer Anda sendiri, atau membuang semua halaman ke dalam satu folder, meskipun jumlahnya banyak - apakah itu yang terjadi? Atau masih ada jalan?

    anak baru, jalur absolut tidak perlu menyertakan nama host. Cukup memulainya dengan /.

    Saya membuat pendaftaran. Di file index.php ada tautan ke pendaftaran Pendaftaran Tapi di situs ketika Anda mengklik Pendaftaran situs tidak melihat file dan tidak menampilkan formulir. Saya mencoba Registrasi Registrasi Jalur ke file melewati file berikut di server domains/stroy-master.in.ua/public_html/wp-content/themes/stroy-master/

Alamat tautan dapat bersifat absolut atau relatif. Alamat absolut harus diawali dengan protokol (biasanya http://) dan berisi nama situs.

Tautan relatif didasarkan pada akar situs atau dokumen saat ini.

Contoh 8.2 menunjukkan cara membuat tautan absolut ke situs lain.

Contoh 8.2. Menggunakan referensi absolut

Alamat mutlak

Belajar HTML

Saat Anda menentukan direktori situs sebagai tautan (misalnya, http://site/css/), file indeks akan ditampilkan. Ini adalah file yang dimuat secara default saat mengakses direktori tanpa menentukan nama file secara eksplisit. Biasanya file indeks adalah dokumen bernama index.html.

Tautan absolut biasanya digunakan untuk menunjuk ke dokumen di sumber jaringan lain, namun tautan absolut juga dapat dibuat dalam situs saat ini.

Namun, hal ini jarang dilakukan, karena tautan tersebut cukup panjang dan rumit. Oleh karena itu, tautan relatif sebagian besar digunakan di dalam situs.

Tautan relatif terhadap dokumen saat ini

Nama file ini diambil hanya sebagai sampel; di situs, karakter Rusia dengan spasi tidak boleh digunakan dalam nama file, dan bahkan dalam kasus yang berbeda.

2. File-file tersebut ditempatkan di folder yang berbeda (Gbr. 8.5).

Jika dokumen sumber disimpan dalam satu folder, dan dokumen tertaut berada di root situs, maka dua titik dan garis miring (/) harus ditempatkan di depan nama file di alamat tautan, seperti gambar di bawah ini.

Dua titik dalam hal ini berarti meninggalkan folder saat ini ke tingkat yang lebih tinggi.

3. File-file tersebut ditempatkan di folder yang berbeda (Gbr. 8.6).

Sekarang file sumber ada dalam dua subfolder, dan untuk menautkan ke dokumen di root situs, Anda perlu mengulangi contoh sebelumnya dua kali.

Link

Situasi serupa terjadi pada sejumlah subfolder.

4. File-file tersebut ditempatkan di folder yang berbeda (Gbr. 8.7).

Sekarang situasinya berubah, file sumber terletak di root situs, dan file yang ingin Anda tautkan ada di folder. Dalam hal ini, jalur ke file tersebut adalah sebagai berikut.

Link

Perhatikan bahwa tidak ada titik atau garis miring tambahan sebelum nama folder.

Link

Jika file tersebut terletak di dalam bukan hanya satu, tetapi dua folder, maka path ke sana ditulis seperti ini.

Tautan relatif terhadap root situs Terkadang Anda dapat menemukan jalur ke file yang berhubungan dengan root situs, seperti apa"/Folder/Nama file" dengan garis miring di awal. Ya, rekam Kursus

berarti tautan tersebut mengarah ke folder bernama kursus, yang terletak di root situs, dan di dalamnya Anda perlu mengunduh file indeks.

Jalur mutlak


Harap dicatat bahwa bentuk perekaman ini tidak berfungsi pada komputer lokal, tetapi hanya di bawah kendali server web.
Dalam hal ini, semuanya sangat sederhana, kami menunjukkan jalur langsung ke file yang terletak di domain lain. Dimungkinkan untuk menentukan jalur yang dipersingkat dengan menggunakan dua garis miring di awal tanpa menentukan http atau https secara eksplisit, dan server itu sendiri akan mengganti protokol (ekstensi) yang diperlukan sesuai dengan pengaturan server. Penting untuk dicatat bahwa tampilan ini diperlukan untuk bernavigasi antar situs:

http://google.com


Relatif terhadap root situs Dalam hal ini, browser mengambil domain situs web dan mengganti tautan yang ditentukan ke domain tersebut. Dalam hal ini akan berhasil http://site/css/style.css.

Dalam kasus http, tidak perlu khawatir tentang https, karena akan diambil dalam bentuk halaman yang sedang dibuka, yaitu dengan http akan menjadi http. Ini juga sangat nyaman untuk mentransfer fungsionalitas tertentu antara situs yang berbeda atau mentransfer situs dari satu domain ke domain lain tanpa menyentuh kodenya. Cara prioritas untuk menentukan jalur ke halaman dan file.


Metode yang kurang populer karena mengambil halaman saat ini dan menambahkan alamat baru ke jalurnya ..com/trick/css/style.css . Hampir tidak mungkin digunakan jika kita menggunakan CNC.

Menggunakan tag dasar


Dalam hal ini, alih-alih substitusi domain standar, jalur dari basis akan diganti dengan jalur relatif. Artinya, kita akan menerima file yang terletak:
http://site/tricks/css/style.css

Jalur relatif dan absolut di PHP

Semuanya sangat sederhana, saat bekerja di sistem file kita akan mematuhi aturan untuk bekerja dengan jalur di PHP. Jika kita meneruskan perintah ke browser klien, maka jalur HTML akan digunakan. Artinya, dalam contoh berikut, kita meneruskan jalur dari PHP ke browser dengan halaman yang harus dituju. Fakta bahwa browser telah melakukan transisi antar halaman dapat dilihat di bilah alamat:
header("Lokasi: /page2.php");
Jadi, kita buka halaman page1.php, dan page2.php tertulis di bilah alamat, dan intinya adalah browser PERTAMA memuat halaman page1.php, dan kemudian menerima informasi dengan pengalihan dan MEMUAT halaman kedua halaman2. php. Dalam hal ini pengalihannya ada di sisi klien (browser), artinya kita menggunakan aturan terkait HTML (alamat web).

Jalur absolut di PHP

Jalur absolut dalam PHP diperlakukan sebagai jalur absolut dari direktori tempat server web diinstal. Jalur ini dapat diperoleh dari:
$_SERVER["DOCUMENT_ROOT"]
Jika kita mengambil server ini sebagai contoh, jalurnya adalah: /home/school/public_html/schoolphp, artinya untuk menentukan jalur lengkap ke foto “/photo/img1.jpg”, Anda perlu menentukan yang berikut ini jalur:
getimagesize("/home/sekolah/public_html/schoolphp/photo/img1.jpg"); getimagesize($_SERVER["DOCUMENT_ROOT"]."/photo/img1.jpg");
Saya ingin mencatat bahwa situs tersebut dapat ditempatkan di subdirektori, yaitu untuk:
http://situs/forum/
Menggunakan DOCUMENT_ROOT bisa sangat sulit karena forum (sebagai skrip eksternal) belum mengetahui di mana lokasinya di situs. Ada beberapa cara untuk mengatasi masalah ini, mari kita daftar beberapa:

1) Buat halaman sebagai subdomain.

2) Tulis path absolut pada config di config.php, yaitu:
Inti::$ROOT = $_SERVER["DOCUMENT_ROOT"]; getimagesize(Inti::$ROOT."/photo/img1.jpg"); // gunakan jalur absolut yang dapat dimodifikasi
Sekarang Anda dapat menautkan seluruh situs ke Core::$ROOT tanpa penyesalan apa pun, dan jika Anda secara tidak sengaja perlu mengubah jalur ke file yang disertakan, Anda dapat mengganti nilai Core::$ROOT;

Relatif terhadap file awal (basis)

Dalam banyak sistem index.php hanya ada satu titik masuk, yaitu index.php terbuka, dan file lain terhubung darinya.
sertakan "./modules/allpages.php";
Dalam hal ini, allpages.php akan terhubung di sepanjang jalur: /home/school/public_html/schoolphp/modules/allpages.php. Cara ini nyaman karena jika Anda menulis include di file allpages.php: include "./modules/module/page.php";, maka akan tetap dicari relatif terhadap titik masuknya, yaitu index.php:
/home/school/public_html/schoolphp/modules/module/page.php
Ini adalah implementasi yang cukup mudah mengingat kita mengetahui dengan jelas struktur aplikasi kita relatif terhadap root index.php. Bahkan jika kita memanggil file lain selain index.php, jalurnya akan bekerja sama persis. Kami memanggil dir.php , yang berarti jalur yang akan diambil relatif terhadap file dir.php!

Apa lagi yang perlu Anda ketahui?

Saya tidak bisa tidak mengingatkan mereka yang lupa atau menyarankan kepada mereka yang tidak tahu bahwa Anda tidak hanya dapat kembali jauh ke dalam direktori, tetapi juga ke atas (folder kembali), dan sintaksisnya cukup sederhana:
sertakan "../file.php";
Dalam hal ini, direktori file ini atau root index.php akan diambil dan dikembalikan 1 folder kembali, dimana file “file.php” akan dicari.

DOCUMENT_ROOT bukan satu-satunya pilihan untuk mendapatkan jalur root situs. Mari kita lihat manualnya: "Direktori akar dokumen tempat skrip saat ini dijalankan sama persis dengan yang ditentukan dalam file konfigurasi server." . Artinya, jika jalur dalam file konfigurasi salah ditulis, seluruh situs tidak akan berfungsi. Apa yang harus dilakukan? Anda dapat menyurati admin dan pemilik hosting yang menampung server tersebut dengan harapan dapat memperbaiki kekurangannya. Atau cari alternatif yang stabil, yaitu __DIR__ , ini adalah jalur absolut ke file tertentu tempat kode dijalankan. Katakanlah kita memiliki file konfigurasi di folder config, dan dengan menggunakan __DIR__ kita tidak perlu kembali satu folder ke atas setiap kali dengan menulis __DIR__"/../" kita dapat dengan aman menulis __DIR__ ke dalam variabel kita, pada contoh di bawah ini saya menulisnya di properti kelas (pelajaran no. 24, siapa yang belum mengerti, gunakan variabel biasa):
Inti::$ROOT = __DIR__; // Atau untuk PHP lama - dirname(__FILE__);
Saya juga ingin mengingatkan Anda tentang sesuatu yang menarik dan penting. Menurut keamanan, server web melarang berpindah melalui direktori di atas root situs. Artinya, situs tersebut terletak di jalur berikut: /home/school/public_html/schoolphp, tetapi konten folder /home atau /home/school tidak akan dapat dibaca.

Bisakah PHP menggunakan jalur HTML? Ya, dalam fungsi khusus, misalnya:
file_get_contets("http://situs");

Praktik

Di proyek lama saya, saya menggunakan DOCUMENT_ROOT, sekarang saya beralih ke jalur relatif index.php "./folder/file".

Zend2, produk dari pengembang PHP, salah satu FrameWork terkompleks saat ini juga menggunakan jalur relatif dengan sintaks yang berbeda dengan milik saya, yaitu “folder/file”.

Forum IPB.3 menggunakan dirname(__FILE__).

Kesimpulan:

1) Dalam HTML kita menggunakan path yang berhubungan dengan root situs, yaitu “/file.php” (Baris dimulai dengan memotong).
2) di PHP kita menggunakan file yang relatif ke root "./file.php" (Baris dimulai dengan titik dan garis miring), alternatifnya adalah menggunakan properti yang diinisialisasi di root: __DIR__;
3) Pengalihan header menggunakan jalur dari HTML. PHP bekerja dengan sistem file (menghubungkan file, menyimpan dan mengedit gambar) - dengan jalur PHP.
  • Sergei Savenkov

    semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat