Files, Folders & Navigation

Setelah lesson ini, kamu dapat menghubungkan dua berkas HTML dengan navigasi dua arah dan memahami path folder.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Tautan about.html bekerja dari halaman utama, tetapi tidak dari folder artikel. Mengapa nama berkas yang sama bisa memberi hasil berbeda?

Menghubungkan dua berkas HTML dengan navigasi dua arah dan memahami path folder.

PAHAMI KONSEPNYA

Bayangkan lokasi berkasmu

Jika index.html dan about.html berada dalam satu folder, keduanya saling menautkan cukup dengan nama berkas. Dari folder articles/, ../about.html berarti naik satu folder dahulu. Assets/photo.svg berarti masuk ke folder assets yang berada di bawah lokasi saat ini.

Ejaan adalah bagian dari alamat

Gunakan nama sederhana dan konsisten seperti about.html. Banyak server membedakan huruf besar dan kecil: About.html bisa berbeda dari about.html. Hindari menempel alamat C:\... dari komputer sendiri karena pengunjung lain tidak memiliki berkas itu.

Dua halaman tetap dua dokumen

Setiap berkas memiliki head dan body sendiri, serta title yang berbeda. Dalam editor Lucia, pilih nama berkas untuk mengedit dan melihat preview halaman tersebut. Preview tidak membuka tautan keluar; pemeriksa akan memeriksa relasi antarberkas pada latihan dua halaman.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<!-- Struktur: index.html, about.html, assets/observatory.svg -->
<!-- Pada index.html -->
<a href="about.html">Tentang kebun</a>

<!-- Pada about.html -->
<a href="index.html">Kembali ke beranda</a>

<!-- Dari articles/intro.html ke beranda -->
<a href="../index.html">Beranda</a>

HASIL DI BROWSER

Contoh menunjukkan potongan dari tiga lokasi berbeda. Setiap href dihitung dari berkas tempat link ditulis.

KESALAHAN YANG SERING TERJADI

<a href="C:\Users\Aku\about.html">Tentang</a>

Itu lokasi di komputer pribadi. Gunakan path relatif dalam folder situs, misalnya about.html untuk berkas sejajar.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Dari articles/intro.html, bagaimana menuju index.html pada folder di atasnya?

index.html../index.htmlarticles/index.html

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Buka jalan pergi dan pulang

Edit kedua berkas. Di index.html, buat link ke about.html dengan teks “Tentang taman”. Di about.html, buat link kembali ke index.html dengan teks “Beranda taman”. Pertahankan judul tab yang berbeda.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Taman Baca</title>
</head>
<body>
<h1>Taman Baca</h1>
<p>Ruang membaca bersama.</p>
</body>
</html>

index.htmlHTMLLn 1, Col 112 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Berkas sejajar dapat saling menautkan dengan nama berkas.
../ naik satu folder; / dimulai dari akar situs.
Setiap halaman tetap membutuhkan dokumen dan judulnya sendiri.

Tautan

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Relative path °Tautan °URL °

Library: Membaca alamat web tanpa tersesat ↗

Ke lesson berikutnya →