HTML 5 sebagai media styling CSS

Dengan mempelajari HTML kita dapat dengan mudah menjadi web developer, karena HTML merupakan bahasa dasar yang harus dikuasai oleh setiap orang yang ingin terjun ke dunia web. Dengan mengenali karakteristik HTML kita dapat membedakannya dengan bahasa pemrograman lain sehingga memudahkan kita ketika melakukan integrasi coding.

HTML merupakan bahasa markup/teks yang dikenali browser. Seperti yang kita pahami bersama CSS bertugas mengatur styling konten sebuah HTML. Sebelum kita bisa mengatur style dengan CSS, kita perlu membuat halaman HTML sebagai media styling kita.

1. Mengapa HTML 5

Ada beberapa versi HTML dan versi terbaru saat ini adalah HTML versi 5. HTML 5 ini memiliki doctype yang sangat sederhana dan penamaan tag baru berdasarkan area yang sering kita gunakan dalam melayout halaman web seperti header, nav, menu, article, aside, footer dan lainnya.

Setiap meningkatnya versi maka akan ada penambahan fitur baru yang membuat proses kerja menjadi lebih sederhana. Sehingga untuk mempercepat proses kerja, sudah saatnya kita menggunakan HTML 5 dan dapat dipastikan browser-browser modern saat ini sudah mendukungnya terutama browser-browser yang mendukung Web Standards.

2. Layout Dasar

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Contoh HTML 5</title>
 </head>
 <body>
<article>
 <p>Paragraf di sini.</p>
</article>
<aside>
<p>Bagian sidebar</p>
</aside>
<footer>
<p>Bagian footer</p>
</footer>
 </body>
</html>

Penentuan doctype yang sangat simpel dan penggunaan tag yang sesuai konteks membuat proses development menjadi kian mudah. Penggunaan tag-tag baru ini mengurangi penggunaan tag <div> dalam men-styling elemen-elemen yang sering ada pada sebuah layout web seperti <header>, <article>, <aside>, <footer> dan tag lainnya sesuai elemen yang ingin di-styling.

3. HTML 5 Validator

Sampai saat ini beberapa HTML editor belum menyediakan validator internal dalam software-nya, termasuk DreamweaverTM CS4 sehingga kita memerlukan bantuan validator online seperti http://validator.w3.org/. Berbeda dengan TopStyleTM 4 yang sudah mendukung validator internal meski prosesnya tetap online, sehingga kita harus terhubung dengan internet jika ingin menggunakan validator internal-nya.

6 Responses to “HTML 5 sebagai media styling CSS”

Rio • November 19th, 2009 at 6:59 pm

TopStyle memang top bgt :] selain fitur auto complete, juga ada fitur auto replace yang dapat dipadukan dengan zen-coding sehingga membuat proses coding makin cepat.

bisri • December 16th, 2009 at 3:38 pm

nice share gan :) , kudu sering kesini nih … numpang belajar ya mas rio. O iya kenapa komennya gak facebook connect aja sekalian matching sama tampilannya hehe ..

Rio • December 20th, 2009 at 12:18 am

wah mas bisri mah udah sesepuh atuh, mohon koreksinya mas :]

dari dulu blum sempet integrasi fbconnect, maunya skalian ketika redesign.. tapi kapan ya..

Leave a Response