DAFTAR ISI
Model Huruf
Model yang umum dipakai adalah teks miring (italik) atau tebal (bold). Umumnya program browser mempergunakan tag em untuk huruf italik dan tag strong untuk huruf tebal. Misalnya anda ingin menuliskan kode em agar huruf tampil berbentuk italik dan tebal dan menuliskan kode strong untuk huruf tebal uppercase, perintahnya dituliskan sebagai berikut :
em {font-style:italic; font-weight:bold;} strong {text-transform:uppercase; font-weight:bold;}
bila gagal dapat ditambahkan perintah ini :
h2 {text-transform: lowercase;}
Mengatur ukuran huruf
Kebanyakan program browser mempergunakan huruf yang lebih besar untuk heading yang penting sifatnya. Bila anda menimpa ukuran defaultnya, anda menempuh resiko yaitu huruf menjadi tampak lebih kecil khususnya bila anda mempergunakan ukuran yang anda tambahkan tersebut dengan ukuran titik (point).
Karenanya anda disarankan untuk melakukan pengaturan ukuran huruf dengan ukuran yang sama. Contoh berikut mengatur ukuran heading dalam persen relatif terhadap ukuran teks normal.
h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 100%; }
Mengatur jenis huruf
Bisa saja jenis huruf favorit anda tidak bisa ditampilkan oleh berbagai jenis browser. Untuk mengatasi hal ini anda dapat menuliskan beberapa jenis huruf yang tidak dapat ditampilkan oleh hampir semua browser.
Ada beberapajenis huruf generik yang dijamin cocok, sehingga anda kami sarankan untuk mengakhiri daftar perintah HTML anda dengan salah satu jenis huruf berikut : serif, sans-serif, cursive, fantasy, atau monospace, contoh :
body { font-family: Verdana, sans-serif; } h1,h2 { font-family: Garamond, Times New Roman, serif; }
Dalam contoh ini heading penting akan ditampilkan dalam bentuk huruf Garamond, bila gagal maka akan ditampilkan dalam bentuk Times New Roman, dan bila juga masih tidak dapat tampil, maka akan tampil sebagai huruf serif.
Teks paragraf akan ditampilkan dengan huruf Verdana atau bila masih tidak tampil juga, maka browser masih dapat menampilkannya dengan jenis huruf standar sans-serif.
Cara menghindari masalah huruf dan batas tepi halaman web
Pertama pergunakan elemen p untuk mencegah teks pada body tulisan yang tidak dapat ditampilkan dengan baik.Contoh :
<h2>Spring in Wiltshire</h2> Blossom on the trees, bird song and the sound of lambs bleating in the fields.
Teks yang ditulis mengikuti sebuah heading dapat menimbulkan akibat tampilan jenis huruf yang berbeda pada beberapa jenis program browser. Anda disarankan segera menutup teks pada paragraf tersebut. Contoh :
<h2>Spring in Wiltshire</h2> <p>Blossom on the trees, bird song and the sound of lambs bleating in the fields.</p>
Kedua pergunakan selalu elemen pre ketika anda menuliskan pengaturan jenis huruf yang anda pergunakan.
pre { font-family: monospace; }
Ketiga pergunakan elemen p dan ul pada waktu mengatur jenis huruf untuk heading. Khususnya ketika anda melakukan pengaturan border atau warna halaman web anda dengan elemen div.
Beberapa jenis program browser tidak dapat melakukan pengaturan huruf dengan baik dan cenderung lupa sehingga huruf heading anda tampak menjadi huruf standar saja. Untuk menghindari hal ini anda dapat menuliskan perintah HTML sebagai berikut :
h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }
Menambahkan border dan latar belakang
Anda dapat dengan mudah menambahkan border disekitar heading, daftar (list), atau paragraf atau sekelompok heading, list dan paragraf secara tertutup dengan mempergunakan elemen div. Contoh :•
div.box { border: solid; border-width: thin; width: 100% }
Catatan : tanpa property "width" beberapa browser akan menempatkan tepi kanan terlalu jauh ke arah kanan. Untuk mencegah hal ini anda dapat menuliskan perintah HTML-nya sebagai berikut :
<div class="box"> The content within this DIV element will be enclosed in a box with a thin line around it.</div>
Ada sedikit jenis border yaitu dotted, dashed, solid, double, groove, ridge, inset dan outset. Lebar border diatur dengan mempergunakan property "borderwidth". Nilai dari property ini yaitu thin, medium dan thick yang tampak setipis ukuran 0.1 em.
Property "border-color" memungkinkan anda mengatur warna. Sebuah efek yang cantik dapat dilakukan dengan memberikan warna latar belakang kotak dengan warna tebal (solid color) atau dengan hamburan gambar ("tile image"). Untuk melakukan ini anda perlu mempergunakan property "background". Anda dapat mengikuti perintah berikut ini.
div.color { background: rgb (204,204,255) ; padding: 0.5em; border: none; }
Tanpa pengaturan property border, biasanya program browser hanya akan menampilkan warna standar saja. Property padding memberikan beberapa ruangan diantara tepi-tepi daerah berrwarna dan teks yang ada didalamnya.
Anda dapat mengatur nilai property pading dengan menambahkan padding-left, padding-top, padding-right dan padding-bottom. Pengaturan ini dituliskan misalnya sebagai :
padding-left: 1 em.
Anggaplah anda menginginkan border pada satu Sisi halaman web saja. Anda dapat melakukan pengontrolan tiap Sisi border dengan memberikan keterangan border-left, border-top, border-right dan border-bottom. Contoh :
p.changed { padding-left: 0.2em; border-left: solid; border-right: none; border-top: none; border-bottom: none; border-left-width: thin; border-color: red; }
Susunan perintah diatas memberikan efek pada tampilan web anda dengan border berwarna merah disisi sebelah kiri.
Mengatur warna
Contoh berikut adalah perintah pengaturan warna.
body {color: black; background: white; } strong { color: red }
Model pengaturan diatas memberikan warna hitam teks (default) dan latar belakang putih, tetapi memiliki elemen strong pada warna merah. Ada 16 buah nama warna standar yang dijelaskan dalam uraian berikut.
Selain itu anda dapat juga mempergunakan nilai desimal untuk warna merah, hijau dan biru, dan masing-masing memiliki interval antara 0 sampai 255. Misalnya rgb(255, 0, 0) akan memberikan warna merah di layar monitor.
Anda juga dapat mempergunakan angka hexadesimal yang dimulai karakter # yang diikuti enam angka hexadesimal sebagai pengaturan warna. Sebuah pengubah juga diberikan dibawah ini agar anda dapat melakukan pengubahan nilai dari RGB ke nilai hexadesimal.
Mengatur warna link
Anda dapat mempergunakan CSS untuk mengatur warna hypertex link, dengan warna yang berbeda untuk link yang belum pernah anda akses, link yang pernah anda akses dan link yang akan kemudian anda akses serta link yang aktif. Anda bahkan dapat mengatur warnanya pada saat kursor mouse berada diatas daerah yang akan dilink.
Hal ini dapat anda tuliskan dalam bentuk perintah berikut :
a:link {color: green; } /* unvisited link */ a:visited {color: red; } /* visited link */ a:hover {color: yellow; } /* mouse over link */ a:active {color: blue; } /* selected link */
Kadang-kadang anda ingin memperlihatkan link hyperteks tanpa garis bawah. Anda dapat melakukan ini dengan memberikan property textdecoration atau none, contoh:
a.plain { text-decoration: none }
Contoh berikut juga menampilkan link yang tidak bergaris bawah.
This is <a class="plain" href="what.html">not underlined</a>
Kebanyakan orang ketika mereka melihat garis bawah dibawah sebuah link selalu mengira itu adalah bagian teks yang diberi link. Umumnya orang memberikan warna biru pada teks yang diberi link ke halaman atau alamat internet lain. Anda disarankan untuk meninggalkan warna link ini apabila warna latar belakang menyebabkan teks anda yang diberi link jadi sulit terbaca.
Bar navigasi
Memiliki navigasi yang mudah digunakan penting untuk situs web manapun. Dengan CSS anda bisa mengubah menu HTML yang membosankan menjadi bar navigasi yang bagus.
Navigasi Bar = Daftar Tautan
Sebuah bar navigasi membutuhkan HTML standar sebagai basis.
Contoh Bar Navigasi Vertikal
Buat bilah navigasi vertikal dasar dengan warna latar abu-abu dan ubah warna latar belakang tautan saat pengguna mengarahkan mouse ke atasnya:
<html> <head> <style> ul{ list-style-type: none; margin : 0; padding : 0; width : 200px; background-color: #f1f1f1; } li a{ display: block; color : #000; padding : 8px 16px; width : 200px; text-decoration: none; } /* rubah warna link -> on hover */ li a:hover { background-color: #555; color: white; } </style> </head> <body> <h2>Bar Navigasi Vertical</h2> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>
Output:
Contoh Bar Navigasi Horizontal
Buat bilah navigasi horizontal dasar dengan warna latar belakang gelap dan ubah warna latar belakang tautan saat pengguna mengarahkan mouse ke atasnya:
<html> <head> <style> ul{ list-style-type: none; margin : 0; padding : 0; overflow : hidden; background-color: #333; } li{ float: left; } li{ display: block; color : white; text-align : center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active{ background-color: #4CAF50; } </style> </head> <body> <h2>Bar Navigasi Horizontal</h2> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">Artikel</a></li> <li><a href="#contact">Download</a></li> <li style="float:right"><a class="active" href="#about">Kontak</a></li> </ul> </body> </html>
Output:
Latihan
- Menghitung lebar dan tinggi Element HTMI
Lebar dan tinggi total dari sebuah element HTML terdiri dari penambahan width/height, padding, border, dan margin. Sebagai contoh, dapatkah anda menentukan berapa lebar dan tinggi dari kotak berikut ini?<html> <head> <meta charset="UTF-8"></meta> <title>Belajar CSS</title> <style> div{ width: 300px; height: 200px border: 4px solid #575D63; padding: 10px; margin: 20px; background-color:yellow; } </style> </head> <body> <div></div> </body> </html>
Walaupun di dalam property CSS terdapat property width: 300px dan height: 200px, tapi ini bukanlah lebar dan tinggi keseluruhan dari box tersebut. Dimensi total dari box diatas adalah: 368 pixel x 268 pixel. Dari angka-angka ini? Perhatikan gambar berikut:
Gambar diatas adalah dimensi sebenarnya dari box diatas. Setiap lapisan CSS Box Model memiliki peran dalam menambah ukuran box.
Mari kita hitung lebar gambar: 300px width + 2* 10px padding + 2*4px border + 2*20px margin = 368 pixel.
Untuk tinggi, caranya juga sama: 200px width + 2*10px padding + 2*4px border + 2*20px margin 268 pixel.
Perkalian dengan 2 disini perlu karena padding, border, dan margin ada di 2 sisi, yakni kiri dan kanan (untuk lebar) serta atas dan bawah (untuk tinggi). - Menulis Property Margin (Shorthand Notation)Menulis property margin dengan penulisan shorthand notation. Sebagai contoh, property margin: 10px 15px 5px 20px sama artinya dengan:
margin-top: 10px; margin-right: 15px; margin-bottom: 5px; margin-left: 20px;
Contoh penggunaannya:<html> <head> <meta charset="UTF-8"></meta> <title>Belajar CSS</title> <style> div{ width: 200px; height: 50px border: 2px solid red; background-color: green; margin: 20px 100px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
Property margin: 20px 100px berarti saya men-set margin atas dan bawah setinggi 20 pixel, serta margin kiri dan kanan sebesar 100 pixel. - Menambahkan bingkai gambar dengan CSSUntuk membuat bingkai gambar, kita tinggal menambahkan property border ke dalam tag <img> , seperti contoh berikut:
<html> <head> <meta charset="UTF-8"></meta> <title>Belajar CSS</title> <style> img{ width: 300px; height: 200px border: 2px solid #575D63; } </style> </head> <body> <img src="autumn_lake.jpg"></img> </body> </html>
Property border: 4px solid #575D63 akan menambahkan efek bingkai abuabu gelap di Sisi luar gambar. Agar bingkai ini lebih terlihat, saya akan menambahkan sedikit padding: - Membuat gallery gambar dengan HTML dan CSS
Dengan penambahan 3 buah tag <img> lainnya, berikut kode HTML dan CSS yang saya gunakan:<html> <head> <meta charset="UTF-8"></meta> <title>Belajar CSS</title> <style> img{ width: 300px; height: 200px border: 2px solid #575D63; padding: 10px; } </style> </head> <body> <img class="gambar1" src="autumn_lake.jpg"></img> <img class="gambar2" src="beach.jpg"></img> <img class="gambar3" src="berry.jpg"></img> <img class="gambar4" src="sakura.jpg"></img> </body> </html>
Pada kode diatas, selector CSS img akan membuat setiap tag <img> juga memiliki width, height, border dan padding yang sama dengan gambar pertama kita. - Membuat gallery gambar yang memiliki ruang diantara gambar-gambarGunakan Property margin untuk menambahkan ruang diantara gambar yang satu dengan yang lainnya, sehingga tidak menempel satu sama lain.
Tugas
- Buatlah tampilan halaman web seperti gambar di bawah ini dengan bantuan css.
