<html>
<head>
<title> Judul Halaman </title>
</head>
<body> berisi tentang teks, gambar, atau apapun yang tampil pada dokumen web.
</body>
</html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag <body>…</body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi untuk mengeluarkan judul pada tittle bar window web browser.
Bagian kedua, yang diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini bisa dituliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin disampaikan pada pengguna nantinya.
Setelah struktur dasar dari setiap dokumen HTML diketahui, mari teman-teman langsung saja saya bagikan kumpulan latihan PW, berikut latihan-latihannya :
A. Membuat Table
1. <html>
<head>
<title> Table 1 </title>
</head>
<body>
<table border=1 cellpadding=3 cellspacing=3 width=25%>
<tr>
<td> No </td>
<td> Nama </td>
<td> Kelas </td>
</tr>
<tr>
<td> 1. </td>
 |
| Gambar A.1 |
<td> X-TKJ-1 </td>
</tr>
<tr>
<td> 2. </td>
<td> Alif </td>
<td> X-TKJ-1 </td>
</tr>
</table>
</body>
</html>
Keterangan :
Width = Lebar table (pixel atau persen)
Border = Pixel (tebal garis tepi)
Cellspacing = Pixel (spasi antar sel)
Cellpadding = Pixel (spasi di dalam sel)
<table> = Digunakan untuk mendefinisikan pembuatan table.
<tr> = Tag ini digunakan untuk membuat baris baru pada tabel
<td> = Tag ini digunakan untuk membuat kolom baru pada tabel
2. <html>
<head>
<title> Table 2 </title>
</head>
<body>
<table border=1 cellpadding=3 cellspacing=3 width=25%>
<tr>
<td colspan=2> Alfa </td>
</tr>
<tr>
<td rowspan=2> Alfa </td>
<td> Alif </td>
</tr>
<tr>
<td> Hanafi </td>
</tr>
</table>
</body>
</html>
 |
| Gambar A.2 |
Rowspan = Menggabungkan beberapa baris
Colspan = Menggabungkan beberapa kolom
B. Images Dan Table
1. <html>
<head>
<title> Images Dan Table </title>
</head>
<body>
<table border=1 cellpadding=10 cellspacing=10>
<tr>
<td><img src="gambar1.jpg"-> nama folder gambar width=200 height=200></td>
<td><img src="gambar2.jpg" width=200 height=200></td>
</tr>
</table>
</body>
</html>
Keterangan :
 |
| Gambar B.1 |
<img src> = Perintah untuk menampilkan images (gambar)
height = Menentukan panjang table (pixel atau persen)
Catatan :
File gambar harus didimpan dalam satu folder dengan file HTML. Jika tidak, maka gambar tidak akan muncul.
C. Membuat Table Dalam Table
1. <html>
<head>
<title> Table dalam Table </title>
</head>
<body>
<table border=1 align=center cellpadding=3 cellspacing=3>
<tr>
<td> kiri atas table1 </td>
<td> kanan atas table1 </td>
</tr>
<tr>
<td> kiri bawah table1 </td>
<td><!--table ke-2-->
<table border=1 cellpadding=3 cellspacing=3>
<tr>
<td> kiri atas table2 </td>
<td> kanan atas table2 </td>
</tr>
<tr>
<td> kiri bawah table2 </td>
<td> kanan atas table2 </td>
</tr>
</table><!--end table ke-2-->
</td>
</tr>
</table>
</body>
</html>
 |
| Gambar C.1 |
D. Memasukkan File Audio
1. <!DOCTYPE HTML>
<html>
<head>
<title> Latihan Audio </title>
</head>
<body>
<audio controls>
<source src="Motohiro Hata - Himawari No Yakusoku.mp3" type="audio/mp3">
</audio>
</body>
</html>
E. Membuat Formulir
 |
| Gambar D.1 |
1. <!DOCTYPE HTML>
<html>
<head><title>lat1</title></head>
<body>
<pre>
<form> Isikan Biodata Dibawah Ini <br>
Nama : <input TYPE="textbox" name=Nama>
Kelas : <select name="Kelas">
<option value=selected>
<option value=X TKJ 1> X TKJ 1
<option value=X TKJ 2> X TKJ 2
<option value=X TKJ 3> X TKJ 3
<option value=X TKJ 4> X TKJ 4
</select><hr size=2 width=400 align=left>
Username : <input type="text" name="nama" maxlength=10>
Password : <input type="password" name="password" maxlength=6>
Re-Type Password : <input type="password" name="re-type password" maxlength=6><br><br>
<input type="submit" name="tsubmit" value="Kirim"> <input type="reset" name="treset" value="Ulangi">
</form>
</pre>
</body>
</html>
2. <html>
 |
| Gambar E.1 |
<head>
<title> lat2 </title>
</head>
<pre>
<body>
<u> FORM BIODATA SISWA </u>
<table border=1>
<tr>
<td> Nama Siswa </td>
<td> : </td>
<td><form><input type="text" name="nama" maxlength=20>
</form>
</tr>
<tr>
<td> Tempat, Tanggal Lahir </td>
<td> : </td>
<td><form><input type="text" name="tempat"><select name="tanggal">
<option value="selected">tanggal
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31</select><select name="bulan">
<option value="selected">bulan
<option value="Januari">Januari
<option value="Februari">Februari
<option value="Maret">Maret
<option value="April">April
<option value="Mei">Mei
<option value="Juni">Juni
<option value="Juli">Juli
<option value="Agustus">Agustus
<option value="September">September
<option value="Oktober">Oktober
<option value="November">November
<option value="Desember">Desember
</select><select name="tahun">
<option value="selected">tahun
<option value="1900">1990
<option value="1991">1991
<option value="1992">1992
<option value="1993">1993
<option value="1994">1994
<option value="1995">1995
<option value="1996">1996
<option value="1997">1997
<option value="1998">1998
<option value="1999">1999
<option value="2000">2000</select>
</form></td>
</tr>
<tr>
<td> Alamat </td>
<td> : </td>
<td><form><input type="textarea" name="alamat" size=50></form></td>
</tr>
<tr>
<td> Jenis Kelamin </td>
<td> : </td>
<td><form><input type="radio" name="R1">Laki-laki<input type="radio" name="R1">Perempuan</form></td>
</tr>
<tr>
<td> Hobby </td>
<td> : </td>
<td><form><input type="checkbox" name="hobby">Membaca<br>
<input type="checkbox" name="hobby">Berenang
<input type="checkbox" name="hobby">Menonton TV</form></td>
</tr>
<tr>
<td> Mooto Hidup </td>
<td> :</td>
<td><form><input type="textarea" name="motto hidup" cols=50 rows=5></form></td>
</tr>
<tr>
<td colspan=2 align=center><input type="submit" name="tsubmit" value="Kirim">
<input type="reset" name="treset" value="Ulangi"></td>
</tr></table>
</body>
</pre>
</html>
F. Membuat Web Sederhana Dengan Menggunakan CSS Dan Link Di Dalamnya
 |
| Gambar E.2 |
1. <html>
<head><title> web </title>
<link href="web.css" rel="stylesheet" type="text/css">
</head>
<body class=body>
<table border=1 align=center>
<tr>
<td colspan=2 align=center height=100 class=td1> Welcome To My Website </td>
</tr>
<tr>
<td valign=top width=150 height=400 align=center class=td2>
<u> Menu <br><br>
<a href=web.html> Home </a><br>
<a href=PROFIL.HTML> Profil</a> <br>
<a href=gallery.html> Gallery </a> <br>
<a href=aboutme.html>About Me </a><br></u>
</td>
<td width=500 height=400> isi </td>
</tr>
<tr>
<td colspan=2 align=center width=10 class=td2> copyright©2015 </td>
</tr>
</table>
</body>
</html>
 |
| Gambar F.1 Tampilan Home |
<head><title> web </title>
<link href="web.css" rel="stylesheet" type="text/css">
</head>
<body class=body>
<table border=1 align=center><font size=36 align=center> Profil </font>
<tr>
<td colspan=2 align=center height=100 class=td1> Welcome To My Website </td>
</tr>
<tr>
<td valign=top width=150 height=400 align=center class=td2>
<u> Menu <br><br>
<a href=web.html> Home </a><br>
<a href=PROFIL.HTML> Profil</a> <br>
<a href=gallery.html> Gallery </a> <br>
<a href=aboutme.html>About Me </a><br></u>
</td>
<td width=500 height=400> Nama : MIFTAHUL ALIF HANAFI<br>Kelas : X TKJ 1 </td>
</tr>
<tr>
<td colspan=2 align=center width=10 class=td2> copyright©2015 </td>
</tr>
</table>
</body>
</html>
 |
| Gambar F.2 TampilanProfil |
<head><title> web </title>
<link href="web.css" rel="stylesheet" type="text/css">
</head>
<body class=body>
<table border=1 align=center><font size=36 align=center> Gallery </font>
<tr>
<td colspan=2 align=center height=100 class=td1> Welcome To My Website </td>
</tr>
<tr>
<td valign=top width=150 height=400 align=center class=td2>
<u> Menu <br><br>
<a href=web.html> Home </a><br>
<a href=PROFIL.HTML> Profil</a> <br>
<a href=gallery.html> Gallery </a> <br>
<a href=aboutme.html>About Me </a><br></u>
</td>
<td width=500 height=400><img src=gambar3.jpg></td>
</tr>
<tr>
<td colspan=2 align=center width=10 class=td2> copyright©2015 </td>
</tr>
</table>
</body>
</html>
 |
| Gambar F.3 Tampilan Gallery |
<head><title> web </title>
<link href="web.css" rel="stylesheet" type="text/css">
</head>
<body class=body>
<table border=1 align=center><font size=36 align=center> About Me </font>
<tr>
<td colspan=2 align=center height=100 class=td1> Welcome To My Website </td>
</tr>
<tr>
<td valign=top width=150 height=400 align=center class=td2>
<u> Menu <br><br>
<a href=web.html> Home </a><br>
<a href=PROFIL.HTML> Profil</a> <br>
<a href=gallery.html> Gallery </a> <br>
<a href=aboutme.html>About Me </a><br></u>
</td>
<td width=500 height=400> Nama : MIFTAHUL ALIF HANAFI<br>Kelas : X TKJ 1<br>Alamat : Tegal, Indonesia<br>Sekolah : SMK/SMA </td>
</tr>
<tr>
<td colspan=2 align=center width=10 class=td2> copyright©2015 </td>
</tr>
</table>
</body>
</html>
 |
| Gambar F.4 Tampilan About Me |
