Struktur-struktur Dasar pada HTML

Struktur-struktur Dasar pada HTML - hello sobat, pada artikel ini melanjutkan tentang pembelajaran HTML tentang tag - tag dan element maupun atribut, yang telah saya jelaskan pada posting sebelumnya, maka sekarang saya akan membagikan tentang membuat struktur - struktur pada HTML.

Struktur-struktur Dasar pada HTML

Jika anda membuka sebuah situs di browser anda, maka yang tampil pastinya, judul dari situs tersebut atau halaman tersebut, serta di ikuti halaman tampilan website tersebut, nahh itulah merupakan bagian dari struktur - struktur html ,mengapa sampai bisa tercipta sebuah text dan bacaan.

setiap halaman HTML memiliki struktur, yang terdiri dari DTD / DOCTYPE (biasa di bahasa pascal kita memulainya dengan perintah program, jika di html memulainya dengan doctype / tipe dokument. tetapi bukan berarti ini ketetapan, bisa saja anda tulis dengan XML VERSION / HTML duluan. tergantung apa yang ingin anda buat,

namun umumnya memakai DOCTYPE untuk bahasa HTML sebuah halaman, selanjutnya ada TAG HTML, TAG HEAD, TAG BODY, saya rasapelajari dasar - dasar ini dulu, untuk strukturnya. karena memang inilah struktur dasar dari HTML.

Contoh dibawah ini stuktur dasar dari bahasa web HTML : Bisa anda copy ke dalam Notepad++ atau Ke Notepad bawaan windows, atau bisa juga ke dalam MS.word. dan Jangan Lupa Save Ekstensinya Dengan Ekstensi ".HTML" .(contoh : belajacodehtml.HTML).

<! DOCTYPE HTML>
<html>
<head>
   <title>JUDUL HALAMAN</titile>
</head>
<body>
   <p> ini merupakan kalimat yang berbentuk paragraf bro </p>
</body>
</head>
</html>

setelah anda save. maka secara otomatis Icon notepadnya akan berubah menjadi tampilan icon browser yang ada di komputer anda , jika memakai browser mozilla maka akan menjadi icon browser mozilla.

langsung saja di buka file HTML tersebut. maka outputnya akan menjadi seperti ini :

Pengertian DTD atau DOCTYPE

DTD atau doctype (document type declaration), merupakan tag paling awal dalam sebuah struktur HTML , tag ini berfungsi untuk memberitahukan browser bahwa dokumen yang akan di proses ke browser adalah bahasa web HTML.

TAG DTD bukan hanya satu , yang telah saya jelaskan tadi diatas bahwasannya ada beberapa versi DTD yang dapat dipakai, pada kasus contoh di atas kita menggunakan DTD versi HTML5 . DTD memiliki beberapa text panjang juga, yang merupakan sebuah script seperti java script ,mungkin hampir susah di hafal. contoh xHTML 1.0 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Pertanyaannya apakah bisa tanpa menggunakan DTD langsung membuat tag HTML , tentu bisa AKAN TETAPI, disini kita perlu ketahui, bahwa setiap program akan memerlukan identitas , type maupun jenisnya. dengan memasukkan keterangan perintah di dalamnya.

contoh di dalam pascal ada pernyataan pertama "PROGRAM Hitung" ; disana menjelaskan bahwa identitas program tersebut adalah benar dengan menunjukkan "PROGRAM" dan sebagai judul adalah "HITUNG".

maka jika di HTML tidak di beri identitasnya DTD pada WEB browser menganggap Kode HTMLnya Bukan VersiHTML, dan merupakan Halaman Yang usang yang memiliki aturan berbeda, dengan begitu jika nantinya anda menambahkan CSS maka ada Sebagian KODE CSS yang tidak akan berfungsi di dalamnya. karena HTML yang anda masukkan tidak terdapat versinya dan identitasnya.

dan biasanya browser akan menampilkan halaman kode tersebut dalam Mode quirk mode. atau halaman yang usang atau yang berbeda ,bukan HTML.

Terus bagaimana Mengetahui perbedaan bahwa browser sedang menjalankan dalam ke adaan quick mode atau standart. Mau tau ? cobalah anda jalankan/buka 2 HTML satu dengan DTD dang satunya lagi Tanpa DTD atau tidak memakai kode doctype. setelah itu Klik kanan pada halamnya , pilih VIEW PAGE INFO maka akan nampak seperti ini infonya.

ket :

quick mode = tanpa DTD
Standards compliance mode = memakai DTD.

saya rasa sudah jelas tentang DTD , selanjutnya tentang struktur kode TAG HTML, berikut ini :

Pengertian TAG <html> .

setelah memasang tag DTD atau doctype, maka akan di lanjutkan oleh tag <html> , tag ini merupakan bagian dari semua tag yang ada di bawahnya atau tag pembungkus induk, dan di tutup juga dengan tag </html> , seperti yang telah saya terangkan pada Posting sebelumnya, dan bisa anda lihat pada struktur kode yang telah tadi anda COPY dan jalankan.

TAG <head> .

setelah tag html , ada tag kepala atau head, dimana kode dibawah head biasanya terdapat keterangan - keterangan dari halaman tersebut , seperti meta - meta tag dan CSS dalam sebuah halaman template blog maupun website.

tag <title> menampilkan sebuah judul dari halaman yang anda buat, seperti struktur dasar html tadi bahwa judulnya adalah "JUDUL HALAMAN" ketika html tersebut di buka di browser. anda bisa ganti sendiri untuk mengetestnya,

Tag <body>

body atau kerangka badan, dimana letak semua text , gambar akan berada di tag body, tag - tag <img>, <p>, <i>, <a> semua bisa anda terapkan disini, tetapi jangan sampai salah menutup masing - masing tag. setelah itu semuanya akan kembali di tutup dengan tag , </body> jadi element yang ada di antara <body> dan </body> merupakan bagian dari pembungkus body

dan tag terakhir adalah tag </html> yang merupakan tag penutup dari stuktur yang telah anda buat. sampai disini stuktur HTML dasar anda telah dibuat, untuk melanjutkan pembelajaran HTML ,KLIK SAJA INI Cara mudah Membuat Paragraf di HTML (tag p), mengenai materi membuat halaman text paragraf dalam struktur HTML.