1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
---
title: Berurusan dengan fail
slug: Learn/Memulakan_pembelajaran_web/Berurusan_dengan_fail
tags:
- Beginner
- CodingScripting
- Files
- Guide
- HTML
- theory
- website
translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
<div class="summary">
<p>Sebuah laman web merangkumi banyak fail: kandungan teks, kod, stylesheet, kandungan media, dan sebagainya. Apabila anda membangunkan sebuah laman web, anda perlu menghimpunkan fail-fail ini dalam struktur yang wajar di komputer anda, pastikan fail-fail ini dapat berhubung antara satu sama lain, dan menjadikan kandungan anda nampak betul, sebelum anda akhirnya <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">memuat naik ke pelayan</a>. Berurusan dengan fail membincangkan beberapa isu yang anda patut peka supaya anda boleh menetapkan struktur fail yang wajar untuk laman web anda.</p>
</div>
<h2 id="Di_manakah_laman_web_anda_patut_berada_di_dalam_komputer_anda">Di manakah laman web anda patut berada di dalam komputer anda?</h2>
<p>Apabila anda mengerjakan laman web anda di komputer anda sendiri, anda perlu menyimpan fail-fail yang berkaitan di dalam folder tunggal yang mirip dengan struktur fail untuk laman web yang diterbitkan di pelayan. Folder ini boleh berada di mana sahaja anda suka, tetapi anda patut letaknya di tempat yang anda mudah untuk menjumpainya, mungkin di Desktop anda, dalam folder Home, atau di root pemacu keras anda.</p>
<ol>
<li>Pilih tempat untuk menyimpan projek-projek laman web anda. Di sini, cipta sebuah folder baru yang dinamakan <code>web-projects</code> (atau serupa). Di sinilah kesemua projek-projek laman web anda akan berada.</li>
<li>Di dalam folder pertama ini, cipta folder lain untuk menyimpan laman web pertama anda. Namakannya <code>test-site</code> (atau sesuatu yang lebih imaginatif).</li>
</ol>
<h2 id="Catatan_tentang_casing_dan_spacing">Catatan tentang casing dan spacing</h2>
<p>Anda akan perasan bahawa sepanjang artikel ini, kami meminta anda untuk menamakan folder-folder dan fail-fail sepenuhnya dalam huruf kecil tanpa jarak, Ini kerana:</p>
<ol>
<li>Kebanyakan komputer, terutamanya pelayan web, adalah case-sensitive. Sebagai contoh, jika anda meletakkan sebuah imej di laman web anda di<code> test-site/MyImage.jpg</code>, dan dalam fail yang lain anda cuba untuk memanggil imej tersebut sebagai <code>test-site/myimage.jpg</code>, ia mungkin tidak berfungsi.</li>
<li>Pelayar-pelayar web, pelayan-pelayan web, dan bahasa-bahasa pengaturcaraan tidak mengendalikan ruang dengan konsisten. Sebagai contoh, jika anda menggunakan ruang di dalam nama fail, sesetengah sistem mungkin akan menganggap nama fail tersebut sebagai dua nama. Sesetengah pelayan akan menggantikan ruang tersebut di dalam nama fail anda dengan "%20"(kod karakter untuk ruang dalam URI), merosakkan kesemua pautan anda. Lebih baik untuk mengasingkan perkataan dengan tanda sempang atau garis bawah: <code>my-file.html</code> atau <code>my_file.html</code>.</li>
</ol>
<p>Untuk sebab-sebab ini, ia adalah sangat baik untuk menjadikan tabiat menulis nama-nama folder dan fail dalam huruf kecil tanpa ruang, sekurang-kurangnya sehingga anda tahu apa yang anda buat. Dengan cara tersebut anda akan kurang terlibat dengan masalah.</p>
<h2 id="Apakah_struktur_yang_patut_dimiliki_laman_web_anda">Apakah struktur yang patut dimiliki laman web anda?</h2>
<p>Seterusnya, mari lihat struktur apa yang laman web kita patut ada. Benda asas utama yang kita akan ada dalam apa-apa projek laman web yang kita cipta adalah fail index HTML dan folder-folder untuk menyimpan imej-imej, fail-fail style, dan fail-fail script. Mari kita cipta ini sekarang:</p>
<ol>
<li><code><strong>index.html</strong></code>: Secara umumnya fail ini mengandungi kandungan halaman utama, iaitu teks dan imej-imej yang dilihat orang apabila mereka mula-mula pergi ke laman anda. Dengan menggunakan editor teks anda, cipta fail baru dinamakan <code>index.html</code> dan simpan ia di dalam folder <code>test-site</code> anda.</li>
<li><strong><code>folder images</code></strong>: Folder ini akan mengandungi kesemua imej yang anda gunakan di laman anda. Cipta sebuah folder dinamakan <code>images</code>, di dalam folder <code>test-site anda.</code></li>
<li><strong><code>folder styles</code></strong>: Folder ini akan mengandungi kod CSS yang digunakan untuk mengayakan kandungan anda (sebagai contoh, menetapkan teks dan warna-warna latar belakang). Cipta sebuah folder dinamakan <code>styles</code>, di dalam folder <code>test-site anda.</code></li>
<li><strong><code>folder scripts</code></strong>: Folder ini akan mengandungi kesemua kod JavaScript yang digunakan untuk menambah fungsi interaktif ke dalam laman anda (cth. button yang memuatkan data apabila diklik). Cipta sebuah folder dinamakan <code>scripts</code>, di dalam folder <code>test-site anda.</code></li>
</ol>
<div class="note">
<p><strong>Nota</strong>: Dalam komputer Windows, anda mungkin menghadapi masalah melihat nama-nama fail kerana Windows mempunyai satu pilihan yang menjengkelkan dinamakan <strong>Hide extensions for known file types </strong>yang dihidupkan secara default. Secara umumnya, anda boleh mematikannya dengan pergi ke Windows Explorer, memilih pilihan <strong>Folder options...</strong>, menyahtik pada kotak pilihan <strong>Hide extensions for known file types</strong>, kemudian klik <strong>OK</strong>. Untuk maklumat spesifik merangkumi versi Windows anda, lakukan carian Yahoo!</p>
</div>
<h2 id="Path_fail">Path fail</h2>
<p>Untuk membuat fail-fail berhubung antara satu sama lain, anda perlu menyediakan path antara mereka — secara asasnya sebuah route supaya satu fail tahu di mana fail yang satu lagi. Untuk mendemonstrasikan ini, kita akan memasukkan sedikit HTML ke dalam fail <code>index.html</code>, dan membuatkan ia memaparkan imej yang anda pilih di dalam artikel "Bagaimanakah laman web anda akan kelihatan?"</p>
<ol>
<li>Salin imej yang anda pilih sebelum ini ke dalam folder <code>images</code> anda.</li>
<li>Buka fail <code>index.html</code> anda, dan masukkan kod di bawah ke dalam fail yang ditunjukkan. Jangan risau tentang apa semua maksud ini buat masa sekarang — kita akan lihat dengan lebih terperinci pada strukturnya nanti dalam siri tersebut.
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="" alt="My test image">
</body>
</html> </pre>
</li>
<li>Baris <code><img src="" alt="My test image"></code> adalah kod HTML yang memasukkan sebuah gambar ke dalam laman tersebut. Kita perlu beritahu HTML di mana gambar tersebut. Imej tersebut berada dalam direktori <em>images</em> , yang mana dalam direktori sama seperti <code>index.html</code>. Untuk menelusuri struktur fail daripada <code>index.html</code> kepada imej kita, path fail yang kita perlukan adalah <code>images/nama-failimej-anda</code>. Sebagai contoh, imej kita dinamakan <code>firefox-icon.png</code>, jadi path fail adalah <code>images/firefox-icon.png</code>.</li>
<li>Masukkan path fail ke dalam kod HTML di antara tanda petikan berganda kod <code>src=""</code>.</li>
<li>Save fail HTML anda, kemudian muatkannya di pelayar web anda (klik dua kali fail tersebut). Anda patut boleh lihat halaman web baru anda memaparkan imej anda!</li>
</ol>
<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
<p>Beberapa peraturan umum untuk path fail:</p>
<ul>
<li>Untuk menghubungkan fail sasaran di dalam direktori yang sama dengan fail HTML yang memanggilnya, cuma guna nama fail, cth. <code>imej-saya.jpg.</code></li>
<li>Untuk merujuk fail di dalam subdirektori, tulis nama direktori tersebut di hadapan path, tambahan tanda palang ke hadapan, cth. <code>subdirektori/imej-saya.jpg</code>.</li>
<li>Untuk menghubungkan fail sasaran di dalam direktori di atas fail HTML yang memanggil, tulis dua titik. Jadi sebagai contoh, jika <code>index.html</code> berada dalam subfolder <code>test-site</code> dan <code>imej-saya.png berada dalam test-site, </code>anda boleh merujuk <code>imej-saya.png </code>daripada <code>index.html menggunakan </code> <code>../imej-saya.png</code>. <code> </code></li>
<li>Anda boleh menggabungkan ini sebanyak mungkin yang anda suka, sebagai contoh <code>../subdirektori/subdirektori-lain/imej-saya.png</code>.</li>
</ul>
<p>Buat masa ini, ini adalah antara kesemua yang anda perlu tahu.</p>
<div class="note">
<p><strong>Nota</strong>: Sistem fail Windows cenderung untuk menggunakan garis palang terbalik, bukannya garis palang ke hadapan, cth. <code>C:\windows</code>. Ini tidak penting — walaupun anda membangunkan laman web anda dengan Windows, anda masih perlu menggunakan garis palang ke hadapan di dalam kod anda.</p>
</div>
<h2 id="Apakah_lagi_yang_perlu_diselesaikan">Apakah lagi yang perlu diselesaikan?</h2>
<p>Cukup lah buat masa ini. Struktur folder anda patut kelihatan seperti ini:</p>
<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
|
