Membuat halaman web berada di tengah-tengah browser
Sebenernya ada banyak cara biar halaman web yang kita buat terlihat berada di tengah-tengah browser. Tapi saya akan jelasin satu cara aja yang sering dipake sama para web designer, dan cara ini lebih kompatibel di kebanyakan browser.
Kita mulai ya… Coba kamu salin kode ini ke notepad trus simpen dengan nama tengah.html
<!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>Tengah</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>berada di tengah browser khan</h1>
</div>
</body>
</html>
Nah, sekarang buat CSSnya. CSS kita letakin di luar file HTML yang tadi karena di file HTML di atas udah diletakin tag <link href=”style.css” rel=”stylesheet” type=”text/css” /> (tapi harus satu folder ya)
Oke sekarang salin kode CSS ini ke notepad juga dan simpen dengan nama style.css
body{
background:#000000;
}
#wrapper {
background:#FFFFFF;
width:700px;
height:800px;
margin:auto;
padding:10px;
}
Coba file tengah.html nya di buka pake browser, gimana??
Oke, ni sedikit penjelasannya :
Di file HTML, kita ngebuat sebuah blok dari tag div yang kita kasih id namanya wrapper. Nah, trus di CSSnya kita atur tag div yang idnya wrapper tadi.
Untuk property background pada tag body dan wrapper dah tau khan fungsinya, trus di wrappernya ada width sama height, klo width itu ngatur lebarnya kesampingnya mo berapa pixel (dalam hal ini saya pake satuan pixel) dan height itu kebawahnya berapa pixel (px).
Trus ada margin:auto , nah property itulah yang ngebuat halaman HTML tadi berada di tengah browser, klo yang terakhir padding:10px; itu buat nentuin jarak dari kotak wrapper tadi ke isinya (dalam hal ini text yang ada) berapa pixel.
Nah, jadi klo kamu naro tulisan atau apapun di dalam tag div yang idnya wrapper tersebut, akan terlihat berada di tengah browser. Dah ngerti khan??
O iya, supaya trik ini berhasil selain kamu ngeset margin:auto ,kamu juga harus ngeset berapa widthnya. Klo contoh di atas saya ngeset widthnya jadi 700 pixel.
Kamu bisa ngedownload file latihan tersebut disini..
[...] htmlnya itu ada tag div yang idnya wrapper ya? Gunanya buat apa ya? Hmmm… kamu masih inget khan cara untuk ngebuat halaman web berada di tengah-tengah browser? Nah layout yang kita buat kali ini menggunakan teknik [...]
Mas Hisman, Saya membuat web menggunakan ms publisher dan hasilnya gak bisa di tengah browser. Bagaimana caranya supaya bisa di tengah browser ? Thaks, atas bantuannya. Bisa lewat email.
Mas, kalau websitenya sudah jadi gimana? Saya banyak menggunakan layer dan tabel, gimana membuat tampilannya agar bisa ditengah. Tak tunggu jawabannya, konfirmasi ke email ya.
masi ga ngertiii..T_T
ok banget mas, saya jadi ngerti nih, trims ya mas
maksih buanyak deh