Tutorial Membuat Layout Menggunakan CSS (Part 1)

Pada tutorial kali ini, mari kita berguru ihwal layouting HTML dengan CSS.

Apa itu CSS ?

CSS ialah salah satu komponen yang wajib kita kuasai sebagai web designer. Karena dengan menggunakan CSS, kita sanggup membangun sebuah web dengan rancangan desain yang efektif dan fleksibel. Dengan CSS, kita tidak memanipulasi desain dari suatu elemen HTML dengan menambahkan atribut di tag tersebut, melainkan dengan menambahkan class/id tertentu ke dalam tag yang sudah kita tentukan dengan style yang sudah kita definisikan di CSS. Kali ini kita akan menciptakan sebuah layout untuk halaman web yang akan kita buat. Pada tutorial ini, kita tidak akan menggunakan framework, alasannya ialah materi CSS tidak membutuhkan framework PHP, jadi tidak menggunakan framework pun web kita sudah sanggup menggunakan layout dengan CSS.

Persiapan

Kita akan menciptakan 2 buah file, yaitu index.php dan style.css dengan nama folder root misalnya web_css, jadi URL yang akan kita gunakan untuk tutorial ini adalah http://localhost/web_css.

Saya tidak akan menjelaskan bagaimana setting XAMPP atau paket server Apache lainnya di tutorial ini, alasannya ialah kita kini akan fokus ke layouting dengan menggunakan CSS. OK?

Catatan

  1. Tidak ada satupun arahan PHP di tutorial ini, jadi Anda tidak perlu khawatir bila Anda belum menguasai PHP
  2. Anda sanggup pula mengganti file index.php dengan ekstensi html, menjadiindex.html

Buatlah sebuah file index.php dengan isi sebagai berikut:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tutorial CSS Layout | Jagocoding.com</title>
</head>
<body>
</body>
</html>

Simpan file di atas di http://localhost/web_css/index.php

Fixed Layout

Contoh di sini ialah layout fixed/ice, yang artinya lebar dari halaman web ini ialah tetap dan tidak akan berubah. Misalnya kita mendefinisikan lebar website kita ialah 950px, maka saat kita melihat web dengan resolusi komputer yang berbeda layout web tersebut tidak akan berubah. Kaprikornus saat di lihat di monitor dengan resolusi tinggi, web kita akan terlihat kecil, sedangkan di monitor dengan resolusi rendah, web kita terlihat besar. Kaprikornus tergantung resolusi dari monitor, bukan tergantung dari lebar window browser.

Membuat Layout 2 Kolom

Anda mengerti maksudnya? ya, untuk tutorial ini kita akan menciptakan halaman web dengan layout 2 kolom, alasannya ialah akan terdapat sidebar di sebelah kiri dan ruang untuk konten di sebelah kanan.

Layout 2 kolom itu ialah layout standar yang biasa dipakai untuk blog. Coba Anda buat blog gres di wordpress atau blogger, niscaya layout defaultnya ialah 2 kolom, yaitu konten di sebelah kiri dan sidebar untuk kategori/arsip di sebelah kanan.

Pembagian Area

Pada tutorial kali ini, satu halaman website terdapat 4 bab ‘area’ utama yang dibentuk dengan tag ‘div’, yaitu header, sidebar, content, dan footer. Masing-masing div diberi atribut id dengan nama sesuai dengan nama area, contohnya id=”header” untuk div header, dan seterusnya.

Supaya lebih jelas, ayo kita pribadi buat arahan HTMLnya, tambahkan arahan berikut di dalam tag ‘body’ yang ada di dalam file index.php:


...
<body>


<div id="wrapper">


<div id="header"></div>




<div id="sidebar"></div>




<div id="content"></div>




<div id="footer"></div>


</div>


</body>
...

Sejauh ini, kita sudah menciptakan 4 area utama dalam halaman web kita dan ‘terbungkus’ oleh div yg memiliki id=”wrapper”, wrapper hanya istilah saja, alasannya ialah fungsinya sebagai container untuk layout ice/fixed, sehingga wrapper ini kita tentukan lebar dan tinggi fix-nya, dan nantinya kita tentukan tinggi, lebar, dan posisi untuk keempat area tersebut di dalam file CSS. Secara default bila kita refresh halaman tersebut, maka sebenernya terdapat 4 tumpukan div dari atas ke bawah secara berurutan. Karena kita belum mengisikan apa2, maka tumpukan tersebut tidak akan terlihat, alasannya ialah berupa container mistik (div) halah mistik hehe..

Dummy Text

Sekarang kita buat dummy text untuk setiap area yang sudah kita buat supaya setiap area terdapat isi sample text. Dummy text ialah sekumpulan kata/kalimat sebagai pola untuk dijadikan materi percobaan untuk layout yang kita buat, coba Anda buka http://lipsum.com, di situ terdapat pola dummy text Lorem Ipsum.

HEADER

Untuk header, tambahkan teks judul kita yang berupa link, ibarat berikut:




<div id="header">
<a href="http://localhost/web_css">

<h1>Tutorial CSS Layout</h1>


</a>
</div>


SIDEBAR

Untuk sidebar, kita buat pola menu, ini hanya pemisalan aja, supaya kita sanggup melihat bentuk sajian yang akan kita tentukan di CSS.

Tambahkan arahan html berikut di dalam div sidebar.




<div id="sidebar">


<h3>Menu</h3>




<ul class="menu">


<li><a href="#">Home</a></li>




<li><a href="#">Products</a></li>




<li><a href="#">Contact Us</a></li>




<li><a href="#">About Us</a></li>


</ul>


</div>


CONTENT

Untuk konten, isikan saja paragraf lorem ipsum supaya kita ga capek mengetik pola kalimat, hehe… kunjungi http://lipsum.com




<div id="content">


<h2>Selamat Datang</h2>




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae semper arcu. Fusce condimentum ultrices elementum. Maecenas adipiscing ullamcorper ante, in viverra velit imperdiet at. Nam sollicitudin consectetur tincidunt. Nam venenatis nunc ut sapien pellentesque venenatis. Donec in risus elit. Duis nec lectus quam. Pellentesque velit elit, iaculis in pharetra nec, posuere in nulla. Nunc et nulla eu metus interdum scelerisque. Nunc ultricies suscipit ligula, non vulputate nunc semper malesuada. Maecenas id euismod leo. Praesent vitae lectus sapien, id mattis eros. Integer non nulla felis, in pellentesque nunc. Mauris convallis dui in dui adipiscing tempor. Donec ornare sapien sed nisi adipiscing gravida. Nam volutpat pharetra lectus, euismod fermentum ipsum mollis quis.

</div>


FOOTER

Terakhir untuk footer, tambahkan aja copyright untuk website kita, contohnya copyright © 2010 by sourcecodeaplikasi.info, arahan lengkapnya:




<div id="footer">


Copyright &copy; 2010 by Jagocoding.com

</div>




Sekarang, tambahkan tag berikut sebelum tag ‘body’ yang berfungsi untuk meload file <code>style.css</code> yang akan kita buat nanti.
Nah, jadi arahan HTML lengkap untuk file index.php ialah sebagai berikut:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Tutorial CSS Layout</title>
</head>
<body>


<div id="wrapper">


<div id="header">
<a href="http://localhost/web_css">

<h1>Tutorial CSS Layout</h1>


</a>
</div>




<div id="sidebar">
Menu


<ul class="menu">


<li><a href="#">Home</a></li>




<li><a href="#">Products</a></li>




<li><a href="#">Contact Us</a></li>




<li><a href="#">About Us</a></li>


</ul>


</div>




<div id="content">


<h2>Selamat Datang</h2>




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae semper arcu. Fusce condimentum ultrices elementum. Maecenas adipiscing ullamcorper ante, in viverra velit imperdiet at. Nam sollicitudin consectetur tincidunt. Nam venenatis nunc ut sapien pellentesque venenatis. Donec in risus elit. Duis nec lectus quam. Pellentesque velit elit, iaculis in pharetra nec, posuere in nulla. Nunc et nulla eu metus interdum scelerisque. Nunc ultricies suscipit ligula, non vulputate nunc semper malesuada. Maecenas id euismod leo. Praesent vitae lectus sapien, id mattis eros. Integer non nulla felis, in pellentesque nunc. Mauris convallis dui in dui adipiscing tempor. Donec ornare sapien sed nisi adipiscing gravida. Nam volutpat pharetra lectus, euismod fermentum ipsum mollis quis.

</div>




<div id="footer">


Copyright &copy; 2010 by Cheyuz

</div>


</div>


</body>
</html>

Preview

Bila Anda mengikuti langkah2 di atas dengan benar, maka karenanya sesuai dengan tampilan di bawah ini:

Tutorial Membuat Layout Menggunakan CSS (Part 1)

Nah, kasus di sini ialah layout Anda masih belum diberi style, posisi yang belum benar, pewarnaan belum ada, tinggi dan lebar yang belum didefinisikan, dan sebagainya, kini ayo kita buat CSSnya supaya benar2 sesuai dengan yang kita inginkan.

style.css

Setelah kita mengikuti langkah di atas untuk menciptakan isi dari halaman web (file index.php), kini kita buat style-nya dengan menghubungkan fileindex.php dengan style.css..

Buatlah file style.css satu folder dengan file index.php.

1. DEFAULT STYLE

Ga tau istilahnya apa, aku kasih istilah default style, yaitu style default untuk semua elemen/tag yang ada di halaman web, biasanya default style itu untuk jenis font, ukuran font, warna default, dan sebagainya. Penggunaannya dengan menambahkan karakter * di dalam file css sebagai variable.


*{
font-size: 12px;
font-family: sans-serif;
}

Coba Anda save, kemudian refresh browser.. maka jenis hurufnya akan bermetamorfosis sans serif dan dengan ukuran 12px. Untuk judul, akan kita ubah ukurannya nanti.

2. TAG STYLES

Tag style ialah tag yang diterapkan pada setiap tag dengan nama tag yang sesuai dengan variable yang didefinisikan di CSS.. contohnya untuk setiap h1, style hurufnya harus besar, tebal.. style untuk paragraf, contohnya harus alignment justify, ukuran hurufnya 12px, dan sebagainya.

Tambahkan syntax CSS tadi dengan syntax di bawah ini:


body{
background: #efefef;
margin: 0;
}
a{
text-decoration: none;
color: black;
}
a:hover{
text-decoration: underline;
color: #0000cc;
}
h1{
font-size: 36px;
margin: 0;
}
h2{
font-size: 24px;
}

Arti dari syntax tersebut adalah:

  1. background untuk tag ‘body’ secara default warna putih agak keabuan (#efefef) dan tidak ada margin
  2. untuk semua hyperlink, warna hitam dan tidak ada garis bawah
  3. hover, saat mouse melewati setiap hyperlink, maka muncul garis bawah, dan warnanya menjadi biru tua
  4. Ukuran setiap h1 ialah 36px, dan setiap h2 ialah 24px

3. LAYOUTING & THEMING

Nah, ini yang paling penting, layouting dan theming. Layouting dan Theming ialah pendefinisian posisi untuk tata letak, warna, dan ukuran dari setiap tag div.

Pertama kita tambahkan style untuk div yang memiliki id=”wrapper”, jadi variable di CSSnya dengan ditambahkan awalan karakter pagar (#).


#wrapper{
width: 950px;
margin: auto;
background: #fff;
}

Syntax di atas ialah style untuk div yang mempunya id=”wrapper”. Dengan syntax di atas, Anda mengubah lebar wrapper menjadi fix 950 pixel, dengan margin auto yang berarti wrapper akan selalu berada di tengah2, dan memiliki background berwarna putih, silakan refresh untuk hasilnya.


#header{
height: 150px;
background: #cdf;
}

Dengan syntax di atas, Anda telah menciptakan banner yang memiliki tinggi 150 pixel dan warna background biru muda. Silakan direfresh!


#sidebar{
float: left;
width: 200px;
border-right: 1px solid #ccc;
padding: 5px;
}

Terlihat di arahan di atas ada properti float, itu ialah untuk memilih posisi untuk sidebar menjadi di sebelah kiri, untuk pembahasan float dan posisi lainnya di CSS,  kemudian sidebar memiliki lebar 200 pixel, dan ditambahkan padding 5 pixel untuk memperlihatkan jarak dari text yang ada di dalam sidebar ke pinggiran ruang.refresh!


#content{
float: left;
width: 700px;
padding: 5px 5px 5px 20px;
border-left: 1px solid #ccc;
}

Untuk content, diberi float left, alasannya ialah bertahap, bertumpuk dari kiri,, memiliki lebar 700 pixel, dan memiliki padding untuk atas, kanan, dan bawah 5 pixel, sedangkan untuk sebelah kiri 20 pixel untuk memperlihatkan jarak terhadap pinggiran konten sebelah kiri, sehingga terlihat seolah2 garis pinggir di sebelah kiri yang berwarna abu2 ialah pemisah antara content dan sidebar.


#footer{
clear: both;
background: #bbb;
}
#footer p{
text-align: center;
padding: 20px;
color: #fff;
font-size: 10px;
font-weight: 900;
}

Untuk footer, aku memberi clear both, yang artinya membersihkan dari float-float yang ada di atasnya, yaitu sidebar dan content, kalau kita tidak memberi clear, maka kalau kita menambahkan div di bawah footer, maka penumpukan menjadi kacau, tetapi kalau menggunakan clear, posisi kembali menjadi gres ibarat header (posisi footer = header = tidak 2 kolom). Untuk warna latar, aku beri background debu bau tanah (#bbb).

Nah, terlihat di syntax itu ada “#footer p”, itu maksudnya ialah style untuk paragraf (p) yang hanya ada di footer, selainnya tidak. Khusus untuk p yang ada di footer, alignmentnya justify, kemudian warna putih, ukurannya 10 pixel dan tebal, kemudian diberi padding 20 pixel supaya jarak ke pinggiranya tidak terlalu rapat.

Nah, jadi syntax lengkap CSSnya ialah ibarat berikut:


*{
font-size: 12px;
font-family: sans-serif;
}

body{
background: #efefef;
margin: 0;
}
a{
text-decoration: none;
color: black;
}
a:hover{
text-decoration: underline;
color: #0000cc;
}
h1{
font-size: 36px;
margin: 0;
}
h2{
font-size: 24px;
}

#wrapper{
width: 950px;
margin: auto;
background: #fff;
}
#header{
height: 150px;
background: #cdf;
}
#sidebar{
float: left;
width: 200px;
padding: 5px;
border-right: 1px solid #ccc;
}
#content{
float: left;
width: 700px;
padding: 5px 5px 5px 20px;
border-left: 1px solid #ccc;
}
#footer{
clear: both;
background: #bbb;
}
#footer p{
text-align: center;
padding: 20px;
color: #fff;
font-size: 10px;
font-weight: 900;
}

Disimpan di http://localhost/web_css/style.css.

Sekarang coba jalankan http://localhost/web_css.

Jika Anda mengikuti tutorial ini dengan benar, maka karenanya ibarat ini:

Tutorial Membuat Layout Menggunakan CSS (Part 1)

Untuk file yang udah jadi, silakan download filenya DI SINI, tapi mending pelajari dulu tutorial di atas, soalnya yang penting ilmunya, bukan hasil dari file yg udah ada Tutorial Membuat Layout Menggunakan CSS (Part 1)

Untuk part 1 cukup sekian dulu, untuk styling sajian nanti akan dipelajari di tutorial CSS berikutnya.

Terima kasih sudah mengikuti tutorial ini.

sumber : jagocoding


Sumber http://referensicoding.info