test server

© UnksFiles 2011.

Minggu, 12 Juni 2011

Artikel XHTML (Web Standards)

cek  kode-kode anda di web ini untuk melihat hasil nya

"http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width"

Gunakan title untuk memberikan informasi

Jika anda ingin memberikan informasi tambahan untuk field, maka anda dapat menggunakan atribut title dan isilah dengan informasi yang diinginkan. Seperti inilah kodenya: 
<form method="get" action="">
Nama Anda: <input type="text" name="nama" size="30" title="Isilah dengan nama 
anda" /><br />
Alamat Anda: <input type="text" name="alamat" size="30" title="Isilah dengan 
alamat anda" /><br />
</form>
 
menjadi
Nama Anda: 

Alamat Anda:

Wajib menggunakan label

Apa sih gunanya <label>? Kalau diibaratkan, maka <label> akan memberitahu browser bahwa ada form disitu dan ada field yang harus diisi dengan nama, jadi jangan sampai isinya salah. Ya <label> berguna agar browser mengerti bahwa suatu teks mengacu pada suatu field. Silahkan coba contoh berikut ini: 
<form method="get" action="">
<label for="formnama">Nama Anda:</label> <input type="text" name="nama" 
size="30" title="Isilah dengan nama anda" id="formnama"/><br />
<label for="formalamat">Alamat Anda:</label> <input type="text" name="alamat" 
size="30" title="Isilah dengan alamat anda" id="formalamat"/><br />
<input type="checkbox" name="masak" id="formmasak" /> <label for="formmasak">Memasak</label><br 
/>
<input type="checkbox" name="mancing" id="formmancing"/> <label for="formmancing">Memancing</label><br 
/>
</form>
 
menjadi

Kelompokkan field-field anda

Jika form anda memiliki banyak field, maka anda perlu mengelompokkannya agar terlihat lebih teratur. Bagaimana caranya? anda tidak perlu menggunakan <table> atau lainnya, gunakan saja <fieldset>. Silahkan coba contoh berikut ini: 
<form method="get" action="">
<fieldset>
<legend>Informasi Anda</legend>
<label for="formnama">Nama Anda:</label> <input type="text" name="nama" 
size="30" title="Isilah dengan nama anda" id="formnama"/><br />
<label for="formalamat">Alamat Anda:</label> <input type="text" name="alamat" 
size="30" title="Isilah dengan alamat anda" id="formalamat"/><br />
</fieldset>
<fieldset>
<legend>Hobi Anda</legend>
<input type="checkbox" name="masak" id="formmasak" /> <label for="formmasak">Memasak</label><br 
/>
<input type="checkbox" name="mancing" id="formmancing"/> <label for="formmancing">Memancing</label><br 
/>
</fieldset>
</form>
 
menjadi
Informasi Anda

Hobi Anda 
 
 
 

XHTML Transitional vs XHTML Strict

Bagi anda yang ingin beralih ke teknologi XHTML, cara yang paling mudah adalah dengan beralih ke XHTML Transitional terlebih dahulu. Karena jika anda langsung beralih ke XHTML Strict anda akan kaget ketika mengecek validasi website anda, karena akan terdapat banyak error. Kenapa bisa begitu? hal ini dikarenakan semua bagian untuk mempresentasikan / layout website diatur oleh CSS.
Yang pertama-tama perlu diketahui adalah, kita mendeklarasikan apakah file kita XHTML Transitional atau XHTML Strict. Dengan mendeklarasikan file kita, maka Search Engine, browser dan validator dapat mengetahui jenis dokumen kita termasuk tipe apa. Inilah deklarasinya:
XHTML 1.0 STRICT 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 TRANSITIONAL 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

Tag HTML yang tidak digunakan lagi

Oke, pada XHTML strict beberapa tag HTML tidak digunakan lagi. Alasannya biasanya karena penggunaan tag tersebut bisa digantikan di dalam CSS. Yaitu tag <u>, <center> dan <font>. Tag <u>yaitu tag untuk membuat garis bawah sudah tidak dipakai lagi, karena pada CSS kita bisa menggunakan text-decoration:underline;. Demikian pula untuk <font> yang didalam CSS bisa kita ubah sesuka hati, serta <center> yang bisa digantikan dengan text-align:center; di CSS.
Ada lagi tag-tag HTML yang dihilangkan tetapi diganti dengan tag lainnya yaitu <i> yang diganti dengan <em> dan <b> yang diganti dengan <strong>
Ada lagi tag HTML penting yang tidak digunakan lagi yaitu <iframe>. Jadi bagi anda pengguna frames maka berhati-hatilah anda tidak bisa membuat web anda menjadi standard. Alasan W3C untuk tidak menggunakan <iframe> karena <iframe> mengambil halaman lain, dan jika halaman lain tersebut tidak standard, maka keseluruhan website akan menjadi kacau. Belum lagi kenyataan bahwa kebanyakan ponsel ataupun PDA tidak bisa menampilkan <iframe>. Karena W3C membuang <iframe>. Tetapi W3C berbaik hati, apabila anda tetap ingin menggunakan frames maka anda dapat menggunakan XHTML Frameset. Dimana anda perlu mengubah deklarasinya menjadi seperti ini:
XHTML 1.0 FRAMESET 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 

Struktur Dokumen

Dalam XHTML strict kita harus berhati-hati dalam menyusun dokumen HTML kita. Harus terstruktur dengan baik. Berikut ini adalah contoh yang salah: 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
Isi halaman Web<br />
<img src="images.jpg" width="100" height="100" alt="Gambarku" />
</body>
</html>
Penggunaan struktur seperti itu salah, anda harus meletakkan text dan images didalam <p> atau <div>. Jadi yang benar adalah seperti ini: 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
<p>Isi halaman Web<br />
<img src="images.jpg" width="100" height="100" alt="Gambarku" /><p/>
</body>
</html>
 
menjadi
Isi halaman Web

Gambarku
Sering-seringlah mencoba dan mengecek apakah website anda standard, dengan demikian lama kelamaan anda akan hapal bagaiman seharusnya menggunakan tag dan atribut yang benar.
Demikian pula untuk tag-tag lain seperti <input> dan <label> yang wajib anda letakkan didalam tag <p>. Karena itu didalam membuat website yang standard anda harus sering-sering mengecek apakah website anda standard menggunakan XHTML Validator 

Sekilas mengenai XHTML 2.0

Ya, anda tidak salah baca, pada 2007 ini W3C telah menyesaikan draft / rancangan untuk XHTML 2.0. Banyak diprotes karena kodenya benar-benar berbeda dan memiliki malah kompatibilitas pada browser-browser terkini apalagi browser yang kuno. Beberapa hal yang baru pada XHTML 2.0 adalah:
  • Forms akan digantikan dengan XForms dan Frames akan digantikan XFrames
  • Ada tag HTML baru yaitu <nl> yang digunakan untuk membuat <ul> bertingkat.
  • Semua tag HTML berfungsi juga sebagai anchor / link. Jadi anda bisa membuat <strong href="main.html">Ini adalah link</strong>. Ini baru aneh :)
  • Semua tag HTML juga bisa diberi atribut src. Jadi anda bisa membuat kode sepert ini <p src="gambar.jpg" type="image/jpeg">London Bridge</p>. Semakin menarik kan?
  • alt atribut telah dihilangkan sebagai gantinya anda dapat meletakkannya diantara tag <img>. Contoh: <img src="gambar.jpg">Gambar <em>saya</em></img>.

XML

Anda tentu sudah tau tentang XML, yang merupakan bahasa markup seperti halnya HTML. Hanya saja XML lebih terstruktur penggunaannya, salah sedikit saja maka aplikasi-aplikasi yang dapat membaca XML akan gagal membaca file XML anda. Perbedaan antara XML dan HTML adalah: HTML didesain untuk menampilkan data sedangkan XML didesain untuk mendeskripsikan data.
Karena itu W3C mengeluarkan standard baru yang menggabungkan kekuatan HTML dan XML menjadi satu yaitu XHTML. Karena XHTML merupakan XML, maka XHTML bisa dibaca oleh semua alat yang mampu membaca XML. Dan karena XHTML juga merupakan HTML maka browser-browser kuno juga mampu membacanya.

Kenapa sih harus standard?

Negara-negara di Eropa telah memerintahkan agar website-website pemerintah disana distandardkan. Ditambah sebuah fakta yang mengerikan bahwa di Jepang 65% orang Jepang mengakses internet melalui Handphone/PDA tidak melalui komputer. Bagaimana jika orang Jepang tersebut mengakses website anda?
Ini pertanyaan yang sering ditanyakan oleh orang-orang, kenapa website kita harus standard? Oke, jika kita menggunakan browser seperti IE, Firefox dan browser lainnya dikomputer tidak akan masalah walaupun kode HTML kita berantakan karena browser-browser tersebut cukup canggih dan mampu membaca kode HTML sekacau apapun. Tapi bagaimana dengan orang-orang yang masih menggunakan browser text seperti Linx? atau orang buta yang menggunakan browser Webbie atau screen reader untuk membaca website anda? Atau bagaimana dengan orang-orang yang mengakses website anda melalui Handphone, PDA atau gadget-gadget kecil lainnya. Dengan membuat website anda menjadi standard maka website anda dapat dibaca oleh semua media
Dengan bantuan CSS (Cascading Stylesheet) maka tampilan XHTML anda bisa dipercantik tanpa harus mengubah kode XHTML anda. Jadi gabungan XHTML dan CSS akan menghasilkan website maut yang kompatibel disemua media.
Satu lagi keunggulan web standard. Karena kode XHTML anda terstruktur dan tidak terlalu banyak kode (karena layout dan tampilan diatur oleh CSS) maka Search Engine dapat lebih mudah mengindeks website anda. Website anda akan lebih mudah masuk Search Engine.
Jadi? jika anda ingin beralih ke XHTML teruskan membaca, tetapi jika anda pikir ini hanya omong kosong silahkan saja klik tanda silang dikanan atas browser anda. Pilihan ada ditangan Anda :)

Deklarasikan bahwa file anda XHTML

Mungkin anda akan bertanya-tanya, berarti saya simpan filenya dengan nama index.xhtml? tidak perlu, anda gunakan saja index.html atau index.php atau lainnya. Yang penting disini adalah kita mendeklarasikan bahwa dokumen kita adalah dokumen XHTML. XHTML sendiri saat ini sudah ada 3 versi, yaitu XHTML 1.0, XHTML 1.1 dan XHTML 2.0 (dalam pengembangan). Apabila anda masih beralih dari HTML ke XHTML gunakan saja XHTML 1.0, karena XHTML 1.1 sudah banyak perubahan apalagi yang XHTML 2.0.
XHTML 1.0 sendiri dibagi menjadi 3 tipe dokumen yaitu:
  • STRICT. Puncaknya standard, gunakan ini apabila anda benar-benar menginginkan kode yang benar-benar terstruktur. Beberapa tag sudah dihilangkan disini seperti <iframe>. Anda harus mengkombinasikan antara XHTML dan CSS
  • TRANSITIONAL. Gunakan ini apabila anda ingin tampilan ditampilkan didalam file XHTML tidak di CSS
  • FRAMESET. Gunakan yang ini, jika anda ngotot ingin menggunakan frames
Saya akan menerangkan perbedaan ketiganya di artikel lainnya. Sekarang seperti apa deklarasi ketiganya? lihat contoh dibawah:
XHTML 1.0 STRICT 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 TRANSITIONAL 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 FRAMESET 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Kode XHTML selengkapnya adalah: 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
<p>Isi halaman Web</p>
</body>
</html>

Seperti apa sih kode XHTML?

Banyak sekali perbedaan antara kode HTML dan XHTML, yang pertama tentu saja diatas kode anda harus dideklarasikan apakah kode anda XHTML Frameset, Transitional atau Strict. Anda sudah melihat contohnya diatas. Kemudian apa lagi? masih banyak yang harus diingat. Mari kita bahas satu persatu.

Gunakan selalu huruf kecil (lowercase)

Ahh, kebiasaan kita dalam membuat HTML, hurufnya gede-gede bahkan kadang-kadang campur aduk nggak karuan. Perhatikan contoh HTML yang keliru dibawah ini: 
<table WIDTH="100%">
<TR><TD>Contoh Teks</TD></TR>
</table>
Jika anda tidak mengerti apa itu tag, apa itu atribut, berarti anda salah membaca artikel. Seilahkan baca artikel mengenai dasar HTML terlebih dahulu, baru kemudian meneruskan membaca yang ini.
Jika anda perhatikan pada dicontoh diatas, tag ataupun atribut ada yang menggunakan huruf kapital (uppercase). Didalam XHTML kode seperti itu salah, anda harus selalu menggunakan huruf kecil. Karena itu biasakan menggunakan huruf kecil dalam membuat tag html. Walaupun toh hasilnya dibrowser sama saja, tetapi web anda menjadi tidak standard. Ini contoh XHTML yang benar: 
<table width="100%">
<tr><td>Contoh Teks</td></tr>
</table>

Semua tag harus terstruktur dengan baik

Setiap tag yang dibuka harus ditutup dan harus terstruktur dengan baik dan benar. Perhatikan contoh yang salah ini: 
<p><b>Ini Contoh Text</p></b>
Oke anda tau kesalahannya? ya <b> yang dibuka didalam <p> tetapi malah yang ditutup </p> duluan. Yang benar adalah: 
<p><b>Ini Contoh Text</b></p>
Contoh lagi yang salah: 
<p>Paragraf 1 
<p>Paragraf 2
Apa kesalahannya? ya, <p> tidak ditutup. Ini yang benar: 
<p>Paragraf 1</p> 
<p>Paragraf 2</p>

Standalone Tag yang benar

Jika kita biasanya menulis <br> maka didalam XHTML yang benar adalah <br />. Demikian juga dengan <hr> yang benar <hr />. Ada lagi tag yaitu <img>, <input> yang benar adalah <img />, <input />

Jangan lupa tanda petik untuk atribut

Kebiasaan buruk lainnya adalah tidak memberikan tanda petik untuk atribut. Perhatikan contoh berikut ini: 
<table width=100% cellpadding=2 cellspacing=3>
<tr><td>Contoh Teks</td></tr>
</table>
Seharusnya yang benar adalah: 
<table width="100%" cellpadding="2" cellspacing="3">
<tr><td>Contoh Teks</td></tr>
</table>

Menyingkat atribut = Salah!!

Anda pernah menyingkat atribut? mungkin anda tidak menyadarinya, coba perhatikan contoh berikut: 
<input type="radio" checked>
<input type="text" readonly>
Jadi bagaimana yang benar? mudah, perhatikan contoh yang benar: 
<input type="radio" checked="checked">
<input type="text" readonly="readonly">

Valid kah kode XHTML anda?

Jika anda sudah mengubah semua kode HTML menjadi XHTML, sekarang saatnya anda untuk mengetes apakah kode XHTML anda valid, bagaimana caranya? Kunjungi saja http://validator.w3.org yang merupakan validator resmi dari W3C. Jika tidak terdapat error dalam website anda, selamat website anda sudah standard, dan anda benar-benar memperhatikan website anda dan pengunjung website anda. 

 

Memasang CSS

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:
Tanpa CSS:


<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1><font face="Verdana">Belajar CSS</font></h1>
</body>
</html>

<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>

<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<font class="title">Hay..</font>
<p>Saya mau belajar CSS, ini kode CSS saya yang pertama</p>
<font class="thank">Terimakasih</font>
</body>
</html>

<h1 style="font-family: 'Times New Roman', Times, serif">Serif
font</h1> 
 
 

Unordered List

<ul> dan <ol>

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <i>List 3</li>
</ul> 

menjadi

  • List 1
  • List 2
    • List 3


<ol>
  <li>List 1</li>
  <li>List 2</li>
  <i>List 3</li>
</ol> 


menjadi

  1. List 1
  2. List 2
    3. List 3




<style type="text/css" media="all">
ul {
    margin-left: 2;
    padding-left: 2;
    display: inline;
    border: none;
    }
ul li {
    margin-left: 2;
    padding-left: 2px;
    border: none;
    list-style: none;
    display: inline;
    }
</style>
<ul>
    <li><a href="#">Home</a>
    <ul>
        <li>» <a href="#">Artikel</a>
        <ul>
            <li>» <a href="#">CSS</a>
            <ul>
                <li>» Membuat Menu</li>
            </ul></li>
        </ul></li>
    </ul></li>
</ul>

 menjadi

  • Home» Artikel» CSS» Membuat Menu

  

 

Membuat Form yang teratur tanpa menggunakan Table

 <style type="text/css" media="all">@import "style.css";</style>
<form method="post" action="#">
<p>
<label for="posnama">Nama Anda:</label> <input type="text" name="nama"
class="textbox" id="posnama" size="30" /><br />
<label for="pospesan">Komentar Anda:</label> <textarea name="komentar" cols="50"
rows="10" class="textarea" id="pospesan"></textarea><br />
<br /><br />
<input type="submit" name="submit" value="Kirim Komentar" class="buttonsubmit"
/>
</p>
</form>

 

menjadi



         

        komentar


Membuat Pop Up menu menggunakan CSS tanpa Javascript

Memanfaatkan display dan hove

menjadi

 

 <style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}

#menu:hover, #menu:hover ul {
display:block;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>

menjadi


 

Mengubah gambar pada mouse hover dengan menggunakan CSS

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mouse Hover hanya dengan CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Mouse Hover, CSS" />
<meta name="Description" content="Mouse Hover hanya dengan CSS" />
<style type="text/css" media="all">
a.tombol {
border:0;
display: block;
width: 107px;
height: 31px;
background: url(http://th736.photobucket.com/albums/xx4/mariamanta0/th_thumb_up_48.png) no-repeat;
text-decoration: none;
}
a.tombol:hover {
background-position: 0 -31px;
}
</style>
</head>
<body>
<a href="http://www.dhimasronggobramantyo.com" class="tombol"></a>
</body>
</html>


Diposting oleh unks di 6/12/2011 11:58:00 PM

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)