Web bekerja dengan mengirimkan berkas ke peramban. Ada beberapa hal lain juga, tetapi utamanya mengirimkan berkas ke peramban.
Berbagai jenis berkas memiliki data yang berbeda-beda. Saat peramban menerima sebuah berkas, peramban akan memeriksa jenis berkas tersebut, dan melakukan apa yang dibutuhkan oleh jenis berkas tersebut.
Masuk
Jika Anda seorang pelajar, silakan masuk agar Anda dapat memperoleh manfaat maksimal dari halaman ini.
Jika Anda masuk pada tab lain, silakan segarkan halaman ini (tekan F5).
File teks biasa
Mari kita coba. Jalankan VSCode. Buat file baru dengan .txt ekstensi seperti moya.txt.
Ketik sesuatu dalam berkas, seperti Moya adalah kucing cantik..
Benar: Moya adalah kucing yang baik.
Simpan berkas dengan .txt ekstensi. Ekstensi itu penting. Ekstensi memberi tahu perangkat lunak, seperti Windows dan peramban Anda, jenis data apa yang ada di dalam berkas .txt Artinya teks biasa.
Berkas di Explorer
Sekarang, periksa berkasnya di Explorer. Tips: pintasan untuk membuka Explorer adalah Win+E. Artinya, tahan tombol Windows, lalu tekan E. Berikut tombol Windows-nya:
Berikut berkasnya di Explorer.
Anda tidak dapat melihat txt ekstensinya. Sungguh merepotkan. Windows telah "membantu" Anda dengan menyembunyikan ekstensi tersebut. Pada tab Tampilan, ekstensi File name extensions tersebut tidak dicentang.
Centang kotaknya, dan ekstensi akan ditampilkan.
Hore!
Hafidz
Apakah Mac juga menyembunyikan ekstensi?
Sepertinya tidak. Wildan mengirimi saya tangkapan layar Finder ini:
Masalahnya .txt ada pada ekstensi file. Terima kasih, Wildan!
File di browser
Buka peramban. Saya biasanya pakai Firefox dan Chrome, tapi apa pun boleh.
Buka berkas yang Anda buat. Coba Ctrl+O untuk menampilkan Open file dialog.
Catatan
Peramban cenderung menyembunyikan menunya. Ini Firefox, tanpa menu yang ditampilkan.
Jika saya menekan dan melepaskan tombol Alt, menu utama browser akan ditampilkan.
Oke, jadi Anda membuka txt berkas Anda. Peramban memuat berkas tersebut, memeriksa ekstensinya, dan tahu bahwa berkas tersebut seharusnya menampilkan data dengan font biasa. Berikut yang saya lihat:
Apa yang Anda lakukan:
- Anda membuat berkas teks.
- Anda memerintahkan peramban untuk membukanya.
- Peramban menunjukkan isi berkas.
berkas HTML
Kembali ke VSCode. Mulai berkas baru. Salin dan tempel ini:
- <h1>Moya</h1>
- <p>Moya adalah kucing yang baik.</p>
h1 adalah judul. p adalah paragraf. Kita akan membahas tagnya nanti.
Simpan berkas dengan html ekstensi. Saya beri nama berkas saya kity.html.
Buka berkas di peramban. Anda akan melihat sesuatu seperti:
Saat browser mendapatkan file dengan htmlekstensi tertentu, browser tahu ia harus menafsirkan data tersebut sebelum menampilkannya.
Berikut ini lagi isi berkasnya:
- <h1>Moya</h1>
- <p>Moya adalah kucing yang baik.</p>
h1 berarti judul, jadi Anda mendapatkan teks besar dan tebal.
p berarti paragraf, jadi Anda mendapatkan teks biasa dengan spasi di sekitarnya.
Jadi, browser membaca ini dari berkas...
- <h1>Moya</h1>
- <p>Moya adalah kucing yang baik.</p>
... tetapi itu menunjukkan...
Saat Anda melihat halaman, Anda bisa memberi tahu peramban untuk menampilkan apa yang dibacanya dari berkas tersebut. Tekan Ctrl+U. Cara ini berlaku di Windows. Mac mungkin berbeda.
Anda akan melihat:
Ini adalah tampilan sumber . Itulah data yang sebenarnya diterima peramban. Kemudian peramban merender sumber, yaitu menafsirkannya, dan menampilkan hasilnya:
Jadi:
- Tampilan sumber: apa yang diterima browser
- Tampilan yang dirender: apa yang ditampilkan browser kepada pengguna
Menampilkan HTML sebagai teks
Mari kita tipu peramban. Buat salinan berkas HTML Anda, dan beri txt ekstensi. Saya menamai berkas saya moya-fake.txt. Jadi, berkas ini berisi ini...
- <h1>Moya</h1>
- <p>Moya adalah kucing yang baik.</p>
... tetapi berkas tersebut memiliki txt ekstensi.
Sebelum Anda membuka berkas di browser, buatlah prediksi.
Anda memiliki berkas dengan tag HTML di dalamnya, tetapi berkas tersebut memiliki txtekstensi.
Apa yang akan ditampilkan browser saat Anda membuka berkas tersebut?
Jika Anda masuk sebagai siswa, pelajaran akan berhenti di sini, dan Anda akan diminta untuk mengetik jawaban. Jika Anda ingin mencobanya, mintalah akun di situs ini.
Inilah yang saya lihat:
Ini bukan tampilan sumber, ini tampilan biasa.
Peramban tidak menafsirkan tag HTML. Mengapa? Karena ekstensi berkasnya txt. Peramban hanya menampilkan isi txt berkas apa adanya. Peramban tidak melakukan rendering apa pun.
Sebuah berkas gambar
Cari berkas gambar di suatu tempat di komputer Anda. Saya akan menggunakan berkas ini kity.jpg:
Anda dapat mengunduh dan menggunakan gambar ini jika mau. Klik kanan dan simpan.
Buka berkas di peramban Anda dengan menekan Ctrl+O. Peramban akan melihat ekstensi berkasnya, jpg. Peramban akan berkata, "Self, jpg artinya data di dalam berkas tersebut adalah gambar." Jadi, itulah yang ditampilkan.
Ekstensi gambar umum lainnya adalah png. Ini adalah cara berbeda untuk mengodekan data warna. jpg Biasanya hanya digunakan untuk foto. png dapat menampilkan foto dan gambar dengan sama baiknya. Akan dibahas lebih lanjut nanti.
Jadi, ekstensi file itu penting. Ekstensi file memberi tahu peramban jenis data apa yang bisa diharapkan.
Tentang nama file
Nama berkas - bit sebelum ekstensi - juga penting.
Sebagian besar server web menjalankan sistem operasi Linux. Nama berkas Linux peka huruf besar-kecil. Jadi , berkas " kucing.html dan " kucing.html adalah berkas yang berbeda di Linux.
Itu menyebalkan.
URL yang mengakses berkas-berkas tersebut (URL akan dibahas nanti) juga berbeda. Jadi, https://eligiblemonkeys.net/Kucing.html dan https://eligiblemonkeys.net/kucing.html berbeda.
Memberi nama berkas dengan dua kata, seperti , adalah hal yang umum kucing cantik.html. Cara ini berhasil... sebagian besar. Terkadang, hal ini menimbulkan masalah.
Juga menyebalkan.
Solusinya? Saat memberi nama file, gunakan dua aturan ini:
- Hanya huruf kecil
- Untuk memisahkan kata, gunakan tanda hubung: -
Jadi beri nama file Anda seperti ini:
- kucing.html
- giant-flea.html
- evil-ant.jpg
Mulailah kebiasaan penamaan file yang baik sekarang. Ini akan menyelamatkan Anda dari masalah di kemudian hari.
Not graded. So why do it?
Ringkasan
Peramban menampilkan berkas. Ekstensi berkas memberi tahu peramban cara menampilkan data di dalamnya.
- txt - berkas teks. Tampilkan data apa adanya.
- html - sebuah berkas HTML. Interpretasikan data sebagai tag HTML.
- jpg - berkas gambar, disimpan menggunakan format JPEG.
- png - berkas gambar, disimpan menggunakan format PNG.
Untuk nama file, huruf kecil, dan tanda hubung.
Berikutnya
URL yang Anda ketik di peramban. Apa sebenarnya URL itu?