Daftar Isi:
Struktur HTML Dasar Halaman Web
Secara sederhana, struktur dokumen HTML dari sebuah halaman web kurang lebih seperti dibawah ini:<!DOCTYPE html> <html> <head> <title>Judul Halaman</title> </head>
<body> <!-- Elemen HTML yang ada disini akan ditampilkan pada browser --> </body></html>Keterangan:
<!DOCTYPE html> | Mendefinisikan tipe dokumen ke HTML. Penulisan <!DOCTYPE html> selalu diletakkan diposisi paling atas. Singkatnya, ini berfungsi untuk memberitahukan browser bahwa tipe dokumen / halaman yang bersangkutan adalah HTML. Ini bertujuan agar web browser dapat menterjemahkan / menampilkan halaman web secara benar. Ada beberapa tipe dokumen web, agar browser dapat menterjemahkan dokumen dengan benar, browser harus tahu tipe dan versi dari dokumen yang bersangkutan. Untuk <!DOCTYPE html> ini sendiri merupakan deklarasi untuk HTML5 yang merupakan versi terakhir saat ini.Sebagai tambahan, urutan update HTML dari versi awal hingga terakhir (saat ini) adalah:
Setiap versi HTML didefinisikan dengan DOCTYPE yang berbeda-beda. Lebih lengkap tentang ini tidak akan saya ulas lebih jauh, kita fokus pada HTML5 saja yang merupakan versi terakhir saat ini. Atau, anda bisa melihat daftar deklarasi DOCTYPE untuk masing-masing versi HTML pada situs w3schools di sini. |
<html> dan </html> | Tag paling dasar (root) yang digunakan untuk membuat sebuah dokumen / halaman HTML. |
<head> dan </head> | Ini adalah elemen HTML yang bertugas untuk memberikan informasi terkait hal-hal seputar halaman bersangkutan. Bagian yang ada diantara tag <head> dan </head> ini tidak akan ditampilkan pada layar browser. Ini umumnya berisi seputar informasi judul halaman, deskripsi, author, meta robot, dan lain sebagainya. Bagian ini juga merupakan salah satu lokasi utama dalam penempatan CSS dan Javascript (akan saya bahas pada materi selanjutnya). |
<title> dan </title> | Ini adalah tag yang digunakan untuk mendefinisikan judul dokumen html. Pada suatu halaman html, hanya ada satu tag <title/>, dan ini umumnya ditempatkan didalam tag <head/>. Isi / text yang terdapat diantara tag title ini akan ditampilkan pada tab browser. |
<body> dan </body> | Merupakan tubuh utama dari halaman web. Element-element yang terdapat diantara tag inilah yang akan ditampilkan pada layar browser. |
Dasar Penting Dalam Mempelajari Tag-tag HTML
Anda mungkin bertanya-tanya, apa sih yang saya maksud dengan tag HTML ?, untuk lebih mudahnya, merujuk pada kode dokumen html diatas, kode<html>, <head>, <title>, dan <body> inilah yang merupakan contoh tag-tag HTML. Ada banyak sekali tag HTML untuk mendefinisikan berbagai elemen tertentu. Tag-tag pada HTML ini memiliki Tag Pembuka dan Tag Penutup. Adapun format penulisannya adalah:<namatag> Isi atau Content </namatag>Untuk lebih mudahnya, beberapa pengetahuan dasar yang sangat penting mengenai struktur tag HTML ini akan saya sampaikan dengan mode dialog ^_^.
Apakah tag html harus memiliki penutup ?
Harus ..!, Contoh: tag
<title> harus ditutup dengan </title>, tag <p> harus ditutup dengan </p>. Untuk pembuatan tag Tanpa Isi, tag tetap harus ditutup. Pembuatan tag yang tidak memiliki isi bisa dilakukan dengan format <namatag></namatag> atau cukup dengan <namatag/>. Apakah didalam tag bisa dibuat tag lagi (sub tag) ?
Jelas Bisa dan memang begitulah dokumen html dibuat ^_^.
Contoh html:
Hasil:
Contoh penerapan huruf tebal pada kalimat.
Contoh html:
<p> Contoh penerapan <b>huruf tebal </b> pada kalimat.</p>Hasil:
Contoh penerapan huruf tebal pada kalimat.
Kalau semua tag harus ditutup, pada struktur dasar dokumen html diatas,
<!DOCTYPE html> kenapa gak ditutup ?Pertanyaan Cerdas ..! ^_^.
Pada struktur dasar dokumen html diatas,
Pada struktur dasar dokumen html diatas,
<!DOCTYPE html> bukanlah tag html. Ini merupakan (anggaplah) fungsi / aturan dalam penulisan dokumen html. Tujuannya ya seperti yang sudah dijelaskan diatas, yaitu untuk memberitahuan browser tentang tipe dan versi dari halaman web yang bersangkutan, dalam kasus ini adalah bertipe HTML dengan versi HTML5 ^_^. PENTING..!
Sebagai bekal awal, memahami format penulisan merupakan hal dasar yang sangat penting, Terutama untuk pemahaman dalam menempatkan posisi tag penutup. Bisa dikatakan, "Kuncinya tu Disini" ^_^.
Kesalahan Umum:
Dalam proses awal belajar tag html, kesalahan seperti contoh dibawah ini merupakan salah satu bentuk kekeliruan umum yang (mungkin) bisa dikatakan wajar jika dilakukan oleh mereka yang benar-benar baru. Kesalahan ini berkaitan dengan posisi penutupan sebuah tag.
Penulisan Salah:
<p>Contoh penulisan <i><b>tag html</i></b> yang salah</p>Pada contoh diatas, kesalahan penulisan terjadi pada tag <i> (huruf miring / italic) dan <b> (huruf tebal / bold). Struktur dari cohtoh diatas adalah tag <b> terletak didalam tag <i>, itu hartinya, penutup untuk tag <b> yang benar adalah diletakkan sebelum penutup tag <i>.
Penulisan Benar:
<p>Contoh penulisan <i><b>tag html</b></i> yang benar</p> Hasil:
Contoh penulisan tag html yang benar
Pada tahap ini, anda sedikit banyak telah memahami struktur dasar serta bagaimana format penulisan tag html pada website / blog. Diatas merupakan pengetahuan tentang format tag html dasar. Untuk tag-tag html sendiri, ini pada umumnya memiliki satu / lebih Atribut. Untuk lebih mudahnya, materi tentang atribut tag html ini akan saya bahas pada materi selanjutnya dan diikuti juga dengan praktek / latihan membuat halaman / dokumen html secara offline dengan sedikit penerapan CSS untuk mengatur style / gaya elemen tertentu.
0 Response to "Basic HTML: Struktur Dasar dan Format Penulisan Tag-tag HTML"
Posting Komentar