Pengenalan Dasar HTML dan CSS

HTML dan CSS untuk pemula

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 oleh World 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:

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01 Strict:

         "http://www.w3.org/TR/html4/strict.dtd">

HTML 5 (lebih simpel dari doctype lainnya):

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:

    "http://www.w3.org/TR/html4/loose.dtd">

. 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 . sebagai berikut:

Secara internal, maksudnya disini kode CSS langsung ditanam dengan menggunakan elemen style, sebagai berikut:

ara 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 , ,

, dll, penulisan CSS sekedar ‘body’, ‘p’, ’span’, ‘ul’, ‘ol’, ‘li’, h1′. Sedangakan, tag dengan

, seperti

penulisan CSS adalah ‘#’ (pagar) dan

penulisan CSSnya adalah ‘.’ (titik).

Contoh


  




Judul Postingan


     paragraph 1


        

List1


        

list2


     paragraph2

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:

     media="print" href="print.css">

@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.