CARA MEMBUAT TAMPILAN LOGIN KEREN MENGGUNAKAN HTML
BELAJAR MEMBUAT TAMPILAN LOGIN DENGAN HTML
Design Web
Apa sih itu HTML?
HTML adalah kepanjangan dari Hypertext Markup Language dan merupakan salah satu bahas yang banyak digunakan dalam membuat halaman web.
Seperti namanya, HTML adalah bahasa markup yang berarti kamu menggunakan HTML hanya untuk "mark-up" dokumen teks dengan tag yang akan memberitahukan browser struktur untuk menampilkan sebuah desain layout web.
Awalnya, HTML dikembangkan dengan maksud untuk mendefinisikan struktur dokumen seperti judul, paragraf, daftar untuk memudahkan berbagi informasi ilmiah antara peneliti.
Sekarang masuk kedalam inti pembahasan yah.....
Disini pertama-tama siapkan berbagai kebutuhan dalam pembuatan program HTML. Sebagai contoh saya menggunakan aplikasi SUBLIME TEXT 3 bisa juga dengan menggunakan NOTEPAD++.
Berikut adalah proses pembuatan Tampilan Login menggunakan HTML:
1. Buka aplikasi SUBLIME TEXT 3 atau NOTEPAD++ dengan cara klik "START" lalu ketikkan "Sublime Text 3" dan klik pada aplikasi.
2. Kemudian pada aplikasi pilih "File" dan pilih "New File"
3. Masukkan kode program dibawah ini untuk membuat tampilan Login. Untuk lebih singkatnya copy kode program berikut!!
<html>
<head>
<title>Belajar Membuat Form</title>
</head>
<body>
<center><br/>
<table bgcolor="#FFFAFA" width="405" height="169" border="10" cellpadding="5" cellspacing="10">
<tr bgcolor="#428ef6">
<td height="37" colspan="2"><font color="FFFFFF"><div align="center"><strong>PLEASE LOGIN</strong></div></td></font>
</tr>
<tr>
<td width="95" height="32">Username</td>
<td width="304"><label>:
<input name="username" type="text" id="username" />
</label></td>
</tr>
<tr>
<td height="26">Password</td>
<td><label>:
<input name="password" type="password" id="password" />
</label></td>
</tr>
<tr bgcolor="#428ef6">
<td height="26" colspan="2"><font color="FFFFFF"><div align="right"><strong><marquee>https://abaycerdas.blogspot.com</marquee></strong></div></font></td>
</tr>
<tr>
<td colspan="2">
<a href=""><div align="center"><input type="submit" value="LOGIN" style="background-color: #428ef6; color: #FFFFFF; height: 30; width: 120;" /></a><br/>
<a href=""><div align="left"><input type="image" name="kembali" height="30" width="40" src="kembali.png" ></a></td>
</tr>
</table><br/>
</center>
</body>
</html>
4. Setelah membuat kode program diatas kemudian pilih "SAVE AS", simpan dengan nama "Belajar.html" dan pilih type menjadi "ALL FILES" kemudian pilih forder penyimpanan sesuai dengan keinginan anda.
5. Apabila sudah tersimpan, buka aplikasi "Browser" atau "Firefox" dan lihat hasilnya akan tampil seperti gambar dibawah ini.
Itulah sedikit tutorial dari saya bagaimana proses pembuatan tampilan login menggunakan kode program HTML. Mohon maaf apabila ada kesalahan dari saya, SEMOGA BERMANFAAT BAGI SEMUANYA.
Sekian dari saya, apabila ada pertanyaan silakan menulis di kolom komentar.
Terima Kasih 😉
Tunggu unggahan kami berikutnya 👍
Komentar
Posting Komentar