Berita:

Sudah daftar tapi belum bisa masuk log? Aktifkan dulu akunmu. Lihat keterangan lebih lanjut di New Party.

Main Menu

Buat Web yuk! (XHTML + CSS)

Dimulai oleh Èxsharaèn, 15 Mei 2008, 07:37:20

« sebelumnya - berikutnya »

0 Anggota dan 1 Pengunjung sedang melihat topik ini.

Èxsharaèn

Oke! Penasaran ingin bikin Web sendiri? Bingung ketika ingin mengkustomisasi halaman profil Friendster karena tidak tahu HTML dan CSS? Sekarang saatnya untuk belajar! Jangan khawatir, XHTML dan CSS itu tidak seseram namanya kok, bahkan kalau sudah tahu sedikit tentang mereka berdua, kalian bisa memulai perjalanan menguasai Internet.

Sebelumnya, siapkan hal-hal berikut:

1. Editor teks. Paling sederhana adalah Notepad, paling aku anjurkan adalah Notepad++. Jangan gunakan Microsoft Word karena standarnya beda.

Yup, itu saja! Hal-hal berikut opsional sekali:

2. Perangkat lunak manajemen situs. Yang paling populer adalah Adobe (dulu Macromedia) Dreamweaver dan Microsoft FrontPage.

3. Berbagai perambah populer. Semakin banyak semakin baik. Usahakan versinya bukan yang terbaru, tapi jangan terlalu dirisaukan kalau kita punyanya yang terbaru (dan memang dianjurkan begitu kan?). Yang aku anjurkan saat ini adalah Internet Explorer, Opera, Firefox, dan Safari.

Yang sudah mahir XHTML dan CSS bisa lompat ke artikel Buat web yuk! berikutnya yang akan membahas server-side scripting dengan PHP (artikelnya belum dibuat, sabar yaa...).

Yuk mulai!
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Sebelumnya, apa sih XHTML itu? Apa bedanya dengan HTML (bagi yang sudah pernah belajar)?

Well, XHTML adalah EXtensible Hyper-Text Markup Language. Tidak perlu diterjemahkan, tapi intinya XHTML adalah HTML yang diperluas. Nah, HTML itu sendiri, dalam kalimat paling sederhana, adalah bahasa yang digunakan untuk membangun sebuah halaman Web. Halaman HTML paling sederhana berbentuk seperti ini:

<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>


HTML dan XHTML termasuk CSS dikelola oleh lembaga nirlaba internasional W3C (World Wide Web Consortium, www.w3c.org). Versi HTML terakhir adalah 4, dan menurut isu yang beredar HTML 5 sedang disusun.

Itu saja mengenai XHTML. Mengenai istilah, sebuah tag adalah apapun yang berada di dalam tanda kurung sudut <>. Jadi, pada contoh di atas, tag yang ada adalah html, head, title, body, p. Tag biasanya berpasangan, namun ada yang berdiri tunggal, contohnya img.

Nah, CSS apa lagi? CSS adalah Cascading Style Sheet. Sesuai namanya, CSS digunakan untuk memberi style pada sebuah halaman Web. Ini dilakukan karena sebelumnya styling dilakukan di halaman HTML-nya juga, dan mulai timbul kesulitan-kesulitan saat misalnya harus mengubah warna sebuah header di seluruh situs, selain membuat halaman HTML-nya menjadi tidak terstruktur dengan jelas. Contoh CSS adalah seperti berikut.

p {
text-align: center;
color: #00FF00;
}
div .menu {
font-weight: bold;
color: #FFFF00;
}
td #form {
vertical-align: top;
}


Jangan khawatir kalau kalian masih bingung cara membaca CSS itu, kita akan ulas lebih dalam setelah XHTML dasar terpenuhi.

Nah, setelah tahu dasarnya, bagaimana membuat sebuah halaman Web menggunakan XHTML?
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Waduh, apa ini? Apa XHTML punya beberapa jenis? Sayangnya, jawabnya adalah ya. XHTML terdiri dari 3 jenis:

1. Strict XHTML
XHTML ini paling "mengerikan" karena aturannya ketat sekali. Semua tag yang mengatur style tidak boleh ada, dan dokumen itu tidak boleh menggunakan frame. Ada beberapa lagi aturan yang jika disatukan bisa menjadi mimpi buruk semua pembuat Web; untungnya W3C memberikan alat validator di http://validator.w3.org untuk mengecek dokumen XHTML (dan CSS) kita. Beberapa program manajemen situs seperti Adobe Dreamweaver juga punya fasilitas ini.

2. Transitional XHTML
XHTML ini lebih baik, karena beberapa kesalahan yang tidak ditoleransi Strict XHTML masih diterima oleh Transitional XHTML. Namun, XHTML ini tidak menganjurkan penggunaan tag yang mengatur style dan penggunaan frame. Versi XHTML ini dibuat untuk memfasilitasi orang yang berpindah dari HTML ke XHTML.

Lha terus kalau masih perlu frame, gimana dong?

3. Frameset XHTML
Ini jawabannya. XHTML ini hanya digunakan kalau kebetulan kita memerlukan frame, walaupun penggunaan frame sudah mulai jarang.

Supaya tidak bingung, kita akan ambil XHTML termudah, yaitu Transitional XHTML.
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

#3
Nah, setelah tahu jenis-jenisnya, saatnya membuat dokumen XHTML. Struktur dokumen XHTML, apapun jenisnya, adalah:

1. DTD (Document Type Declaration)
Ini diletakkan di baris teratas dokumen. Fungsinya adalah memberi tahu perambah kita jenis dokumen yang kita buat.

2. Head
Head digunakan untuk memberi informasi tambahan tentang dokumen XHTML kita, misalnya judul, keyword, dll.
Di XHTML, semua dokumen wajib punya judul.

3. Body
Di sinilah isi dokumen XHTML kita berada.

Struktur fisiknya seperti ini:

<?xml version="1.0" encoding="utf-8" ?> --> opsional
<!DOCTYPE (DTD)>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Judul dokumen di sini</title>
</head>
<body>
</body>
</html>


DTD tergantung tipe XHTML yang kita gunakan:

Strict XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Transitional XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Frameset XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Mau tidak mau harus dihapalkan... namun, kalau menggunakan Adobe Dreamweaver misalnya, struktur di atas otomatis dibuatkan.

Nah, baris ini:
<?xml version="1.0" encoding="utf-8" ?>
menandakan kalau dokumen kita adalah XML (XHTML memang mengadopsi XML). Bisa diabaikan kalau tidak mau repot. Encoding perlu diperhatikan kalau dokumen kita mengandung karakter non-Inggris. Definisi encoding bisa juga diletakkan pada tag meta di dalam head:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Yang umum dipakai sekarang adalah UTF-8 yang mendukung hampir seluruh bahasa di dunia.

Ribet? Ya memang begitu, jadi yang di atas dihapalkan saja (atau gunakan saja Adobe Dreamweaver). Selanjutnya, kita akan menilik aturan-aturan dasar dalam XHTML yang mungkin tidak ada di HTML.
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Nah, XHTML aturannya lebih ketat dari HTML. Apa saja itu?

1. Dokumen XHTML harus memiliki satu dan hanya satu tag HTML.
Pada HTML, tag html bahkan bisa diabaikan tanpa membuat dokumen itu menjadi tidak terbaca. Pada XHTML, ini tidak diizinkan.

2. Tag, termasuk atribut, harus ditulis dengan huruf kecil.
Pada HTML, <HTML> <html> <HtMl> dibenarkan. Pada XHTML, hanya <html> yang dibenarkan.
Atribut adalah opsi tambahan yang bisa dimiliki oleh sebuah tag. Misalkan, tag img memiliki atribut src untuk mendefinisikan URL gambar. Penulisan yang benar pada XHTML adalah <img src="gambarku.jpg" />.

3. Semua tag harus berpasangan.
Pada HTML, tag penutup bisa diabaikan (jadi <p>Hello World! diizinkan). Pada XHTML, itu tidak boleh terjadi (yang benar <p>Hello World!</p>.
Lha bagaimana dengan tag yang memang tidak punya pasangan (misal img, br, hr)? Pada XHTML, tag ini ditutup dengan spasi diikuti tanda /. Contoh: <img />, <br />, <hr />.

4. Semua tag harus berpasangan dengan benar.
Lah apa lagi ini? Ini sering terjadi pada tag yang punya anak di dalamnya (nested tag). Contoh:

<p>Ini paragraf yang <strong>punya teks dicetak tebal</strong>. Asyik kan?</p>

Di situ, tag p punya anak strong. Tag strong harus ditutup lebih dahulu sebelum tag p ditutup. Jadi, yang berikut ini salah:

<p>Ini paragraf yang <strong>punya teks dicetak tebal. Asyik kan?</p></strong>

Untuk mengatasi aturan nomor 4, biasakan begitu membuka tag, langsung tutup saat itu juga. Jangan tulis isinya dulu. Contoh, untuk menulis contoh di atas, biasakan seperti ini:
1. <p></p>
2. <p>Ini paragraf yang <strong></strong></p>
3. <p>Ini paragraf yang <strong>punya teks dicetak tebal</strong>. Asyik kan?</p>


Kalau anaknya banyak sekali (misalkan saat membuat tabel), biasakan memberi indentasi yang cukup untuk tiap anak. Contoh:

<table>
  <tr>
    <td></td>
    <td></td>
    <td>
      <img src="gambarku.jpg" />
    </td>
  </tr>
</table>


Aturan nomor 3 dan 4 aku kira sama dengan BBCode :D

5. Semua atribut harus memiliki nilai.
Pada HTML, ada beberapa atribut yang bisa tidak diberi nilai, misalkan <input type="checkbox" checked />. Pada XHTML, ini tidak diizinkan. Untuk atribut yang disingkat (minimized attribute) seperti checked, beri nilai nama yang sama dengan atributnya. Jadi, yang benar adalah <input type="checkbox" checked="checked" />.

6. Semua nilai atribut harus diapit tanda kutip ganda "".
Pada HTML, nilai atribut boleh diapit tanda kutip tunggal '' atau bahkan tidak sama sekali, misalkan <img src='gambarku.jpg' /> atau <img src=gambarku.jpg />. Di XHTML, yang benar hanya <img src="gambarku.jpg" />.

7. Gunakan escape character.
Escape character adalah karakter khusus yang disiapkan untuk kasus tertentu. Lihat kan tanda "<" dipakai untuk membuka tag? Lha kalau mau menuliskan tanda itu gimana? Gunakan escape character &lt;. Ini akan kita bahas lebih jauh nanti.

Fyuh... banyak juga yah aturannya... Jangan khawatir, pada awalnya mungkin aturan-aturan ini dirasa memberatkan. Pelan-pelan biasakan diri pada aturan-aturan tersebut.

Sekarang, kita siap membuat dokumen XHTML pertama kita!
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

#5
Seperti biasa, pertama kali kita hanya akan menulis sebuah dokumen sederhana yang berisikan "Hello World!". Sebelumnya, kita sepakat satu hal. Kode-kode yang dituliskan setelah ini, kecuali aku tuliskan lengkap pada kasus tertentu, adalah kode XHTML yang diletakkan di dalam tag <body>. Gunakan saja struktur Transitional XHTML yang sudah disediakan di atas.

Atau, kalau malas scroll lagi, ini kerangka dasar dokumen Transitional XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Judul dokumen di sini</title>
</head>
<body>
</body>
</html>


Siap? Ini kodenya:

<h1>Hello World!</h1>
<p>Ini adalah paragraf pertamaku.</p>
<hr />
<p>Ini paragraf kedua. Teksnya lebih bervariasi, karena ada yang <strong>dicetak tebal</strong>, <em>dicetak miring</em>, <span style="text-decoration:underline;">digaris bawah</span>. Asyik ya?</p>
<p>Pergi ke halaman lain ah! <a href="hal2.html">Klik di sini (awas error!)</a>.</p>


Simpan dengan nama apa saja, yang penting berakhiran .html. Coba buka di perambah kesukaan. Hasilnya mungkin mirip seperti berikut:

Kutip

Hello World!

Ini adalah paragraf pertamaku.


Ini paragraf kedua. Teksnya lebih bervariasi, karena ada yang dicetak tebal, dicetak miring, digaris bawah. Asyik ya?

Pergi ke halaman lain ah! Klik di sini (awas error!).


Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

#6
Gimana, bisa? Usahakan jangan hanya sekedar salin tempel yah (kecuali untuk struktur dokumen), supaya terlatih taat pada aturan dan menghapalkan tag XHTML (percaya deh, kalau hapal, bikin dan edit Web tanpa bantuan Dreamweaver bukan hal yang mustahil lagi).

Oke! Berikut tag-tag yang muncul pada contoh pertama kita.

<h1> adalah header level pertama (tahu header yah?). Total ada 6 level header, yaitu <h1> hingga <h6>. Style-nya bisa diatur lewat atribut style (namun tidak dianjurkan) atau CSS. Sementara kita hilangkan dulu pikiran untuk mengatur style dokumen kita (puas dulu yah hitam putih...).

<p>, seperti yang akan sering kita pakai, menandakan paragraf baru.

<hr /> adalah horizontal rule.

<strong> dan <em> berturut-turut digunakan untuk mencetak tebal dan memiringkan teks. Lho? Di HTML dulu bukannya itu <b> dan <i>? Memang, namun karena XHTML berusaha sebaik mungkin membuang styling dari dokumennya (ke CSS), kedua tag itu sudah tidak disarankan. Selain itu, menggunakan tag <strong> dan <em> lebih ramah pada mesin pembaca teks (teks yang diapit tag <strong> akan dibaca dengan kuat sementara <em> diberi penekanan, sesuai dengan namanya: emphasize).

<span> digunakan kalau pada suatu blok kita ingin menambahkan blok baru (istilahnya inline block). Biasanya dipakai kalau kita ingin mengganti style suatu teks tertentu saja. Atribut yang dipakai adalah style, dan nilainya sama persis dengan yang ada di CSS. Kita bahas ini saat membahas CSS. Ingat, tag <u> pada HTML sudah dibuang di XHTML.

<a>, anchor, digunakan untuk membuat hyperlink. Atribut yang diperlukan adalah href, yang berisi URL halaman yang dituju. Kalau masih berada pada satu map, tuliskan langsung namanya, lengkap dengan ekstensinya. Kalau tidak berada pada satu map yang sama, ada dua cara:

1. Relative path.
Maksudnya, kita berikan arah pada atribut href, relatif terhadap letak dokumen kita sekarang. Misalkan begini. Berkas index.html ada di map teratas suatu situs sementara berkas index2.html ada di map mapku. Maka, letak berkas index2.html relatif terhadap index.html adalah "mapku/index2.html", sementara letak berkas index.html relatif terhadap index2.html adalah "../index.html". Tanda .. digunakan setiap kali kita naik map, jadi andaikan perlu naik map dua kali, tuliskan ../../berkasku.html.

2. Absolute path.
Arahan ini selalu dihitung dari map teratas (root folder). Jadi, pada contoh di atas, lokasi absolut berkas index.html adalah "/index.html" sementara lokasi absolut berkas index2.html adalah "/mapku/index2.html".

Nah, selain berpindah ke halaman lain, tag <a> juga bisa dipakai untuk berpindah ke lokasi lain di halaman yang sama. Tekniknya adalah sebagai berikut:

1. Mendefinisikan dulu penanda lokasi, dengan cara:
<a name="lokasi">Teks di sini (boleh juga dikosongkan)</a>

2. Membuat tautan (hyperlink) ke lokasi tersebut, dengan cara:
<a href="#lokasi">Teks di sini...</a>
Jika href diisi "#", itu tandanya tautan kita akan mengarah ke bagian teratas halaman kita.

Teknik ini biasa dipakai untuk membuat daftar isi (dan aku gunakan untuk membuat catatan kaki di RPN OJ forum ini). Contohnya:

<a name="contents"></a><h1>Daftar Isi</h1>
<p><a href="#1">Pendahuluan</a><br />
<a href="#2">Dasar Teori</a></p>
<h1><a name="1">Pendahuluan</a></h1>
<p>Di sini adalah bab pendahuluan. Isinya mungkin macam-macam dan biasanya membosankan, namun perlu dibaca agar pembaca dapat memahami apa tujuan penulisan buku ini. Biasanya berisi latar belakang penulisan, tujuan penulisan, rumusah masalah, penyelesaian masalah, metode-metode yang digunakan, dan sistematika penulisan.</p>
<p><a href="#contents">Kembali ke atas.</a></p>
<h1><a name="2">Dasar Teori</a></h1>
<p>Di sini dijabarkan dasar teori yang digunakan untuk penelitian. Biasanya hanya salin tempel dari punya teman saking seringnya dasar teori yang sama digunakan.</p>
<p><a href="#contents">Kembali ke atas.</a></p>


Hasilnya:

Kutip

Daftar Isi

Pendahuluan
Dasar Teori

Pendahuluan

Di sini adalah bab pendahuluan. Isinya mungkin macam-macam dan biasanya membosankan, namun perlu dibaca agar pembaca dapat memahami apa tujuan penulisan buku ini. Biasanya berisi latar belakang penulisan, tujuan penulisan, rumusah masalah, penyelesaian masalah, metode-metode yang digunakan, dan sistematika penulisan.

Kembali ke atas.

Dasar Teori

Di sini dijabarkan dasar teori yang digunakan untuk penelitian. Biasanya hanya salin tempel dari punya teman saking seringnya dasar teori yang sama digunakan.

Kembali ke atas.


Bagaimana? Mudah kan?
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Stash

Hmmm... sampai sekarang sih masih mudah diikuti. Lanjut!!!! Tapi aku mau mengingatkan dulu, aku pasti gak akan hafal kodenya yang berjibun itu :D
Twitter ID : stefano1003
Facebook : http://www.facebook.com/stefano.ariestasia
Google+ : stefano.ariestasia
Blog : http://catatanstefano.wordpress.com

Èxsharaèn

#8
XHTML nggak harus dihapal sih, tapi kode-kode yang aku berikan ini sudah yang paling sering dipakai. Nanti otomatis hapal sendiri :)

Ini mungkin yang paling seru untuk penggemar pengganti tampilan FS, yaitu tag untuk menampilkan gambar. Simpel saja, namanya <img>. Atribut yang penting adalah:

src: URL gambar kita berada (source). Boleh pakai relative path atau absolute path. Wajib diisi.

alt: Teks alternatif (alternate) kalau kebetulan gambar kita tidak bisa diakses atau pengunjung mematikan gambar. Pada beberapa perambah, teks ini akan keluar saat kita menghentikan tetikus di atas gambar.

Oh ya, ini termasuk tag yang tidak punya pasangan, jadi jangan lupa cara nutupnya.

Contoh!

<img src="http://forum.rpgfantasy.web.id/Smileys/Lots_O_Smileys/spam4.gif" alt="No spam please!!!" />

hasilnya

Kutip
No spam please!!!
.

Mudah kan?
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Sori...

Errata

Di atas, tertulis:

Kutip dari: Èxsharaèn pada 15 Mei 2008, 09:49:25
2. Absolute path.
Arahan ini selalu dihitung dari map teratas (root folder). Jadi, pada contoh di atas, lokasi absolut berkas index.html adalah "/index.html" sementara lokasi absolut berkas index2.html adalah "/mapku/index2.html".

Ini masih termasuk relative path, yaitu relatif terhadap map teratas. Yang benar adalah:

2. Absolute path.
Arahan ini adalah URL penuh sebuah berkas HTML (http://domain.tld/folder/file.html). Jadi, misalkan, berkas index.html dan index2.html di contoh sebelumnya ada di forum ini. Absolute path-nya adalah:
http://forum.rpgfantasy.web.id/index.html
http://forum.rpgfantasy.web.id/mapku/index2.html

Tolong tautannya jangan diklik karena pasti error ;D
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Nah, yang satu ini mungkin berguna juga untuk bikin tabel di forum ini, walaupun harus pakai BBCode. Sekalian dilihat toolbar di atas yah untuk ilustrasi tabel.

Untuk membuat tabel, tag yang diperlukan adalah <table>. Di dalam tag inilah kita akan menyusun tabel kita. Caranya:

1. Buat baris dulu (row). Dengan ini, tag yang diperlukan, sudah bisa tebak? <tr>.

2. Untuk tiap baris, barulah kita buat tiap kolom atau tiap sel. Tag yang diperlukan adalah... <td>.

Yang perlu diingat, jumlah kolom untuk seluruh baris harus sama, kalau tidak tabelnya akan aneh nanti.

Yuk kita coba! Kita buat tabel yang sederhana saja, tabel yang terdiri dari dua baris dan dua kolom. Kodenya:

<table>
  <tr>
    <td>Baris 1 kolom a</td>
    <td>Baris 1 kolom b</td>
  </tr>
  <tr>
    <td>Baris 2 kolom a</td>
    <td>Baris 2 kolom b</td>
  </tr>
</table>


(Note: Ini bisa dicoba dengan BBCode. Gantikan <> dengan [].)

Hasilnya:

Baris 1 kolom a Baris 1 kolom b
Baris 2 kolom a Baris 2 kolom b


Aduh, nggak terlihat jelas selnya... Ayo kita tambah border. Untuk membuat border, gunakan atribut border. Nilainya adalah angka positif, dalam pixel. Untuk BBCode, sayangnya, trik ini tidak berhasil.

<table border="1">
  <tr>
    <td>Baris 1 kolom a</td>
    <td>Baris 1 kolom b</td>
  </tr>
  <tr>
    <td>Baris 2 kolom a</td>
    <td>Baris 2 kolom b</td>
  </tr>
</table>

menghasilkan
Baris 1 kolom a Baris 1 kolom b
Baris 2 kolom a Baris 2 kolom b
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Ada beberapa tabel yang nggak standar seperti yang kita buat barusan, misalnya seperti ini:

ProvinsiJumlah penduduk (juta)
19902000
Jawa Timur812


Kodenya seperti ini:

<table border="1">
  <tr><th rowspan="2">Provinsi</th><th colspan="2">Jumlah penduduk (juta)</th></tr>
  <tr><th>1990</th><th>2000</th></tr>
  <tr><td>Jawa Timur</td><td>8</td><td>12</td></tr>
</table>


Bingung? Ayo kita tilik satu per satu.

Tag <th> maksudnya adalah table header. Ini posisinya sama dengan tag <td>, jadi menggunakan tag <th> dianggap sebagai satu kolom.

Atribut rowspan dan colspan masing-masing digunakan untuk menggabungkan beberapa sel menjadi satu. Kalau rowspan berarti menggabungkan beberapa baris (sesuai namanya, row span), kalau colspan berarti menggabungkan beberapa kolom.

Masih bingung? Coba kita pakai tabel lain yang lebih sederhana.

Untuk rowspan:
<table border="1">
  <tr><th rowspan="2">Baris 1 kolom 1 dan baris 2 kolom 1 digabung</th><td>Baris 1 kolom 2</td></tr>
  <tr><td>Baris 2 kolom 2</td></tr>
</table>

menghasilkan
Baris 1 kolom 1 dan baris 2 kolom 1 digabungBaris 1 kolom 2
Baris 2 kolom 2


Untuk colspan:
<table border="1">
  <tr><td colspan="2">Baris 1 kolom 1 dan 2 digabung</td></tr>
  <tr><td>Baris 2 kolom 1</td><td>Baris 2 kolom 2</td></tr>
</table>

hasilnya:
Baris 1 kolom 1 dan 2 digabung
Baris 2 kolom 1Baris 2 kolom 2


Usahakan tiap sel ada isinya. Misalkan saja ada satu sel yang tidak terisi:
<table>
  <tr>
    <td></td>
    <td>Baris 1 kolom b</td>
  </tr>
  <tr>
    <td>Baris 2 kolom a</td>
    <td>Baris 2 kolom b</td>
  </tr>
</table>

akan menghasilkan tabel yang agak aneh:
Baris 1 kolom b
Baris 2 kolom a Baris 2 kolom b


Di beberapa perambah, sel pertama bisa diisi border yang meluas menutupi sel kosong tersebut. Untuk menghindari hal ini, berikan isi pada sel kosong tersebut. Gunakan saja &nbsp; alias non-breaking space.

Wah, apa lagi tuh &nbsp;? Apa ini termasuk tag HTML?
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Pada XHTML, ada beberapa karakter yang tidak bisa dituliskan begitu saja. Misal aku mau menulis paragraf berikut:

KutipPada HTML, tag <p> digunakan untuk membuat paragraf baru.

Apa HTML-nya seperti ini?

<p>Pada HTML, tag <p> digunakan untuk membuat paragraf baru.</p>

Hasilnya:

Kutip

Pada HTML, tag

digunakan untuk membuat paragraf baru.


Lah, ke mana "<p>" kita? Kok diterjemahkan sebagai tag baru?

Untuk alasan itulah, HTML dan generasi penerusnya memiliki special character. Karakter khusus ini ditandai dengan tanda dan &, diikuti nama atau kode karakter, diakhiri tanda titik koma ;. Contoh:

< dalam bahasa Inggris adalah less than, maka namanya &lt;.
> dalam bahasa Inggris adalah greater than, jadi namanya &gt;.

HTML kita akan menjadi seperti berikut:

<p>Pada HTML, tag &lt;p&gt; digunakan untuk membuat paragraf baru.</p>

Beberapa karakter khusus yang paling sering digunakan adalah:

&copy; (copyright)
©

&nbsp; (non-breaking space)
 
(dijamin nggak kelihatan, tapi ada spasi tambahan di baris ini)
&mdash; (em-dash)


&ndash; (en-dash)


&amp; (ampersand, tanda &)
&


Karakter non-Inggris juga ditulis dengan cara ini. Namaku, Èxsharaèn, akan dikodekan dengan &Egrave;xshara&egrave;n.
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

#13
Nah, aku rasa seluruh tag itu sekarang sudah bisa digunakan untuk membuat sebuah halaman Web yang komplit. Misalkan ada sesuatu yang lupa terulas di atas, silakan tanyakan langsung. Berikutnya, kita akan tinggalkan sejenak XHTML untuk masuk ke materi yang sudah ditunggu-tunggu: membuat halaman Web kita menjadi tambah hidup dengan styling. Yup, kita siap melangkah ke CSS!

CSS sejatinya tidak susah, misalkan dengan bantuan Adobe Dreamweaver. Namun, ada kalanya kita tidak punya akses ke Dreamweaver, misalkan lagi di warnet, dan kita ingin mengganti style situs kita. Jangan khawatir, dengan sedikit pengetahuan tentang CSS, ditambah referensi pada W3 Schools, kita bisa melakukan styling apa saja pada situs kita. Yup, CSS agak banyak, jadi mungkin untuk awalnya ngintip saja di referensinya (aku sendiri sampai sekarang nggak terlalu hapal CSS). Kita akan langsung gunakan CSS2.

Sebenarnya ada 3 cara untuk melakukan styling dalam XHTML. Urut dari prioritas tertinggi (yang akan menumpuk seluruh styling dengan dirinya), ketiganya adalah sebagai berikut.

1. Inline styling
Ini dilakukan dengan bantuan atribut style pada hampir seluruh tag HTML. Contoh:

<p style="direction:rtl;">Teks ini akan dicetak dari kanan ke kiri. Berguna untuk menulis Arab misalnya.</p>
menghasilkan

Teks ini akan dicetak dari kanan ke kiri. Berguna untuk menulis Arab misalnya.



2. Internal style sheet
Ini dilakukan pada bagian head halaman XHTML kita dengan menggunakan tag <style>. Contoh:

<head>
<style>
p {
color: red;
text-align: center;
}
</style>
<head>
<body>
<p>Halo! Teks ini akan dicetak berwarna merah di tengah halaman.</p>
<p>Seluruh paragraf pada halaman ini akan bernasib sama, kecuali kita mendefinisikan inline style baru, seperti yang terjadi pada paragraf berikut.</p>
<p style="text-align: justify; color:black;">Paragraf ini tidak terpengaruh inline style sheet.</p>
</body>


Hasilnya adalah:

Kutip

Halo! Teks ini akan dicetak berwarna merah di tengah halaman.

Seluruh paragraf pada halaman ini akan bernasib sama, kecuali kita mendefinisikan inline style baru, seperti yang terjadi pada paragraf berikut.

Paragraf ini tidak terpengaruh inline style sheet.


3. External style sheet

Ini dilakukan dengan memberi tautan pada berkas XHTML kita ke berkas CSS terpisah. Dengan cara ini, seluruh halaman yang memiliki tautan ke berkas CSS kita akan otomatis diperbarui jika berkas CSS-nya diperbarui. Berkas CSS eksternal ditandai dengan ekstensi .css.

Pada berkas XHTML kita, berikan tautan pada bagian head dengan tag <link>:

<link rel="stylesheet" type="text/css" href="berkas_cssku.css" />

Nah, dari tadi sebenarnya kita sudah mengetahui format CSS kita. Formatnya adalah:

selector {property: value;}

selector adalah tag HTML yang ingin kita beri style. property adalah atributnya yang ingin kita ganti (misalnya warna, jenis huruf, dsb.), dan value tentu saja adalah nilainya.

Dengan ini, kita siap bermain-main dengan style halaman kita. Untuk selanjutnya, kita akan gunakan cara ketiga, yaitu external style sheet. Sejauh artikel ini nanti, aku akan asumsikan nama berkas CSS-nya adalah mystyle.css, jadi jangan lupa tag berikut di head halaman XHTML-nya:

<link rel="stylesheet" type="text/css" href="mystyle.css" />
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Note: Berhubung kodenya cukup pendek, aku gunakan cara pertama saja ya :)

Bosan dengan tampilan standar teks kita selama ini yang hanya Times New Roman? Atau ukurannya kurang besar, atau bahkan kebesaran? Mau bikin tulisan warna-warni? Perlu garis bawah?

CSS untuk font dan segala formatnya ada di sini. Berikut selector yang paling sering digunakan.

font-family
Di sinilah nama font yang ingin kita gunakan dispesifikasikan. Namun, hati-hati, tidak semua orang punya font yang sama, jadi usahakan sebisa mungkin gunakan font yang umum, misalnya Arial, Verdana, Georgia, Times New Roman, Comic Sans MS, dan sebagainya.

Kalau ingin menggunakan lebih dari satu font, pisahkan dengan tanda koma. Nanti sistem si pengunjung akan mencari font mana yang tersedia, jadi andaikan ingin menggunakan font yang tidak standar, usahakan menambahkan font standar yang akan digunakan andaikan saja ternyata font itu tidak ada di tempat pengunjung situs kita. Ingat untuk mengapit seluruh nilai dengan tanda kutip ganda (kecuali kalau menggunakan style pertama, tidak perlu tanda kutip).

Contoh:
<p style="font-family: Arial, Verdana;">Teks ini ditulis dengan font Arial. Kalau saja ada yang tidak punya Arial, Verdana akan digunakan.</p>
menghasilkan
Kutip

Teks ini ditulis dengan font Arial. Kalau saja ada yang tidak punya Arial, Verdana akan digunakan.


Pilihan font terakhir yang akan digunakan jika seluruh font yang kita daftarkan ternyata tidak ada juga (ingat, tidak semua orang pakai Windows :)) adalah salah satu dari dua kata kunci berikut: serif atau sans-serif. serif adalah seluruh font yang punya ujung berornamen di beberapa hurufnya. Ambil contoh Times New Roman. Sebaliknya, sans-serif (sans berarti tidak) tidak punya ornamen, contohnya Arial. Dengan cara ini, teks kita akan aman karena ada satu font yang akan dipilih (serif dasarnya adalah Times New Roman, sans-serif dasarnya Arial; ini ketetapan universal dan tidak bisa diubah), walaupun perambah terkini sebenarnya mampu memilih sendiri font yang akan digunakan andaikan saja kita tetap bandel tidak memberikan kata kunci terakhir (biasanya akan jadi serif, tapi jika font yang namanya mirip ternyata sans-serif, jadilah font kita sans-serif).

font-size
Perlu membesarkan ukuran teks? Gunakan selector ini. Nilainya bisa didefinisikan dalam unit tertentu (nanti akan aku jelaskan lebih lanjut apa saja unit-unitnya, karena ini bisa dipakai untuk nilai ukuran selector yang lain) atau nilai relatif: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Contoh:

<p style="font-size: 24pt;">Teks ini ditulis dengan ukuran 24 point.</p>
<p style="font-size: smaller;">Paragraf ini lebih kecil sedikit dari ukuran normal. <span style="font-size: medium;">Normalnya segini,</span><span style="font-size: 12pt;"> sama dengan 12 point.</span></p>

menghasilkan
Kutip

Teks ini ditulis dengan ukuran 24 point.

Paragraf ini lebih kecil sedikit dari ukuran normal. Normalnya segini, sama dengan 12 point.


Nah, aku break sebentar dari selector font dan style untuk menjelaskan lebih jauh unit-unit yang dipakai di CSS.
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen