Kalau diperhatikan source code sebuah website saat ini, tag HTML yang paling banyak ditemukan adalah tag div. Masih banyak orang yang belum mengetahui secara jelas tentang fungsi tag div. Tag div sendiri adalah singkatan dari Division yang berarti sebuah tag HTML untuk membuat suatu seksi atau kelompok tertentu dengan tujuan mengelompokan sebuah file HTML menjadi beberapa bagian sesuai dengan tempatnya agar mempermudah para web developer memberi style pada setiap bagiannya. Misalnya, sebuah halaman web yang terdiri dari 4 bagian: Header, Side Bar, Content dan Footer. Untuk mengelompokannya harus menggunakan tag div. Contoh :
Tampilan layout-nya sebagai berikut :
<div>Header </div>
<div>Sidebar</div>
<div>Content</div>
<div>Footer</div>
Kalau dilihat pada browser, kode HTML di atas akan menjadi seperti ini :
Header
Siderbar
Content
Footer
Membuat Layout Web dengan Div.
Tag div juga dapat berfungsi untuk menggantikan fungsi table. Maksudnya, layout halaman web dengan table adalah cara kuno yang mulai ditinggalkan dan sebagai penggantinya adalah dengan menggunakan tag div. Alasannya adalah :Kode HTML menjadi lebih pendak daripada menggunakan tabel.
- Kode HTML menjadi lebih pendek daripada menggunakan table.
- Ukuran file menjadi lebih kecil.
- Lebih fleksibel karena tidak dibatasi oleh baris dan kolom.
- Lebih kompatibel pada semua browser saat ini.
Jadi, jika ingin membuat layout halaman web tanpa table gunakanlah tag div untuk memperoleh kemudahan.
Di dalam tag div juga bisa meletakan tag div lagi, dan elemen HTML yang lainnya seperti gambar, animasi atau video.
Untuk membedakan masing masing-bagian, memberi style pada setiap tag div harus dengan CSS. CSS sendiri dikenal sebagai alat untuk memformat tampilan pada halaman HTML. Dengan adanya penggunaan CSS dan dukungan browser-browser, CSS sering dipergunakan untuk mengatur posisi dan layout halaman web.
Fakta Menggunakan CSS :
- Telah didukung oleh kebanyakan browser versi baru, tapi tidak didukung oleh browser-browser versi lama.
- Lebih fleksibel dalam penempatan posisi layout.
- Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran file.
- Dapat menampilkan konten utama terlebih dahulu, sementara gambar dan lain-lain dapat ditampilkan sesudahnya.
Walaupun demikian, pada browser-browser lama atau CSS di-disable pada browser, pengunjung masih dapat membaca dengan baik situs tersebut, dikarenakan cara membaca browser yang secara bertahap dari atas ke bawah, dari kiri ke kanan.
Selain itu, penggunaan CSS pada file terpisah, dapat mempermudah pengubahan tampilan pada situs secara keseluruhan.
Penempatan konten yang lebih fleksibel, pada source code dapat menempatkan konten yang penting pada bagian atas, sementara konten yang memerlukan waktu download seperti image atau animasi flash pada bagian bawah, namun tidak mengubah.
Berikut ini adalah contoh pembuatan halaman web dengan menggunakan CSS :
Hal yang peru diperhatikan dalam membuat halaman web adalah membuat layout web terlebih dalulu beserta pengaturan layout-nya pada file mystyle.css.
Halaman HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Studi Kasus 2</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="box">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
mystyle.css
#wrapper {
margin:auto;
width:750px;
border:1px solid red;
}
#header {
height:100px;
border:1px solid blue;
}
#inner {
float:left;
margin:5px 0;
border:1px solid black;
}
#sidebar {
float:left;
margin-right:20px;
width:180px;
height:470px;
border:1px solid red;
}
#box {
float:left;
width:544px;
height:470px;
border:1px solid green;
}
#top {
height:150px;
border:1px solid black;
}
#content {
float:left;
margin-right:20px;
width:280px;
height:310px;
border:1px solid red;
}
#right {
float:right;
width:240px;
height:150px;
border:1px solid red;
}
#footer {
clear:both;
height:50px;
border:1px solid blue;
}
Setelah layout HTML sudah jadi, baru masukkan konten yang akan diisi ke dalam masing-masing bagian layout.
Halaman HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tugas Praktikum 2</title>
<link rel="stylesheet" href="Tugas.css" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-family: Arial;
font-weight: bold;
}
.style3 {font-size: large}
.style4 {font-family: Arial}
.style5 {font-family: Arial; font-size: small; }
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="menu" align="right">
Home | Sitemap | RSS | Contact | About Us
<div id="search">
<td>Search <input type="text" /></td>
</div>
</div>
<div id="logo">
</div>
<div id="TE">
TEKNIK ELEKTRO
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="#">Turtorial</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
</div>
<div id="box">
<div id="top">
<img src="TE.jpg" alt="" width="544" height="150" />
</div>
<div id="content"><span class="style1">
<p class="style3">Lomba Desain Web</p>
</span>
<p class="style5">23 February 2010 [07.00]</p>
<p class="style4">Lomba ini merupakan salah satu kegiatan yang diadakan oleh Jurusan Teknik Elektro Universitas Negeri Malang yang bertujuan untuk memacu kreatifitas mahasiswa dalam pembuatan web.</p>
<p class="style4">Read more... </p>
</div>
<div id="right">
<span class="style1"><strong>Event</strong></span>
<ul>
<li class="style5">KRCI 2010.</li>
<li class="style5">Penyeleksian asisten dosen.</li>
<li class="style5">Seminar Open Source 2010.</li>
<li class="style5">Lomba Karya Tulis Mahasiswa.</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p style=" text-align:center; vertical-align:middle; font-family:Arial; font-size:small">© Teknik Elektro UM, Malang, Indonesia.
</div>
</div>
</body>
</html>
Tugas.css
#wrapper {
margin:auto;
width:750px;
}
#header {
height:100px;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #99CC00;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #99CC00;
background-color: #BFFF00;
}
#menu {
float:right;
margin-right:20px;
width:250px;
height:30px;
font-family: Arial;
font-size: 12px;
}
#logo {
float:left;
margin-left:20px;
width:100px;
height:100px;
background-image: url(UM.png);
background-repeat: no-repeat;
}
#TE {
float:left;
margin-top:30px;
width:320px;
font-family: Arial;
font-size: 36px;
font-weight: bold;
color: #000099;
}
#search {
float:right;
margin-top:53px;
width:210px;
height:20px;
}
#inner {
float:left;
margin:5px 0;
}
#sidebar {
float:left;
margin-right:20px;
width:180px;
height:470px;
border:1px solid #99CC00;
background-color: #DAE49C;
}
#box {
float:left;
width:544px;
height:470px;
}
#top {
height:150px;
}
#content {
float:left;
margin-right:20px;
width:280px;
height:310px;
}
#right {
float:right;
width:240px;
height:150px;
border:1px solid #99CC00;
background-color: #DAE49C;
}
#footer {
clear:both;
margin:auto;
height:50px;
background-color: #BFFF00;
border-bottom-width: 10px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #99CC00;
}
#leftmenu ul {
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active{
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}
Dan hasil tampilannya adalah sebabagai berikut
Demikianlah beberapa tip dan trik untuk membuat halaman web dengan file CSS. Semoga bermanfaat untuk semuanya.
0 komentar:
Posting Komentar