• Tidak ada hasil yang ditemukan

Modul Praktikum CSS – Cara Cerdas Belajar CSS

N/A
N/A
Protected

Academic year: 2017

Membagikan " Modul Praktikum CSS – Cara Cerdas Belajar CSS"

Copied!
17
0
0

Teks penuh

(1)

CSS – Mengatur Tata Letak Elemen

1.

Mengatur Lebar dan Tinggi Elemen

Beberapa elemen secara bawaan akan diletakkan dengan menempati hamper keseluruhan

browser, sedangkan tingginya disesuaikan dengan isi. Namun, sesungguhnya kita bias mengatur

lebar suatu elemen dengan menggunakan properti

width

dan mengatur tingginya melalui

height

.

Perhatikan contoh berikut ini :

ukurelem.css

ukurelem.html

.alpha {

border : solid 1px gray ; text-align : center ; }

.bravo {

border : solid 1px gray ; text-align : center ; width : 150px ; height : 100px ; }

.charlie {

border : solid 1px gray ; text-align : center ; width : 300px ; }

.delta {

border : solid 1px gray ; text-align : center ; width : 300px ; }

<html> <head>

<title>Ukuran Elemen</title>

<link rel="stylesheet" type="text/css" href="ukurelem.css" /> </head>

<body>

<p>Unchained Melody </p> <p class="alpha">Desperadoc </p> <p class="bravo">Moonriver </p> <p class="charlie">Sinaran </p> <p class="delta">September Ceria </p> <p>Semua adalah judul lagu </p> </body>

(2)

Efeknya bisa dilihat pada gambar berikut

2.

Meggunakan Properti float dan clear

Sekarang kita akan mencoba untuk menaruh Sinaran di sebelah kanan Moonriver, perhatikan

berkas berikut

float.css

Properti

clear

inilah yang digunakan untuk mengatur agar di sebelah kiri atau kanan elemen

tidak ada elemen lain. Nilainya bisa berupa :

.alpha {

border : solid 1px gray ; text-align : center ; }

.bravo {

float : left ; //elemen yang berkelas “bravo” diatur mengam border : solid 1px gray ; //bang di kiri

text-align : center ; width : 150px ; height : 100px ; }

.charlie {

float : right ; //elemen yang berkelas “charlie” diatur mengam border : solid 1px gray ; //bang di kanan

text-align : center ; width : 300px ; }

.delta {

clear : left ; //tidak terdapat elemen lain disebelah kiri elemen border : solid 1px gray ; //yang berkelas “delta”

(3)

left, berarti bahwa di sebelah kiri tidak boleh ada elemen

right, berarti bahwa di sebelah kanan tidak boleh ada elemen

both, berarti bahwa di sebelah kiri dan kanan tidak boleh ada elemen

float.html

Berikut contoh aplikasi float dan clear untuk menyajikan gambar dan keterangannya

infotnm.css

<html>

<head>

<title>Ukuran Elemen</title>

<link rel="stylesheet" type="text/css" href="ukurelem.css" /> </head>

<body>

<p>Unchained Melody </p> <p class="alpha">Desperadoc </p> <p class="bravo">Moonriver </p> <p class="charlie">Sinaran </p> <p class="delta">September Ceria </p> <p>Semua adalah judul lagu </p> </body>

</html>

.gambar {

float : left ; //agar elemen yg berkelas “gambar” diatur mengambang di kiri }

.pemisah {

(4)

infotnm.html

<html> <head>

<title>Info Tanaman</title>

<link rel = "stylesheet" type = "text/css" href="infotnm.css" /> </head>

<body>

<img src = "gambar/exoticaMutasi.png" class = "gambar" /> <div>

<big><i>Begonia Masoniana</i></big> <hr />

Dikenal dengan nama populer begonia "Iron Cross". Daun seperti berbeludru. menyukai tempat yang agak teduh. media berupa humus bambu.

Tidak menyukai air yang terlalu banyak, tetapi juga tidak tahan ekeringan. </div>

<div class = "pemisah"> </div>

<img src = "gambar/exoticaMutasi.png" class = "gambar" /> <div>

<big><i>Codieum Variegatum</i></big> <hr />

Puring indah dengan daun tumbuh kompak. Bisa ditanam dalam pot dan diletakkan di teras rumah. paling tidak

mendapat sinar matahari pagi. Media bisa mendapat campuran tanah, dan pupuk kandung. Kebutuhan air sedang.

</div>

<div class = "pemisah"> </div>

<img src = "gambar/exoticaMutasi.png" class = "gambar" /> <div>

<big><i>Sanseviera Trifasciata </i>'Streaker'</big> <hr />

Sansievera atau yang dikenal sebagai 'Lidah Mertua ini sebagai 'Lidah Mertua ini berukuran relatif kecil. Tumbuh kompak. Warna perpaduan

hijau dan krem. Tanah Kering, cocok dipajang dalam ruangan. Seminggu sekalli keluarkan di teras sekitar 1 hari. Media berupa campuran tanah dan pupuk kandang.

</div>

(5)

3.

Menggunakan Properti position

Property position erguna untuk mengatur peletakan elemen. Dengan menggunakan property ini

dimungkinkan untuk membuat dua elemen yang saling bertindihan semacam contoh berikut :

posisi.css

.satu {

right : 50px ; top : 50px ; position : absolute ; border : solid ;

background-color : #CCFF99 ; margin : 2px ;

}

.dua{

position : absolute ; right : 200px ; top : 200px ; border : solid ;

background-color : #CCFF99 ; margin : 2px ;

(6)

posisi.html

Contoh properti position :

position.html

<html> <head>

<title>Posisi Gambar</title>

<link rel ="stylesheet" type = "text/css" href = "posisi.css" /> </head>

<body>

<div class = "satu">

<img src = "gambar/exoticaMutasi.png" /> </div>

<div class = "dua">

<img src = "gambar/exoticaMutasi.png" /> </div>

</body> </html>

<html> <head>

<title>Properti Position</title>

<link rel="stylesheet" type="text/css" href="position.css" /> </head>

<body> <div>

<big><i>Begonia Masoniana</i></big> <hr />

(7)

position.css

Hasilnya

Media berupa humus bambu.

Tidak menyukai air yang terlalu banyak. tetapi juga tidak tahan kekeringan. </div>

<div class="divKhusus">

<big><i>Codiaeum Variegatum</i> 'Angel Wings'</big> <hr />

Puring indah dengan daun tumbuh kompak. Bisa ditanam dalam pot dan diletakkan di terasrumah. Paling tidak mendapat sinar matahari pagi. Media bisa berupa campuran tanah dan pupuk kandang. Kebutuhan air sedang.

</div> <div>

<big><i>Sanseviera Trifasciata</i> 'Streaker'</big> <hr />

Sanseviera atau yang dikenal sebagai 'Lidah Mertua' ini berukuran relatif kecil. Tumbuh kompak. Warna perpaduan hijau dan krem. Tahan kering. Cocok dipajang dalam ruangan. Seminggu sekali keluarkan di teras sekitar 1 hari. Media berupa campuran tanah dan pupuk kandang.

</div> </body> </html>

div {

border : solid ;

background-color : #CCFF99 ; margin : 2px ;

}

(8)

Dari hasil diatas tak ada yang istimewa. Properti position yang bernilai “static” identik kalau tidak

disebutkan. Makna “static” menyatakan bahwa peletakan elemen mengikuti alur normal, tanpa

memperhatikan nilai top, left, bottom, dan right.

Sekarang coba ganti

.divKhusus {

position : static ;

}

Menjadi

.divKhusus {

position : absolute ;

left : 40px ;

top : 75px;

background-color : #FFCC99 ;

}

Hasilnya

Sekarang position diisi dengan “absolute”. Nilai ini berarti bahwa posisi terhadap elemen yang

berkelas “divKhusus” memiliki letak yang bersifat absolut, yang ditentukan oleh :

Left : 40 piksel ( yang berartidari kiri 40 piksel )

Top : 75 piksel ( yang berarti dari atas 75 piksel )

(9)

Kemungkinan nilai yang lain untuk position adalah “fixed”. Efek yang ditimbulkan seperti

absolute, tetapi kalau terjadi penggulungan, posisinya akan tetap. Contoh berikut menunjukkan

keadaan ketika layar bisa digulung

Nah, kalau kemudian kita menggeser ke bawah, posisi elemen yang berisi ‘Angel Wings’ tetap

berada di situ. Contoh ditunjukkan pada gambar berikut

4.

Mengenal Properti display

Suatu elemen dapat dikelompokkan menjadi 2 kategori, yaitu elemen blok dan elemen inline

Elemen blok adalah elemen yang memakan semua tempat tersisa dikanan pada ortunya.

Yang termasuk elemen ini adalah h1, h2, p, dan div

Elemen inline adalah elemen yang memungkinkan tempat tersisa di sebelah kanannya

pada elemen ortu bisa dipakai elemen yang lain bila memang mencukupi. Contoh

elemen ini adalah a, img, dan span

Elemen inline 1 Elemen inline 2 Elemen inline 3

Elemen inline 4

Elemen ortu

(10)

Dalam praktik, kita terkadang perlu mengubah elemen blok menjadi elemen inline secara

eksplisit, ataupun sebaliknya. Nah, properti display yang digunakan untuk keperluan seperti itu.

Isinya bisa berupa :

inline, untuk membuat elemen bersifat inline

blok, untuk membuat elemen sebagai elemen blok

Contoh untuk melihat efek inline

dispinline.html

Hasilnya :

Hasil tersebut diperoleh mengingat elemen li termasuk sebgai elemen blok, nah

sekarang kita ubah li agar menjadi elemen inline dengan cara menyertakan dokumen berikut

<html> <head>

<title>Properti display</title>

<!-- <link rel="stylesheet" type"text/css" href="dispinline.css" --> </head>

<body> <ul>

<li>Aglaonema </li> <li>Alocasia </li> <li>Begonia </li> <li>Philodendron </li> </ul>

</body> </html>

Elemen inline 1

Elemen blok

Elemen inline 2 Elemen inline 3

Elemen ortu

Elemen blok membuat ditampilkan tersendiri tanpa menggunakan ruang tersisa di atasnya

(11)

dispinline.css

diperoleh hasil seperti berikut :

Terlihat bahwa semua bagian dari li diletakkan dalam satu baris mengingat li sekarang berupa

elemen inline

5.

Menampilkan Elemen di Tengah

Misalnya kita punya sebuah tabel. Bagaimana cara agar tabel tersebut ditampilkan di bagian

tengah pada arah horizontal? Solusinya adalah dengan mengatur left-margin dan right-margin

agar bernilai auto. Perhatikan contoh ini

center.html

li {

display : inline }

<html> <head>

<title>Menengahkan Tabel</title>

<!-- <link rel="stylesheet" type="text/css" href="center.css" /> --> </head>

<body> <table

summary="Tabel dipakai untuk memberikan contoh penengahan tabel"> <caption class="kelabu">Data Negara</caption>

<tbody> <tr>

<td>Austria</td> <td>Eropa</td> </tr>

<tr>

<td>Italia</td> <td>Eropa</td> </tr>

<tr>

<td>Mesir</td> <td>Afrika</td> </tr>

(12)

Hasilnya dari coding diatas

Sekarang tambahkan dokumen css berikut ini

center.css

Hasilnya jadi seperti berikut

6.

Desain Asimetris

Posisi absolut dapat digunakan untuk menyusun desain yang bersifat bebas. Artinya, kita bisa

meletakkan elemen yang kita kehendaki pada posisi yang kita sukai. Contohnya dapat dilihat

pada gambar berikut ini

table {

border : solid ; margin-left : auto ; margin-right : auto ; }

td {

(13)

asimetrik.html

asimetrik.css

<html>

<head>

<title>Desain Asimetrik</title>

<link rel ="stylesheet" type ="text/css" href="asimetrik.css" /> </head>

<body>

<div id = "infoNegara">

Austria adalah sebuah negara yang berada

di tengah-tengah Eropa Tengah. Berbatasan dengan Jerman, Slovakia, Hungaria, Slovenia, Italia, dan Swiss. Ibukotanya yaitu Vieanna. Merupakan negara federal. Terdiri atas 9 negarabagian.

</div>

<div id = "negaraBagian"> <p id = "">Negara Bagian</p> <ul>

<li>Burgerland</li> <li>Karintia</li> <li>Austria Bawah</li> <li>Austria Atas</li> <li>Stiria</li> <li>Wina</li> </ul>

</div>

<div id = "SungaiInn"> Sungai Inn </div> </body> </html>

body {

background-image : url(gambar/inn2.jpg) ; background-repeat : no-repeat ;

}

#infoNegara {

(14)

7.

Contoh Aplikasi Sederhana

Contoh yang menggunakan berbagai properti yang telah dibahas, pertama-tama buat dokumen

berikut tanpa menyertakan css

infoflora.html

width : 200px ; padding : 5 px ;

border : groove 5px blue ; background-color : #CCDDCC ; }

#negaraBagian { position : absolute ; top : 200px ; right : 15px ; width : 150px ; padding : 5 px ; color : white ; }

#sungaiInn {

position : absolute ; bottom : 20px ; right : 400px ; width : 100px ; border : solid 1px red ; background-color : #FFCCFF ; color : navy ;

text-align : center ; }

<html> <head>

<title>Info Flora </title>

<link rel="stylesheet" type="text/css" href="infoflora.css" /> </head>

<body>

<div class="judul">

<img src="gambar/infoflora.png" class="logo" />

<p class="semboyan">Informasi Tanaman Hias yang Mempesona</p> <ul>

<li><a href="">Home</a> |</li> <li><a href="">Tentang Kami</a> |</li> <li><a href="">Kontak</a> |</li> </ul>

</div>

<div class = "menuUtama"> Daftar Tanaman Hias : <ul>

<li><a href = "">Aglaonema</a></li> <li><a href = "">Alocasia</a></li> <li><a href = "">Begonia</a></li> <li><a href = "">Caladium</a></li> <li><a href = "">Cryptanthus</a></li> </ul>

(15)

Hasilnya seperti dibawah ini

Sekarang lengkapi dengan berkas css berikut ini

Infoflora.css

<div class = "informasi"> <div>Berita Aktual</div> <div>

<p><i>Alocasia cucullata</i> 'Variegata'</p> <p>

Alocasia ini berdaun varigata. Warna daun tersusun atas hijau dan kuning. Termasuk jenis yang langka </p>

<p class = "lanjut"><a href = "">Baca lebih lanjut</a></p> </div>

<div>

<p><i>Codiaeum variegatum</i> 'Kasamba'</p> <p>

Puring silangan yang menarik untuk dipelihara. Namanya diabadikan dari istilah 'Kesumba'. Tak mengherankan, warna daun beraneka bak terkena bermacam-macam kesumba. </p>

<p class = "lanjut"><a href = "">Baca lebih lanjut</a></p> </div>

</div> <body> </html>

body {

background-color : #CCFFCC ; }

.logo {

display : block ; }

(16)

Hasilnya seperi berikut ini

float : left ; }

.judul {

height : 80 px ; }

.judul ul { margin : 0 ; padding : 0 ; float : right ; }

.judul li {

display : inline ; }

.menuUtama {

position : absolute ; top : 150px ; left : 5px ; margin-top : 10px ; padding : 5px ; width : 150px ;

background-color : #003300; color : white ;

}

.informasi {

margin-left : 170px ; margin-top : 25px ; padding : 5px ;

(17)

8.

Menukarkan Posisi Menu

Bila dikehendaki menu bisa ditukarkan sehingga letaknya menjadi seperi berikut

Perubahan pada infoflora.css terdapat pada selektor “.menuUtama” dan “.informasi”

.menuUtama {

position : absolute ; top : 150px ;

right : 5px ; /* Bagian yang berubah */

margin-top : 10px ; padding : 5px ; width : 150px ;

background-color : #003300; color : white ;

}

.informasi {

margin-left : 10px ; /* Bagian yang berubah */ margin-right : 170px ; /* Tambahan */

margin-top : 25px ; padding : 5px ;

Referensi

Dokumen terkait

Berangkat dari uraian tersebut diatas, masalah yang diangkat dalam penelitian ini adalah tentang “Nilai -nilai Pendidikan Multikultural “, dimana pada akhir-akhir

From all the explanation above, the writer found out that characters uses bald imperative, imbedded imperatives, need statements, permission directives and

Untuk memperoleh gelar Sarjana Kedokteran Hewan, penulis melakukan penelitian di Laboratorium Biomedik Rumah Sakit Hewan Universitas Udayana dengan mengambil judul

[r]

Kata Kunci : Layanan Informasi, Memantapkan peminatan jurusan di SMK Saat ini banyak siswa yang melanjutkan pendidikan tidak berdasarkan minat dan bakat peserta didik. Hal

Sj_ = besar arus jenuh untuk kelompok jalur atau

Bagian Virologi, Departemen Ilmu Penyakit Hewan dan Kesehatan Masyarakat Veteriner, Fakultas Kedokteran Hewan, Universitas Nusa

Abstrak -- Penelitian ini bertujuan untuk menganalisis partisipasi female peacekeeper Indonesia dalam misi United Nations Interim Forces in Lebanon tahun 2015-2017