Latihan membuat form Index (Beranda/Halaman Utama) :
<!DOCTYPE html>
<html>
<head>
<title>web.arief</title>
</head>
<body bgcolor="red">
<font color="white">
<h1><center>Beranda Arif</center></h1>
<hr>
<center>
<a href="index.html">Beranda</a>||
<a href="profil.html">Profile</a>||
<a href="kontak.html">Kontak</a>||
<a href="tentang.html">Tentang</a>||
</center><b></hr><br><br>
<center>
<h2>Selamat Datang</h2>
</center>
<p>Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda. Semua
link di atas adalah internal link
</p>
<p align="justify">
<b>HTML</b>(HyperText Mark-up Language) merupakan bahasa mark-up yang di gunakan untuk membuat konstruksi suatu web (situs web atau aplikasi berbasis web), HTML di anggap bukan sebagai suatu bahasa pemrograman karena strukturnya yang sederhana, oleh karena itu situs web atau aplikasi berbasis web dinamis tidak mungkin di buat hanya menggunakan HTML saja, misalnya di kombinasikan dengan PHP yang merupakan salah satu bahasa pemrograman web paling populer saat ini.
</p>
<p>1. Tag "DOCTYPE html"
adalah perintah dasar HTML yang di gunakan untuk menginformasikan web browser bahwa dokumen yang di berikan adalah dokumen HTML, dengan begitu web browser dapat mengetahui bagaimana dokumen harus di interpretasikan, dengan menunjukkan versi atau standar HTML (atau bahasa markup lainnya) yang di gunakan. Meskipun sebenarnya tag DOCTYPE html bukan elemen HTML itu sendiri, tag DOCTYPE html harus di sertakan pada setiap dokumen HTML agar sesuai dengan standar HTML.
<b></p>
<p>2. Tag "html" adalah perintah dasar HTML yang di gunakan sebagai wadah untuk semua elemen dari keseluruhan dokumen HTML, semua elemen HTML harus ada dalam tag "html" … "/html" (kecuali DOCTYPE, itulah yang dimaksud dengan ‘tag DOCTYPE bukan elemen HTML’). Hal tersebut merupakan aturan dalam dasar-dasar HTML (ISO/IEC 15445 adalah standar yang di tetapkan untuk HTML).
</p>
<hr>
<div>Copyright © 2022 by Arief_ichwan.f</div>
</body>
Hasilnya :
Latihan membuat form Profile :
<!DOCTYPE html>
<html>
<head>
<title>web.arief</title>
</head>
<body bgcolor="red">
<font color="white">
<h1><center>Profil Arief</center></h1>
<hr>
<center>
<a href="index.html">Beranda</a>||
<a href="profil.html">Profile</a>||
<a href="kontak.html">Kontak</a>||
<a href="tentang.html">Tentang</a>||
</center><b></hr><br><br>
<h2>Data Pribadi</h2>
<head>
<title>Membuat Biodata Sederhana</title>
</head>
<body style="background-color:red">
<table border="1" style="width: 700px;">
<tr><td align="center" colspan="3" bgcolor="silver"><font color="blue" size="20px">
<b>BIODATA</b>
</font></td></tr>
<tr>
<td rowspan="5" width="100px">
<img src="foto1.png" width="150px" height="200px" border="2">
</td>
<td bgcolor="#0000FF">NAMA </td>
<td> ARIEF ICHWAN FANANI </td>
</tr>
<tr>
<td bgcolor="#0000FF"> UMUR </td>
<td> 17 TAHUN </td>
</tr>
<tr>
<td bgcolor="#0000FF"> ALAMAT </td>
<td> KELAPA DUA DEPOK </td>
</tr>
<tr>
<td bgcolor="#0000FF"> HOBI </td>
<td> OLAHRAGA </td>
</tr>
<tr>
<td align="center" colspan="2" bgcolor="white"> <a href="http://lp2maray.com/">WWW.LP2M ARAY.COM</a> </td>
</tr>
</table>
</body>
</html>
<hr>
<div>Copyright © 2022 by Arief_ichwan.f</div>
</body>
Hasilnya :
<!DOCTYPE html>
<html>
<head>
<title>web.arief</title>
</head>
<body bgcolor="red">
<font color="white">
<h1><center>Kontak Arief</center></h1>
<hr>
<center>
<a href="index.html">Beranda</a>||
<a href="profil.html">Profile</a>||
<a href="kontak.html">Kontak</a>||
<a href="tentang.html">Tentang</a>||
</center><b></hr><br><br>
<h2>Kontak</h2>
<p align="justify">
Kamu bisa menghubungi saya melalui nomer WA: 0895339520777
<br>
atau juga alamat email: ariefichwan2404@gmail.com
</p>
<form action="contact.php" method="POST">
<fieldset>
<legend>Contact</legend>
<p>
<label>Name:</label>
<input type="text" name="name" placeholder="your name..." />
</p>
<p>
<label>Subject:</label>
<input type="text" name="subject" placeholder="subject..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="your email..." />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
<hr>
<div>Copyright © 2022 by Arief_ichwan.f</div>
</body>
Hasilnya :
4.) Latihan membuat form Login dan form Register (Tentang) :
<!DOCTYPE html>
<html>
<head>
<title>web.arief</title>
</head>
<body bgcolor="red">
<font color="white">
<h1><center>Tentang Arif</center></h1>
<hr>
<center>
<a href="index.html">Beranda</a>||
<a href="profil.html">Profile</a>||
<a href="kontak.html">Kontak</a>||
<a href="tentang.html">Tentang</a>||
</center><b></hr><br><br>
<title>Form Login</title>
</head>
<body>
<form action="login.php" method="POST">
<fieldset>
<legend>Login</legend>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="username..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="password..." />
</p>
<p>
<input type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>
<form action="contact.php" method="POST">
<fieldset>
<h2>Registrasi</h2>
<p>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Nama lengkap..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="Username..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Your email..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="Passowrd..." />
</p>
<p>
<label>Jenis kelamin:</label>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
</p>
<p>
<label>Agama:</label>
<select name="agama">
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="Daftar" />
</p>
</fieldset>
</form>
</body>
</html>
<hr>
<div>Copyright © 2022 by Arief_ichwan.f</div>
</body>
Hasilnya :
0 Komentar