1. Point pixel pada Browser
1. Satuan Ukuran Font: Pixel (px)
Satuan ukuran pixel
relatif mudah dipahami karena ia tidak terikat dengan setingan browser. Ketika
kita mendefenisikan ukuran font sebesar 20 pixel, maka web browser akan
menampilkannya sebesar (tentu saja) 20 pixel. Satuan pixel ini banyak digunakan
karena ditampilkan secara konsisten di dalam berbagai web browser.
Berikut adalah contoh
kode CSS untuk penggunaan pixel dalam mengubah ukuran text:
<!DOCTYPE html>
<html>
<head>
<title>Belajar
font-size</title>
<style
type="text/css">
.satu {
font-size: 12px;
}
.dua {
font-size: 20px;
}
.tiga {
font-size: 8px;
}
</style>
</head>
<body>
<h2>Belajar CSS: font-size
"pixel"</h2>
<h3>font-size 12px:</h3>
<p class="satu">Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Nulla
erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus
posuere laoreet.</p>
<h3>font-size 20px:</h3>
<p class="dua">Lorem ipsum
dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>
<h3>font-size 8px:</h3>
<p class="tiga">Lorem ipsum
dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>
</body>
</html>
2. Satuan Ukuran Font: Persen (%)
Satuan persen adalah
satuan yang bersifat relatif. Perhitungan ukuran persen akan mendapatkan ukuran
font dari setingan parent element. Jika kita mendefenisikan ukuran font tag
<p> sebesar 100%, maka tag <p> akan memiliki ukuran yang sama
dengan parent element. Namun jika tag <p> dibuat sebesar120%, maka
ukurannya akan sebesar 120% dari parent element.
Dalam kode HTML diatas,
terdapat 4 tag atau elemen, yakni tag <div>, <p>,<span>, dan
<i>. Tag <div> berada pada element terluar, sehingga ia
merupakanparent element dari tag <p>. Di dalam tag <p> terdapat tag
<span> dan tag <i>,sehingga tag <p> merupakan parent element
dari keduanya.
Jika kita membuat ukuran
font tag <p> sebesar 80%, maka ukuran font tersebut adalah sebesar 80%
dari ukuran font tag <div>. Jika tag <div> memiliki ukuran teks 14
pixel, maka tag <p> akan berukuran 80%*14px = 11,2px.
Namun bagaimana jika kita
membuat ukuran tag <div> sebesar 80% juga? maka kita harus melihat ukuran
teks dari parent elemen tag <div>. Apabila parent element tag <div>
adalah tag <body> yang ukuran fontnya tidak dinyatakan, maka perent
element akan ditentukan oleh ukuran default text web browser. Ukuran default
web browser ini disebut sebagai base text size yang umumnya berukuran 16px.
Agar lebih mudah memahami
konsep penggunaan persen sebagai ukuran font, berukut adalah contoh kode HTML
dan CSSnya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar
font-size</title>
<style
type="text/css">
.satu {
font-size: 100%;
}
.dua {
font-size: 16px;
}
.tiga {
font-size: 80%;
}
span {
font-size: 80%;
color: blue;
}
</style>
</head>
<body>
<h2>Belajar CSS: font-size
"persen (%)"</h2>
<h3>font-size 100%:</h3>
<div>
<p class="satu">Lorem ipsum
dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.
</div>
<h3>font-size 16px:</h3>
<p class="dua">Lorem ipsum
dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>
<h3>font-size tag p = 80%, tag span =
80%:</h3>
<p class="tiga">
<span>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</span>
Nulla erat dolor, ullamcorper in ultricies
eget,
fermentum rhoncus leo.
<i>Curabitur</i> eu mi vitae metus
posuere laoreet.
</p>
</body>
</html>
3. Satuan Ukuran Font: em
Jika anda telah memahami
cara penggunaan satuan persen, maka anda tidak akan kesulitan memahami satuan
em, karena keduanya nyaris sama. Web desainer lebih banyak menggunakan em
karena em berasal dari konsep typography.
Kata “em” berasal dari
typography media cetak dimana ia merujuk kepada ukuran huruf ‘m’ dari sebuah
font. Namun konsep itu tidak dipakai untuk pengertian em pada CSS. 1em di dalam
CSS sama dengan 100%, 0.5em sama dengan 50%, 1.2em sama dengan 120% dan
seterusnya. Konsep parent element dari pembahasan kita mengenai satuan persen
juga berlaku untuk satuan em.
<!DOCTYPE html>
<html>
<head>
<title>Belajar
font-size</title>
<style
type="text/css">
body {
font-size: 14px;
}
.satu {
font-size: 1em;
}
.dua {
font-size: 1.5em;
}
.tiga {
font-size: 1.2em;
}
span {
font-size: 1.2em;
color: blue;
}
</style>
</head>
<body>
<h2>Belajar CSS: font-size
"em"</h2>
<h3>font-size 1em:</h3>
<div>
<p class="satu">Lorem ipsum
dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus
posuere laoreet.
</div>
<h3>font-size 1.5em:</h3>
<p class="dua">Lorem ipsum
dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>
<h3>font-size tag p = 1.2em, tag span
= 1.2em:</h3>
<p class="tiga">
<span>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</span>
Nulla erat dolor, ullamcorper in ultricies
eget,
fermentum rhoncus leo. <i>Curabitur</i>
eu mi vitae metus
posuere laoreet.
</p>
</body>
</html>
2. Fungsi Tag HTML
Html = Menyatakan
pada browser bahwa dokumen Web yang digunakan adalah HTML
Head = Kepala dari dokumen HTML
Title = Judul dari
dokumen HTML yang ditampilkan pada judul jendela browser
Body = Tag untuk menampilkan isi dokumen HTML
H2 = Header 2, sub
judul sebuah web
p = Membuat paragraf
Center = Tag html berfungsi untuk menampilkan teks dengan
posisi horizontal ditengah
Hr = Tag html
berfungsi untuk membuat suatu garis horizontal
Align = Menentukan
posisi garis dihalaman web
Width = Mengatur panjang garis dalam satuan pixel
Noshade = Menyatakan bahwa garis yang kita buat tidak
menngunakan bayang-bayang 3D.
Pre = Preformated
Text, tag html berfungsi untuk menampilkan teks apa adanya sesuai text editor
H1 = Header 1, untuk
judul sebuah web
br = Tag untuk ganti
baris
a = Tag html yang
berfungsi untuk menghubungkan ke internal atau ekserrnal halaman web
href = Atribut yang di tambahkan kedalam tag a
dimana value dari href ini adalah url
ol = Order List, tag
html berfungsi untuk membuat nomor daftar urut, bisa berupa angka, huruf
atau angka romawi.
li = List Item, tag
yang berada di elemen OL dan UL yang berbentuk list
Ul = Unorder List,
tag html berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet)
dl = Mendefinisikan
sebuah daftar isi
dd = Mendefinisaikan
deskripsi dari item dalam daftar definisi <penjelasan>
dt = Mendefinisikan
istilah (item) dalam daftar definisi <istilah>
Center = Tag html
berfungsi untuk menampilkan teks dengan posisi horizontal ditengah
b = Bold, tag html
yang berfungsi untuk mempertebal teks
img = Tag html untuk
menampilkan gambar
src = Source,
menyatakan lokasi penyimpan gambar atau lokasi dimana gambar diambil.
Border = <mengatur
ketebalan garis>
tr = Table Row,
mendefiniskan baris pada tabel
table = Tag yang
berfungsi untuk membuat suatu data yang terdiri dari baris dan kolom
th = <judul table
/ otomatis bold>
td =
<penampilannya td tebal>
Font = Tag html
berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf
Size = Untuk merubah
ukuran huruf
Face = Untuk merubah
jenis huruf
cellpadding = jarak tulisan/konten dengan garis cell (2
pixel)
cellspacing = jarak spasi antar cell (2 pixel)
bgcolor = warna dasar
(#ffffff = putih)
rowspan =
Menggabungkan baris
td = Table Data,
terletak di dalam tag TR, yang berfungsi untuk memasukkan data-data
collspan = Menggabungkan
kolom
div = suatu element
yang di gunakan untuk mengelompokan suatu element atau tag tag agar
menjadi suatu group
3. Tag Pada HTML
<p>Recapture the essence of a true safari in the African
wilderness by treating your senses to a bush holiday at the Koro-Koro Safari Lodge.</p>
tag ini untuk membuat paragraf
<title>Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House,
</title>
tag ini untuk membuat judul
<ul>
<li><a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation" class="active">Home</a></li><li>
<a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation">Accommodation</a>
<ul style="display:none;">
<li><a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation">Caravan Park</a></li><li>
<a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation" >Bush Camp</a></li><li>
<a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation" >Marula House</a></li>
</ul>
tag ini untuk membuat sebuah list
