Basic HTML: Membuat Layout Website

Sketsa dari salingxsharing.blogspot.com

Basic HTML: Membuat Layout Website| Berikut ini beberapa contoh membuat layout web menggunakan HTML, merupakan materi yang harus dipahami oleh siswa SMK yang sedang belajar pemrograman web dasar menggunakan HTML. Sebelum membuat layout sebaiknya memahami terlebih dahulu tag-tag dalam pembuatan table. Seperti colspan, rowspan dan lainnya. Jika sudah paham benar tag yang digunakan dalam pembuatan tabel, maka membuat sebuah layout tidaklah susah. Satulagi, harus tahu kode-kode komposisi warna. Oke, kita akan belajar membuat layout…

Pada contoh ini, kita akan membuat layout website 2 kolom, 3 baris (header, body, footer).

Silahkan simak tag HTML untuk membuat layout website berikut:
<html>
<title>Layout</title><header>
<body>
<table width=”1020px”  border=”0″>
<!– ini baris pertama yang merupakan header web–>
  <tr >
    <td colspan=”2″ style=”background-color:#87CEFA;”>
      <h1>Judul Header Website</h1>
    </td>
<!– ini baris kedua, kolom pertama untuk menu dan kolom kedua untuk konten–>
  </tr>
  <tr valign=”top”>
    <td style=”background-color:#87CEFA;
                  width:50px;text-align:top;”>
      <b>Page Web</b><br />
      Home<br />
      Profil Sekolah<br />
      Dll
    </td>
    <td style=”background-color:#eeeeee;height:200px;
                  width:300px;text-align:top;”>
        Kontent web
    </td>
  </tr>
<!– ini baris ketiga, footer–>
  <tr>
    <td colspan=”2″ style=”background-color:#87CEFA;”>
        <center>
      Copyright © 2013 latihan membuat layout
        </center>
    </td>
  </tr>
</table>
</body>
</header>
</html>

Ketika ditampilkan menggunakan browser maka tampilannya seperti pada screen shoot dibawah ini:
layout

Skarang kita akan menyisipkan gambar header, yang sebelumnya kita buat (bisa menggunakan photosop atau Paint).
<html>
<title>Layout</title>
<body>
<table width=”1020px”  border=”0″>
  <tr >
    <td colspan=”2″>
<!– ini url gambar yang disisipakan mengganti Judul Header Website –!>
      <img src=”file:///C:/Users/myPC/Pictures/New%20folder/head.png”>
    </td>
  </tr>
  <tr valign=”top”>
    <td style=”background-color:#87CEFA;
                  width:50px;text-align:top;”>
      <b>Page Web</b><br />
      Home<br />
      Profil Sekolah<br />
      Dll
    </td>
    <td style=”background-color:#eeeeee;height:200px;
                  width:300px;text-align:top;”>
        Kontent web
    </td>
  </tr>
  <tr>
    <td colspan=”2″ style=”background-color:#87CEFA;”>
        <center>
      Copyright © 2013 latihan membuat layout
        </center>
    </td>
  </tr>
</table>
</body>
</html>

Jika ditampilkan menggunakan browser, maka hasilnya seperti pada screen shoot dibawah ini:

layout with image hd

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: