Langganan feed RSS bloggingly disini. GRATIS.Lanjutan dari seri Tutorial Cara Membuat Theme Wordpress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :
- Langkah #0 : Pendahuluan, serta tools - tools yang dibutuhkan
- Langkah #1 : Memahami Struktur File Theme Wordpress
Sekarang, berlanjut ke Langkah #2 : Memahami Aturan, Penulisan, & Kegunaan Tag XHTML.
Untuk apa kita memahami aturan, penulisan dan kegunaan tag XHTML? bukankah file theme ditulis dalam .php?
Well, seperti yang telah kami bahas pada Langkah #1 bahwa File Theme Wordpress memang ditulis dalam file php. Namun ada informasi yang perlu ditambahkan :
Bahasa php yang digunakan dalam file tersebut berfungsi untuk “memuat” konten blog dari database ke dalam tampilan blog, yang mana memiliki “kerangka” yang terbuat dari tag XHTML yang akan didefinisikan desainnya oleh file css.
Sekarang begini saja : baca saja dulu, telan bulat - bulat karena prakteknya sendiri akan dimulai pada post langkah #3. kalau ada yang kurang jelas, silahkan sampaikan melalui form komentar, ok? 
Memahami Tagi - Tag XHTML & Kegunaannya
DISCLAIMER : kami tidak akan menuliskan keseluruhan tag XHTML pada halaman ini. untuk lengkapnya anda bisa lihat halaman W3C school mengenai daftar lengkap tag xhtml, dan halaman wikipedia untuk penjelasan lengkap elemen html. Yang kami tulis hanya sebagian saja, yang sering digunakan dalam pembuatan theme wordpress.
Tag pembangun halaman :
<html> </html>
tag yang wajib dimiliki sebuah halaman web. hanya informasi yang tersimpan diantara tag tersebut yang dibaca oleh browser.
<head> </head>
informasi & tag yang ditulis diantara tag ini tidak akan ditampilkan di halaman browser. Yang ditaruh diantara tag ini adalah deklarasi file html, tag metadata halaman web, link ke file css dan javascript, dan script2 javascript atau css yang ditulis secara internal
<body></body>
Informasi yang ditulis diantara tag ini akan ditampilkan pada browser.
tiga tag ini merupakan tiga tag dasar dari sebuah halaman web. Dengan menggunakan tiga tag dasar ini saja anda sudah bisa membuat sebuah halaman web sebenarnya. Untuk memahami maksudnya, buka aplikasi notepad++ anda, lalu copy paste script ini :
<html>
<head>
</head>
<body>
test tiga tag dasar
</body>
</html>
lalu save dengan nama file tigatag.html . sudah di save? buka file tersebut menggunakan browser anda.
Tag - tag pada bagian head :
<title></title>
tag title page. informasi yang ditulis diantara tag ini akan menjadi identitas halaman web, dan muncul pada top bar aplikasi browser
<link rel=”" type=”" href=”">
tag rel. untuk menghubungkan halaman web dengan file yang memberikan fungsi / definisi pada halaman tersebut
Tag dasar konten web :
<h1> This is heading </h1>
<h2> This is heading </h2>
<h3> This is heading </h3>
ini disebut tag heading. fungsinya untuk mengatur besar kecil ukuran teks yang ditulis diantara tag tersebut. tag <h1> merupakan ukuran terbesar. semakin besar nomernya, semakin kecil ukurannya.
<p> </p>
tag paragraf. informasi yang di tulis diantaranya dianggap satu paragraf
<br />
tag break, atau fungsi enter pada editor : untuk membuat tulisan turun ke baris selanjutnya. Jika pada tag - tag lain mengal adanya starting tag dan closing tag, jadi informasi diapit diantara tag, maka tag break merupakan pengecualian. cukup letakkan tag break diantara tag paragraf, dan informasi yang ditulis setelah tag break akan turun ke baris selanjutnya.
<i></i>
tag italic. Informasi yang ditulis diantara tag ini akan tampak miring
<b></b>
tag boldface. informasi yang ditulis diantara tag ini akan tampak tebal
<blockquote></blockquote>
tag untuk quotation. membuat informasi yang ditulis diantara tag ini memiliki karakter yang berbeda dari yang ditulis diantara tag paragraf, diberi style quotation
<a href=”"></a>
tag link. informasi yang diletakkan diantara tag ini akan menjadi link yang mengarah pada halaman web lain.
contoh :
<a href=”http://fikrirasyid.com/about/”>about fikri</a>
akan tampil pada browser menjadi :
about fikri
<img src=”">
tag untuk memanggil image.
Tag list / daftar : list ini akan sering anda jumpai dalam sidebar dan membuat menu bar
<li></li>
tag list item. untuk isi dari list yang ada, sebagai item dari tag ordered list dan unordered list. pemahaman lengkapnya ada dibawah
<ul></ul>
tag unordered list ( daftar tidak berurut ). Sederhananya : Untuk membuat daftar dengan bullet style. agak sulit dijelaskan, lihat contoh ini :
Penulisan script :
<ul>
<li>list satu</li>
<li>list dua</li>
</ul>pada browser akan tampak seperti ini :
- list satu
- list dua
<ol></ol>
tag ordered list ( daftar berurut ). Sederhananya L Untuk membuat daftar berurut menggunakan angka. Lihat contoh ini :
Penulisan script :
<ol>
<li>list satu</li>
<li>list dua</li>
</ol>pada browser akan tampak seperti ini :
- list satu
- list dua
Tag Div :
<div><div>
tag div merupakan tag vital dalam design web menggunakan CSS. tag ini berfungsi untuk mendefinisikan “wilayah tertentu” dalam halaman web. tag div ini nantinya akan diberikan nilai menggunakan atribut id ( untuk nilai yang hanya keluar sekali ) atau class ( untuk nilai yang keluar berkali - kali ).
contoh :
<div id=”header>
Just another Weblog
</div>
tag div ini memiliki atribut id dan nilai header. nilai header ini nanti akan didefinisikan pada file css, berapa lebarnya, berapa tingginya, apa warna backgroundnya, dll. Lebih dalam mengenai bagian ini akan dibahas di langkah selanjutnya
Aturan Penulisan Tag
Ada beberapa aturan yang harus anda pastikan agar theme anda memenuhi standar web :
- tulis semua tag dalam huruf kecil. tulis <div> bukan <DIV> ok?
- tutup tag secara tepat. Menutup tag dengan tepat : tutup terlebih dahulu tag terakhir yang terbuka. Contoh :
Tepat:
<ul>
<li>list one</li>
</ul>Tidak Tepat :
<ul>
<li>list one</ul>
</li>
ingat : tutup dahulu yang tag terakhir yang terbuka. Ok?
Yup, cukup untuk pembahasan post ini. Yang kami bahas pada post kali ini memang tag - tag dasar saja yang akan banyak digunakan pada pembangunan wordpress theme.
Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar 
Enjoy! 
P.S.
untuk pemahaman lanjutan mengenai Tag HTML, anda bisa kunjungi W3C atau Wikipedia.
Selanjutnya, Langkah #3 :Membuat File Dasar Theme Wordpress : index.php & style.css
------------------------------------------------------------------------------------
Anda merasa post di blog ini bermanfaat untuk anda?
Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !
Apa itu RSS? Kenali RSS di halaman ini