BSI Purwokerto - Belajar Membuat Web (part 4)
Materi Pertemuan 5
#Membuat Form menggunakan tag <table>
1. Aktifkan XAMPP (Apache & MySQL)
2. Buat folder baru di htdocs dengan nama : web2f
3. Buat folder baru di dalam folder web2f dengan nama : webadmin
4. Buat file baru di dalam folder webadmin dengan nama : index.html
5. Ketikkan struktur dasar HTML d dalam file tersebut lalu Simpan
Seperti ini :
Htpp://localhost/web2f/webadmin/
Htpp://localhost/web2f/webadmin/index.html
Catatan :
Tag span <span>…..</span> dan <div>…..</div>
<div> dan <span> keduanya tidak memiliki maksud/tujuan
<div> = block-line (membuat blok/baris baru) <p>, <h1>
<span>= in-line (tidak mmembuat blok/baris baru) <b>, <i>, <u>
<div> sebagai pembatas (materi css) struktur web (header, menu, konten, sidebar, footer)
Buka notepad lalu ketikkan script berikut :
<html>
<head>
<title>Halaman Login Admin</title>
</title>
<body>
<div align="center">
<h2>LOGIN ADMIN</h2>
<table border="0" width="300">
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="tuser"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="tpass"></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="LOGIN" name="blogin">
</td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<title>Beranda - Website 2F</title>
</head>
<body>
<table align="center" border="0" width="900">
<tr>
<td height="90" bgcolor="aqua" align="center" colspan="2"</td>
<h1>SITUS RESMI KELAS 2F</h1>
</tr>
<tr>
<td height="35" bgcolor="yellow" align="center"colspan="2"</td>
<a href="index.html">BERANDA</a>
<a href="profil.html">PROFIL</a>
<a href="galeri.html">GALERI</a>
</tr>
<tr height="300">
<td bgcolor="snow" width="700" align="center"</td>
<p align="justify"</p>
<h4>Selamat Datang di website 2F</h4>
<td bgcolor="aqua" width="200" align="center"</td>
<h4>Komentar Baru</h4>
<p>Ini adalah komentar</p>
<h4>Buku Tamu</h4>
<p>Ini adalah buku tamu</p>
</tr>
<tr>
<td height="25" bgcolor="yellow" align="center" colspan="2"</td>
<p>Copyright 2018 - Situs Resmi 2F Dibuat oleh BSI</p>
</tr>
</table>
</body>
</html>
6. Buat file baru di dalam folder web2f dengan nama : index.html
7. Ketikkan struktur dasar HTML di dalam file tersebut lalu simpan
8. Buat file baru namanya : profil.html di dalam folder web2f, Copy semua coding di dalam file index.html ke dalam file profil.html
9. Buat file baru namanya : galeri.html di dalam folder web2f, Copy semua coding di dalam file index.html ke dalam file galeri.html
Script : <html>
<head>
<title>Profil - Website 2F</title>
</head>
<body>
<table align="center" border="0" width="900">
<tr>
<td height="90" bgcolor="aqua" align="center" colspan="2"</td>
<h1>SITUS RESMI KELAS 2F</h1>
</tr>
<tr>
<td height="35" bgcolor="yellow" align="center"colspan="2"</td>
<a href="index.html">BERANDA</a>
<a href="profil.html">PROFIL</a>
<a href="galeri.html">GALERI</a>
</tr>
<tr height="300">
<td bgcolor="snow" width="700" align="center"</td>
<p align="justify"</p>
<h4>Anda Berada di Profil website 2F</h4>
<td bgcolor="aqua" width="200" align="center"</td>
<h4>Komentar Baru</h4>
<p>Ini adalah komentar</p>
<h4>Buku Tamu</h4>
<p>Ini adalah buku tamu</p>
</tr>
<tr>
<td height="25" bgcolor="yellow" align="center" colspan="2"</td>
<p>Copyright 2018 - Situs Resmi 2F Dibuat oleh BSI</p>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Galeri - Website 2F</title>
</head>
<body>
<table align="center" border="0" width="900">
<tr>
<td height="90" bgcolor="aqua" align="center" colspan="2"</td>
<h1>SITUS RESMI KELAS 2F</h1>
</tr>
<tr>
<td height="35" bgcolor="yellow" align="center"colspan="2"</td>
<a href="index.html">BERANDA</a>
<a href="profil.html">PROFIL</a>
<a href="galeri.html">GALERI</a>
</tr>
<tr height="300">
<td bgcolor="snow" width="700" align="center"</td>
<p align="justify"</p>
<h4>Anda Berada di Galeri Website 2F</h4>
<td bgcolor="aqua" width="200" align="center"</td>
<h4>Komentar Baru</h4>
<p>Ini adalah komentar</p>
<h4>Buku Tamu</h4>
<p>Ini adalah buku tamu</p>
</tr>
<tr>
<td height="25" bgcolor="yellow" align="center" colspan="2"</td>
<p>Copyright 2018 - Situs Resmi 2F Dibuat oleh BSI</p>
</tr>
</table>
</body>
</html>
Sekian rangkuman materi pertemuan 5 tanggal 09 April 2018.
Wah makasih kakak, jadi nambah ilmu lagi nih.
BalasHapusMampir juga ya di situs aku https://wearehardinata.com