Kali ini kita akan membahas tentang cara Desain Layout Website dengan HTML dan CSS. Dalam mendesain website hal pertama yang kita lakukan adalah mendesain layout web tersebut.
Pertama kita rancang dulu bentuk/layout web ke dalam secarik kertas atau bisa menggunakan tool graphic seperti Photoshop, rancangan layout adalah sebagai berikut :
Perhatikan baik-baik penomoran pada kotak-kotak diatas, ketentuannya adalah sebagai berikut :
- Box No 1 memiliki ID box1, di dalam box1 terdapat box2,box3,box4 dan box7.
- Box No 2 memiliki ID box2, box 2 berfungsi sebagai header.
- Box No 3 memiliki ID box3, box3 berfungsi sebagai menu.
- Box No 4 memiliki ID box4, di dalam box4 terdapat box5 dan box6.
- Box No 5 memiliki ID box5, box 5 berfungsi sebagai sidebar kiri.
- Box No 6 memiliki ID box6, box 6 berfungsi sebagai isi halaman.
- Box No 7 memiliki ID box7, box 7 berfungsi sebagai footer.
ID atau istilah HTML nya selector ID tersebut akan digunakan dalam HTML dan CCS yang akan kita buat nantinya. Berikut adalah ketentuan dalam pembuatan selector ID pada HTML :
- Tidak boleh ada ID yang sama lebih dari satu atau duplikat ID
- Pemberian ID pada suatu elemen boleh menggunakan kata atau angka
- Penulisan ID tidak boleh diawali oleh angka
- Tidak boleh mengandung special characters (~ ! @ # $ %)
Untuk memahami tentang ID tersebut silahkan pelajari kembali materi tentang CSS.
Selanjutnya kita buat file misalnya file index.html dengan script berikut :
<html>
<head>
<title>Belajar Layout Web</title>
<!-- Memanggil file css -->
<link rel="stylesheet" type="text/css" "href="style.css">
</head>
<body>
<div id="box1"> <!-- Membuat Kotak 1-->
<div id="box2">
Isi Box 2 (HEADER)
</div>
<div id="box3">
Isi Box 3 (MENU)
</div>
<div id="box4">
<div id="box5">
Isi Box 5 (SIDEBAR)
</div>
<div id="box6">
Isi Box 6 (KONTEN)
</div>
</div>
<div id="box7">
Isi Box 7 (FOOTER)
</div>
</div>
</body>
</html>
Ketika dijalankan maka tampilannya akan seperti berikut :
Tidak menarik dan jauh dari apa yang kita harapkan, karena belum ada file CSS yang dibuat. Supaya tampilannya menarik dan sesuai dengan keinginan kita, maka kita gunakan CSS untuk memperbaiki tampilannya.
Tag Div memungkinkan kita untuk melakukan demark portion (untuk dimasukkan ke dalam wadah) dari halaman sehingga kita dapat melakukan modifikasi di dalamnya. Setelah bagian dari halaman web kita ada di wadah <div>, kita dapat melakukan beberapa hal seperti memberikan style, menghidupkannya, membuatnya terlihat atau tak terlihat, dan sebagainya. Div mewakili generasi berikutnya dari format halaman HTML yang dalam banyak hal lebih unggul dari pada tabel.
Kemudian kita buat file css dengan nama style.css dengan isi sebagai berikut :
#box1{
width:1000px;/*Lebar box*/
height:780px;/*Tinggi box*/
border:1px solid #cdcdcd; /*Border box*/
background:#f0f3f6;/*Background/warna box*/
margin:auto;/*Supaya box berada di tengah*/
}
#box2{
width:980px;
height:150px;
border:1px solid #cdcdcd;
background:#f82f63;
margin:auto;
margin-top:5px;/*jarak box dengan box diatasnya di beri 5px*/
}
#box3{
width:980px;
height:40px;
border:1px solid #cdcdcd;
background:#4e4ef2;
margin:auto;
margin-top:5px;
}
#box4{
width:980px;
height:500px;
border:1px solid #cdcdcd;
background:#f82f63;
margin:auto;
margin-top:5px;
}
#box5{
width:240px;
height:485px;
border:1px solid #cdcdcd;
background:#e6e2e2;
float:left;/*Supaya box berada di pinggir kiri*/
margin-left:5px;
margin-top:5px;
}
#box6{
width:720px;
height:485px;
border:1px solid #cdcdcd;
background:#e6e2e2;
float:left;
margin-left:5px;
margin-top:5px;
margin-right:5px;
}
#box7{
width:980px;
height:30px;
border:1px solid #cdcdcd;
background:#4e4ef2;
margin:auto;
margin-top:5px;
}
Simpan file HTML dan CSS pada folder yang sama. Ketika kita buka file index.html di browser maka akan tampil seperti gambar berikut :
Untuk warna, ukuran, font, gambar dan sebaginya silahkan bisa menyesuaikan dengan selera masing-masing.
Selamat mencoba!
Be the first to comment