Scribd Logo
Unggah

Selamat datang di Scribd!

  • 1 Membuat Layout Dengan Css

    Diunggah oleh

    deekoen
    3 tayangan10 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    3 tayangan10 halaman

    1 Membuat Layout Dengan Css

    Diunggah oleh

    deekoen

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 10

    Membuat layout dengan CSS, Pada bagian ini, anda akan dipandu bagaimana membuat layout desain halaman

    web dengan memanfaatkan CSS. Dengan CSS, anda tiak membutuhkan table dalam menata layoutnya. Kelebihan CSS dalam layout web dibandingkan table adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. Apabila anda menggunakan table untuk mendesain layout, maka semakin banyak sel yang dibuat akan semakin besar ukuran byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama. Untuk membuat layout dengan CSS hal terpenting yang harus dilakukan adalah membagi elemen halaman ke dalam division-division tertentu.

    Berikut ini adalah code halaman web yang belum dilayout tampilannya.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Dasar-dasar layout</title> </head> <body> <div id="header"> <h1>selamat datang di website pribadiku</h1> </div> <div id="navigasi"> <h3>Menu Navigasi</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> <li><a href="link5.html">Link 5</a></li> <li><a href="link6.html">Link 6</a></li> </ul> </div> <div id="isi"> <img src="css.jpg"> <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> <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 bagian bagian bagian

    isi. isi. isi. isi.

    Ini Ini Ini Ini

    adalah adalah adalah adalah

    bagian bagian bagian bagian

    isi. isi. isi. isi.

    Ini Ini Ini Ini

    adalah adalah adalah adalah

    bagian bagian bagian bagian

    isi. isi. isi. isi.

    Ini adalah Ini adalah Ini adalah </p>

    </div> <div id="footr"> <p>Copyright &copy; 2011 by masrur</p> </div> </body> </html>

    Tampilan code diatas tampak pada gambar berikut ini.

    Pada contoh ini, kita akan membuat layout sbb : HEADER

    ISI

    NAVIGASI

    FOOTER

    Dari desain diatas, terdapat 4 bagian sel yang akan kita buat. Sebaiknya untuk nama id pada masing-masing division diberi nama sesuai desain supaya mudah dipahami.

    Untuk pertama kita membuat sel untuk bagian header. Berikut ini style untuk bagian header yang saya buat.
    #header { padding:10px; /* jarak teks dari tepi kotak */ border:1px solid #000000; /* membuat garis tepi 1 pixel */ background-color:#cccccc; /* membuat warna latar */ }

    Dengan style diatas, tampilan header sudah agak lebih bagus, tampak pada tampilan berikut

    Property padding mnyatakan jarak antara tepi sel dengan elemen yang ada didalamnya. Berikut contoh style lain dengan padding nya 40 pixel dan juga tipe garis bordernya putus-putus (dashed).
    #header { padding:40px; border:3px dashed #000000; background-color:#cccccc; }

    Hasilnya adalah :

    40px

    40px

    Berikut ini style pada footer website :


    #footer { padding:10px; border:1px solid #000000; background-color:#cccccc; }

    Hasilnya tampak sebagai berikut:

    Beikutnya kita buat style untuk bagian isi website :

    #isi

    { padding:10px; border:1px solid #000; }

    Untuk bagian navigasi, karena bagian tersebut ingin diletakkan disebalah kanan, maka berikan property float : right perhatikan style berikut :
    #navigasi { float:right; padding:10px; border:1px solid #000; background: yellow; }

    Hasil dari efek penggunaan float : right dapat dilihat pada tampilan berikut ini.

    Meskipun sudah diletakkan disebalah kanan, ternyata bagian ini masih belum seperti yang di inginkan sesuai desain layout. Oleh karena itu kita atur lebar sel untuk bagian ini dengan property width dan juga kita beri jarak sedikit antara sel isi dan footer dengan property margin-bottom. Perhatikan style berikut :
    #isi { width: 830px; margin-bottom:10px; padding:10px; border:1px solid #000; } /* lebar elemen */

    Efek dari modifikasi style pada bagian isi dapat dilihat pada gambar berikut ini

    830px

    #navigasi

    { float:right; padding:10px; margin-top:10px; border:1px solid #000; background: yellow; }

    #isi

    { width: 1000px; margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #000; }

    Hasil perubahan style tersebut tampak pada gambar berikut.

    Setelah di edit tampilan terbaru lebih proporsional, selanjutnya adalah membuat layout untuk gambar nya. Masih ada jarak kosong yang besar disebelah kanan gambar. Serta meletakkan paragraph nya disebelah kanan. Pada penerapan style gambar ini sebagaiknya dibuat class sendiri supaya memudahkan pengaturan gambar-gambar lainnya. Jikalau nantinya masih banyak gambar yang disisipkan pada web tersebut, maka tidak akan ada kerepotan mengatur semuanya, melainkan tinggal memanggil class gambar saja. Nama class untuk gambar pada contoh ini, misalkan gambar. <img src=css.jpg class=gambar> Selanjutnya dibuat style pada class tersebut
    .gambar { float:left; margin-top:0px; margin-right:10px; margin-bottom:10px; margin-left:0px; }

    Pada style tersebut, property float: left diberikan karena kita ingin gambar berada di sebelah kiri elemen yang mengikutinya (dalam hal ini adalah paragraph ). Sedangkan property margin digunakan untuk mengatur posisi gambar terhadap elemen disekitarnya. Sebagai contoh, margin-right menyatakan jarak antara tepi kanan gambar dengan teks paragraph disebalah kanannya. Margin-bottom menyatakan jarak antara tepi bawah gambar dengan teks dibawahnya. Perhatikan, meskipun margin-left diberi nilai 0px, tapi masih ada jarak antara tepi kiri gambar dengan garis border bagian isi. Hal ini dikarenakan efek dari properti padding:10px dari style untuk isi sebelumnya. Begitu juga margin-top nya.

    Apabila kita ingin membuat teks paragraph bagian isi memiliki alignment justify, maka dapat dibuat style nya.
    #isi p { text-align:justify; line-height:20px; }

    Property line-height digunakan untuk mengatur jarak antar baris teks paragraph. Perhatikan efek penggunaan style tersebut dalam gambar berikut

    Tampak sudah sesuai dengan koding, tetapi sedikit kurang pada paragrafnya yang tidak sejajar dengan gambarnya, maka diperbaiki sedikit agar sesuai dan tampak lebih baik.
    #isi p { margin-top:0px; text-align:justify; line-height:20px; }

    Tampak hasilnya seperti berikut ini

    Tampilan gambar berikut ini menunjukkan manfaat penggunaan class pada bagian paragraph dan gambar apabila terdapat beberapa gambar dan paragraph dalam bagian isi. Gambar menunjukkan bahwa setiap gambar dan paragraph akan memiliki style yang sama.

    Anda mungkin juga menyukai