Langkah pertama yang harus dilakukan dalm pembuatan HTML 5 adalah dengan membuka notepad pada komputer anda.
1. Klik Star
2. Pilih all program
3. Pilih accesories
4. Pilih Notepad
berikutnya ketik bagian-bagian dasar yang harus ada pada HTML.
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
setelah semua bagian dasar sudah di ketik kita dapat menambahkan URL Link, seperti :
1.
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dokumen HTML 5 Kedua</title>
<meta name="author" contents="Faisal Hazami">
<meta name="keywords" contents="Belajar HTML 5">
</head>
<body>
<h3>Ini adalah dokumen HTML 5 Kedua</h3>
</body></html>
akan mengasilkan, hasil sebagai barikut :
2.
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dokumen HTML 5</title>
<meta name="Author" contents="Adi Darmawan">
<meta name="Keywords" contents="HTML 5, Belajar">
</head>
<body>
<h2><b>Ini adalah dokumen HTML 5 keempat</b></h2>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr>
<th>Resep Rendang</th>
<th>Resep Gado-Gado</th>
<th>Resep Sop Ayam</th>
</tr>
<tr>
<td>
<br><br><b>Bahan:</b><br><br>
<ul>
<li>Daging 2kg</li>
<li>Cabe</li>
<li>Kelapa Parut</li>
<li>Lada</li>
<li>Merica</li>
</ul>
</td>
<td>
<br><br><b>Bahan:</b><br><br>
<ol>
<li>Kentang</li>
<li>Labu</li>
<li>Kangkung</li>
<li>Jagung Rebus</li>
<li>Telur Rebus</li>
<li>Lontong</li>
<li>Sambel Kacang</li>
</ol>
</td>
<td>
<br><br><b>Bahan:</b><br><br>
<ul>
<li>Dada dan Paha Ayam</li>
<li>Kaldu Ayam</li>
<li>Kentang</li>
<li>Wortel</li>
<li>Lada</li>
<li>Merica</li>
<li>Garam</li>
</ul>
</td>
</tr>
<tr><td colspan="3" align="center">Semua bahan harus dimasak dengan matang dan sempurna. Gunakan api kecil agar matang sempurna.</td>
</tr></tbody></table>
</body></html>
akan menghasilkan hasil sebagai berikut :
3.
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dokumen HTML 5</title>
<meta name="Author" contents="Adi Darmawan">
<meta name="Keywords" contents="HTML 5, Belajar">
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr>
<th>ini heading kolom pertama</th>
<th>ini heading kolom kedua</th>
<th>ini heading kolom ketiga</th>
</tr>
<tr>
<td colspan="3" align="center">ini kolom pertama</td>
</tr>
<tr rowspan="2">
<td>ini kolom pertama baris ke dua</td>
<td>ini kolom kedua baris ke dua</td>
<td>ini kolom ketiga baris ke dua</td>
</tr>
<tr>
<td>ini kolom kedua baris ke tiga</td>
<td>ini kolom ketiga baris ke tiga</td>
</tr>
</tbody></table>
</body></html>
yang akan menampilkan hasil :
4.
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dokumen HTML 5</title>
<meta name="Author" contents="Adi Darmawan">
<meta name="Keywords" contents="HTML 5, Belajar">
</head>
<body>
<h2><b>Ini adalah dokumen HTML 5 keempat</b></h2>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr>
<th>Resep Rendang</th>
<th>Resep Gado-Gado</th>
<th>Resep Sop Ayam</th>
</tr>
<tr>
<td>
<br><br><b>Bahan:</b><br><br>
<ul>
<li>Daging 2kg</li>
<li>Cabe</li>
<li>Kelapa Parut</li>
<li>Lada</li>
<li>Merica</li>
</ul>
</td>
<td>
<br><br><b>Bahan:</b><br><br>
<ol>
<li>Kentang</li>
<li>Labu</li>
<li>Kangkung</li>
<li>Jagung Rebus</li>
<li>Telur Rebus</li>
<li>Lontong</li>
<li>Sambel Kacang</li>
</ol>
</td>
<td>
<br><br><b>Bahan:</b><br><br>
<ul>
<li>Dada dan Paha Ayam</li>
<li>Kaldu Ayam</li>
<li>Kentang</li>
<li>Wortel</li>
<li>Lada</li>
<li>Merica</li>
<li>Garam</li>
</ul>
</td>
</tr>
<tr><td colspan="3" align="center">Semua bahan harus dimasak dengan matang dan sempurna. Gunakan api kecil agar matang sempurna.</td>
</tr></tbody></table>
</body></html>
hasil yang akan ditampilkan ialah :
5.
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dokumen HTML 5</title>
<meta name="Author" contents="Adi Darmawan">
<meta name="Keywords" contents="HTML 5, Belajar">
</head>
<body>
<b><h2>Ini adalah dokumen HTML 5 kelima</h2></b>
<table border="1" cellpadding="15" cellspacing="0" width="100%">
<tbody><tr>
<td rowspan="3" bgcolor="red"></td>
<td colspan="4" bgcolor="purple"></td>
</tr>
<tr>
<td rowspan="4" bgcolor="yellow"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" bgcolor="green"></td>
</tr>
<tr>
<td rowspan="2" bgcolor="blue"></td>
<td></td>
<td colspan="2" bgcolor="pink"></td>
</tr>
<tr>
<td></td>
<td></td>
<td bgcolor="cyan"></td>
</tr>
</tbody></table>
</body></html>
akan menghasilkan seperti ini: