PEMAKAIAN ELEMENT STYLE
Untuk mengatur warna huruf dan
latar belakang dapat dikerjakan dengan menggunakan elemen style untuk mengatur karakter kode tag dokumen.
<style
type="text/CSS">
body { color: black; background: white; }
</style>
Pernyataan yang
ditulis antara kode tag <style> dan </style> menunjukkan perintah pengaturan style.
1.
Link ke sheet lainya
Apabila menginginkan style yang sama untuk halaman HTML yang lain, disarankan memisahkan sheet-sheet dari dokumen HTML namun satu dan lainnya terhubung
dengan cara link.
<link
rel=”stylesheet” href=”style.CSS”>
Kode tag untuk link ini ditempatkan di bagian "head" dokumen. Perintah rel
perlu diatur dengan pernyataan "stylesheet"
agar supaya browser dapat menemukan
perintah href sebagai penunjukan ke
alamat Web (URL) sheet.
2.
Mengatur tepi halaman (page margin)
Halaman Web akan tampil cantik bila dituliskan dalam margin yang lebih lebar. Mengatur sisi kiri dan kanan memakai
karakter “margin-left” dan “margin-right”, Contoh :
<style
type="text/CSS">
body {
margin-left: 10%; margin-right: 10%; }
</style>
Perintah di atas
dituliskan dengan tujuan agar tampilan halaman Web di layar monitor memiliki
batas halaman kiri 10% dari lebar layar monitor.
3.
Mengatur inden kiri dan kanan
Agar halaman Web tampil lebih cantik bisa
juga diberikan inden (spasi) dari margin kiri beberapa huruf sebelum
menuliskan awal kalimat. Contoh :
<style
type="text/CSS">
body {
margin-left: 10%; margin-right: 10%; }
h1 {
margin-left: -8%;}
h2,h3,h4,h5,h6
{ margin-left: -4%; }
</style>
4.
Mengatur jarak penulisan
tepi atas dan bawah halaman
Program Browser biasanya mengerjakan batas atas dan bawah, paragraf dan lain-lain
dengan baik. Namun ketika ingin membuat ruang di sebelah atas atau bawah
halaman web, atau ingin membuat spasi
yang khusus, barulah di sini
perlu memiliki cara mengaturnya.
Property
"margin-top" menentukan
ruang sebelah atas dan property
"margin-below" menentukan
ruang sebelah bawah halaman web.
Bila hendak mengatur semuanya dengan heading h2, cukup menuliskan dengan perintah HTML sebagai berikut :
h2 { margin-top: 8em; margin-bottom: 3em; }
Kode
em merupakan unit penting dalam mengatur ukuran tinggi font (huruf). Ini lebih mudah bila dibandingkan dengan pengaturan pixel atau titik (point). Unit ini akan
sangat berguna pada pembuatan huruf besar.
Satuan
titik (Point) umumnya dipergunakan
oleh program word processor misalnya
dituliskan ukuran huruf 10 pt.
Sayangnya untuk ukuran titik yang sama, menghasilkan ukuran huruf yang berbeda
pada pemakaian program browser yang
berbeda pula. Apa yang dikerjakan dengan baik dengan menggunakan sebuah program
browser, bila dibaca dengan program browser yang lain belum tentu baik.
Pergunakanlah kode em untuk mengatasi
hal ini.
Untuk
mengatur ruang sebelah atas bagian heading
halaman web, sebaiknya membuat nama style untuk heading tersebut. Dalam penulisan HTML-nya cukup menggunakan atribut
class. Contoh :
<h2 class="subsection">Getting started</h2>
Kemudian
pengaturan ruangnya ditulis dengan perintah berikut :
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
Pengaturan
ini dimulai dengan nama tag, sebuah
titik dan kemudian nilai dari atribut class.
Bila pengaturan tersebut tidak
memberikan hasil. Ada cara lain untuk mengatur style elemen tertentu. Tapi atribut
class tetap bersifat fleksibel.
Pada
saat sebuah "heading"
diikuti dengan sebuah paragraf, nilai untuk batas bawah (margin-bottom) untuk heading
tersebut tidak
ditambahkan dengan nilai batas atas (margin-top)
paragraf.
5.
Inden
pada baris pertama
Untuk membuat inden pada baris pertama tiap paragraf. Cara berikut dapat dilakukan.
p { text-indent: 2em; margin-top: 0; marginbottom: 0; }
Cara tersebut
akan membuat inden pada baris pertama
paragraf sejauh 2 em dan memberikan
jarak antar paragraf.
0 komentar:
Posting Komentar