Layout Website Sederhana Dengan HTML Dan CSS


Setelah mengerti cara menggunakan HTML dan CSS, termasuk menghubungkan HTML dengan file eksternal CSS, kita akan mulai mencoba membuat layout. Karena layout sebuah website bersifat global maka kita akan menggunakan external CSS atau CSS yang ditulis dalam file tersendiri, supaya bila kita ingin mengubah layout seluruh halaman website kita hanya perlu mengubah satu file CSS saja.

Dalam contoh kali ini file CSS akan disimpan dengan nama file yang umum digunakan, yaitu style.css.

Sebelum membuat layout, kita bayangkan dahulu layout website kita seperti sebuah kotak makan, dimana di dalam kotak yang lebih besar terdapat kotak-kotak yang lebih kecil untuk memisahkan lauk, nasi, dan mungkin buah-buahan.

Kotak yang lebih besar ini adalah kontainer atau wadah yang akan menjadi tempat untuk kotak-kotak yang lebih kecil, dalam hal ini header, isi, dan footer. Ingat bahwa kita akan menggunakan div tag untuk elemen layout maka kita akan membuat div tag lain di dalam div tag yang lebih besar miliki kontainer.

Persiapan kode HTML :


<html>

<head>
<title>Website Uji Coba</title>
<link rel=”stylesheet” href=”style.css”>
</head>

<body>

<!– div tag untuk kontainer dimana di dalamnya akan terdapat div tag untuk header, isi dan footer –>
<div id=’container’>

<div id=’header’>
Ini adalah header
</div>

<div id=’isiwebsite’>
Isi website<br>
akan ditulis di bagian ini.<br><br>
Tinggi halaman menyesuaikan isi.
</div>

<div id=’footer’>
Ini adalah footer
</div>

</div>

</body>

</html>

Setelah kode HTML siap, kita siapkan file untuk kode CSS nya, yaitu style.css.

Yang pertama kali perlu kita pikirkan untuk layout adalah kontainer yang merupakan tempat dimana header, isi, dan footer berada. Kita akan menentukan lebar dan posisi dari kontainer ini, untuk tinggi tidak perlu karena akan otomatis menyesuaikan dengan isi.

Misalnya kita ingin website kita memiliki lebar 800px dan berada di tengah browser. Maka kita masukkan kode berikut :

#container {
	width: 800px;
	margin: auto;
	padding: 10px;
	background-color: #ddd;
}

Kita memberikan padding pada supaya isi kontainer tidak terlalu terlihat penuh dan ada sedikit border bila menggunakan warna background.
Kode background-color hanya digunakan untuk mempermudah pengecekan, bila tidak digunakan bisa dihapus.

Berikutnya adalah kode untuk header, kita tentunya ingin header memiliki lebar yang sama dengan kontainer, dan kita juga ingin header kita memiliki tinggi sekitar 150 pixel, kita masukkan kode berikut :

#header {
	width: 100%;
	height: 150px;
	margin: 0;
	background-color: #bbb;
}

perhatikan bahwa kode di atas menggunakan lebar dalam persen hal ini digunakan supaya bila container dirubah ukurannya maka ukuran untuk header (termasuk elemen lain) akan selalu memiliki lebar yang sama atau 100% dari lebar elemen dengan prioritas di atasnya, dalam hal ini adalah container.

Untuk isi kita juga akan menggunakan lebar yang sama, tetapi tidak perlu memasukkan height supaya tinggi isi website bisa menyesuaikan dengan isinya secara otomatis.

#isiwebsite {
	width: 100%;
	margin: 0;
	background-color: #999;
}

Yang terakhir adalah footer, dengan kode yang sama seperti header hanya saja untuk footer misalnya kita hanya ingin memiliki tinggi 50 pixel saja hanya untuk menuliskan copyright atau beberapa informasi pendek berupa teks.

#footer {
	width: 100%;
	height: 50px;
	margin: 0;
	background-color: #777;
}

bila kita ingin mengubah warna latar belakang browser kita bisa menggunakan body dan menambahkan baris berikut di dalam kode CSS :

body {
	background-color: #222;
	margin: 0;
	padding: 0;
}

penggunaan body akan mempengaruhi semua elemen pada HTML yang tidak mendapat styling dari CSS, misalnya kita ingin mengubah semua warna teks menjadi biru dan semua teks menjadi rata tengah maka kita bisa menambahkan :

	color: blue;
	text-align: center;

di dalam body CSS.

Karena dalam link (dalam tag head) tidak menggunakan alamat file lengkap dan hanya menuliskan nama filenya saja, pastikan file index.html atau index.php berada dalam directory yang sama dengan file style.css.

Dengan dasar di atas kita bisa membuat sebuah website sederhana dengan layout terdiri dari header, isi dan footer, mungkin kita bisa menambahkan 1 div tag lagi untuk tempat menu di bawah header.

Dengan adanya kata ‘sederhana’ berarti kita membuat sebuah website dengan tampilan yang tetap (bukan dinamis), karena yang dibahas di sini adalah ‘dasar’.

Menggunakan script di atas kita akan mendapatkan tampilan seperti di bawah ini.

Berikutnya kita akan menggunakan CSS untuk bermain dengan tabel.


Dipublikasikan oleh theangelwing dalam kategori Website pada tanggal Jan 28, 2016
Tags : , ,


www.000webhost.com