Dasar-dasar Templat Laman Maya (Web page) Dengan HTML5

Tutorial ringkas ini mengulas pengenalan markup HTML5 yang sudah lazim digunakan dalam mendesain laman maya (website) dewasa ini. Standar baku tag HTML5 diperkenalkan oleh organisasi W3C setelah melakukan penelitian pada miliaran laman maya dan menyimpulkan bahwa sebagian besar ID dan CLASS pada DIV yang umumnya digunakan untuk template desain laman maya (website)  terdiri dari header, nav (navigation), menu, content, title dan footer. Pada akhirnya semantik HTML5 dibangun dengan menggunakan elemen-elemn yang sering digunakan tersebut misalnya <header>, <nav>, <footer> dan sebagainya. Gambar berikut menunjukkan elemen-elemen HTML5 :

html5-elements

Mark-up di elemen-elemen semantik HTML5 sebagian sudah tidak asing karena digunakan di versi HTML sebelumnya, namun sebagian lagi baru dibuat dengan tujuan untuk memudahkan para pengembang (developer), perambah (browser), algoritma  robot mesin pencarian dan lainnya. Salah satunya yang penting adalah penambahan elemen baru  misalnya : header, nav, article, footer, aside and section. Bagi pengunjung situs, tag HTML5 itu mirip seperti tag CSS <div>, namun tidak seperti <strong> atau  <b>, secara semamntik tag <div> bersifat netral. Untuk bisa dikenali secara semantik kita gunakan ID dan Class pada tag DIV.

Dengan elemen-elemen baru tersebut laman maya di WWW dapat dibuat lebih cerdas dalam menyampaikan informasi kepada penggunanya. HTML5 muncul karena adanya gagasan dari penemu WWW, yaitu Tim Berner Lee, bahwa saatnya mesin-mesin komputer yang terkoneksi di Internet dapat saling berkomunikasi secara semantik diantara mereka sendiri. Pengertian semantik memang berhubungan dengan “makna”. Jadi dalam hal ini gagasan semantik berkaitan dengan suatu pembobotan secara semantik – mekanis melalui aplikasi robot yang merambah di internet sehingga bisa langsung tahu maksud sebuah tag semantik yang membungkus suatu kata atau kalimat atau suatu blok tertentu di laman maya (website). Misalnya, tag <strong>  yang masih berlaku di HTML5 , demikian juga tag <b> (bold) ini akan dimaknai tertentu oleh robot mesin pencari kalau semua teks yang ada di antara <strong>…</strong>  atau <b>…</b>ditandai dengan bobot tertentu. Dari gagasan inilah muncul prakarsa semantic-web yang akhirnya memunculkan HTML5. Dari gagasan ini pula muncul ilmu SEO (Search Engine Optimization). Bahkan dalam jangkauan visioner yang semakin nyata, muncul apa yang kemudian kita kenal sebagai Internet Of Things (IoT).

Oke, kembali ke HTML 5. Seperti halnya dokumen HTML, setiap dokumen HTML selalu diawali dengan tag pembuka DOCTYPE.

DOCTYPE

Apa pentingnya DOCTYPE? Setiap mengawali dokumen HTML5, tag DOCTYPE wajib dicantumkan di awal mark-up. DOCTYPE merupakan deklarasi elemen yang membantu perambah (browser) untuk mengetahui tipe HTML apa yang akan di uraikan (parse). Dalam tata bahasa markup, penulisan doctype menyatakan kalau “dokumen ini ditulis dengan HTML5”. Berikut penulisan lengkap dengan XHTML :

Namun, biasanya kita menuliskannya dengan singkat saja :

Selain penanda awal yang mendeklarasikan HTML5, beberapa tag juga berubah cara penulisannya misalnya :  <meta> dan <link> CSS :

Beberapa tag HTML yang sering bertaburan di laman maya juga harus dihindari dan tidak berlaku lagi , misalnya:

Selain itu anda juga harus menghindari penambahan properti elemen HTML yang seringkali bertaburan dalam sebuah laman maya seperti : align, bgcolor, height, width, size, type.

Struktur HTML5 Sebuah Laman Maya

Tinjau layout sederhana yang terdiri dari Header, Nav, Section dan Footer .

html5-basic

Struktur HTML5 dibuat seperti berikut :

Style CSS untuk layout sederhana diatas kita tulis sebagai berikut :

Header

Bagian header merupakan tempat dimana logo, tagline, banner, ikon medsos dan elemen lain dibuat sebagai bagiann awal suatu dokumen.

Navigasi Menu

Untuk membuat navigasi dalam HTML5 bisa menggunakan daftar berurut (ordered list) atau tag <ul> yang kita tempatkan didalam tag <nav> :

CSS untuk navigasi :

Main Content

Section adalah elemen yang kita gunakan untuk membuat main content  yang dibagi menjadi content dan sidebar:

CSS untuk section main content :

Isi Artikel

Tag <section id=”content”> adalah ruang dimana isi utama atau main content akan ditampilkan misalnya artikel, gambar, video, dll. Isi berupa Post atau artikel dibungkus dengan tag semantik HTML5 <article>, di dalamnya terdapat judul post atau artikel berada dalam tag <header> dengan tag heading <h1>, sedangkan format isi di tag dengan paragraf <p>.

Penggunaan judul dengan tag <h1> akan memudahkan pengenalan mesin pencari pada suatu artikel. Hal ini merupakan standar wajib dari konsorsium W3C.

Isi Sidebar

Tag <aside> merupakan pembungkus bagian sidebar suatu content. Sidebar dapat berisi apa saja mulai dari teks sampai widget tertentu.

Menggunakan Modernizr

Modernizr adalah library JavaScript yang digunakan untuk versi browser internet explorer 8 (delapan) dan dibawahnya juga kemampuan browser yang lain supaya bisa mensupport HTML5.

No-Js

Perlu diperhatikan, menggunakan javascripts modernizr.js memerlukan tambahan class no-js . Hal ini diperlukan sebagai kondisi awal untuk memulai javascripts  modernizr , karena itu class dilekatkan di tag html dan diberikan kondisional sesuai dengan perambah yang masuk. Jika perambah memunculkan tag no-js itu artinya perambah tidak mendukung tag html5. Jika pilihan pengaturan javascript pada perambah (browser) yang kita pakai tidak berfungsi atau di non-aktifkan, maka Modernizr tidak bisa bekerja dan tentu saja fitur-fitur  yang menggunakan tag html5 di laman maya pun tidak bekerja dengan baik. Namun ketika pilihan javascript pada browser di-aktifkan, maka dengan parameter no-js tersebut, Modernizr akan bekerja secara dinamis karena mengenali apa-apa saja fitur atau tag-tag pada website yang tidak support dengan browser yang sedang anda pakai. Berikut ini contoh tampilan laman maya dengan Modernizr dengan Google Chromium Version 34.0.1847.116 (sumber screenshot dari sini ) :

screenshot-modernizr

CSS Responsive Dengan Viewport

Untuk menambah adaptabilitas laman maya, diperlukan aspek responsivitas terhadap ukuran perangkat akses seperti smarthphone dll. Untuk itu diperlukan penyisipan tag <meta> viewport di bagian header dokumen HTML5 diantara tag meta. Elemen Viewport  didalam tag <meta> memerintahkan perambah (browser) untuk mengatur dimensi dan skala laman maya yang dikunjunginya.  content=”width=device-width” memerintahkan laman maya supaya lebarnya menyesuaikan dengan lebar layar perangkat. initial-scale=1.0 memerintahkan tingkat zum saat laman pertama kali diunduh.

Hasil Akhir

Struktur dokumen HTML5 akhirnya dapat ditulis sbb. (mohon diperhatikan HTML5 tidak akan bekerja dengan cara penerapan CSS secara inline) :

Untuk melihat bagaimana output kode html5 diatas, silahkan klik disini .

Atau alternatif penulisannya dengan file style.css terpisah :

 

File CSS yang digunakan untuk HTML5 diatas secara external :

Impementasi templat dokumen semantik HTML5 yang lengkap akan memudahkan perambah mengenali isi dokumen. Tentu saja ini akan membantu untuk menaikkan page rank laman maya yang dirambah robot-robot mesin pencari.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *