-- Sturktur HTML --
Sturktur HTML
Sebelum kita menuliskan code - code HTML, pertama kita harus pahami dulu struktur penulisan code HTML terlebih dahulu.
- Silahkan buka text editor ATOM, dan kita akan menuliskan code struktur HTML di dalam file index.html yang sudah kita buat.
- Tulislah struktur code HTML sebagai berikut :
- Tulislah struktur code HTML sebagai berikut :
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> |
Memahami Istilah Dasar Pada HTML
Kita akan memahami istilah-istilah dasar pada HTML yaitu :
- Element HTMLJika kita bilang element, maka yang dimaksud adalah satu bagian utuh yang terdiri dari tag, atribut, dan seluruh teks yang berada di antara tag pembuka dan penutup. Namun untuk mempermudah memahami element berikut adalah beberapa contoh dari element :
Element Meta : <meta charset="utf-8">
Element html : <html></html>
Element Head : <head></head>
Element title : <title></title>
Element body : <body> </body> - Tag (Pembuka dan Penutup) dan Self Closing Tag
Tag adalah bagian dari sebuah element, tag sendiri ada yang disebut : tag pembuka, tag penutup, dan Self Closing Tag
Kita akan coba memahami ketiga hal tersebutTag Pembuka :- Pada Element Body yang disebut tag pembuka adalah : <body>
- Pada Element Title yang disebut tag pembuka adalah : <title>
Tag Penutup :- Pada Element Body yang disebut tag pembuka adalah : </body>
- Pada Element Title yang disebut tag pembuka adalah : </title>
Self Closing Tag :Self closing tag adalah element dalam HTML ada yang tidak memiliki pasangan tag pembuka dan tag penutup
contoh : <meta charset="utf-8">
Ada banyak element yang sifatnya self closing tag seperti :<area /> <base /> <br /> <col /> <command /> <embed /> <hr /> <img /> <input /> <keygen /> <link /> <menuitem /> <meta /> <param /> <source /> <track /> <wbr />
Penulisan “/” pada self closing tag pada HTML 5 bersifat optional, dan lebih baik ditinggalkan. Sehingga nanti ketika kita belajar menuliskan Element yang sifatnya self closing tag, kita bisa cukup menuliskannya seperti ini : <meta>, <img>, <hr>, <br> dan seterusnya
Namun sekarang kita tidak akan membahas fungsi dari element element tersebut, kita saat ini hanya memahami istilah-istilah yang berada di dalam element HTML - AtributeAtribute adalah informasi tambahan yang ditulis pada tag pembuka. Fungsi dari atribut ini bermacam-macam tergantung nilai dan pada tag mana ia ditempatkan
Untuk memahami atribute maka kita akan menuliskan contoh element yang didalamnya memiliki attribute
<a id="info" href="https://niomic.com">Info Pembelajaran HTML</a>
|
Untuk mempermudah memahami atribute kita akan membaca satu persatu dari code html yang sudah kita tulis di atas
- Element a : <a id="info" href="https://niomic.com">Info Pembelajaran HTML</a>
- Tag Pembuka : <a id="info" href="https://niomic.com">
- Tag Penutup : </a>
- Atribute : id="info" dan href="https://niomic.com"
- Nama atribute : id dan href
- Nilai atribute / value atribute : "info" dan "https://niomic.com"
- DOCTYPE / DTD (Document Type Declaration)
DOCTYPE atau Document Type Declaration (DTD) adalah sebuah keterangan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan. doctype ditulis pada baris pertama halaman HTML.
Pada HTML versi 4.01, DOCTYPE ditulis seperti ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> |
Pada HTML 5 Penulisan doctype jauh lebih sederhana yaitu : <!DOCTYPE html>
- Body Element
Di dalam element body inilah tempat kita akan menuliskan code code HTML yang akan kita tampilkan pada web browser
<body>
<a id="info" href="https://niomic.com">Info Pembelajaran HTML</a> </body> |
Belum ada Komentar untuk "-- Sturktur HTML --"
Posting Komentar