0Pricing
HTML Academy · Pelajaran

URL Absolut vs Relatif

Pahami perbedaan antara jalur absolut dan relatif.

URL Absolut vs Relatif adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu Alamat Web?

Alamat web (pelokasi sumber daya seragam) adalah alamat lengkap suatu sumber daya di web.

Alamat web memiliki bagian-bagian berikut:

https://example.com:443/products/widget?color=red#reviews
│     │           │   │               │          │
│     │           │   │               │          └─ Fragment
│     │           │   │               └─ Query string
│     │           │   └─ Path
│     │           └─ Port
│     └─ Domain
└─ Protocol

Alamat Web Absolut

Alamat web absolut memuat alamat lengkap—protokol, domain, dan jalur:

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->

Alamat Web Relatif

Alamat web relatif bersifat relatif terhadap lokasi halaman saat ini—tidak memerlukan protokol atau domain:

<!-- Current page: https://example.com/blog/post.html -->

<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->

<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->

<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->

Tiga Jenis Alamat Web Relatif

Alamat web relatif memiliki tiga bentuk:

<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>

<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>

<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">

Bernavigasi dengan ../ --

Gunakan ../ untuk naik satu tingkat direktori:

<!-- File structure:
/
├── index.html
├── about.html
└── blog/
    ├── post1.html
    └── post2.html
-->

<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a>          <!-- same folder -->
<a href="../">Home</a>                   <!-- up one level -->
<a href="../about.html">About</a>        <!-- up then file -->

Kapan Menggunakan Alamat Absolut atau Relatif

Panduan:

  • Sumber daya eksternal — selalu absolut: https://...
  • Sumber daya CDN — absolut atau relatif terhadap protokol
  • Navigasi internal — relatif terhadap akar (/page) adalah yang paling aman
  • Direktori yang sama — relatif (page.html) lebih praktis

Relatif terhadap Akar Bersifat Portabel

Alamat web relatif terhadap akar (/path) tetap berfungsi saat halaman dipindahkan:

<!-- If this page moves from /blog/post.html to /articles/post.html -->

<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a>  <!-- always → example.com/contact -->

<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a>  <!-- different result in new location -->

Elemen Dasar

Elemen <base> di <head> menetapkan alamat web dasar untuk semua tautan relatif:

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- This resolves to: https://example.com/docs/guide.html -->
  <a href="guide.html">Guide</a>
</body>

Pengodean Alamat Web

Karakter khusus dalam alamat web harus dikodekan dengan persen:

<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>

<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>

<!-- Common encodings:
  space → %20
  & → %26
  = → %3D
  # → %23
-->

Alamat Web Kanonis

Jika sebuah halaman dapat diakses melalui beberapa alamat web, gunakan tag kanonis untuk menyatakan alamat yang dipilih:

<head>
  <!-- Prevents duplicate content SEO penalty -->
  <link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->

Praktik Terbaik Alamat Web

Ikuti konvensi alamat web berikut:

  • Gunakan hanya huruf kecil
  • Gunakan tanda hubung (bukan garis bawah) untuk memisahkan kata
  • Buat alamat web tetap singkat dan deskriptif
  • Hindari karakter khusus—lakukan pengodean terhadapnya
  • Gunakan alamat relatif terhadap akar untuk tautan internal

Pemeriksaan Cepat

Anda memiliki berkas di /blog/post.html dan ingin menautkan ke /about.html. Alamat web relatif mana yang paling aman?

Rangkuman: Alamat Web Absolut vs Relatif

Rangkuman jenis alamat web:

  • Absolut — alamat web lengkap yang mencakup protokol dan domain
  • Relatif terhadap akar — dimulai dengan /, relatif terhadap akar domain
  • Relatif — relatif terhadap lokasi berkas saat ini
  • ../ — naik satu tingkat direktori
  • <base href> — menetapkan dasar untuk semua alamat web relatif

Pertanyaan yang Sering Diajukan

Apakah pelajaran “URL Absolut vs Relatif” gratis?

Ya — teks lengkap “URL Absolut vs Relatif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “URL Absolut vs Relatif”?

Pahami perbedaan antara jalur absolut dan relatif. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “URL Absolut vs Relatif” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Elemen anchor dan Atribut href
  2. URL Absolut vs Relatif
  3. Membuka Tautan di Tab Baru dan Atribut Download
  4. Menautkan ke Bagian dengan Identifier Fragmen
← Kembali ke HTML Academy