Belajar HTML (Menganalisis Cara Membuat Tampilan Halaman Login Facebook)

Hai sobat..
Kita coba sesuatu yang baru yok (gak juga sih)
Disini kita akan mempelajari HTML (HyperText Markup Language), yaitu bahasa yang digunakan untuk menstrukturisasi tampilan web.

Kerangka dalam membuat sebuah file HTML
<!doctype HTML>
<html>
<head>
 <!--Tempat dimana judul, script, dan metadata web-->
</head>
<body>
 Tempat dimana isi web ditampilkan
</body>
</html>


Isi yang akan ditampilkan pada browser adalah apa saja yang berada diantara tag <body></body>.

Kita lihat halaman login facebook ini

Apa saja bagian dari halaman facebook itu yang bisa kita buat dengan kode HTML sederhana? Kalau kita lihat secara sepintas, kita bisa memecah bagian-bagian halaman tersebut.
1. Textbox
2. Checkbox
3. Heading Text
4. Textbox with placeholder
5. Drop-down Menu
6. Radio Button
7. Button
8. Image


Tag untuk membuat textbox
<input type="text" />


Tag untuk membuat checkbox
<input type="checkbox" />


Tag untuk membuat heading text
<h1>Heading Text</h1>
<h2>Heading Text</h2>
<h3>Heading Text</h3>
<h4>Heading Text</h4>
<h5>Heading Text</h5>
<h6>Heading Text</h6>


Tag untuk membuat textbox dengan placeholder
<input type="text" placeholder="Isi Text Disini" />


Tag untuk membuat drop-down menu
<select>
 <option>Nomor</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>


Tag untuk membuat radio button
<input type="radio" />


Tag untuk membuat button
<input type="submit" value="Sign Up" />


Tag untuk memasang image
<img src="Lokasi Gambar" />


Lokasi gambar bisa berupa link dimana gambar itu berada atau pada folder mana gambar itu disimpan.

1 comments:

Post a Comment