Menyajikan Desain Halaman Web dengan Konsep Tabel

Assalamu'alaikum wr.wb

Pada kesempatan kali ini kita akan belajar bagaimana caranya Menyajikan Desain Halaman Web dengan Konsep Tabel.

Tujuan pembahasan kali ini adalah
  • Memahami pembuatan desain layout halaman website.
  • Memahami pembuatan konsep desain website dengan tabel.
  • Dapat menyajikan dengan kopsep web dengan tabel.

Pengetahuan awal

Pengetahuan awal yang harus kita pelajari adalah:

Apa yang dimaksud dengan layout halaman website: 
          Halaman website adalah suatu tampilan yang dapat berinteraksi dengan pengguna atau user atau dapat dikatakan sebagai tata letak elemen pada situs website, dengan halaman website yang baik maka pengunjung akan merasa nyaman dengan tampilan website tersebut. Setiap layout halaman dari website meerupakan satu kesatuan karena setiap halaman website mempunyai kesamaan tampilan (layout), yang membedakan adalah isi dari kontennya.

Apa saja susunan atau anatomi dari suatu halaman website: 
Anatomi dari susunan halaman website terdiri dari: containing block, Logo, navigasi, content, with space. Mari kita bahas satu persatu:
  • Header: Header merupakan bagian website yang letaknya berada paling atas, umumnya digunakan untuk nama website, logo, deskripsi,dll.
  • Containing Block: Merupakan suatu tempat atau bagian dari halaman website yang membungkus semua komponen halaman website. umumnya menggunakan tag <body> dan diisi dengan tag <div> dan <table>.
  • Logo: Merupakan identitas dari website tersebut, biasanya dapat berupa gambar favicon.
  • Navigation: Merupakan navigasi yang terdapat label atau menu, dan merupakan suatu bagian paling penting karena dapat memudahkan pengunjung untuk mengakses ke halaman lain dari situs tersebut.
  • Content: Merupakan suatu isi yang penting dari suatu website, karena didalamnya terdapat informasi yang diberikan.
  • Footer: Merupakan bagian paling bawah yang berisi informasi dari website tersebut seperti CopyRight dan macam-macam link lainnya.
  • White Space: Merupakan bagian kosong yang membatasi antara bagian komponen website dan merupakan suatu ruang yang dapat diisi oleh banner, iklan, atau informasi penting lainnya. 
Apa saja model layout dari suatu halaman website:
  1. Header: Berisi logo,judul, dll.
  2. Navigation: Untuk mengakses ke halaman halaman lainnya.
  3. Sidebar: Berisi pendukung content
  4. Content: Berisi inti dari halaman website
  5. Footer: Berisis informasi penutup atau sebuah hak cipta sebuah website
Setelah teman-teman membaca pembahasan diatas, tiba saatnya kita mempelajari cara Menyajikan Desain Halaman Web dengan Konsep Tabel

Langkah- Kerja

  • Silahkan buat folder di drive D:, dengan nama folder nama anda, misalnya: prakweb_Namasiswa.
  • Selanjutnya buat folder praktikum4 didalam folder yang telah kita buat sebelumnya.
  • Silahkan buka aplikasi notepad++/sublime sebagai teks editor
  • Simpan element-element html tersebuat dalam format .html
  • Tahap akhir jalankan masing masing contoh element struktur html tersebut dengan web browser
a. Silahkan Buat halaman web sebagai berikut (Top Index):
<!DOCTYPE html> <head> <title>Top index</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="800" height="542" border="1" align="center"> <tr> <td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font size="+5">Banner atau iklan</font></strong></td> </tr> <tr> <td height="27" align="center" bgcolor="#FFCCCC"><font color="#FF0000">Daftar isi atau navigasi </font></td> </tr> <tr> <td height="457" align="center" bgcolor="#FF66CC"> <p>Body atau contents(isi)</p> <p><font color="#006600">Body atau contents(isi)</font></p> <p><font color="#CC0000">Body atau contents(isi)</font></p> <p><font color="#FFFF00">Body atau contents(isi)</font></p> <p><font color="#FF6633">Body atau contents(isi)</font></p></td> </tr> <tr> <td height="23" align="center" bgcolor="#CCFF99"><font color="#9966CC">Info tambahan atau lain-lain </font></td> </tr> </table> </form> </body> </html>
Bila teman-teman benar dalam penulisannya maka hasilnya akan seperti tampilan berikut:
b. Silahkan buat web sebagail berikut (Bottom Index)
!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="542" border="1"  align="center">
    <tr>       <td height="23" align="center" bordercolor="#FFFFFF"
bgcolor="#FFFF00"><strong><font size="+5">Banner  / Judul</font></strong></td>
    </tr>
        <tr>
      <td height="457" align="center" bgcolor="#CCCCCC">
        <p>Body atau contents(isi)</p>
        <p><font color="#006600">Body atau contents(isi)</font></p>
        <p><font color="#CC0000">Body atau contents(isi)</font></p>
        <p><font color="#FFFF00">Body atau contents(isi)</font></p>
        <p><font color="#990033">Body atau contents(isi)</font></p></td>
    </tr>
    <tr>
      <td height="23" align="center" bgcolor="#CCFF99"><font color="#FF0000"><strong><font size="+2">
Daftar
        isi atau navigasi </font></strong></font><font color="#9966CC" size="+2">&nbsp;</font></td>
    </tr>
  </table>
</body>
</html>
Simpan kode HTML tersebut dengan nama bottomindex.html, lalu buka hasilnya dengan web browser. Apabila penulisannya benar
maka akan tampil seperti gambar berikut:
c. Buat halaman web sebagai berikut (left index)
<!DOCTYPE html > <head> <title>Left Colour</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="800" height="447" border="1" align="center" cellspacing="1"> <tr> <th width="160" rowspan="3" valign="top" bgcolor="#993366"><p>Home</p> <p>Profile</p> <p>About Us</p> <p>Blog</p> <p>Contact Us</p></th> <th width="627" height="23" align="center" bgcolor="#FFFF99"><strong><font color="#CCCCCC" size="+4">Electronic Shop</font></strong></th> </tr> <tr> <td height="176" align="center" valign="top" bgcolor="#FFFF99"><p>&nbsp;</p> <p>selamat datang, penjualan produk online ini adalah yang pertama di kota kami. kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi langganan kami. </p></td> </tr> <tr> <td height="30" align="center" bgcolor="#FFFF99"> <font size="+2">profilkami.com</font></td> </tr> </table> </form> </body> </html>
Simpan kode html diatas dengan nama leftindex.html, lalu buka hasilnya dengan web browser. jika penulisannya benar maka akan tampil seperti gambar berikut:
d. Buat halaman web sebagai berikut (Layout split)
<!DOCTYPE html > <head> <title>left </title> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="800" height="512" border="1" align="center"> <tr> <td width="15%" rowspan="2" align="center" bgcolor="#99CC99"><strong>Daftar Isi </strong> </td> <td width="67%" height="23" align="center" bgcolor="#FFCCFF"><font size="+3"><strong>Banner/judul</strong></font></td> <td width="18%" rowspan="2" align="center" bgcolor="#99CC99"><strong>Daftar Isi </strong> </td> </tr> <tr> <td height="456" align="center" bgcolor="#CCCCCC"> <p>Body atau contents(isi)</p> <p><font color="#006600">Body atau contents(isi)</font></p> <p><font color="#CC0000">Body atau contents(isi)</font></p> <p><font color="#FFFF00">Body atau contents(isi)</font></p> <p><font color="#990033">Body atau contents(isi)</font></p> </td> </tr> <tr bgcolor="#FF99FF"> <td height="23" colspan="3" align="center">Lainlain </td> </tr> </table> </form> </body> </html>

Simpan kode html diatas dengan nama layoutsplit.html, lalu buka hasilnya dengan web browser. jika penulisannya benar maka akan tampil seperti gambar berikut:
e.Buat halaman web sebagai berikut (Alternating index)
<!DOCTYPE html > <head> <title>alternating</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="800" height="738" border="1" align="center"> <tr> <td height="248" align="center" bgcolor="#FF66CC"><font size="+1"><strong>Teks/Daftar isi</strong></font></td> <td align="center" bgcolor="#FFFFCC"><font color="#000066" size="+7"><strong><em>Gambar </em> </strong></font></td> </tr> <tr> <td height="261" align="center" bgcolor="#FFFF99"><font color="#CC0000" size="+7"><strong><em>Gambar </em></strong></font><font size="+7"><em></em></font></td> <td align="center" bgcolor="#FF66CC"><font size="+1"><strong>Teks/daftar isi</strong></font></td> </tr> <tr bgcolor="#996666"> <td height="150" colspan="2" align="center"><font color="#FFFFFF"><strong><font size="+1">Lainlain</font></strong></font></td> </tr> </table> </form> </body> </html>
Simpan kode html diatas dengan nama alternating.html, lalu buka hasilnya dengan web browser. jika penulisannya benar maka akan tampil seperti gambar berikut:

Selamat anda telah berhasil mengimplementasikan cara Menyajikan Desain Halaman Web dengan Konsep Tabel

0 Response to "Menyajikan Desain Halaman Web dengan Konsep Tabel"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel