Kode Dasar HTML Bag. 1
Kode dasar HTML ini pasti terdapat di semua halaman web. Jadi, kode dasar inilah yang harus Anda kuasai terlebih dahulu.
Ini dia kode dasar tersebut:
Jangan bingung melihat kode-kode di atas, karena akan saya jelaskan satu-persatu.
Setiap kode punya pasangan, dan setiap pasangan saya beri warna yang sama.. Karena itu, coba mempelajarinya dengan cara melihat dan membandingkan kode dengan warna yang berbeda-beda tersebut.
Berikut penjelasannya:
1. <html>
Ini adalah kode atau tag yang terdapat di bagian atas dari semua halaman web.
(memang, pada halaman web masa kini, kadang-kadang ada juga kode tertentu yang terdapat sebelum kode HTML. Tapi ini kita abaikan dulu ya, berhubung ini masih pelajaran tingkat dasar)
Nah, setiap tag itu pasti ada tag penutupnya
(memang ada juga tag yang tak perlu pakai penutup, tapi ini akan kita pelajari nanti, ya....)
Maka, tag penutup dari <html> adalah </html>
PERBEDAANNYA:
Pada setiap tag penutup, setelah "<" pasti ada tanda "/".
2. <head>
Ini boleh dibilang sebagai "dapurnya halaman web". Kenapa? Sebab semua kode yang diletakkan di antara tag dan tidak akan terlihat di halaman web. Di bagian HEAD ini, kita bisa melakukan berbagai macam pengaturan, seperti:
- meletakkan kode javascript
- meletakkan kode css
- meletakkan meta tag
- dan seterusnya
3. <title>
Ini adalah tag untuk meletakkan JUDUL halaman web. Ingat, judul halaman web tidak sama dengan nama file.
Sebagai contoh, coba lihat ke bagian paling atas (pojok kiri) dari halaman ini. Di situ tertulis:
Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat: HMTL Itu Sangat Mudah!)
Nah, itu adalah title atau judul dari halaman ini.
Kebetulan, pada forum diskusi AB ini, title di atas dibuat secara otomatis oleh sebuah script. Namun bila dibuat secara manual, maka penulisannya sebagai berikut:
<title>Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat: HMTL Itu Sangat Mudah!)</title>
Nah, gampang, bukan?
4. <body>
Nah, body ini adalah tempat untuk meletakkan SEMUA HAL yang hendak kita tampilkan di halaman web kita.
Bila kode-kode lainnya adalah "urusan belakang layar", maka BODY ini adalah "urusan di depan layar" atau "panggung yang akan ditonton oleh hadirin".
Jadi, apapun yang kita letakan di bagian BODY, maka itulah yang akan dilihat oleh pengunjung website kita.
LATIHAN:
Oke, sebagai latihan, coba ketik ulang kode-kode berikut di Notepad (INGAT, JANGAN COPY PASTE, agar mudah dipahami)
<html>
<head>
<title>Website Pertama Gue</title>
</head>
<body>
Ini dia website pertamaku, bagus kan?
</body>
</html>
Setelah selesai, klik "Save As"
Pada bagian "Save as type", pilih "All Files"
Pada bagian "File Name", beri nama "index.html" (tanda " harus disertakan)
Cari lokasi penyimpanan, misalnya di Desktop
Klik "Save".
Nah, sekarang, coba masuk ke Desktop, klik dua-kali file "index.html" tadi, lalu lihatlah hasilnya.
Selamat mencoba!
Kode dasar HTML ini pasti terdapat di semua halaman web. Jadi, kode dasar inilah yang harus Anda kuasai terlebih dahulu.
Ini dia kode dasar tersebut:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Jangan bingung melihat kode-kode di atas, karena akan saya jelaskan satu-persatu.
Setiap kode punya pasangan, dan setiap pasangan saya beri warna yang sama.. Karena itu, coba mempelajarinya dengan cara melihat dan membandingkan kode dengan warna yang berbeda-beda tersebut.
Berikut penjelasannya:
1. <html>
Ini adalah kode atau tag yang terdapat di bagian atas dari semua halaman web.
(memang, pada halaman web masa kini, kadang-kadang ada juga kode tertentu yang terdapat sebelum kode HTML. Tapi ini kita abaikan dulu ya, berhubung ini masih pelajaran tingkat dasar)
Nah, setiap tag itu pasti ada tag penutupnya
(memang ada juga tag yang tak perlu pakai penutup, tapi ini akan kita pelajari nanti, ya....)
Maka, tag penutup dari <html> adalah </html>
PERBEDAANNYA:
Pada setiap tag penutup, setelah "<" pasti ada tanda "/".
2. <head>
Ini boleh dibilang sebagai "dapurnya halaman web". Kenapa? Sebab semua kode yang diletakkan di antara tag dan tidak akan terlihat di halaman web. Di bagian HEAD ini, kita bisa melakukan berbagai macam pengaturan, seperti:
- meletakkan kode javascript
- meletakkan kode css
- meletakkan meta tag
- dan seterusnya
3. <title>
Ini adalah tag untuk meletakkan JUDUL halaman web. Ingat, judul halaman web tidak sama dengan nama file.
Sebagai contoh, coba lihat ke bagian paling atas (pojok kiri) dari halaman ini. Di situ tertulis:
Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat: HMTL Itu Sangat Mudah!)
Nah, itu adalah title atau judul dari halaman ini.
Kebetulan, pada forum diskusi AB ini, title di atas dibuat secara otomatis oleh sebuah script. Namun bila dibuat secara manual, maka penulisannya sebagai berikut:
<title>Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat: HMTL Itu Sangat Mudah!)</title>
Nah, gampang, bukan?
4. <body>
Nah, body ini adalah tempat untuk meletakkan SEMUA HAL yang hendak kita tampilkan di halaman web kita.
Bila kode-kode lainnya adalah "urusan belakang layar", maka BODY ini adalah "urusan di depan layar" atau "panggung yang akan ditonton oleh hadirin".
Jadi, apapun yang kita letakan di bagian BODY, maka itulah yang akan dilihat oleh pengunjung website kita.
LATIHAN:
Oke, sebagai latihan, coba ketik ulang kode-kode berikut di Notepad (INGAT, JANGAN COPY PASTE, agar mudah dipahami)
<html>
<head>
<title>Website Pertama Gue</title>
</head>
<body>
Ini dia website pertamaku, bagus kan?
</body>
</html>
Setelah selesai, klik "Save As"
Pada bagian "Save as type", pilih "All Files"
Pada bagian "File Name", beri nama "index.html" (tanda " harus disertakan)
Cari lokasi penyimpanan, misalnya di Desktop
Klik "Save".
Nah, sekarang, coba masuk ke Desktop, klik dua-kali file "index.html" tadi, lalu lihatlah hasilnya.
Selamat mencoba!
Tidak ada komentar:
Posting Komentar