Belajar HTML Membuat Halaman Web Sederhana

Pada artikel sebelumnya jendeladunia-it menjelaskan tentang sejarah sistem operasi.
Nah. . .kali ini jendeladunia-it akan menjelaskan tentang belajar HTML yaitu membuat halaman web sederhana menggunakan layout table. Halaman yang akan dibuat sangat sederhana, dengan tujuan untuk mempraktekan ilmu yang sudah didapat pada perkuliahan pemrograman web mengenai dasar HTML.

Langsung saja, kali ini kita akan belajar membuat sebuah halaman web yang berisi gambar, link dan form komentar. Disini anda dapat mengetik scriptnya pada Notepad++ atau Macromedia Dreamweaver 8. Kemudian file anda simpan dalam file ([dot] html).
Adapun isi dari file html tersebut adalah sebagai berikut :

home.html :
<html>
<head><title>PemrogramanWeb</title></head>
<body>
<table width="679" height="300" border="1" align="center">
<tr>
<td height="30" colspan="3" align="center">
<img src="gambar/header.jpg" width="678" height="100"></td>
</tr>
<tr>
<td width="110" height="210" valign="top"><ul>
<li> <a href="home.html">Home</a></li>
<li> <a href="artikel.html">Artikel</a></li>
<li> <a href="biodata.html">Biodata</a></li>
</ul></td>
<td width="400"><table width="350" height="160" border="" align="center">
<tr>
<td width="160" height="90">
<p><img src="gambar/gambar1.jpg" width="345" height="220"></p>
<p>Idham fatoni<br>08018361</p></td>
</tr>
<tr>
<td width="160" height="90">
<p><img src="gambar/gambar2.jpg" width="345" height="220"></p>
<p>Agus Wahyu Utomo<br>08018357</p></td>
</tr>
<tr>
<td width="160" height="90">
<p><img src="gambar/gambar3.jpg" width="345" height="220"></p>
<p>Agus Dwi N<br>08018368</p></td>
</tr>
</table>
</body>
</html>

artikel.html :
<html>
<head>
<title>PemrogramanWeb</title>
</head>

<body>
<table width="679" height="300" border="1" align="center">
<tr>
<td height="30" colspan="3" align="center">
<img src="gambar/header.jpg" width="678" height="100"></td>
</tr>

<tr>
<td width="110" height="210" valign="top"><ul>
<li> <a href="home.html">Home</a></li>
<li> <a href="artikel.html">Artikel</a></li>
<li> <a href="biodata.html">Biodata</a></li>
</ul></td>

<td width="400"><table width="350" height="160" border="1" align="center">
<tr>
<tr><td>
<div align="center">
<a href="artikel.html">link-1</a> |  <a href="artikel.html">link-2</a>
</div>
</td>
</tr>


<td width="160" height="150">
<left><font color="#0000FF">
<p> isi artikel yang anda inginkan. . .
</font></left></h1>
 </p><br>
<p>isi artikel yang anda inginkan...
</p>
</td></tr>
</tr>
</table>
</body>
</html>

biodata.html :
<html>
<head>
<title>PemrogramanWeb</title>
</head>

<body>
<table width="679" height="300" border="1" align="center">
<tr>
<td height="30" colspan="3" align="center">
<img src="gambar/header.jpg" width="678" height="100"></td>
</tr>

<tr>
<td width="110" height="210" valign="top"><ul>
<li> <a href="home.html">Home</a></li>
<li> <a href="artikel.html">Artikel</a></li>
<li> <a href="biodata.html">Biodata</a></li>

</ul></td>
<td width="400"><table width="350" height="160" border="" align="center">
<tr>
<td width="160" height="93">
<p align="center"><b>Masukkan Komentar Anda</b></p>

<table id="Table_01" width="341" height="92" border="" cellpadding="0" cellspacing="0" >
 
  <tr>
   
    <td width="334" align="left" valign="top" bgcolor=""><form method="POST" action="">
      <table width="255">
        <tr>
          <td width="60" align="left" valign="top"><font color="#000000"> Nama</font></td>
          <td width="183" align="left" valign="top"><input name="username" type="text" size="40"></td>
        </tr>
        <tr>
          <td align="left" valign="top"><font color="#000000">Email</font></td>
          <td align="left" valign="top"><input name="password" type="" size="40"></td>
        </tr>
       
        <tr>
          <td align="left" valign="top"><font color="#000000">Alamat</font></td>
          <td align="left" valign="top"><input name="password" type="" size="40"></td>
        </tr>
       
        <tr>
          <td align="left" valign="top"><font color="#000000">Komentar</font></td>
          <td align="left" valign="top"><input type="text" size="40"></td>
        </tr>
        <td colspan="2" align="right" valign="top"><input type="submit" value="Simpan">
                  <input type="button" value="Batal">
        </td>
        </tr>
      </table>
    </form>
</table>
</td>
</tr>
</table>
</body>
</html>

Monggo gan dicoba . . .
semoga bermanfaat bagi anda yang ingin belajar html dasar. . .

ohh. . .iya gan berhubung ini tugas kelompok pemrograman web dengan anggota :
1. Idham Fatoni             (08018361)
2. Agus Wahyu Utomo  (08018357)
3. Agus Dwi Nuryanto   (08018368)

Rabu, Maret 28, 2012 | Category: |