Membuat Desain Layout Website
codekku - Jika anda pertamakali dalam membuat suatu website, sebagai dasar dari bentuk awal pembuatan website. Saya akan menggunakan software visual studio code karena menurut saya visual studio code ini sangat menarik dan simpel ,untuk membuat layout kali ini saya akan mengajak anda untuk membuat desain dengan 2 kolom dengan bagian content sebelah kiri dan disebelah kanan untuk menaruh navigasi dan segala macam bentuknya.
Untuk itu silahkan anda buat dulu folder untuk menaruh file hasil praktek, misalnya saya membuat folder Layout website. Lalu anda buka folder tersebut dan buatlah lagi folder dengan nama images yang berfungsi untuk menampung images.
Copy file gambar dari lampiran ebook ini yang saya sertakan dalam Folder images yang terdapat dalam folder Bab1 Membuat layout, file gambar tersebut ada 2 buah file yaitu header.jpg dan footer.gif.
Membuat file HTML layout
Oke sekarang anda buka tools buat ngodin disini seperti yang saya katakan tadi saya menggunakan visual studio code dan itu terserah anda sendiri menggunakan tools apa, atau jika anda bisa menggunakan software yang biasa anda gunakan lalu ketikkan kode HTML berikut ini:
<html>
<head>
<title>Membuar Layout Web</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="right">
<!--Isi dengan konten/artikel-->
</div>
<div id="footer">
<!--Isi dengan konten/artikel-->
</div>
</div>
</body>
</html>
Keterangan dari kode diatas:
•Kode diatas murni kode HTML dan anda telah membuat tag DIV dengan masing-masing diberikan selector ID, anda masih ingat tentunya dengan selector ID yang dipisahkan dari header,menu navigasi,content, menu kanan,footer. Jika lupa, silahkan and abaca lagi ebook saya yang pertama.
•Kode komentar dengan warna merah perlu anda isi dengan konten atau artikel, karena jika anda tidak mengisi dengan artikel maka hasilnya tidak akan kelihatan (dalam file contoh telah saya beri artikel).
•Kode yang saya tebalkan merupakan link untuk menggabungkan dari File HTML dengan File CSS.
Lalu simpan dalam folder Bab1 Membuat layout yang sudah anda buat, beri nama dengan index.html , jika anda jalankan dengan klik 2 kali maka penampilannya masih tidak karuan hanya tulisan dari content saja karena anda belum membuat kode CSS yang bertujuan mendesain tampilan dan halaman layout web anda.
 |
Gambar Tampilan dari file html layout tanpa css |
Membuat file CSS layout
Oke sekarang kita buat file CSS nya untuk membuat tampilan dari Layout website anda.
Berikut kode dari file CSS :
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
} #container{
width:1000px;
#header{
margin:0 auto;
}
background-image:url(images/header.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#FFFF99;
width:1000px;
#menu{ height:160px; }
background-color:#993300;
width:1000px;
#content{ height:35px; }
background-color:#EBEBEB;
width:700px;
#right { float:left; }
width:300px;
background-color:#EBEBEB;
float:left; }
#footer{
background-image:url(images/footer.gif); width:1000px; height:128px; float:left;
}
Penjabaran dari kode diatas:
•Kode * {margin: 0;padding: 0;} adalah memberikan perintah secara general bahwa margin dan padding dengan nilai 0.
•Kode body {…} memberikan perintah untuk membuat font dari seluruh body dengan font Arial, Helvetica, sans-serif .
•Kode #container {…} untuk membuat kerangka dari halaman web dengan ukuran lebar 1.000 px dengan posisi ditengah karena margin nya 0 dan dibuat Auto.
•Kode #header {…} untuk membentuk sebuah header dengan background gambar header.jpg tanpa perulangan gambar (no-repeat) posisi gambar ditengah dan diberi background warna kuning , dengan ukuran lebar 1.000px dan tinggi 160 px.
•Kode #menu {…} untuk membuat menu navigasi dengan warna background #993300 dengan lebar 1.000 px dan tinggi 35 px.
•Kode #content {…} untuk membuat kerangka lebar 700 px untuk artikel dengan background color dengan warna abu-abu (#EBEBEB) lalu penempatan posisi Float left ( nempel/mengalir kekiri ).
•Kode #right {…} berarti kolom right dengan kerangka lebar 300 px dengan background color abu-abu dengan penempatan float Left.
•Kode #footer {…} membuat footer dengan background image footer.gif , lebar 1.000 px , tinggi 128 px, penempatan Float left.
Lalu setelah itu anda simpan pada folder Bab1 Layout website beri nama style.css.
Jika benar maka tampilan dari isi folder yang anda buat seperti gambar diatas. Untuk melihat hasilnya silahkan klik 2 kali di index.html dan ini hasilnya.
 |
| Gambar Tampilan layout setelah diberi pengaturan CSS |
Catatan :
•Hasil diatas untuk artikel telah saya isi dengan mengambil dari internet.
•Untuk bagian artikel memang terlihat agak jelek karena kita belum mendesain bagian dari konten, nanti akan dibahas pada bab tersendiri.
