# Belajar HTML HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah sebuah bahasa standar untuk pembuatan halaman web. Dengan adanya HTML, kita dapat membedakan struktur yang tersusun dari sebuah halaman melalui tag atau elemen-elemen penyusunnya. Elemen atau tag pada HTML dikenali oleh browser seperti google chrome, firefox atau Ms Edge, dll. Browser tersebut mengidentifikasi setiap elemen penyusun HTML dan ditampilkan sesuai karakteristik elemen tersebut. Contohnya sebuah elemen paragraph akan ditampilkan sebagai tulisan panjang, atau sebuah elemen pranala/link akan dicetak dengan warna biru dan ketika mouse mendekat kursornya berubah menjadi telunjuk, dsb. Contoh Code : ``` <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ``` Dari contoh di atas kita dapat mengidentifikasi elemen-elemen nya seperti berikut * element <!DOCTYPE html> mengartikan bahwa dokumen ditulis dengan versi HTML5 * element ``<html>`` adalah elemen induk atau elemen utama yang sering disebut juga root element dari sebuah halaman HTML. * elemen ``<head>`` berisi informasi tentang halaman HTML yang sedang dibuat * elemen ``<title>`` adalah judul dari halaman HTML yang akan tampil di tab browser. # Elemen pada HTML Elemen atau sering disebut dengan tag pada HTML adalah penyusun dari sebuah halaman web yang dapat dikenali oleh browser dan ditampilkan oleh browser sesuai karakteristik masing-masing. Sebuah elemen HTML terdiri dari tag pembuka(start/open tag), atribut (attribute), isi (content), dan tag penutup(close tag). ![](https://hackmd.io/_uploads/SySQQ8qn2.png) pada ilustrasi di atas merupakan sebuah elemen paragraph dibuka dengan tag pembuka ``<p>`` . Di dalam tag pembuka tersebut terdapat atribut class yang disematkan ke dalam tag. Isi atau content dari sebuah tag paragraph ``<p>`` akan ditampilkan sebagai paragraf. lalu terakhir sebuah tag ditutup dengan sebuah tag penutup. > Tidak semua elemen HTML memiliki tag penutup seperti ``<input> <img> <meta>`` . ![](https://hackmd.io/_uploads/BJtSLLcnh.png) ![](https://hackmd.io/_uploads/r1BwUUqnh.png) #### HTML Input Types Beberapa Input type yang bisa di gunakan di HTML: ``` <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week"> ``` #### Coba Buatkan FORM Code dengan Tampilan Seperti dibawah ini ![](https://hackmd.io/_uploads/BJyuPLc2h.png) ![](https://hackmd.io/_uploads/r1hTB8c33.png) ### DROP DOWN LIST ![](https://hackmd.io/_uploads/H1ohaEi22.png) ### TEXT AREA ![](https://hackmd.io/_uploads/BJylC4j3h.png) # TUGAS 1 BUAT * Buat File HTML index * Buatlah sebuah file index.html yang akan menampilkan halaman seperti berikut: ![](https://hackmd.io/_uploads/ByJu04inn.png) # TUGAS 2 BUAT * Buat halaman form * Buatlah file baru bernama form.html yang berisi form seperti berikut : > nb: Gunakan Element Form untuk Menuju ke welcome.html ![](https://hackmd.io/_uploads/HJZW1So3n.png) # TUGAS 3 BUAT * Buat halaman selamat datang * Setelah user berhasil mendaftar, berikan halaman welcome.html yang memberikan ucapan selamat datang seperti berikut ![](https://hackmd.io/_uploads/HkAV1Hihn.png) referensi lain : JustKoding: [https://www.youtube.com/playlist?list=PLBAY64k6bSAeaI8sTrx3TlrtF1BHIamLd ](https://) Belajar HTML dari Dasar oleh Sekolah Koding: [https://www.youtube.com/playlist?list=PLCZlgfAG0GXC9ojTmU95BRefbJoi4clY-](https://) sumber tulisan ini disarikan dari halaman dokumentasi W3schools : [https://www.w3schools.com/html/default.asp](https://)