Jenis Jenis Tag Kondisional dalam HTML dan Fungsinya Jenis Jenis Tag Kondisional dalam HTML dan Fungsinya

Jenis Jenis Tag Kondisional dalam HTML dan Fungsinya. Tag Kondisional adalah kode HTML yang memberikan fungsi atau kegunaan yang mengkhusus dalam HTML yang dibungkusnya. Dengan memasang condisional tag atau tag kondisional, kita dapat mengatur dimanakah atau kapankah HTML akan muncul. Bergitulah kira kira kegunaan dari Tag Kondisional.

Ada berbagai macam Tag Kondisional yang terdapat di HTML. Tetapi tidak perlu menghafalkan keseluruhannya. Kalau kodenya dihafal pasti tidak akan ingat. Sebaiknya di pahami artinya. Karena kode HTML kebanyakan yang berbahasa inggris. Coba saja lihat beberapa condisional tag yang ada dibawah ini.

Jenis Jenis Tag Kondisional

Halaman Beranda Blog (Home Page)

Tag kondisional pada halaman beranda blog adalah sebagai berikut
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Pengertian dari halaman beranda disini adalah URL halaman depan dari blog. Tanpa path/cabang seperti:
http://jonarendra.blogspot.com

Halaman Index

Untuk seluruh laman index pada blog condisional tag nya adalah
<b:if cond='data:blog.pageType == "index"'>

Halaman Post / Artikel

Jika ingin menampilkan elemen pada halaman posting saja, tag kondisional yang digunakan adalah seperti ini
<b:if cond='data:blog.pageType == "item"'>
Contoh dari URL posting adalah begini
http://jonarendra.blogspot.com/2013/11/Jenis-Jenis-Tag-Kondisional.html

Halaman Statis

Halaman statis atau static page juga mempunyai kemiripan dengan posting. Biasanya sering disebut dengan Laman atau Page. Misalkan halaman statis pada blog ini seperti
http://jonarendra.blogspot.com/p/link.html
Elemen yang diatur dalam halaman statis dapat menggunakan tag kondisional, yaitu
<b:if cond='data:blog.pageType == "static_page"'>

Halaman Arsip

Archive atau arsip adalah halaman arsip pada tiap blog. Ini pun ada tag kondisional untuk mengatur elemen yang ada hubungannya dengan halaman arsip
<b:if cond='data:blog.pageType == "archive"'>

Halaman URL Tertentu

Jika ingin membuat kondisi blog berbeda pada halaman di URL tertentu anda bisa menggunakan tag kondisional yang ini
<b:if cond='data:blog.url == "URL TERTENTU"'>
Ganti saja URL TERTENTU dengan link anda

Halaman Post dan Statis

Ini berguna dan akan aktif pada halaman posting dan pages (static page)
<b:if cond='data:blog.pageType == "data:post.url"'>

Halaman Kesalahan / Error 404

Apabila ada link rusak, kesalahan perayapan ataupun link yang tidak ada dalam blog dicari pengunjung, akan tampil halaman Error 404. Untuk menambah CSS atau HTML pada halaman tersebut, gunakan tag seperti ini
<b:if cond='data:blog.pageType == "error_page"'>

Blog Dalam Kondisi Mobile

Kondisi blog yang dibuka dalam ponsel / mobile pasti harusnya memiliki tampilan yang ringan untuk dimuat. Jadi, pakai tag kondisional berikut jika ingin mengatur halaman blog pada mobile
<b:if cond='data:blog.isMobile'>
Halaman mobile ditandai dengan URL blog yang ditambahkan dengan ?m=1

Halaman Search Label

Tag kondisional juga ada yang berhubungan dengan halaman search label. Seperti berikut ini
<b:if cond='data:blog.pageType == data:blog.searchLabel'>
Contoh link search label adalah
http://jonarendra.blogspot.com/search/label/Informasi

Halaman Pencarian Label Tertentu

Pencarian pada label tertentu pun mempunyai tag kondisional tersendiri.
<b:if cond='data:blog.searchLabel == "LABEL"'>
Apabila anda ingin menampilkan atau tidak menampilkan suatu elemen pada halaman pencarian label tertentu, gunakan tag kondisional ini dengan mengganti LABEL dengan label yang diatur

Halaman Pencarian (Search Query)

Biasanya, kalau kita menggunakan search form untuk mencari sesuatu pada blog pasti kita dialihkan ke halaman dengan url begini
http://jonarendra.blogspot.com/search?q=
Jika anda ingin menambahkan sesuatu pada halaman pencarian / search gunakan tag kondisional berikut
<b:if cond='data:blog.pageType == data:blog.searchQuery'>

Halaman Pencarian Kata Kunci Tertentu

Lebih spesifik lagi dari yang diatas, ini tag kondisional apabila pencarian pada kueri tertentu
<b:if cond='data:blog.searchQuery == "KEYWORD"'>
Seperti contoh, saya ingin membuat halaman dengan CSS yang berbeda apabila ada pengunjung yang search dengan kata kunci 'blogger'. Maka, pasang tag kondisional seperti diatas dengan KEYWORD menjadi 'blogger'

Bagaimana? sudah lengkap belum Jenis Jenis Tag Kondisional yang saya berikan? Pastinya belum. Karena semuanya bisa dikembangkan lagi menjadi lebih spesifik/detail. Tetapi, apabila anda memiliki tag kondisional umum yang tidak saya buat diatas, silahkan kirim lewat komentar.

Kesimpulannya, Tag Kondisional adalah kode HTML yang digunakan untuk mengatur elemen tertentu pada blog untuk di tampilkan atau tidak ditampilkan pada halaman spesifik, serta pengaturan kondisi elemen tersebut.

Artikel sebelumnya yaitu Cara Membuat Widget Slider Auto Coin sangat memerlukan tag kondisional karena menampilkan elemen pada halaman beranda saja. Jadi, tag yang mana dipakai? Ya condisional tag yang <b:if cond='data:blog.url == data:blog.homepageUrl'>##

Pengertian HTML dan CSS Serta Tutorial Dasar Memakainya Pengertian HTML dan CSS Serta Tutorial Dasar Memakainya

Pengertian HTML dan CSS Serta Tutorial Dasar Memakainya. Mengedit Template atau tampilan sebuah web/blog tidak lepas dari yang namanya HTML serta CSS. Sebab, ini lah komponen penyusun bagaimana bentuk, fungsi, warna, dan atribut penyusun tampilan blog lainnya. Tapi, dalam mengartikan dan mengedit HTML dan CSS ini menurut saya cukup sulit. Saya pun disini masih pemula.

Kode kode yang ada dalam rangkaian HTML blog mempunyai arti dan kegunaannya masing masing dan bukan hal mudah untuk mengubah fungsi yang dihasilkan dari kode tersebut. Salah salah, tampilan blog kita malah jadi hancur berantakan. Untuk itu, saya kali ini share yang saya ketahui seputar HTML dan CSS.

Apa itu HTML?

HTML merupakan kependekan dari HyperText Markup Language atau dalam pengertian bahasa Indonesia berarti dokumen HTML atau rangkaian kode yang bertuliskan dengan bahasa pemformatan yang dapat diterjemahkan oleh web browser dengan menggunakan tanda tanda tertentu yang sering disebut Tag. HTML inila yang menyusun sebuah halaman web. Misalkan seperti membentuk gambar, widget, dan objek lainnya.

Tutorial Dasar Penggunaan HTML

Kode HTML mempunyai aturan yaitu harus mempunyai Tag Pembuka dan Tag Penutup.

<TAG>..rangkaian html...</TAG> (jika tag pembuka diawali dengan <, kalau tag penutup diawali dengan </)

Contoh kode HTML yang sederhana:

<html>
<head>
Disini terdapat beberapa CSS serta meta tag
</head>
<body>
Disini terdapat berbagai rangkaian HTML penyusun widget ataupun yang lainnya
</body>
</html>

Catatan:

Anda dapat membuat TagChild didalam tag yang lebih besar. Pada contoh sederhana diatas, dapat disimpulan bahwa:

* <html> merupakan tag yang di dalamnya memiliki 2 tag child atau anak yaitu <head> dan <body>

* Dibawah <html> terdapat kode <head>. Jika konten HTML untuk <head> sudah terpenuhi, jangan lupa untuk ditutup dengan </head>

* Karena di dalam <html> disebutkan jika ada 2 TagChild yaitu <head> dan <body>, maka jangan pasang tag penutup </html>

* Dibawah tag penutup </head>, pasang lagi kode <body>, lalu isikan dengan konten yang anda buat, setelah itu tutup lagi dengan </body>

* Terakhir, tutup seluruh rangkaian dengan </html>

Jadi, dalam membuat HTML, kita harus teliti tag mana yang lebih menyeluruh dan mana peranakannya. Masih bingung? Kalau begitu saya berikan contoh HTML yang paling sederhana yaitu Link.

Secara default, html link adalah

<a href='http://jonarendra.blogspot.com/'>Jona Rendra</a>

Tag pembuka disana adalah <a dan diikuti dengan href karena membuat sebuah kata yang terdapat link. Dan ditutup dengan </a>

Nah, perhatikan yang lebih rumit berikut

<a href='http://jonarendra.blogspot.com/'>
 <b>
  <u>
   <i>
    Jona Rendra
   </i>
  </u>
 </b>
</a>

Untuk menempatkan Tag Penutup, kita harus memperhatikan tag pembuka mana yang duluan. Maksudnya begini apabila diatas adalah

<a><b><u><i>Jona Rendra</i></u></b></a>

maka, tag penutup harus mempunyai urutan yang teratur seperti pemantulan cermin. Apabila memasang seperti

<a><b><u><i>Jona Rendra</a></b></u></i>

anda akan gagal

Apa Itu CSS?

CSS merupakan kependekan dari Cascading Style Sheet atau arti bahasa Indonesia nya adalah kode atau aturan yang mengendalikan suatu komponen HTML web/blog, supaya lebih rapi, terstruktur dan seragam. CSS ini biasanya dapat memberikan efek dari HTML yang akan di atur. Contohnya, CSS dapat mengatur ukuran lebar dan tinggi halaman blog, warna dari latar, ukuran, gaya serta warna font, efek hover pada gambar, dan parameter lainnya.

Tutorial Dasar CSS

Format penulisan CSS contohnya sebagai berikut

-selector- {property: value; property: value;}

Keterangan:

• -selector- merupakan kode yang dapat mengaitkan css dengan html yang akan diatur
• { adalah tag pembuka
• property: adalah atribut yang ingin kita atur dari html misalkan background, border, font.
• value adalah aturan untuk property. Contoh property yang digunakan adalah border, maka value nya adalah ketebalan garis dengan format 1px, 2px atau angka yang lain.
• Nah, penutup dari property adalah tanda ; lalu penutup CSS adalah }

Contoh CSS sederhana

.image {border: 1px solid: #000; background: #CCC;}

Terdapat selector .image berarti CSS ini mengatur HTML dengan tag pembuka

<div class='image'>

Kalau selector diatas adalah #image, jadi HTML yang diatur memiliki tag pembuka

<div id='image'>

Misalkan saya ingin membuat CSS untuk HTML

<span class='image' id='text'>

Bagaimana selector yang akan dibuat? Ya pilih salah satu. Bisa .image atau #text

Perlu diingat, agar dapat menghubungkan HTML dan CSS, pada CSS perlu di apit dengan

<style> dan </style>, baru terakhir HTML. Susunannya sebagai berikut

<style>
.test {property: value; property: value}
</style>
<div class='test'>
rangkaian HTML
</div>

HTML dan CSS memang mempunyai kesamaan, yaitu sama sama pakai kode kode yang rumit dan sulit untuk dimengerti. Yang bisa menerjemahkannya ya cuma web browser. Itulah artikel dari Jona Rendra yang berjudul Pengertian HTML dan CSS Serta Tutorial Dasar Memakainya, semoga dapat bermanfaat untuk anda ketika sedang belajar HTML serta CSS. Jika ada yang belum dimengerti, silahkan tanyakan lewat komentar.