Latihan11A
Dalam latihan 11 ini kita akan menerapkan gambar pada halaman website, diawali dengan menambahkan keterangan pada gambar. Oke langsung saja ketikan baris code html dibawah ini.<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #27333e;
color: #fff;
}
</style>
<title>Gambar Menggunakan Keterangan</title>
</head>
<body>
<h4 align="center">Gambar Menggunakan Keterangan</h4>
<p align="center">
<img src="wb.png" alt="Keterangan Gambar diletakan disini!" title="Keterangan Gambar diletakan disini!">
</p>
</body>
</html>
Dan hasilnya akan seperti gambar dibawah ini:
Latihan11B
Selanjutnya kita akan memberi bingkai atau border pada gambar.<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #27333e;
color: #fff;
}
</style>
<title>Gambar Menggunakan Bingkai</title>
</head>
<body>
<h4 align="center">Gambar Menggunakan Bingkai atau Border</h4>
<p align="center">
<img src="wb.png" title="Gambar Menggunakan Bingkai" border="6">
</p>
</body>
</html>
Simpan, dan hasilnya akan seperti gambar dibawah.
Latihan11C
Selain menambahkan bingkai, kita juga bisa mengubah ukuran gambar sesuai keinginan kita.<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #27333e;
color: #fff;
}
</style>
<title>Gambar Menggunakan Ukuran</title>
</head>
<body>
<h4 align="center">Gambar Menggunakan Ukuran / Size</h4>
<p align="center">
<img src="wb.png" title="Width : 150, Height : 100" border="3" width="150" height="100">
<img src="wb.png" title="Width : 100, Height : 150" border="3" width="100" height="150">
</p>
</body>
</html>
Untuk hasilnya bisa dilihat dibawah ini:
Latihan11D
Kemudian kita bisa membuat sebuah link dengan gambar artinya gambar ini bisa diklik layaknya tombol.<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #27333e;
color: #fff;
}
</style>
<title>Gambar Menggunakan Link</title>
</head>
<body>
<h4 align="center">Gambar Menggunakan Link</h4>
<p align="center">
<a href="logo.png">
<img src="logo.png" title="Gambar Ini bisa diklik" width="450" height="450">
</a>
</p>
</body>
</html>
Dan hasilnya .
Latihan11E
Terakhir kita juga bisa membuat background website kita dengan menggunakan gambar.<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body{
color: whitesmoke;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Gambar Sebagai Background</title>
</head>
<body background="wb.png">
<h4 align="center">Gambar Sebagai Background</h4>
</body>
</html>
Dan hasilnya seperti pada gambar dibawah
Catatan : Untuk gambar, anda bisa menggunakan gambar yang sesuai dengan selera anda.
Latihan12A
Dalam latihan 12 ini kita akan memabahas mengenai penanganan tabel dalam halaman web. Berikut kode html untuk tabel.<!DOCTYPE html>
<html>
<head>
<title>12 A</title>
</head>
<body>
<table cellspacing="10" cellpadding="10">
<tr>
<td>Kolom 1 Baris 1</td>
<td>Kolom 2 Baris 1</td>
</tr>
<tr>
<td>Kolom 1 Baris 2</td>
<td>Kolom 2 Baris 2</td>
</tr>
</table>
</body>
</html>
Dan hasilnya :
Latihan12B
Ketikan kode html dibawah ini<!DOCTYPE html>
<html>
<head>
<title>12 B</title>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="10">
<tr>
<td>Kolom 1 Baris 1</td>
<td>Kolom 2 Baris 1</td>
</tr>
<tr>
<td>Kolom 1 Baris 2</td>
<td>Kolom 2 Baris 2</td>
</tr>
</table>
</body>
</html>
Dan Hasilnya :
Latihan12C
Ketikan kode html dibawah ini:<!DOCTYPE html>
<html>
<head>
<title>12 C</title>
</head>
<body>
<table border="1">
<tr height="40">
<td width="150">Kolom 1 Baris 1</td>
<td width="250">Kolom 2 Baris 1</td>
</tr>
<tr height="40">
<td width="150">Kolom 1 Baris 2</td>
<td width="250">Kolom 2 Baris 2</td>
</tr>
</table>
</body>
</html>
Dan hasilnya :
Latihan12D
Lanjut, ketikan kode html dibawah ini<html>
<head>
<title>12 D</title>
</head>
<body>
<table border=7>
<tr height=40>
<td width=150 align=left valign=top> Kiri atas</td>
<td width=250 align=right valign=middle>Kanan tengah</td>
<tr>
<tr height=80>
<td width=150 align=right valign=bottom>Kanan bawah</td>
<td width=250 align=center valign=middle>Tengah tengah</td>
</tr>
</table>
</body>
</html>
Dan hasilnya :
Latihan12E
Ketikan baris kode html dibawah ini:<html>
<head>
<title>12 E</title>
</head>
<body>
<table border=2 width=200 cellpadding=10>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body>
</html>
Dan hasilnya :
Latihan12F
Terakhir, ketikan baris kode html dibawah ini.<html>
<head>
<title>12 F</title>
</head>
<body>
<table border=2 width=200 cellpadding=10>
<tr>
<td rowspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</table>
</body>
</html>
Dan Hasilnya :
Latihan13
Untuk latihan 13 kita akan membahas tentang frame didalam web. Langsung saja. ketikan setiap file html dibawah ini.Frame simpan dengan nama page.html
<!DOCTYPE html>
<html>
<head>
<title>FRAME</title>
<style type="text/css">
body{
font-family: Arial, sans-serif;
}
</style>
<base target="utama">
</head>
<frameset rows="20%, 80%">
<frame src="judul.html"></frame>
<frameset cols="30%, 70%">
<frame src="menu.html"></frame>
<frame src="isi.html" scrolling="YES" name="utama"></frame>
</frameset>
</frameset>
</html>
Dan hasil awalnya akan seperti dibawah ini,
Frame lanjutan simpan dengan nama judul.html
<!DOCTYPE html>
<html>
<head>
<title>Judul Frame</title>
</head>
<body>
<h3 align="center">HARI INI BELAJAR FRAME</h3>
</body>
</html>
Setelah ditambahkan file judul.html hasilnya akan seperti ini :
Tampilan website akan berubah setelah ditambahkan beberapa file html dibawah ini, ikuti sampai selesai.
Frame Lanjutan simpan dengan nama menu.html
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<style type="text/css">
body{
font-family: Arial, sans-serif;
background-color: #ff1f1f;
}
</style>
</head>
<body>
<a href="isiM1.html" target="utama">MENU1</a><br><br>
<a href="isiM2.html" target="utama">MENU2</a><br><br>
<a href="isiM3.html" target="utama">MENU3</a><br><br>
</body>
</html>
Frame Lanjutan simpan dengan nama isi.html
<!DOCTYPE html>
<html>
<head>
<title>Isi</title>
</head>
<body>
<h1>ISI FRAME</h1>
</body>
</html>
Frame Lanjutan simpan dengan nama isiM1.html
<!DOCTYPE html>
<html>
<head>
<title>ISI MENU 1</title>
</head>
<body bgcolor="#ff1f1f">
<h3>Isi Menu 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
</body>
</html>
Frame Lanjutan simpan dengan nama isiM2.html
<!DOCTYPE html>
<html>
<head>
<title>ISI MENU 2</title>
</head>
<body bgcolor="#2b8ae8">
<h3>Isi Menu 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
</body>
</html>
Frame Lanjutan simpan dengan nama isiM3.html
<!DOCTYPE html>
<html>
<head>
<title>ISI MENU 3</title>
</head>
<body bgcolor="#16d885">
<h3>Isi Menu 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Latihan14
Dalam latihan ini kita akan membahas tentang penanganan form di dalam website. Oke langsung saja. Disini saya menambahkan tag <tabel> agar posisi form lebih teratur<!DOCTYPE html>
<html>
<head>
<title>FORM</title>
</head>
<body>
<form action="mailtodandriabas@gmail.com" method="POST">
<table>
<tr>
<td>Nama </td>
<td>: <input type="text" name="nama" value="dandriabas" size="30"></td>
</tr>
<tr>
<td>Tempat / Tanggal Lahir </td>
<td>:
<input type="text" name="tempat" value="Kab. Gorontalo">
<select name="tgl">
<option value="0">Tanggal</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="bln">
<option value="0">Bulan</option>
<option value="1">Januari</option>
<option value="2">Februai</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
</select>
<select name="thn">
<option value="0">Tahun</option>
<option value="1">1997</option>
<option value="2">1998</option>
<option value="3">1999</option>
</select>
</td>
</tr>
<tr>
<td>Agama </td>
<td>:
<input type="radio" name="agama" value="i" checked>Islam
<input type="radio" name="agama" value="k">Kristen
<input type="radio" name="agama" value="b">Budha
</td>
</tr>
<tr>
<td>Alamat </td>
<td>: <textarea cols="50" rows="6">Jln. Megawati Kel. Tenilo Kec. Limboto Kab. Gorontalo</textarea></td>
</tr>
<tr>
<td>Password </td>
<td>: <input type="password" name="katasandi" value="password" size="30"></td>
</tr>
<tr>
<td>Riwayat Sekolah </td>
<td>:
<input type="checkbox" name="sd" value="YA">SD N 2 TENILO
<input type="checkbox" name="smp" value="YA">SMP N 2 LIMBOTO
<input type="checkbox" name="smk" value="YA">SMK N 1 LIMBOTO
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Kirim Data Ini" name="kirim">
<input type="reset" value="Reset" name="hapus"></td>
</tr>
</table>
</form>
</body>
</html>
Simpan filenya dengan nama form.html, dan hasilnya akan seperti gambar dibawah ini.
Sekian penjelasan mengenai Pemograman Web Dasar, Jika anda merasa tutorial ini bermanfaat bagi teman anda, anda bisa membagikannya. Terimakasih.