Tau ngga sih!?. cara belajar membuat layout Div Class dan CSS yang mudah di mengerti itu..
Cukup mudah kok! berikut ini.
Pertama buatlah satu folder di localhost atau tidak menggunakannnyapun tidak apa apa!
Saya meNamakan folder itu adalah 'belajarwebstatis'.
Setelah itu buatlah 2 file , 1 file html yaitu 'index.html' dan 1 file Css-nya 'style.css'.
Mengapa saya membuat 2 file , kenapa tidak 1 file saja, CSS disisipkan pada file html!!??,
Karena saya akan menuntun anda membuat sekaligus menulis koding dengan baik dan rapih.
Untuk menulis koding , gunakanlah Dreamweaver, karna software ini sangat baik untuk menulis koding yang akan kita susun.
Jika software itu belum diInstal atau tidak ada , anda bisa menggunakan Notepad++ maupun Notepad biasa.
Kita akan mulai menulis untuk file html yang tadi sudah di namakan 'index.html'
dengan koding seserdehana mungkin..
----------------------------------
<DOCTYPE html>
<html>
<head>
<title>belajarwebstatis</title>
</head>
<body>
</body>
</html>
----------------------------------
Di atas itu adalah kerangka dasar yang mutlak harus kita hapal/di mengerti.
di bawah ini anda silahkan copy-paste ke index.html untuk melihat hasil nanti, untuk belajar pertama
tidak apa apa masih menggunakan copy-paste, tetapi selanjutnya mudah mudah anda bisa mengetik
koding tanpa harus melihat maupun mengCopy-paste.
----------------------------------
<DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="badan">
<div id="kepala">
kepala
</div><!-- tutup kepala-->
<div id="kiri">
kiri
</div><!-- tutup kiri -->
<div id="kanan">
kanan
</div><!-- tutup kanan -->
<div style="clear:both">
<div id="kaki">
kaki
</div><!-- tutup kaki -->
</div><!-- tutup Clear both -->
</div><!-- tutup badan -->
</body>
</html>
----------------------------------
Keterangan :
<link href="style.css" rel="stylesheet" type="text/css" /> apa ini?
itu adalah driver/penyambung file index.html dan file style.css
Saya menggunakan bahasa indonesia di Div ID Class agar mudah di pahami
Div id badan yang biasanya di tulis dalam b.inggris<div id="container">
Div id kepala yang biasanya di tulis dalam b.inggris<div id="heeader">
Div id kiri yang biasanya di tulis dalam b.inggris <div id="sidebarleft"> atau <div id="main">
Div id kanan serupa dengan ID kiri <div id="sidebarright">
dan Div id kaki biasa di tulis <div id="footer">
Clear both adalah pembersih atau ending dalam kontent.
Setelah kita membuat file index.html sekarang kita akan menulis koding CSS di file style.css
----------------------------------
@charset "utf-8";
/* CSS Document */
body{
background:#CCCCCC;
}
#badan{
background:#0099CC;
margin:auto;
width:900px;
}
#kepala{
background:#00FFFF;
width:100%;
height:60px;
}
#kiri{
background:#330066;
width:450px;
float:left;
}
#kanan{
background:#0000FF;
width:450px;
float:left;
}
#kaki{
background:#333333;
width:100%;
height:20px;
}
----------------------------------
Keterangan :
nama #badan, #kepala dan lain-lain itu adalah nama ID yang sebelumnya kita buat di file index.html
mengapa tanda # karna yang kita buat itu adalah ID , jika kita membuat Class contohnya <p class="pargraf1"> nantinya
di file style.css akan di tulis ( .pargraf1 ) di awali dengan ( . (titik))' .
background:#FFFFFF, (#FFFFFF (ini adalah kode warna, jika menggunakannya di dreamweaver akan lebih mudah di ketahui, bisa di rubah juga kode tersebut dengan red,black,white,yellow dll jika tidak ingin menggunakan kode warna.
margin:auto , margin/posisi auto itu akan meposisikan badan di tengah pada browser , dan akan mencocokan diri dalam layar monitor manapun.
width:900px , adalah lebar suatu badan untuk isi dalam web atau bisa di sebut sebuah nampan.
height di kepala . adalah ketinggian kolom kepala yang bisa di gunakan untuk sebuah judul.
width:100% , mengapa memakai 100% tidak memakai px/pixel karna dengan menggunakan 100% dia akan fix mengikuti lebar si badan.
#kiri{width:450px dan kanan{width:450px , kiri dan kanan adalah bagian yang di bagi dua dari si badan yang lebarnya 900px,
float:left , ini akan memposisikan sidebar sidebar kekiri walaupun sidebar itu di bagaian kanan supaya agar posisinya selalu fix mengikutin siber pertama ya itu yang kiri.
setelah semuanya selesai silahkan save kedua file tersebut , buka file index.html web browser . Selamat anda telah membuat layout div clas sederhana.
--------------------------------------
Copyright admin LSM 11/4/2013 .List Softmedia
Campus Koleksi: Tau Ngga Sih!?. Cara Belajar Membuat Layout Div Class Dan Css Yang Mudah Di Mengerti Itu. >>>>> Download Now
BalasHapus>>>>> Download Full
Campus Koleksi: Tau Ngga Sih!?. Cara Belajar Membuat Layout Div Class Dan Css Yang Mudah Di Mengerti Itu. >>>>> Download LINK
>>>>> Download Now
Campus Koleksi: Tau Ngga Sih!?. Cara Belajar Membuat Layout Div Class Dan Css Yang Mudah Di Mengerti Itu. >>>>> Download Full
>>>>> Download LINK