Rabu, 28 November 2012

LANGKAH-LANGKAH MEMBUAT HTML 5


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:

Tidak ada komentar:

Posting Komentar