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.
[...] pembahasan sebelumnya mengenai Belajar HTML dan CSS Tingkat Dasar, telah membahas ‘ekternal dan internal style’. Ada 3 jenis penulisan style CSS ini, yaitu [...]