[BASIC] Tiga Kolom Tableless
Three Column Tableless by Neia
Tutorial ini dibuat dengan menggunakan External CSS. Dengan external CSS, kamu dapat mengubah sesuka hati dan teratur.
HTML Code:
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IDGS: Web and Developing Design</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body><div class="wrapper">
<h1> Web Developing and Design Tutorial </h1>
<h2> Neia for Indogamers</h2>
<h3> How to make 3 Column Tableless</h3>
<p>Ini adalah Contoh Web untuk 3 Kolom tanpa Table</p>
<div class="row">
<div class="column">
Ini Column 1
</div>
<div class="column">
Ini Column 2
</div>
<div class="column">
Ini Column 3
</div>
</div>
</div>
</body>
</html>
CSS Code
Quote:
@charset "utf-8";
body {
background:black;
font-family: "trebuchet MS";
font-size: 14px;
}
h1,h2,h3 {color:#FF6600; margin:0px; padding:0px;}
h1 {font-size:24px;}
h2 {font-size:18px;}
h3 {font-size:16px; color:white;}
p {color:white;}
.wrapper {margin:0 auto; width:1024px;}
.row {margin:10px; height:250px;}
.column {width:300px; height:200px; background: white; margin:0px 10px 0px 10px; padding:5px;float:left;}
HowTo :
Langkah pertama, lakukan persiapan seperti minum susu, siapin rokok sebatang kalo buat yang tidak merokok siapin astor aja.
Buka HTML Editor dan mulai coding dasar:
Quote:
<html>
<head>
<title> Tiga Kolom </title>
</head>
<body></body>
</html>
Save jadi tigakolom.html [terserah aja sih] dan kelar! :D
Langkah kedua, rokok masih duapertiga atau sudah astor yang ketiga..
Buka Notepad/CSS editor apa saja [dreamweaver juga ok], sebelum dimulai coding, kamu pengen pake baju apa nih buat HTML kamu.
Kalo gua pengen pake baju HITAM dengan bentuk tulisan TREBUCHET MS yang ukuran tulisannyaa 14pixel [hare gini pake hitam? Yeee gua ga takut]
Mulai ketik lagi:
Quote:
body {
background:black;
font-family: "trebuchet MS";
font-size: 14px;
}
Save jadi styles.css pada direktori yang sama dan jangan lupa kita harus panggil file styles.css dalam HTML.
Kita tambahkan pada HTML:
Quote:
<html>
<head>
<link href=”styles.css" rel="stylesheet" type="text/css" />
<title> Tiga Kolom </title>
</head>
<body></body>
</html>
Balik lagi ke HTML tadi, kita mulai masukkin isi-isi tubuh kita.
Quote:
<html>
<head>
<link href=”styles.css" rel="stylesheet" type="text/css" />
<title> Tiga Kolom </title>
</head>
<body>
<div class=”wrapper”>
<h1> Web Developing and Design Tutorial </h1>
<h2> Neia for Indogamers</h2>
<h3> How to make 3 Column Tableless</h3>
<p>Ini adalah Contoh Web untuk 3 Kolom tanpa Table</p>
</div>
</body>
</html>
Sekarang kita setting lagi deh di CSS lagi:
Quote:
h1,h2,h3 {color:#FF6600; margin:0px; padding:0px;}
h1 {font-size:24px;}
h2 {font-size:18px;}
h3 {font-size:16px; color:white;}
.wrapper {margin:0 auto; width:1024px;}
Penjelasan:
h1,h2,h3 : heading1, heading2, heading3
heading biasa digunakan untuk Judul Artikel dan Sub Judul Artikel. Dalam tag html, heading sudah memiliki aturan margin dan padding, lihat gambar diatas. Dan kini kita telah memodifikasikannya dengan menggunakan CSS. Dengan warna hex #FF6600 dan membuat heading ini tidak memiliki Margin[margin:0px;] dan Padding [padding:0px]
h1: disetting ukuran font 24pixel
h2: disetting ukuran font 18 pixel
h3: disetting ukuran font 16 pixel
.wrapper
Memiliki margin-top:0 dan jarak margin yang lainnya auto, memiliki ukuran lebar sebesar 1024px
Lihat hasilnya:
http://www.hauntbee.com/idgs/tuts/ti...hree_img_a.gif
Kita sekarang buat baris dan kolom.
Quote:
<html>
<head>
<link href=”styles.css" rel="stylesheet" type="text/css" />
<title> Tiga Kolom </title>
</head>
<body>
<div class=”wrapper”>
<h1> Web Developing and Design Tutorial </h1>
<h2> Neia for Indogamers</h2>
<h3> How to make 3 Column Tableless</h3>
<p>Ini adalah Contoh Web untuk 3 Kolom tanpa Table</p>
<div class=”row”>
<div class=”column”>
Ini Column 1
</div>
<div class=”column”>
Ini Column 2
</div>
<div class=”column”>
Ini Column 3
</div>
</div>
</div>
</body>
</html>
Sekarang setting CSS-nya lagi:
Quote:
.row {margin:10px; height:250px;}
.column {width:300px; height:200px; background: white; margin:0px 10px 0px 10px; padding:5px; float:left;}
Penjelasan:
Didalam CSS ini kita setting Row(baris) dan Column(kolom)
.row
kotak(div) row berada pada margin atas-kanan-bawah-kiri memiliki jarak 10pixel dan
kotak tersebut memiliki tinggi 250pixel.
.column
Kotak(div) kolom memiliki lebar 300pixel dan tinggi 200pixel
Warna background putih
Setiap kotak kolom memiliki margin atas 0pixel, kanan 10pixel, bawah 0pixel, kiri 10pixel.
Setiap elemen yang berada di dalam kotak kolom memiliki jarak 5pixel (padding)
Setiap elemen column diletakkan sebelah kiri [float]
Lihat hasil:
http://www.hauntbee.com/idgs/tuts/three_img_b.gifhttp://www.hauntbee.com/idgs/tuts/ti...hree_img_b.gif
Dan selesai, kita telah membuat 3 kolom tanpa menggunakan tag table (tableless). Dan tak terasa rokok tinggal secuil.
Susah baca thread ini? Download PDF-nya
tigakolom.pdf
HTML dan CSS SourceCode:
tigakolom.rar
