Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat

Ukuran: px

Mulai penontonan dengan halaman:

Download "Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat"

Widyawati Setiawan
7 tahun lalu
Tontonan:

1 Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI 1 NAVIGASI 2 FOOTER Bagian background (warna abu abu) akan kita beri gambar. Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu menggunakan division (div). berikut ini adalah code dasar untuk setiap elemennya. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>layout 2 CSS</title> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <div id="content"> <div id="header"> <h1>selamat datang</h1> <div id="menu"> <div class="navigasi"> <h3>menu Navigasi A</h3> <ul> <li><a href="link1.html">link 1</a></li> <li><a href="link2.html">link 2</a></li> <li><a href="link3.html">link 3</a></li> <li><a href="link4.html">link 4</a></li> </ul>

2 <ul> <div class="navigasi"> <h3>menu Navigasi B</h3> <li><a href="link1.html">link 1</a></li> <li><a href="link2.html">link 2</a></li> <li><a href="link3.html">link 3</a></li> <li><a href="link4.html">link 4</a></li> </ul> <div id="isi"> <img src="css.jpg" width="100" height="150" class="gambar"> <p>ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. </p> <p>ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. </p> <p>ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. </p> <div id="footer"> <p>copyright 2011 by masrur</p> </body> </html> Pada contoh kedua layout web kali ini, bahwa semua sel (header, isi, footer dan navigasi) merupakan bagian dari bagian content. Mengapa dimasukkan ke dalam bagian content? Hal ini dikarenakan akan dibuat style untuk tersebut, misalnya meletakkan ditengah halaman dan juga mengatur lebar bagian content nya.

Terlebih dahulu membuat style untuk body nya. Dikarenakan ada penembahan efek background gambar pada seluruh halaman, maka berikut ini adalah style nya. Body { background:url(background.

3 Terlebih dahulu membuat style untuk body nya. Dikarenakan ada penembahan efek background gambar pada seluruh halaman, maka berikut ini adalah style nya. Body { background:url(background.jpg); Hasilnya sebagai berikut Selanjutnya adalah membuat style untuk bagian content dengan mengatur lebarnya yaitu 750 pixel dan berada ditengah halaman. #content { width:750px; margin:auto; /* membuat posisi ditengah*/ Hasilnya adalah

Berikut kode membuat header dibawah ini #header { border:1px solid #000000; background-color:#000000;

4 Kalau sudah seperti diatas, tahap berikut nya adalah membuat style pada bagian header terlebih dahulu supaya lebih rapi. Berikut kode membuat header dibawah ini #header { border:1px solid #000000; background-color:#000000; padding:10px; h1 { color:#ffffff; font-size:40px; line-height:4px; Header akan tampak sebagai berikut Header selesai dibuat, dilanjutkan membuat style untuk footer dan teks paragraph nya, berikut kode css untuk footer.

#footer { padding:10px; border:1px solid #000000; background-color:#cccccc; #footer p { text-align:justify; font-weight:bold; Selanjutnya bagian navigasi, karena ingin diletakkan di kanan, maka kode

5 #footer { padding:10px; border:1px solid #000000; background-color:#cccccc; #footer p { text-align:justify; font-weight:bold; Selanjutnya bagian navigasi, karena ingin diletakkan di kanan, maka kode style nya sebagai berikut #menu { float:right; Dibawah ini adalah kode untuk setiap class navigasinya.navigasi { border:1px dashed #000; margin-top:10px; background:yellow; Jika sudah dibuat, efek dari style diatas sesuai dengan gambar dibawah ini

6 Tahap demi tahap selesai, selanjutnya pada bagian isi, buat style nya agar lebih rapi, berikut ini kode nya. #isi { width:550px; margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #000; background:white; Lihat hasil gambar ini, lebih bagus bukan!

7 Tampak nya semakin semangat untuk melanjutkan koding CSS nya, dari gambar diatas yang perlu disentuh lagi adalah bagian gambar, supaya lebih baik lagi maka kode nya di bawah ini..gambar { float:left; margin-top:0px; margin-right:10px; margin-bottom:20px; margin-left:0px; border:1px solid #000000; Kira kira hasil gambarnya seperti ini, gambar pada bagian isi sudah tertata dengan baik.

8 Sentuhan terakhir adalah pada paragrafnya supaya rata justify serta bagian atas sejajar dengan gambar, oleh karena itu style nya dibawah ini #isi p { text-align:justify; line-height:18px; margin-top:0px; Gambar dibawah ini adalah hasil sentuhan CSS, dan berhasil lebih baik setelah bagian teks paragraph diberikan sentuhan terakhirnya. Ini adalah layout menggunakan CSS tanpa menggunakan table di html. CSS lebih konsiten dan lebih mudah dalam pengkodean dan tampilannya

9 Jikalau anda menyimpulkan hasil style pada CSS, pastinya membuat layout itu mudah, tinggal anda melanjutkan kreatifitas nya. Tentunya tidak lupa menggunakan CSS

dokumen-dokumen yang mirip

MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)

MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04B CSS : Layout dan Posisi