Tidak dipungkiri bahwa penggunaan CSS memang sebagai hal yang sering digunakan untuk memudahkan peng-editan HTML yang membutuhkan waktu yang cukup singkat dan haksilnya maksimal. Pada bagian ini, kita akan mencoba untuk membuat layout dengan CSS. Membuat layout desain halaman web dengan memanfaatkan CSS adalah pelajaran kali ini. Dengan CSS , Anda tidak membutuhkan tabel dalam menata layoutnya. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. apabila anda menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, yang demikian itu akan semakin besar ukuran byte file dan mengakibatkan loading web pun membutuhkan waktu yang lebih lama.
Hal yang paling penting yang harus dilakukan untuk membuta layout dengan CSS adalah membagi elemen halaman ke dalam devision-devision tertentu.
berikut ini adalah code halaman web yang belum di layout tampilannya.
<html>
<head>
<title>Otak Jagat</title>
</head>
<body>
<div id="header">
<h1>Selamat datang di otakjagat.com</h1>
</div>
<div id="navigasi">
<h3>Menu navigasi</h3>
<ul>
<li><a href="link1.html">Menu</a></li>
<li><a href="link2.html">Download</a></li>
<li><a href="link3.html">Dokumentasi</a></li>
<li><a href="link4.html">Diskusi</a></li>
<li><a href="link5.html">Contact</a></li>
</ul>
</div>
<div id="isi">
<img src="zenaisy.jpg"/>
<p>Nama saya adalah Achmad Zaenuri<br/>Dalam pembahasan kali ini kita kan membahas mengenai CSS untuk layout desain web yang akan kita buat. Anda akan mememukan hal yang mungkin pernah anda tuliskan dalam pembuatan leayout web dengan menggunakan HTML.</p
<p>Manfaat dalam pembuatan CSS sungguh banyak sekali selain yang telah otakjagat paparkan diatas. banyak anda temui dipembahasan lain dari yang telah ada ini apa saja manfaat dari penggunaan CSS dalam layout web.</p>
</div>
<div id="footer">
<p>Copyright © 2013 by otakjagat.com</p>
</div>
</body>
</html>
Pada cotoh ini kita akan membuat layout web sebagai berikut;
Bagian background kita kasih warna abu-abu
Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu menggunakan division (div). Berikut ini adalah code dasar untuk setiap elemennya.
<html>
<head>
<title>Otak Jagat</title>
</head>
<body>
<div id="content">
<div id="header">
<h1>Selamat datang di otakjagat.com</h1>
</div>
<div id="menu">
<div class="navigasi">
<h3> menu navigasi 1</h3>
<ul>
<li><a href="http://otakjagat.com">Profil</a></li>
<li><a href="http://otakjagat.com">Download</a></li>
<li><a href="http://otakjagat.com">Dokumentasi</a></li>
<li><a href="http://otakjagat.com">Contact</a></li>
</ul>
</div>
<div class="navigasi">
<h3>Menu navigasi 2</h3>
<ul>
<li><a href="http://otakjagat.com">CSS</a></li>
<li><a href="http://otakjagat.com">HTML</a></li>
<li><a href="http://otakjagat.com">JAVA</a></li>
<li><a href="http://otakjagat.com">PHP</a></li>
</ul>
</div>
</div>
<div id="isi">
<img src="otakjagat.jpg" class="gambar">
<p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
<p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
<p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
</div>
<div id="footer">
<p>Copyright © 2013 by Zenaisy</p>
</div>
</div>
</body>
</html>
- Yang akan kita buat disini yaitu menggunakan 4 fram dalam layout halaman web kita. Adapun 4 fram tersebut adalah
- Kolom Header yang akan menyambut user yang akan datang pada web kita.
- Kolom Navigasi yang akan kita gunakan untuk mempermudah selancar pengunjung di web kita.
- Kolom Isi yang akan kita tempati diskripsi atau apa yang ada pada web kita.
- Kolom Footer yang akan menginformasikan mengenai web kita.
HEADER
|
|
ISI
|
Navigasi
|
FOOTER
|
|
Bagian background kita kasih warna abu-abu
Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu menggunakan division (div). Berikut ini adalah code dasar untuk setiap elemennya.
<html>
<head>
<title>Otak Jagat</title>
</head>
<body>
<div id="content">
<div id="header">
<h1>Selamat datang di otakjagat.com</h1>
</div>
<div id="menu">
<div class="navigasi">
<h3> menu navigasi 1</h3>
<ul>
<li><a href="http://otakjagat.com">Profil</a></li>
<li><a href="http://otakjagat.com">Download</a></li>
<li><a href="http://otakjagat.com">Dokumentasi</a></li>
<li><a href="http://otakjagat.com">Contact</a></li>
</ul>
</div>
<div class="navigasi">
<h3>Menu navigasi 2</h3>
<ul>
<li><a href="http://otakjagat.com">CSS</a></li>
<li><a href="http://otakjagat.com">HTML</a></li>
<li><a href="http://otakjagat.com">JAVA</a></li>
<li><a href="http://otakjagat.com">PHP</a></li>
</ul>
</div>
</div>
<div id="isi">
<img src="otakjagat.jpg" class="gambar">
<p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
<p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
<p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
</div>
<div id="footer">
<p>Copyright © 2013 by Zenaisy</p>
</div>
</div>
</body>
</html>
Code-Code diatas merupakan code HTML yang terdalamnya terdapat <div> untuk memberikan lambang bahwasanya <div> akan menjadi penghubung dengan CSS yang akan kita buat.
Code-code diatas setelah kita simpan dalam extensi (.html) maka akan terlihat sebagai berikut dengan gambar yang ada di folder yang sama;
Dalam Selanjutnya Otakjagat.com akan menunjukkan Code CSS yang harus anda letakkan dia atas code </head>
Baca lebih lanjut!
.jpg)
