LAYOUT DASAR DENGAN HTML DAN CSS in Article / Website by ion on Juni/29/2012
Perkenalan Layouting
Bismillah, Assalamu'alaikum warahmatullahi wabarakatuh sobat ion semua, Semoga Senantiasa Sehat insya Allah Aamiin. Yuuk, kita perkenalan dulu, tak kenal maka tak sayang hehe.
Layouting dalam website adalah membuat sebuah tataletak dari sebuah konten, navigasi ataupun widget seperti Recent Tweet atau Facebook Like. Sobat ion, Bagi para Web Desainer membuat layout sebuah website memang sangat mudah, tapi bagaimana dengan orang-orang yang baru pertama kali belajar, seperti kita-kita ini, mungkin mereka akan sulit untuk melakukannya, karena dalam melakukan layouting, kita harus menguasai dua bahasa layouting tersebut, yaitu HTML dan CSS.
Karena itu ion mencoba untuk memberikan sebuah contoh sederhana untuk membuat sebuah layout dasar suatu website. Kita mulai dengan HTML Intro.
HTML Intro
Kita akan memulainya dengan kode HTML-nya terlebih dahulu. Namun sebelumnya kita perkenalan terlebih dahulu, apa itu HTML.
HTML atau HyperText Markup Language adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Dalam HTML ini, ada aturannya Sob yang harus diikuti dalam penulisan kodenya, yaitu harus diawali dengan tag "<...>" dan ditutup dengan tag "</...>". Lalu cara penulisan tag HTML-nya, misalnya kita akan membuat paragraf, paragraf dalam tag HTML yaitu "<p>", maka kode penulisannya harus seperti ini :
<p>Hello World</p>
membuat textarea :
<textarea>isi</textarea>
Bagaimana sobat ion yang baik, tidak sulit bukan? Nah sekarang kita lanjut kebagian CSS-nya.
Sumber : http://id.wikipedia.org
CSS Intro
CSS atau Cascading Style Sheet adalah salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya dengan styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas atau file.
Sobat ion, Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. Yaah bahasa gaulnya supaya web/wap kita terlihat kereeeen biar cuma tidak putih mulus.
Penulisan kode CSS terbagi menjadi beberapa jenis, yaitu :
-
CSS Internal
Adalah style CSS yang dipasang langsung didalam file HTML, dengan kata lain style ini berada dalam satu file dengan file HTML-nya. Berikut contoh penggunaan CSS internal ini :
<html> <head> <style type="text/css"> body { background:#424242; } </style> </head> <body> </body> </html> -
CSS External
Adalah style CSS yang terpisah dari file HTML-nya. Untuk menggabungkan dengan file HTML nya, kita perlu kode sebagai berikut ini :
<link rel="stylesheet" type="text/css" href="file-location.css" />
Jadi dalam CSS eksternal ini, terdapat dua file berbeda, yang satu dalam format HTML, dan yang satunya lagi untuk style CSS-nya. Berikut ini contoh penggunannya :
-
1. Silahkan Sobat ion Semua Buat file HTML baru, beri nama dengan "index.html", atau nama terserah kalian lalu ketikkan kode sebagai berikut :
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html>
2. Buat file CSS baru, beri nama dengan "style.css", lalu ketikkan kode sebagai berikut :
body { background:#424242; }
-
-
CSS Inline
Adalah style CSS yang ditulis langsung pada atribut yang terdapat pada tag HTML yaitu "style". Berikut contoh penggunaannya :
<html> <head> </head> <body style="background:#424242;"> </body> </html>
Semua kode diatas bermaksud untuk memberi warna background menjadi warna hitam. YA HASILNYA SAMA teman-temanku emang pinter. So, terserah kalian mau memakai yang mana ? Lalu pada CSS terdapat istilah selector, yaitu yang mendefenisikan sebuah elemen yang akan terkena dampak dari suatu deklarasi (style CSS). Selector disini maksudnya tag-tag HTML seperti "<div>", "<span>", dan sebagainya. Lalu dampak pada elemen maksudnya adalah terjadi perubahan pada desain ataupun posisi elemen.
Untuk deklarasi selector ini terdapat tiga macam, yaitu berupa tag, class (.) dan ID (#). Berikut masing-masing penggunaannya :
-
1. Menggunakan Tag HTML
p { color:#fff; background:#000; }Jika menggunakan tag HTML, cukup ditulis dengan nama tagnya saja.
Artinya Apa Sobat ion ? Jika kita ingin memberi style dengan css kita cukup kasih nama saja tidak perlu dengan class (.) ataupun id (#). Misalnya : form, h3, hr, ulTEXT
-
Nah, Css-nya seperti ini :
form { font-size : small; margin : 0; padding : 0; } h3 { margin : 0; padding : 0 0 2px 0; } hr { border : 0; border-top : 1px solid gray; margin : 0; } ul { margin : 0; padding-left : 20px; }
untuk memanggilnya cuma di tag html nya saja. Gak perlu div.
ISI
2. Menggunakan ID
#text {
color:#fff;
background:#000;
}
Jika menggunakan ID, tambahkan simbol "#" didepan nama target selector-nya. Lalu berikut ini cara penggunannya di HTML :
<div id="text">Hello World</div>
Nama target selector harus sama dengan nama yang ada di file CSS-nya.
3. Menggunakan Class
.text {
color:#fff;
background:#000;
}
Jika menggunakan class, tambahkan simbol "." didepan nama target selector-nya. Lalu berikut ini cara penggunannya di HTML :
<div class="text">Hello World</div>
Tidak berbeda dengan menggunakan ID, pada penggunaan class, nama target selector juga harus sama dengan nama yang ada di file CSS-nya.
Bagaimana, mudah bukan? Nah sekarang, kita akan mencoba membuat layout standar dengan menggunakan HTML dan CSS ini. Bagaimana caranya? Let's check it out.
Sumber : http://id.wikipedia.org
Buat sebuah File HTML Anyar
Buat file HTML baru, beri nama dengan "index.html". Ketikkan kode sebagai berikut :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- disini judul situsmu --> <title>Nextions | Simple Layout</title> <!-- ini external CSS --> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <!-- konten mulai --> <div id="header"> <!-- disini konten header site pean --> </div> <div id="wrapper"> <!-- disini outer konten site pean --> <div id="content"> <div id="left"> <!-- konten kiri pean --> </div> <div id="right"> <!-- konten kanan --> </div> <div id="clear"><!-- ini untuk clear floating --></div> </div> </div> <div id="footer"> <!-- disini konten footer site pean --> </div> <!-- konten finish sob --> </body> </html>
Jika kita menjalankan kode HTML diatas tanpa perlu membuat kode CSS-nya terlebih dahulu, maka tampilan hasil dari kode HTML diatas akan sangat berantakan. Kita diharuskan membuat sebuah kode CSS untuk mempercantik design dari layout HTML yang telah kita buat sebelumnya.
Catatan : pada kode diatas kita memakai CSS eksternal.
Sekarang Kita Masak HTML Tadi Dengan CSS (Siapkan Panci atau Ulekan Cobek Kita)
Sekarang kita buat file CSS baru dengan nama "style.css", letakkan di folder "css", tempat yang sama dengan "index.html", lalu ketikkan kode sebagai berikut :
/* reset */
body {
margin:0;
padding:0;
background:#fff;
}
/* clear floating left and right */
#clear { clear:both; }
/* style keseluruhan */
#header, #wrapper, #footer {
width:900px;
margin:10px auto 20px;
}
/* header style */
#header {
border:1px solid #dcdcdc;
background:#f9f9f9;
padding:10px 0;
height:120px;
}
/* content style */
#content {}
#content #left {
float:left;
padding:10px;
width:550px;
height:350px;
border:1px solid #dcdcdc;
background:#f9f9f9;
}
#content #right {
float:right;
padding:10px;
width:280px;
height:350px;
border:1px solid #dcdcdc;
background:#f9f9f9;
}
/* footer style */
#footer {
border:1px solid #dcdcdc;
background:#f9f9f9;
padding:10px 0;
}
Untuk melihat demonya kita bisa melihatnya pada target link dibawah ini.
DEMODONWLOAD
Demikian tutorial sederhana dari ion, semoga bermanfaat untuk kalian semua.
Terimakasih, untuk para sahabat yang berkunjung dan bersedia hadir di Sini. Silahkan Sapaan, Komentar dan Sarannya.
Wassalamu'alaikum warahmatullahi wabarakatuh.