Sebuah web yang tanpa dikemas
dengan desain menarik akan terlihat kaku dan tidak menarik untuk dikunjungi. Oleh
sebab itu perlu adanya suatu teknik yang dilakukan untuk mempercantik tampilan
sebuah website. Salah satu cara mempercantik tampilan website adalah dengan
teknik Table Design. Secara garis besar, sebuah website biasanya dirancang oleh
web designer dengan format tampilan sebagai berikut:
|
HEADER
|
||
|
MENU
|
CONTEN
|
WIDGET
|
|
FOOTER
|
||
Sebelum memulai desain website
ada beberapa file yang dibutuhkan yakni diantaranya:
1.
File
gambar untuk background dan foto
profil penulis website.
2.
File
tugas link, tabel dan pendaftaran pertemuan
sebelumnya. File ini berguna untuk link menu pada file html lainnya.
LANGKAH KERJA
1.
Buatlah
sebuah folder project baru dengan
nama “WEBKU”.
2.
Masukan
file tugas link,tabel dan form dalam folder yang sama “WEBKU”.
3.
Buatlah
satu folder lagi dengan nama “images”
dalam folder “WEBKU”.
4.
Masukan
file gambar yang telah disiapkan kedalam folder “images”.
5.
Buatlah
sebuah file html baru dengan nama “index.html”
dalam folder “WEBKU”.
6. Ketikan elemen html standar seperti berikut
ini:
|
<html>
<head>
<title>Home</title>
</head>
<body>
</body>
</html>
|
7. Buatlah sebuah tabel pada bagian <body>
|
..............
<body>
<table width="90%"
border="1px">
<tr>
<td colspan="3"
height="150px">
<div
align="center"><h1>SISTEM INFORMASI
SEKOLAH</h1></div>
</td>
</tr>
<tr>
<td width="25%">
<h3>MENU</h3>
</td>
<td width="50%" >
<h3>WELCOME To Our
Website</h3>
</td>
<td
width="25%">
<h3>BIODATA PENULIS</h3>
</td>
</tr>
<tr>
<td colspan="3"
height="100px">
<div align="center">Guru
SMK TKJ</div>
</td>
</tr>
</table>
</body>...............
|
8.
Jalankan
file “index.html”. Sehingga akan
tampil tampilan sebagai berikut:
9. Mengatur posisi website agar berada di
tengah web browser. Tambahkan attribut è align="center"
è pada
tag <table>.
|
..............
<table width="90%"
border="1px" align="center">
...............
..............
|
10. Mebuat MENU.
|
..............
<h3>MENU</h3>
<ul>
<li><a
href="home.html">Home</a></li>
<li><a
href="halaman1.html">Halaman 1</a></li>
<li><a
href="halaman2.html">Halaman 2</a></li>
<li><a
href="halaman3.html">Halaman 3</a></li>
<li><a
href="pendaftaran.html">Pendaftaran</a></li>
</ul>
..............
..............
|
11. Mengisi Bagian Konten.
|
..............
<h3>WELCOME To Our
Website</h3>
<p>Selamat datang di
website informasi SMK Negeri 1 Batipuh. Website ini merupakan portal online
sekolah sebagai media publikasi dan informasi sekolah.</p>
..............
..............
|
12. Mengisi bagian BIODATA PENULIS.
|
..............
<h3>BIODATA
PENULIS</h3>
<img
src="images/profil.png" width="100px"><br>
Nama : Steve Jobs<br>
Alamat:
Amerika Serikat<br>
Pekerjaan
: Inovator<br>
..............
..............
|
13. Jalankan file “index.html” sehingga akan tampil sebagai berikut:
14. Langkah selanjutnya adalah mempercantik
tampilan website dengan menambahkan background.
15. Tambahkan attribut è background="images/background.png"
è pada tag <body>
pada file “index.html”.
|
..............
<body background="images/background.png">
..............
|
16. Sehingga akan terlihat bagian belakang web
memiliki latar belakang batik keabu-abuan sebagai berikut:
17. Langkah selanjutnya menghias bagian header.
Tambahkan attribut è background="images/header.jpg"
è pada tag <td>
pada file kolom header.
|
..............
<td colspan="3"
height="150px" background="images/header.jpg">
<div
align="center"><h1>SISTEM INFORMASI
SEKOLAH</h1></div>
</td>
..............
|
18. Langkah selanjutnya menghias bagian menu. Tambahkan attribut è background="images/backkonten.png"
è pada tag <td>
pada file kolom bagian menu.
|
..............
<td width="25%" background="images/backkonten.png">
<h3>MENU</h3>
..............
|
19. Langkah selanjutnya menghias bagian konten. Tambahkan attribut è background="images/backkonten.png"
è pada tag <td>
pada file kolom bagian konten.
|
..............
<td width="50%" background="images/backkonten.png">
<h3>WELCOME To Our
Website</h3>
..............
|
20. Langkah selanjutnya menghias bagian BIODATA PENULIS. Tambahkan
attribut è background="images/backkonten.png"
è pada tag <td>
pada file kolom bagian BIODATA PENULIS.
|
..............
<td width="25%" background="images/backkonten.png">
<h3>BIODATA
PENULIS</h3>
..............
|
21. Langkah terakhir dalam menghias website adalah
bagian footer. Tambahkan attribut è background="images/footer.jpg"
è pada tag <td>
pada file kolom bagian footer.
|
..............
<td colspan="3" height="100px"
background="images/footer.jpg">
<div
align="center">Design Web By: X MM SMKN 1 Batipuh</div>
..............
|
22. Jalankan
file “index.html” untuk melihat
hasil desain.
23. Langkah
selanjutnya adalah mendesain halaman/file html lainnya dengan desain yang sama.
Buka
file “halaman1.html” dan “index.htm
No comments:
Write komentar