Subscribe
for our all latest news and updates



Home » , , » Mempelajari Struktur DOM dan Tag Meta Pada HTML

Mempelajari Struktur DOM dan Tag Meta Pada HTML


Halo Sobat Lautan, semoga sehat selalu ya. 
Kali ini kita akan mempelajari tentang DOM dalam dunia koding website. 
Apa sih itu DOM?

DOM, Document Object Model adalah dokumen untuk mempelajari model, hubungan suatu dari suatu tag html dengan tag html lainnya. 
Dapat dikatakan bahwa mempelajari DOM, berarti mempelajari hubungan darah antara 1 tag dengan tag yang lain. 
Apakah tag ini bertindak sebagai, bapak, anak, sepupu, atau saudara jauh. Dan dari DOM pula, kita dapat lebih mudah untuk mempelajari selektor pada CSS. 
Berikut ini adalah kerangka dan penjelasan dari struktur DOM.

http://anggun43ana.blogspot.com
Memahami DOM seolah menjadi kewajiban untuk programmer. 
Dan dengannya lah, kita dapat menjadikan DOM sebagai alur dalam penulisan skrip kita. Contoh dari tag HTML, maka setelahnya kita akan menulis tag Head. 
Meskipun hasil skrip yang menyertakan tag Head setelah HTML, digunaka atau tidak, hasil diperamban akan tetap sama. Namun, ini seperti halnya ISO dalam penulisan skrip. 
Mari kita lakukan percobaan. Ikuti beberapa skrip sederhana dibawah ini

<!DOCTYPE HTML>
<html>
       <head>
                <title>Coding Is Fun</title>
        </head>
<body>
            Coding Is Fun
</body>
</html>

<!DOCTYPE HTML>
<html>
     Coding Is Fun 
</html>

Cobalah skrip diatas kedalam text editor anda. Dan hasilnya akan sama. 
Lalu apa gunanya tag head dan title, jika hasilnya sama saja ? Seperti yang sudah Lautan disinggung diatas tadi, ini semacam ISO untuk para programmer. Anda bisa membaca ulang gambar dari blog mbak anggun, agar lebih memahaminya. Selanjutnya kita, akan mempelajari tag META


Tag Meta, sering muncul pada awal-awal skrip sebelum bagian Head. 
Anda dapat melihat lebih banyak contoh tag Meta pada bagian website, dengan klik kanan, lalu pilih View Page Source. Berikut ini adalah hasil dari page source pada website tertentu


Tag meta berfungsi untuk memberikan informasi mengenai halaman HTML yang akan ditampilkan. Dampak daripada Tag ini, tidak akan terlihat oleh pengunjung website, melainkan pada peramban anda. Dan dari seluruh tag ini, bersifat opsional, artinya tidak harus ada pada setiap skrip program yang anda buat. 

Hanya saja, untuk melewati ujicoba validalitas HTML5 atau 7, diperlukan tag Meta <meta charset="UTF -8">. Dan sekurang-kurangnya website pasti memiliki tag ini

<meta charset ="UTF -8">

Berfungsi untuk memberikan instruksi kepada web browser untuk mengartikan sebuah karakter kedalam bentuk UTF -8. Perlu diketahui, sebelum era HTML5, penulisan daripada bahasa cina, jepang, arab, thailand, tidak bisa menggunakan UTF -8. 
Mereka membutuhkan atribut dan value yang khusus atau menjadi ciri khas tersendiri

<meta name="author" content="Lautan-it.com">

Kita dapat mengetahui, bahwa fungsi Tag ini, adalah memberikan informasi kepada web browser, lebih tepatnya layout engine, untuk segera mencatat bahwa penulis daripada konten website tersebut adalah Lautan-it com

<meta http-equiv="X-UA-Compatible" Content ="IE=edge">

Tag ini berfungsi untuk memberitaukan bagi web browser terkhusus untuk internet explorer agar tidak masuk kedalam Compability View

<meta name="keywords" content="Tips And Trick">

Memberitaukan kepada web browser, keyword apa saja yang diunggulkan atau ditautkan pada sebuah halaman atau struktur dari HTML

<meta name="description" content="Berbagi Ilmu">

Seperti namanya, tag ini berfungsi untuk membuat web browser mengerti tentang deskripsi yang kita berikan untuk web kita sendiri

<meta name="viewport" content="....">

Tujuan dituliskan tag ini adalah untuk mendukung responsive web design. Artinya website akan tetap tampil dinamis mengikuti platform perangkatnya, seperti desktop atau mobile

<meta name="robots" content="index, nofollow">

Meta ini menjadikan web browser untuk tidak memasukkan struktur HTML kedalam pencarian atau index google. 
Namun, jika kita menginginkan halaman tersebut agar dimasukkan dalam index google, maka cukup dengan mengganti dari nofollow menjadi follow.

Sekian, pelajaran HTML, kali ini, pantengin terus Lautan IT ya :)

Thanks for reading & sharing LAUTAN-IT

Previous
« Prev Post

0 Comments:

Post a Comment

ISA Hacktiv8

ISA Hacktiv8
Selengkapnya Disini