HOMEArtikel HTML
Membuat pemrograman kondisional didalam HTML
Ditulis oleh Dhimas Ronggobramantyo
Kategori: HTML
Dibaca 9621 kali
Seandainya anda telah membuat desain sebuah website yang paling rumit dengan menggunkan HTML dan CSS. Dan entah mengapa ketika dibuka di Internet Explorer dan Firefox tampilannya berbeda. Walaupun sudah dutak-atik sampai mampus tetap saja ada yang berbeda tampilannya antara IE dan Firefox. Satu-satunya cara yaitu membuat CSS yang berbeda untuk browser IE dan Firefox. Tapi bagaimana caranya kita mengenali browser apa yang digunakan?
Kita tidak perlu menggunakan Javascript untuk melakukan hal tersebut. Karena didalam HTML pun ada pemrograman kondisional dimana kita bisa mendeteksi bahwa browser yang digunakan adalah IE.
Oke daripada bingung langsung saja anda perhatikan contoh berikut ini, simpan dengan nama kondisi.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>x</title>
</head>
<body>
<!--[if IE 7]>Ini IE 7 Lho<![endif]-->
</body>
</html>
Oke jika anda lihat, kondisional diletakkan didalam tag comment <!--[if IE 7]>Ini IE 7 Lho<![endif]-->. Kode tersebut berarti jika browser anda Internet Explorer 7, maka tulisan diantara [if IE 7] sampai [endif] akan dijalankan. Silahkan anda coba jalankan kode tersebut menggunakan Internet Explorer 7 dan Firefox, bandingkan. Mudah kan, jika anda pengguna IE 6 tinggal ubah angka 7 nya menjadi 6 saja.
Bagaimana jika kita ingin agar untuk semua versi Internet Explorer kodenya dijalankan. Kita cukup menggunakan lte (Less than). Jadi kodenya menjadi seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>x</title>
</head>
<body>
<!--[if lte IE 7]>Ini Pake IE Lho<![endif]-->
</body>
</html>
Jalankan dengan browser IE versi berapa saja maka tulisan "Ini pake IE Lho" akan ditampilkan. Tetapi apabila anda menggunakan Firefox, Opera atau lainnya tulisan tersebut tidak akan tampil. Oke sekarang kembali ke permasalahan semula, jadi apabila anda membua desain yang terlihat beda di IE dan Firefox, maka anda perlu membuat CSS yang benar untuk Firefox. Kemdudian dengan menggunakan teknik diatas kita menambahkan CSS untuk IE, sehingga tampilan kita akan terlihat sama di IE dan Firefox
Oke, langsung saja kita coba kode berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>x</title>
<style type="text/css" media="all">
.firefox {
font-weight:bold;
}
.ie {
font-weight:lighter;
}
</style>
<!--[if lte IE 7]>
<style type="text/css" media="all">
.firefox {
font-weight:lighter;
}
.ie {
font-weight:bold;
}
</style>
<![endif]-->
</head>
<body>
<p class="firefox">Mozilla Firefox</p>
<p class="ie">Internet Explorer</p>
</body>
</html>
Jika anda jalankan dengan browser apapun selain IE, maka tulisan Mozilla Firefox akan menjadi tebal. Ini dikarenakan class .firefox dibuat tebal pada CSS yang pertama. Dan apabila kita menggunakan IE, maka CSS yang pertama dijalankan dan ketika ia membaca kondisi, maka CSS didalam kondisi dijalankan. Karena CSS yang dikondisi memiliki class yang sama, maka CSS yang sebelumnya akan di replace dengan CSS yang didalam kondisi, dimana class .ie yang menjadi tebal.
Mudah kan? teknik seperti ini sangat berguna apabila anda sudah mentok dan bingung kenapa kode CSS anda tampil beda di IE dan Firefox.
Komentar [51]
Dikirim oleh girimaulana pada 10 Desember 2007 12:10:18 WIB
saya masih belom ngerti,,, tolong di perjelas kembali ya kk,,
Dikirim oleh roebee pada 23 Desember 2007 12:49:14 WIB
gimana untuk pemula harus belajar dari mana dulu untuk bisa membuat web berbasis PHP
Dikirim oleh bbb pada 16 Januari 2008 03:40:19 WIB
ajarin html nya???
Dikirim oleh kodok pada 20 Februari 2008 10:44:37 WIB
yang kedua itu bukan fungsi IF kan ?
Dikirim oleh ade pada 18 April 2008 08:38:28 WIB
lebih jelas bs gak kak
Dikirim oleh ade pada 18 April 2008 08:38:48 WIB
lebih jelas bs gak kak
Dikirim oleh kacrut pada 24 April 2008 11:33:05 WIB
Bego bgt loe semua...gw aja gk ngerti
Dikirim oleh purnomo wijaya pada 24 April 2008 11:34:16 WIB
Kenalin gw anak bogor....Yg pintar lg tampan
Dikirim oleh puntius jv pada 20 Mei 2008 01:33:15 WIB
mas pandai banget ya.. mendesign web ajari...dong melalui websitenya..gimana cara mengupload yang free....
Dikirim oleh nur cahyanti pada 07 Juni 2008 07:16:07 WIB
kak,kalau njelasin yang detail.soalnya kami ini masih awam!
Dikirim oleh triksie pada 19 Juni 2008 11:12:48 WIB
salam kenal,,,
kebetulan saya sedang bingung bikin tampilan sama di semua browser
saya pernah di kasih tau ada script yang sangat simple untuk membuat tampilan web sama di semua browser, sayangnya udah lama ga di gunakan jadi lupa
klo kondisinya script css dan html udah jadi, apa yang perlu saya tambahkan, tanpa perlu java atau php script.
terima kasih untuk bantuannya.
Dikirim oleh dule pada 30 Juni 2008 12:45:09 WIB
gua baru belajar nih, jadi kagak ngarti ama pemprograman, tolong dari dasar donk!
Dikirim oleh pleaseclik pada 05 Juli 2008 10:05:49 WIB
bagus mas, artikelnya..di tambah lagi gpp..
dah bikin website nya siapaja mas..
Dikirim oleh mulyadi pada 11 Juli 2008 08:50:47 WIB
pak zanial ajari dongk... masih bingung
Dikirim oleh Cumi pada 05 Agustus 2008 03:00:39 WIB
Pantesan gw bikin aplikasi SIM ... kog beda antara di IE (Suck) dan di Firefox.
Thanks bgt pak ... buat tips-nya
oia bikin tutor parsing variable dari Java script ke PHP dan sebaliknya .... donk pak
Thanks... thanks bgt
Dikirim oleh Irwans pada 13 Agustus 2008 09:32:53 WIB
Sebenarnya ada cara lain untuk pengondisian tadi yaitu dilakukan di CSS itu sendiri yaitu dengan menambahkan *html di depan classnya. Maka dengan penambahan *html akan jalan cuma di IE
.firefox {
font-weight:bold;
}
*html .firefox { /* this class for IE*/
font-weight:lighter;
}
.ie {
font-weight:lighter;
}
*html .ie { /* this class for IE*/
font-weight:bold;
}
Dikirim oleh mejo pada 28 Agustus 2008 05:12:08 WIB
nice info .. nd thanks for share...
satu kata gokilzzz..!!
Dikirim oleh nina ariyani pada 30 September 2008 10:52:42 WIB
sy masih kurang mengerti cara penggunaan web bisa d bantu gak tapi yg mudah aja biar aku gak ribut belajarnya
Dikirim oleh khocaq abez pada 17 Oktober 2008 10:52:57 WIB
Kya na penjelasan na kurang d mengerti dEwh. . .
d perjelas lg dongz. .
Dikirim oleh khocaq abez pada 17 Oktober 2008 10:53:25 WIB
Kya na penjelasan na kurang d mengerti dEwh. . .
d perjelas lg dongz. .
Dikirim oleh san13 pada 25 Oktober 2008 01:19:27 WIB
gimna sih awalya buat web???
Dikirim oleh ayla pada 27 Oktober 2008 10:25:43 WIB
aku masih bingung ne di bagian htmlnya. Gimana se cara jitu cepet bisa biar
Dikirim oleh weddy pada 29 Oktober 2008 02:07:22 WIB
tolong dunk ajarin gw bikin web...plissss...
Dikirim oleh tronik pada 02 November 2008 07:34:07 WIB
bagai mana caranya buat database buat web dengan php
Dikirim oleh iyank pada 05 November 2008 09:30:15 WIB
salam kenal Kak, panggil saja saya IYANK. saya pengen belajar web. tahan awal belajar, harus belajar apa dulu... kalo tidak keberatan kirim ke email saya iyank_t4@yahoo.co.id saya tunggu balasannya di email saya. terimakasi
Dikirim oleh sis pada 06 Januari 2009 09:03:17 WIB
klo bisa di perjelas ya....thank
Dikirim oleh ami pada 19 Januari 2009 02:47:35 WIB
salam kena Ka'..
saya pengen beljar tentang dunia web ni ka'..
saya sudah peljari sedikit tntang HTML. Pengertian ma php, cms, css tu ap? trz klo dipaduin ma html, script di html ny ky gman ka'?
klo g keberatan, krim email saya di amioops@yahoo.com
thanx y ka'
Dikirim oleh abim pada 24 Januari 2009 05:28:37 WIB
aduh saya bingng mas... ada cara lebih mudah gak... aku pemula nech???tx
Dikirim oleh wedus pada 03 Februari 2009 10:12:41 WIB
u semua mau pada bisa belajar html berbasis php ama w ,w jamin u semua pada cepet........................
bego w lagi mau belajar dasarnya.
Dikirim oleh novi pada 09 Februari 2009 06:17:10 WIB
sy sm se x g\' ngrti. bisa lebih di perjelas dasar membuat blog/web. trims
Dikirim oleh santo pirmansah pada 24 Februari 2009 11:14:44 WIB
cara belajar cepat membuat perogram ini bagaimana????????????
Dikirim oleh tukul pada 25 Februari 2009 09:14:48 WIB
geblek udah copy-paste banyak-banyak tapi tulisan yang muncul se-emprit... 
Kalo pemula harus belajar dari mana dulu
Dikirim oleh alyta pada 04 Maret 2009 07:53:35 WIB
saya baru mo mulai blajar,,,bs mnta saran nya gak,,,apa aja yang mesti dipelajari untk ngew web?????
Dikirim oleh ucup pada 09 Maret 2009 02:36:44 WIB
kalo buat java sript gimna
Dikirim oleh rizal pada 31 Maret 2009 08:22:33 WIB
bagaimana cara membuat web dengan mudah menggunakan html
Dikirim oleh ribut putro pada 01 April 2009 01:28:01 WIB
mohon minta tolong untuk kirim artikel mengenai pemrogaman web berikut dengan tag tag nya ke:
ributputro@yahoo.com
terimakasih.kami tunggu
Dikirim oleh erwin pada 09 April 2009 08:31:16 WIB
aku juga mau minta bantuan u/pemrograman web.. soalx nilai pemrograman web saya ERROR!! tolong ya.................. tolong dikirm ke:cimenkip@yahoo.co.id
Dikirim oleh emiq pada 04 Mei 2009 07:10:11 WIB
saya mumet banget ra domk.. doakan aku agar pintar ya temen-2.. trimakasi.. amin.
Dikirim oleh udin pada 27 Mei 2009 10:01:44 WIB
ini baru artikel yang bagus banget!!!
bisa ngetahui cara milih tmpt hosting yang baik.
thanks!!
Dikirim oleh hamzah pada 04 Juni 2009 04:47:02 WIB
aduhh pusing bngt bljr web
Dikirim oleh laras pada 17 Juni 2009 10:08:11 WIB
Waaah,,, Puciiik,,, oia k\'dang2 sy bwat aplikasi php, khusus\'a tabel,,, tapi qo kdg hsl\'a ga spt yg diharapkan klo dijalanin w di browser lain??? dalam hal ini contoh diatas bisa dipake juga gax yaah ??? thx
Dikirim oleh Adi Wijaya pada 01 Agustus 2009 09:34:36 WIB
Artikel yang berknaan dengan HTML saya suka, tapi saya orang yang baru mengenal HTML tolong dibantu dari awal, tanks
Dikirim oleh Adi Wijaya pada 01 Agustus 2009 09:35:12 WIB
Artikel yang berknaan dengan HTML saya suka, tapi saya orang yang baru mengenal HTML tolong dibantu dari awal, tanks
Dikirim oleh Doyo setyo n pada 07 Agustus 2009 11:00:59 WIB
mas pak saya masih belom mudeng gmn
fungsi2x kayak progam fungsi ini untuk membuat tampilan apanya
pokokny dasar2xny saya kurang tau saya baru pemulam mohoon di perjelas
Dikirim oleh syaiful pada 03 Oktober 2009 10:29:23 WIB
mantap dah
Dikirim oleh Indar Januhartoko pada 15 November 2009 10:55:07 WIB
very good...bang
Dikirim oleh momonsolommon pada 28 November 2009 08:07:05 WIB
thanks berat ini yang aku cari sejak dulu...
Dikirim oleh becky pada 23 Desember 2009 12:58:00 WIB
saya masih belum ngerti, tolong diperjelas ya..
makasih..
Dikirim oleh yossan pada 01 Januari 2010 07:42:55 WIB
saya masih 0 dalam ilmu internet, mohon email saya di my_self50@yahoo.com klo ad yg mao membantu, thx.
Dikirim oleh bangunbi pada 01 Januari 2010 08:11:18 WIB
tx berat bossss,
lanjut lagi bos postingannya...
Dikirim oleh zeraroni pada 13 Januari 2010 06:30:50 WIB
lebih diperjelas lagi donk...
RSS Feeds
Valid XHTML Strict