Pengenalan HTML
HTML adalah bahasa pemrogrman markup yang mendeskrisikan sebuah halaman web.
l HTML merupakan singkatan dari Hyper Text Markup Languange
l Bahasa pemrogrman markup merupakan sekumpulan dari markup tag
l Dokumen HTML dideskripsikan dengan tag HTML
l Setiap tag html menjelaskan konten dokumen yang berbeda-beda
HTML Example
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Header pertama</h1>
<p>Paragraf pertama.</p>
</body>
</html>
Penjelasan dari contoh
· Deklarasi DOCTYPE yang ada di paling atas menjelaskan bahwa dokumen yang ditulis merupakan bertipe HTML
· Text yang ada di antara tag <html> dan </html> menjelaskan dokumen HTML tersebut
· Text yang ada di antara tag <head> dan </head> memberikan informasi mengenai dokumen tersebut
· Text yang ada diantara tag <title> dan </title> memberikan informasi mengenai judul dai dokumen tersebut. Title ini akan muncul seperti di bawah ini
· Text yang ada di antara tag <body> dan </body> menjelaskan konten halaman yang terlihat di browser
· Text yang ada di antara tag <h1> dan </h1> mendiskripsikan sebuah heading
· Text yang ada di antara tag <h1> dan </h1> mendiskrisikan sebuah paragraph
Dengan menggunakan deskripsi diatas, web broswer dapat menampilkan dokumen dengan sebuah heading dan sebuah paragraf.
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
HTML tag merupakan kata kunci (nama tag) yang di apit oleh dua buah kurung “<” dan “>” (tanpa tanda petik)
<tagname>Konten</tagname>
· BIasanya tag HTML muncul berpasangan seperti <p> dan </p>
· Tag pertama yang ada di pasangan tag tersebut disebut dengan tag awal (atau start tag dalam bahasa inggris) , dan tag kedua disebut dengan tag akhir (atau disebut juga dengan end tag dalam bahasa inggris )
· Tag akhir ditulis sama persis sperti dengan tag awal namun ditambahi slash “/” (tanpa tanda petik) sebelum nama tag tersebut
 | Tag awal atau start tag terkadang disebut juga dengan tag pembuka atau opening tag. Tag Akhir atau end tag disebut juuga dengan tag penutup atay closing tag. |
Web Browsers
Tujuan utama dati web browser (seperti chrome, IE, Firefox, Safari) untuk membaca halaman HTML dan menampilkannya.
Browser tidak menampilkan tag HTML namun menggunakan tag-tag tersebut untuk menentukan bagaimana menampilkan dokumen tersebut :
Struktur Halaman HTML
Dibawah ini menggambarkan struktur dari halaman HTML :
![clip_image003[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPl1nEBIEnyLGp4TGppGisNcwzx0a5YCK37bpmr2viwO_qOVlJBwsuVBm3XmIjgz7F4VDHuPDSEsxRkSLS4rl75b-qek-xd-9fFDsd1RX8bPndacgsdBwv2p-_V-NQPx2ab0om2K4sj8zZ/s1600-h/clip_image003%25255B1%25255D%25255B2%25255D.jpg "clip_image003[1]"){kind=small} | Hanya bagian <body> yang ada di area box hijau akan ditampilkan di web browser. |
Deklarasi <!DOCTYPE>
Deklasi <!DOCTYPE> membantu browser untuk mendisplay halaman web secara benar.
Ada berbagai tipe dokumen web.
Untuk menampilkan dokumen dengan benar, Browser harus mengetahui tipe dan versi dokumen tersebut.
The doctype declaration is not case sensitive. All cases are acceptable:
Deklarasi doctype tidak bersifat case sensitive. Artinya semua cara penulisan dibawah ini benar :
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
Deklasri yang Umum Digunakan
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![clip_image003[2]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmAIy_Swoci0iIf87-gjq3UGos8N9s79Ijm0NtUI6Cgw2uBWeuCxm1vPqcjTmejfCRd_ZOsMKOKapr7kSlswLM3lBQu391v1YJ4WSI_qsMMK3jsKOTRCqfBL2yKRhFduDlggFZvRpCjGmo/s1600-h/clip_image003%25255B2%25255D%25255B2%25255D.jpg "clip_image003[2]"){kind=small} | Semua materi yang ada di elerarning semuanya menggunakan HTML5 |
