Assalamu’alaikum Wr. Wb
Pengantar
Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Artikel sebelumnya sudah membahas tentang Tag, Element, dan Atribut yang untuk mengetahui dari setiap artikel kata tersebut, agar tidak salah artikan pada saat penyebutan atau kode html. Selanjutnya artikel yang dibahas yaitu tentang Perkenalan HTML dan Praktek. Mulai dari sini akan banyak praktek.
Saya yakin banyak dari teman-teman pasti sudah banyak praktek membuat kode HTML. Dari sini saya harapkan teman-teman mulai membaca dengan teliti lalu praktekan dan pahami dari setiap kode-kode yang dibuat.
Struktur Dasar HTML
Setiap halaman HTML memiliki struktur dasar HTML yang wajib deiketahui untuk calon program, Seperti tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Pada membahasan sebelumnya sudah membahas sedikit tentang arti dari kata tag, element, dan atribut. Disini kita akan sedikit mendalami dari tag DTD atau DOCTYPE. Dibawah ini adalah contoh kode tersetruktur
 |
| Gambar 1 |
 |
| Gambar 2 |
Disebelah kiri adalah kode terstruktur dan sebelah kanan hasil kode terstruktur.
Keharusan penulisan doctype berasal dari bahasa yang dinamakan SMGL dan XML. Keduanya adalah bahasa markup dimana HTML dan XHTML dikembangkan.Contoh doctype ditulis untuk HTML versi 4.01 :
 |
| Gambar 3 |
Penulisan DOCTYPE diatas untuk HTML 4.01 strict. Penulisan doctype harus mencantumkan versi HTML yang akan ditulis (HTML 4.01/EN), diikuti dengan alamat (dalam contoh diatas adalah : http://www.w3.org/TR/html4/strict.dtd). Untuk versi XHTML, penulisan doctype yang panjang tidak jauh beda, contoh :
 |
| Gambar 4 |
Lalu bagaimana penulisan doctype pada HTML5?
Penulisan doctype pada HTML5 jauh lebih sederhana. Contoh penulisannya :
 |
| Gambar 5 |
Singkat bukan? Mudah banget untuk diingat. Hal ini karena HTML5 tidak lagi bagian dari bahasa SMGL yang mengharuskan penulisan doctype berserta alamat DTD-nya. Bahkan HTML5 tidak membutuhkan penulisan doctype sama sekali (opsional).
Singkat bukan? Mudah banget untuk diingat. Hal ini karena HTML5 tidak lagi bagian dari bahasa SMGL yang mengharuskan penulisan doctype berserta alamat DTD-nya. Bahkan HTML5 tidak membutuhkan penulisan doctype sama sekali (opsional).
Tetapi melihat perilaku web browser dalam me-render (membaca, mengolah, dan menampilkan) halam web, terdapat 2 mode yang mungkin akan dijalankan oleh web browser, yaitu Mode Standar dan Mode Quirks.
Mode Standar, untuk menampilkan berbagai elemen HTML, browser akan menggunakan konfigurasi CSS pada halaman. Mode ini hanya akan dijalankan ketika web browser mendapati adanya deklarasi doctype pada HTML.
Mode Quirks, web browser menganggap bahwa halaman web belum dibuat sesuai standar HTML.
 |
| Gambar 6 |
Document Object Model (DOM)
Adakah yang sudah dengar
DOM? DOM (Document Object Model) adalah tag-tag pada HTML yang memiliki
struktur sendiri, yang disebut HTML tree (Pohon HTML) atau diistilahkan dengan
DOM. Konsep DOM sangat penting untuk dipahami, sebagai dasar untuk belajar
JavaScript.
 |
| Gambar 7 |
Aturan Dasar Penulisan HTML
Pada penulisan kode-kode HTML mempunyai beberapa aturan yang dapat mempengaruhi baik atau buruknya penulisan kode yang dibuat. Aturan-aturan dasar HTML seperti :
- Case Sensitivity
- Yang dimaksud penulisan bahasa pemograman dengan huruf kecil dan huruf besar. Sangat disarankan menggunakan huruf kecil agar terkesan rapi pada saat penulisan kode HTML.
- Self Closing Tag
- Tag <meta>, <br>, dan <img> tag-tag ini disebut juga sebagai void element. Sedangkan tag <br/> ditulis XHTML, penulisan ini disebut juga dengan self closing tag
-
- Pasangan Tag penutup
- Sebagian besar penulisan tag berpasangan, jadi jangan lupa untuk penutup tag agar dapat berjalan setelah penulisan kodenya.
- Contoh :
-
Gambar 8 
Gambar 9 - Disebelah kiri adalah kode tidak ditutup dan sebelah kanan hasil kodenya.
-
Gambar 10 
Gambar 11 - Disebelah kiri adalah kode ditutup dan sebelah kanan hasil kodenya.
- Sampai sini, sudah ada yang sedikit berbeda, maka pada saat penulisan kode perhatikan tag penutupnya.
- Whitespace
- Whitespace adalah spasi pada saat penulisan kode HTML. penulisan SPASI kode HTML tidak akan tampil di layar pada saat dijalankan, seperti : Spasi, tab, dan enter.
- Membuat komentar
- Saat menulis kode HTML perlu catatan atau penanda untuk pengingat kode yang ditulis digunakan untuk apa dan fungsinya.
- Contoh :
-
Gambar 12 
Gambar 13 - Disebelah kiri adalah komentar dan sebelah kanan hasil komentarnya.
-
Gambar 14
- Komentar yang dibuat tidak akan tampil dilayar.
- Kutipan tugal atau ganda
-
Gambar 15 
Gambar 16 - Disebelah kiri adalah kode kutipan dan sebelah kanan hasil kode kutipan.
- Disini kita menggunakan kutipan tugal atau kutipan ganda, tergantung penulisan kode atau gaya masing-masing.
Kesimpulan
Pada pembahasan tentang HTML (Hypeterxt Markup Language) yang kontennya adalah Perkenalan HTML dan Praktek merupakan awal untuk praktek dan terus praktek belajar HTML.
Jadi untuk lanjut ke artikel-artikel selanjutnya teman-teman bisa membaca ulang tulisan ini dengan teliti, pahami, lalu praktekan. Jika ada kesulitan teman-teman bisa tanyakan di kolom komentar pada website kami.
Terima kasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti kanal chanel kami
Youtube Alami Computer
Website Alami Computer
Instagram chaerullah.fadli