HTML dan CSS
sebenarnya adalah bahasa keseharian para pengguna internet. Halaman
yang tampil dalam browser ketika kita berselancar itu adalah
pengembangan dari kedua bahasa tersebut, yaitu bahasa ‘markup‘ (HTML) dan bahasa ‘stylesheet‘ (CSS), yang keduanya didefinisikan dan dikendalikan penggunaannya olehWorld Wide Web Consortium (W3C).
Para blogger, tentunya sangat berkaitan
langsung dengan kedua bahasa tersebut, baik itu saat edit template
maupun saat melakukan postingan. Kalau untuk para pengembang web itu
santapan mereka.
Jika kita coba analogikan kedua bahasa
tersebut sebagai sebuah bangunan, HTML itu adalah struktur dasar dari
bangunan, dan CSS yang kemudian bertugas menata agar struktur bangunan
tersebut tertata dengan baik dan mempercantiknya.
Garis Besar Bahasa ‘Markup’ / HTML
HyperText Markup Language (HTML) adalah sebuah bahasa markah (markup) yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. (id.wikipedia).
Bicara tentang HTML, maka kita berbicara mengenai versi dari HTML dan pengembangannya XHTML. Saat ini HTML telah dikembangkan versi barunya yaitu HTML5, dengan beberapa elemen barunya.
Bagaimana kita membedakan tiap versi HTML
Untuk dapat melihat versi apa yang digunakan sebuah weblog, itu dapat terlihat dari
doctype yang digunakan pada bagian atas (klik kanan pada halaman kemudian “view page source”).
contoh, lihat text yang berwarna biru:
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd“>
HTML 5 (lebih simpel dari doctype lainnya):
<!DOCTYPE html>
Lebih lengkap mengenai macam
doctype anda dapat melihat di Recommended DTDs to use in your Web document diluar dari HTML 5.Struktur Dokumen HTML
Struktur dokumen HTML dimulai dari
doctype sebagai deklarasi jenis HTML yang digunakan, kemudian di dalam HTML terdapat elemen head dan body.
Contoh sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> “Judul Weblog” </title>
</head>
<body>
<h1>”Heading”</h1>
<p>”Paragraph”</p>
</body>
</html>
Apabila kita lihat kode diatas, bahwa didalam
head itu bisa kita masukkan, title, meta, stylesheet, dan juga script. Sedangkan bagian body
adalah stuktur dari halaman yang akan dikembangkan, yang berisi
informasi di dalam halaman web, baik itu di bagian header, navigasi,
post, sidebar dan footer, dengan tag tertentu seperti<h1> dan <p>, dan lainnya.
Gambaran umum struktur dari elemen
head sebagai berikut:<head>
<title>Judul Weblog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/styles.css" type="text/css" media="all" />
<script type="text/javascript" src="/javascript.js"></script>
</head>
Gambaran umum struktur dari elemen
body sebagai berikut :<body>
<div id="header">
<h1>"Judul Blog"</h1>
</div>
<div id="nav">
<ul>
<li>Beranda</li>
<li>Tentang</li>
</ul>
</div>
<div id="post">
<h2>"Judul Postingan"</h2>
<p>"Paragraph dari isi postingan"</p>
</div>
<div id="sidebar">
<h3>"Judul Sidebar"</h3>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>
<div id="footer">
<p>Paragraph Credit</p>
</div>
</body>
Untuk HTML5, pengunaan
div semakin berkurang, misal <div id="header"> bisa diganti atau diwakili dengan <header>, <div id="nav"> menjadi <nav>, <div id="post"> menjadi <article>, <div id="sidebar"> menjadi <aside>, <div id="footer"> menjadi <footer>. Anda dapat mempelajari lebih lanjut pengembangan HTML 5 di A Preview of HTML 5 (A List Apart).
Demikian garis besar gambaran struktur
bahasa ‘markup’ HTML. Jika anda kemudian ingin mengecek atau menguji
bahwa penulisan bahasa ‘markup’ anda telah baik dapat menggunakan Markup Validation Service.
Berikut ini bahan bacaan yang baik, berbahasa indonesia, untuk menambah pemahaman anda mengenai HTML:
Garis Besar Bahasa ‘Stylesheet’ / CSS
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. (id.wikipedia)
Seperti pengertian diatas, fungsi dari
bahasa stylesheet adalah untuk menata dan mempecantik tampilan dari
bahasa ‘markup’ /HTML, baik berupa warna, jenis huruf, tata letak, dan
lainnya. Tanpa CSS atau sekedar HTML, sebuah halaman web hanya tersusun
kebawah dengan background putih, tulisan hitam dan link berwarna biru.
Nah dengan CSS ini yang akan menata halaman HTML tersebut, atau
memperjelas bagian tiap elemen HTML, misal ‘header’, ‘content’,
’sidebar’ dan ‘footer’.
Bahasa stylesheet juga mengalami pengembangan versi atau level, sama seperti halnya HTML. Level terbaru dari CSS kini yaitu CSS3.
CSS3 juga memiliki pengembangan baru yang fenomenal, yang semakin
membuat sebuah halaman terlihat semakin lebih kreatif dan bergaya.
Dengan adanya CSS3 ini mungkin suatu saat, jika semua browser atau
perambah sudah mengadopsi, penggunaan image dan javascript akan sedikit
berkurang. Mungkin CSS3.info bisa jadi salah satu alamat yang bisa dijadikan bahan belajar dan mengikuti perkembangan dari CSS3.
Penempatan Elemen Style CSS
Pada pembahasan diatas mengenai HTML,
bahwa elemen ’style’ ditempatkan dibagian ‘head’. Ada dua cara
penempatan elemen ’style’ ini, yaitu secara eksternal atau internal
(ditanam langsung)
Secara eksternal, maksudnya disini file CSS tersebut terpisah atau tersendiri dengan file HTML, dan cara memanggil kode CSS tersebut dengan tag
<link>. sebagai berikut:<!DOCTYPE html>
<html>
<head>
<title> "Judul Weblog" </title>
<link type=”text/css” rel=”stylesheet” href=”style.css” media=”all”>
</head>
<body>
</body>
</html>
Secara internal, maksudnya disini kode CSS langsung ditanam dengan menggunakan elemen
style, sebagai berikut:<!DOCTYPE html>
<html>
<head>
<title> "Judul Weblog" </title>
<style type=”text/css”>
body {background:#fff;}
</style>
</head>
<body>
</body>
</html>
Cara membaca
body {background:#fff;}, body ’selektor’ dari elemen HTML yang kan diberikan style,background adalah ‘property’, sedangkan #fff adalah ‘value’. Peran dari property dan value ini yang akan menata dan mempercantik tiap elemen HTML.
Anda dapat melihat contoh berikut, yaitu kaitan bahasa HTML dan CSS dalam menciptakan tampilan sebuah halaman. Dan di CSS Tutorial (w3schools) anda dapat melakukan uji coba dalam memberikan style sebuah elemen HTML.
Penulisan CSS untuk memberikan style elemen HTML
Setiap elemen HTML dalam penulisan CSS akan diterjemahkan sebagai berikut:
tag berikut
<body>, <p>, <span>, <ul>, <li>, <h1>, dll, penulisan CSS sekedar ‘body’, ‘p’, ’span’, ‘ul’, ‘ol’, ‘li’, h1′. Sedangakan, tag dengan <div>, seperti <div id=" "> penulisan CSS adalah ‘#’ (pagar) dan <div class=" "> penulisan CSSnya adalah ‘.’ (titik).
Contoh
<div id="content">
<h2>Judul Postingan</h2>
<div class="post">
<p>paragraph 1</p>
<ul>
<li>List1</li>
<li>list2</li>
</ul>
<p>paragraph2</p>
</div> <!--end div post -->
</div> <!-- end div content -->
Maka penulisan kode CSSnya sebagai berikut:
#content {float:left;}
#content h2 {font-syze:18px;}
.post {letter-spacing:0.2px;}
.post p {line-height:14px;}
.post ul {list-style:circle; margin-left:20px;}
.post li {padding:5px;}
Jenis Media CSS
Dalam pengembangan style CSS disebuah halaman pun idealnya dibuat perbedaan jenis medianya atau media type (w3). Ada beragam jenis media ini, tapi yang umum atau lazim digunakan adalah media ‘screen‘, ‘print‘ dan ‘handheld‘.
Jadi ada perbedaan tampilan halaman weblog kita untuk layar monitor
komputer (screen), tampilan hasil cetak (print), serta tampilan pada
small screen seperti halnya handphone (handheld).
Pada media ‘print’ dan ‘handheld’
tentunya harus dibuat lebih sederhana dari media ’screen’. Media print,
layaknya sebuah hasil cetak print pada kertas umumnya. background putih,
warna text hitam, pernak pernik blog tidak perlu ditampilkan, lebih
hanya berupa artikel blog, yang berisi judul dan isi. Cara mengetes
media print ini adalah lewat “print preview” pada file browser anda.
Contoh penulisan untuk membedakan tiap media:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media handheld {
body { font-size: 12px }
}
@media screen, print {
body { line-height: 1.2 }
}
Berikut ini 4 contoh penulisan jenis media CSS:
<link rel="stylesheet" type="text/css"
media=”print” href=”print.css”><style media=”print”> … </style>@media print { p { font-size: 14pt;} }@import url("print.css") print;
Demikian garis besar gambaran penggunaan
bahasa “stylesheet” / CSS. Jika anda kemudian ingin mengecek atau
menguji bahwa penulisan bahasa “stylesheet” anda telah baik dapat
menggunakan CSS Validation Service.
Berikut ini bahan bacaan yang baik, berbahasa indonesia, untuk menambah pemahaman anda mengenai CSS, yaitu:
Penutup
Tulisan ini sebagai sebuah pengantar. Pengenalan Dasar HTML dan CSS
tentunya belum lengkap membedah kedua bahasa tersebut. Minimal dalam
tulisan ini kita dapat membedakan kedua bahasa tersebut dan kaitannya.
Mungkin pada tulisan berikutnya ada kontibutor lain yang bisa mengangkat
kedua hal tersebut lebih detil, satu persatu dalam beberapa kasus.
Tapi apabila anda ingin langsung
berkontribusi silahkan lewat komentar, baik itu berupa koreksi, tambahan
atau masukan, agar kita dapat saling belajar.
0 komentar:
Posting Komentar