HTML dasar dengan style CSS


Dokumen ini adalah terjemahan dari Getting started with HTML dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/MarkUp/Guide/

Penerjemah: Edwin Rene

W3C
HTML lanjutan | Menambahkan sedikit style
Dave Raggett Mengawali dengan HTML

Dave Raggett, direvisi 24 Mei 2005.

Ini adalah sebuah perkenalan singkat menganai bagaimana menulis HTML. Apakah HTML itu? HTML adalah sebuah jenis teks dokumen khusus yang digunakan oleh Web browser untuk mempresentasikan teks dan gambar. Di dalam teks tersebut terdapat tag markup seperti

untuk menandakan awal dari sebuah paragraf, dan

untuk menandakan akhir dari sebuah paragraf. Dokumen HTML sering disebut sebagai “halaman Web”. Browser mengambil halaman Web dari Web server dan karena adanya Internet, halaman tersebut bisa berada di manapun di dunia.

Banyak orang masih menulis HTML secara manual menggunakan perangkat lunak seperti NotePad pada Windows, atau TextEdit pada Mac. Petunjuk ini akan membuat anda membantu anda memahami dan membuatnya sendiri. Dan bila anda tidak ingin mengedit HTML secara manual dan ingin menggunakan HTML editor seperti Netscape Composer, atau W3C Amaya, petunjuk ini akan membuat anda mengerti, cukup untuk membuat anda mampu menggunakan perangkat tersebut lebih baik dan membuat dokumen HTML anda dapat di akses oleh berbagai macam browser. Begitu anda merasa nyaman dengan konsep dasar pembuatan HTML, anda mungkin ingin belajar bagaimana menambahkan style menggunakan CSS, dan lanjut dengan fitur yang dibahas pada halaman saya di HTML lanjutan.

catatan. sebauah cara yang baik untuk belajar ialah dengan melihat bagaimana orang lain menulis halaman HTML mereka sendiri. Untuk melakukan hal ini, click pada menu “View” lalu pada “Source”. Pada beberapa browser, anda perlu mengklik pada menu “File” dan kemudian pada “View Source”. Cobalah pada halaman ini untuk melihat bagaimana saya menerapkan beberapa ide yang saya jelaskan dibawah. Anda akan menyadari bahwa anda mengembangkan kemampuan untuk melihat kesalahan kesalahan yang dibuat karena banyak halaman terlihat bagus sumbernya sebenarnya berantakan!

Untuk pengguna Mac, sebelum anda dapat dapat menyimpan file dengan akhiran (extention) “.html”, anda harus memastikan bahwa dokumen anda di ketik dalam bentuk plain text. Untuk TextEdit, anda dapat membuatnya dengan opsi “Make Plain Text” dari menu “Format”.

Halaman ini akan mengajarkan anda bagaimana:

* mulai dengan sebuah judul
* mulai menambah heading dan paragraf
* menambah emphasis pada teks
* menambah gambar
* menambah link ke halaman lain
* menggunakan berbagai macam list (daftar)

Bila anda mencari hal yang lain, cobalah halaman HTML lanjutan.
Mulai dengan sebuah judul

Tiap dokumen HTML membutuhkan sebuah judul. Anda perlu mengetiknya sebagai berikut:

Dokumen HTML saya yang pertama

Ganti teks tersebut “Dokumen HTML saya yang pertama” sesuai kebutuhan anda. Teks judul tersebut diawali dengan tag pembuka dan diakhiri dengan tag penutup yang sesuai . Judul ini harus ditempatkan diawal dokumen anda.

Untuk mencoba hal ini, ketik hal diatas dalam sebuah teks editor dan simpan file tersebut sebagai “test.html”, dan lihat dengan sebuah web browser. Bila akhiran file tersebut adalah “.html” or “.htm” maka browser akan mengenalinya sebagai HTML. Kebanyakan browser muncul di menunjukkan judul di bagian caption bar dari browser. Dengan hanya sebuah title, browser akan menunjukkan sebuah halaman kosong. Jangan khawatir. Bagian berikut akan menunjukkan bagaimana menambahkan konten yang dapat di lihat.
Menambah heading dan paragraf

Bila anda pernah menggunakan Microsoft Word, anda akan terbiasa dengan style yang ada untuk heading dengan tingkat kepentingan yang berbeda. Pada HTML ada enam tingkatan heading. H1 adalah yang paling penting, H2 lebih sedikit kurang penting, seterusnya hingga H6, yang paling tidak penting.

Berikut adalah cara menambah sebuah heading yang penting:

Sebuah heading yang penting

dan beikut sebuah heading yang kurang begitu penting:

Sebuah heading yang sedikit kurang penting

Setiap paragraf yang anda tulis harus diawali dengan tag

. Tag

merupakan opsi, tidak seperti end tag untuk elemen seperti heading. Sebagai contoh:

Ini adalah paragraf pertama.

Ini adalah paragraf kedua.

Menambahkan sedikit of emphasis

Anda dapat menambahkan tekanan (emphasis) pada satu atau dua buat kata dengan tag , sebagai contoh:

Topic ini adalah topik yang sangat menarik!

Menambahkan perhatian pada halaman dengan gambar – gambar

Gambar-gambar dapat digunakan untuk membuat halaman Web anda berbeda dengan yang lain dan sangat membantu anda dalam menyampaikan pesan anda. Cara mudah untuk menambahkan gambar adalah dengan menggunakan tag . Mari assumsikan bahwa anda memiliki sebuah gambar dengan bernama “peter.jpg” di folder/directory file HTML anda. Gambar tersebut tingginya 200 pixel dan lebar 150 pixel.

Attribut src anda beri nama file gambar tersebut. Width dan height tidak diwajibkan tetapi membantu mempercepat tampilannya di halaman Web anda. Sesuatu masih kurang! Orang yang tidak dapat melihat gambar membutuhkan deskripsi yang mereka bisa baca sebagai penggantinya. Anda bisa menambahkan penjelasan singkat sebagai berikut:

Teman saya Peter

Atribut alt digunakan untuk memberikan deskripsi singkat, dalam hal ini “My friend Peter”. Untuk gambar yang kompleks, anda mungkin perlu menambahkan deskripsi yang lebih panjang. Dengan asumsi bahwa hal ini telah tertulis pada file “peter.html”, anda dapat menambahkan hal berikut menggunakan atribut longdesc:

Teman saya Peter

Anda dapat membuat gambar dengan berbagai cara, sebagai contoh dengan sebuah digital kamera, dengan mengscan sebuah gambar, atau membuatnya dengan menggunakan program untuk menggambar atau melukis. Kebanyakan browser mengerti format gambar GIF dan JPEG, browser baru juga mengerti format gambar PNG. Untuk menghindari waktu yang lama ketika gambar tersebut di download melewati jaringan, anda sebaiknya menghindari penggunaan file gambar yang besar.

Secara umum, JPEG paling baik digunakan untuk photo dan gambar lain yang sejenis, segankan GIF dan PNG baik untuk gambar seni yang melibatkan warna yang datar, garis dan tulisan. Ketiga format mendukung opsi untuk di render secara bertahap (progressive rendering) dimana gambar kasarnya diperlihatkan dahulu lalu secara perlahan di haluskan.
Menambahkan link ke halaman lain.

Apa yang membuat Web sangat efektif adalah kemampuan untuk membuat link dari satu halaman ke halaman yang lain, dan mengikutinya hanya dengan sebuah klik. Sebuah klik dapat membawa anda langsung ke seberang dunia!

Link didefinisikan dengan tag . Mari membuat sebuah link pada file “peter.html” di folder/direktori yang sama dengan file HTML yang sedang anda edit::

Ini adalah link ke halamannya Peter.

Teks antara dan digunakan sebagai keterangan dari link. Adalah hal yang umum bagi keterangan tersebut untuk diberi garis bawah berwarna biru.

Bila file yang anda link adalah direktori asal (parent directory), anda perlu menambahkan “../” sebelumnya, sebagai contoh:

halamannya Mary

Bila file yang dilink adalah sebuah sub direktori, anda perlu memberikan nama dari subdirektori tersebut diikuti sebuah “/” setelahnya, sebagai contoh:

halamannya Sue

Penggunaan relative path memungkinkan anda melink sebuah file dengan pergi naik atau turun direktori sesuai kebutuhan, sebagai contoh”:

halamannya John

Di mana pertama kali akan dicari pada direktori asal, dari sebuah direktori lain bernama “college”, dan kemudian sebuah subdirektori dengan nama “friends” untuk sebuah file dengan nama “john.html”.

Untuk melink ke sebuah halaman atau situs Web lain anda perlu memberikan alamat lengkap Web (umumnya dinamakan URL), sebagai contoh untuk melink ke http://www.w3.org anda perlu menuliskan:

Ini adalah sebuah link menujuW3C.

Anda dapat mengubah sebuah gambar menjadi sebuah link hypertext, sebagai contoh, berikut ini memungkinkan anda untuk mengklik pada logo perusahaan untuk pergi ke halaman utama / depan:

home page

Contoh ini menggunakan “/” untuk menghubungi direktori asal, yang mana adalah home page.
Tiga jenis daftar

HTML mendukung tiga jenis daftar. Jenis yang pertama adalah daftar dengan bullet (bulletted list), atau sering disebut unordered list. Yang menggunakan tag

    dan
  • , sebagai contoh:

    • list item pertama
    • list item kedua
    • list item ketiga

    Catatan bahwa anda perlu mengakhiri daftar dengan tag

, tetapi tag

merupakan opsi dan dapat di hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering juga disebut ordered list. Hal tersebut menggunakan tag

    dan
  1. . Sebagai contoh:

    1. list item pertama
    2. list item kedua
    3. list item ketiga

    Seperti juga bulletted lists, anda perlu mengakhiri daftar dengan tag

, tetapi tag penutup

merupakan opsi dan dapat di hiraukan.

Yang ketiga dan yang terakhir adalah daftar definisi. Daftar ini memungkinkan anda untuk membuat daftar suatu hal dan penjelasannya. Daftar ini diawali dengan sebuah tag

dan diakhiri dengan

Tiap hal diawali dengan sebuah tag

dan tiap penjelasannya diawali dengan sebuah tag
. Sebagai contoh:

hal pertama
penjelasannya
hal kedua
penjelasannya
hal ketiga
penjelasannya

Tag penutup

dan

merupakan opsi dan dapat diabaikan. Perlu dicatat bahwa daftar ini bisa saling disisipkan, satu diantari yang lain. Sebagai contoh:

  1. list item pertama
  2. list item kedua

    • list pertama yang disisipkan
    • list kedua yang disisipkan
  3. list item ketiga

Anda juga dapat menggunakan paragrapf dan heading dsb. untuk daftar hal yang lebih panjang..
HTML memiliki sebuah head dan body

Bila anda menggunakan fitur view source dari web browser anda (lihat menu View atau File) anda dapat melihat struktur dari halaman HTML. Dokumen tersebut biasanya dimulai dengan sebuah perrnyataan versi HTML yang digunakan HTML, dan kemudian diawali dengan sebuah tag dikuti dengan tag dan diakhiri dengan . Tag … berfungsi sebagai sebuah kontainer untuk dokumen tersebut. Tag … mengandung judul, dan informasi style dan script, sementara … mengandung markup dari isi yang terlihat. Berikut adalah sebuah pola yang dapat anda copy dan paste ke text editor untuk menciptakan halaman anda sendiri:

ganti dengan judul dokumen anda

ganti dengan isi dokumen anda

Merapikan markup anda

Sebuah cara yang tepat untuk memperbaiki markup secara otomatis adalah dengan menggunakan HTML Tidy yang juga merapikan markup agar dapat dibaca dengan baik dan lebih mudah di edit. Saya sarankan agar anda menggunakan Tidy pada tiap markup yang anda edit. Tidy sangat efektif untuk membersihkan markup yang dibuat oleh peralatan yang memiliki kebiasaan buruk. Tidy tersedia untuk berbagai macam sistem operasi dari TidyLib Sourceforge site, dan juga telah di integrasikan dengan berbagai macam peralatan mengedit HTML.
Mendapatkan Informasi Lebih Lanjut

Bila anda ingin belajar lebih jauh, saya telah menyiapkan beberapa materi penunjangmengenai HTML lanjutan dan menambahkan sedikit style.

Rekomendasi W3C tentang HTML 4.0 adalah spesifikasi yang sifatnya mutlak untuk HTML. Tetapi, hal tersebut adalah sebuah spesifikasi teknis. Untuk sebuah informasi yang bersifat lebih kurang teknis anda mungkin ingin membeli salah satu dari sekian banyak buku mengenai HTML, sebagai contoh “Raggett on HTML 4”, yang diterbitkan 1998 oleh Addison Wesley. Sekarang XHTML 1.0 adalah Rekomendasi W3C.

Semoga beruntung dan mulailah menulis!

Dave Raggett

Copyright © 1994-2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.

Dokumen ini adalah terjemahan dari More advanced features dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/MarkUp/Guide/Advanced.html

Penerjemah: Edwin Rene

W3C
HTML dasar | Menambahkan sedikit style
Dave Raggett Fitur – Fitur Lanjutan

Dave Raggett.

Setelah menguasai dasarnya, kini saatnya beranjak ke fitur yang tingkat lanjutan. Hal berikut akan mengajarkan anda bagaimana:

* menggunakan line break
* memperkenalkan non-breaking spaces
* menggunakan entiti untuk karakter khusus
* membuat link ke tengah halaman
* menggunakan teks preformatted
* membuat teks mengelilingi gambar
* mendefinisikan daerah yang dapat di klik dalam gambar
* membuat tabel
* menggunakan roll-over dan trik-trik lainnya
* membuat pengunjung website mendengarkan file suara

p.s. Saya menyarankan anda menggunakan HTML Tidy untuk menjaga kebersihan markup dan menjaminnya bersih dari kesalahan.
Bagaimana menggunakan line break

Terkadang, anda ingin menggunakan pemisah baris (line break). Anda melakukan hal ini dengan menggunakan elemen br, sebagai contoh bila anda ingin menuliskan alamat surat:

The Willows
21 Runnymede Avenue
Morton-in-the-marsh
Oxfordshire OX27 3BQ

Elemen br tidak membutuhkan tag penutup. Pada umumnya elemen yang tidak membutuhkan tag penutup dikenal sebagai empty elements.
Bagaimana menyisipkan non-breaking spaces

Browser secara otomatis memotong kalimat dan memulai baris baru agar dapat tetap berada dalam batas (margin). Line break bisa disisipkan dimanapun spasi muncul dalam markup. Terkadang anda ingin mencegah browser memotong kalimat di antara dua kata tertentu. Sebagai contoh antara dua kata dari sebuah merek seperti “Coca Cola”. Caranya adalah dengan menggunakan   sebagai pengganti karakter spasi, sebagai contoh:

Sweetened carbonated beverages, such as Coca Cola,
have attained world-wide popularity.

Adalah kebiasaan yang tidak baik menggunakan non-breaking spaces untuk melakukan indentasi. Daripada melakukan hal tersebut, anda disarankan untuk menggunakan indentasi melalui aturan style.
Bagaimana menggunakan entiti untuk karakter spesial

Untuk peringatan hak cipta (copyright), atau merek dagang (trademarks) pada umumnya orang menambahkan tanda yang sesuai:
Simbol Entiti Contoh
Tanda Copyright © Copyright © 1999 W3C
Registered trademark ® MagiCo ®
Trademark ™ Webfarer™

Catatan HTML 4.0 mendefinisikan ™ untuk tanda trademark tetapi hal ini masih kurang mendapat dukungan seperti halnya ™

Ada beberapa entiti lain yang mungkin berguna bagi anda:
Simbol Entiti Contoh
Kurang dari <
Dan / Ampersand & &
nonbreaking space  
em dash — —
tanda kutip " ”

Lalu, ada beberapa entiti untuk huruf-huruf dan simbol lainnya dalam karakter set Latin-1:
    Ð Ð Ð
¡ ¡ ¡ Ñ Ñ Ñ
¢ ¢ ¢ Ò Ò Ò
£ £ £ Ó Ó Ó
¤ ¤ ¤ Ô Ô Ô
¥ ¥ ¥ Õ Õ Õ
¦ ¦ ¦ Ö Ö Ö
§ § § × × ×
¨ ¨ ¨ Ø Ø Ø
© © © Ù Ù Ù
ª ª ª Ú Ú Ú
« « « Û Û Û
¬ ¬ ¬ Ü Ü Ü
­ ­ ­ Ý Ý Ý
® ® ® Þ Þ Þ
¯ ¯ ¯ ß ß ß
° ° ° à à à
± ± ± á á á
² ² ² â â â
³ ³ ³ ã ã ã
´ ´ ´ ä ä ä
µ µ µ å å å
¶ ¶ ¶ æ æ æ
· · · ç ç ç
¸ ¸ ¸ è è è
¹ ¹ ¹ é é é
º º º ê ê ê
» » » ë ë ë
¼ ¼ ¼ ì ì ì
½ ½ ½ í í í
¾ ¾ ¾ î î î
¿ ¿ ¿ ï ï ï
À À À ð ð ð
Á Á Á ñ ñ ñ
   ò ò ò
à à à ó ó ó
Ä Ä Ä ô ô ô
Å Å Å õ õ õ
Æ Æ Æ ö ö ö
Ç Ç Ç ÷ ÷ ÷
È È È ø ø ø
É É É ù ù ù
Ê Ê Ê ú ú ú
Ë Ë Ë û û û
Ì Ì Ì ü ü ü
Í Í Í ý ý ý
Î Î Î þ þ þ
Ï Ï Ï ÿ ÿ ÿ

Anda juga dapat menggunakan entiti karakter numerik untuk huruf Yunani dan simbol matematika yang didefinisikan dalam Unicode. Untuk keterangan lebih lanjut, lihat daftar yang tertulis dalam spesifikasi HTML 4. Sebagai catatan bahwa nama entiti untuk karakter tersebut tidak dikenali oleh Navigator 4, jadi anda disarankan untuk tetap menggunakan entiti numerik sebagai gantinya.
Melink ke tengah halaman Web

Bayangkan anda menulis sebuhah halaman Web yang panjang dengan sebuah tabel daftar isi dekat awal. Bagaimana anda membuat daftar isi tersebut kedalam hyperteks link ke untuk bagian-bagian yang sesuai?

Mari asumsikan bahwa setiap bagian diawali dengan sebuah heading, misalnya:

Local Night Spots

Anda membuat heading tersebut menjadi sasaran yang cocok untuk sebuah link hyperteks dengan menaruh isinya diantara ….

Local Night Spots

Atribut name menspesifikasikan nama yang anda akan gunakan untuk mengidentifikasi link sasaran, dalam hal ini: “night-spots”. Daftar isi sekarang dapat memuat sebuah link hyperteks menggunakan nama ini, misalnya:

Karakter # perlu berada sebelum nama sasaran. Bila sasaran berada dalam dokumen lain maka anda perlu menempatkan alamat web dari dokumen tersebut sebelum karakter #. Misalnya bila sasaran berada dalam dokumen “http://www.bath.co.uk/&#8221;, maka link tersebut menjadi:

Local Night Spots

Nantinya, anda akan dapat mendefinisikan sasaran link tanpa memerlukan elemen . Metode yang baru lebih murah, karena pada yang anda perlukan adalah menambahkan atribut id pada heading, sebagai contoh:

Local Night Spots

Metode ini tidak berlaku untuk browser generasi keempat atau sebelumnya, jadi harus digunakan dengan hati hati selama browser tersebut masih digunakan!
Teks Preformatted

Salah satu keunggulan dari Web adalah bahwa teks secara otomatis di atur agar membuat baris baru untuk menyesuaikan dengan ukuran jendela (window). Tapi terkadang, anda ingin mematikan fungsi tersebut. Sebagai contoh pada saat menampilkan contoh kode dari sebuah program. Anda membuat hal ini dengan menggunakan elemen pre. Sebagai contoh:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Yang jadinya:

void Node::Remove()
{
if (prev)
prev->next = next;
else if (parent)
parent->SetContent(null);

if (next)
next->prev = prev;

parent = null;
}

Teks dan latar belakang di bentuk dengan style sheet. Sebuah catatan adalah bahwa semua line break dan spasi dibentuk persis sama dengan tampilan mereka pada HTML. Pengecualiannya adalah sebuah baris baru setelah tag awal

 dan sebelum tag penutup 

, yang dibuang. Ini berarti kedua contoh dibawah ini akan ditampilkan sama persis:

preformatted text
preformatted text

Teks Preformatted biasanya di render dengan menggunakan fonta monospace dimana setiap fonta memiliki lebar yang sama. Bila anda menetapkan sebuah aturan style dengan elemen pre, beberapa browser lupa menggunakan fonta monospace, sehingga membutuhkan penggunakan property font-family. Sebagai contoh bila anda ingin merender seluruh elemen pre dengan warna hijau anda dapat mendefinisikan aturan style tersebut:

pre { color: green; background: white; font-family: monospace; }

Ketika menetapkan warna latar depan untuk teks, anda dianjurkan untuk menetapkan warna latar belakangnya juga. Hal ini akan mencegah bencana dimana wana latar belakang susah dibedakan dengan warna latar depan. Daripada menetapkan warna latar belakang dengan elemen pre, anda akan merasa lebih mudah bila menetapkannya pada elemen body, sebagai contoh:

body { color: black; background: white; }
pre { color: green; font-family: monospace; }

Mengelilingi gambar dengan teks

Dengan HTML, anda dapat memilih apakah sebuah gambar merupakan bagian dari barisan kalimat atau di ambangkan ke margin kiri atau kanan. Anda mengontrol hal ini dengan menggunakan atribut align. Bila atribut align di tetapkan menjadi left maka gambar tersebut akan diposisikan di sebelah margin kiri. Bila ditetapkan right maka gambar tersebut diambangkan ke margin kanan.. Sebagai contoh:

sunburst graphic This text will be
flowed around the right side of the graphic.

yang menghasilkan:

sunburst graphic Teks ini akan di berada di sisi sebelah kanan gambar.

Berikut ini menggunakan align=”right”

sunburst graphic This text will be
flowed around the left side of the graphic.

yang menghasilkan:

sunburst graphic Teks ini akan berada di sebelah kiri gambar.

Untuk memaksakan teks berada disebelah bawah gambar anda dapat menggunakan elemen
, sebagai contoh:

sunburst graphic This text will be
flowed around the right side of the graphic.
This starts a new line below the floated image.

yang menghasilkan:

sunburst graphic This text will be flowed around the right side of the graphic.
This starts a new line below the floated image.
Daerah yang dapat di klik dalam gambar

Gambar berikut berfungsi sebagai map dari sekelompok halaman Web. Anda dapat mengklik pada lingkarannya untuk pergi ke halaman yang terkait.

site map

Hal ini menggunakan markup sebagai berikut:

site map

Atribut src pada elemen img menetapkan gambar sebagai “pages.gif”. Atribut usemap mereferensikan sebuah elemen map. Hal tersebut menggunakan sebuah alamat Web untuk hal tersebut, itulah sebab adanya karakter #. Atribut border border diberi nilai “0” untuk menghilangkan batasan biru disekeliling gambar.

Elemen map menetapkan bagian mana dari gambar tersebut yang berfungsi sebagai link hyperteks. Atribut name sama dengan atribut usemap pada elemen img dan berfungsi sama dengan atribut name pada elemen . Dalam prakteknya, elemen map perlu berada di file yang sama dengan elemen img.

Elemen area digunakan untuk mendefinisikan daerah dalam gambar tersebut dan untuk mengikatnya ke alamat Web. Atribut shape menentukan “rect”, “circle” atau “poly”. Atribut coords menspesifikasikan koordinat untuk daerah tergantung pada bentuknya.

* rect: left-x, top-y, right-x, bottom-y
* circle: center-x, center-y, radius
* poly: x1,y1, x2,y2, … xn,yn

Pixel paling kiri atas dianggap sebagai awal dari gambar dengan x dan y keduanya bernilai nol, x membuat gambar bertambah ke kanan dan y membuatnya ke bawah. Kebanyakan alat manipulasi gambar memungkinkan anda mencari koordinat pixel dalam sebuah gambar.

Bila dua atau lebih daerah saling melewati, elemen yang mendifinisikan daerah yang muncul pertama akan didahulukan (dalam hal ini, merespon pada input yang diberikan pengguna). Untuk bentuk yang kompleks seperti sebuah bentuk lingkaran dengan lubang ditengah (anular ring), anda dapat memakai bagian yang tidak aktif dengan manaruhnya diatas bagian lain dengan menggunakan atribut nohref, sebagai contoh:

Dimana lingkaran pertama membentuk sebuah daerah yang tidak aktif didalam lingkaran yang lebih besar yang dibuat oleh elemen kedua. Untuk mendapatkan efek tersebut, bentuk yang tidak aktif tersebut harus diletakkan terlebih dulu bila tidak maka akan tertutup oleh bentuk yang aktif.
Mengapa anda perlu menuliskan atribut alt

Atribut alt pada elemen area digunakan untuk memberikan sebuah label teks untuk link tersebut. Tanpanya map gambar tersebut tidak dapat diakses oleh orang orang yang tidak dapat membaca gambar tersebut.
Tabel

Tabel berfungsi sebagai informasi juga untuk tata letak. Anda dapat merentangkan tabel untuk memenuhi margin, menentukkan ukuran lebih yang tetap atau membiarkan browser menentukan ukurannya secara otomatis agar sesuai dengan isinya.

Tabel terdiri dari satu atau lebih baris cell. Berikut sebuah contoh yang sederhana:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Markup untuk ini adalah:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Elemen tabel berfungsi sebagai tempat untuk tabel tersebut. Atribut border menentukan lebar pinggiran tabel tersebut dalam pixel. Elemen tr berfungsi sebagai sebuah tempat untuk tiap baris tabel (table row). Elemen th dan td berfungsi sebagai tempat untuk heading dan data dari masing masing cell.
Bantalan untuk Cell

Anda dapat menambah jumlah bantalan untuk seluruh cell dengan menggunakan atribut cellpadding pada elemen table. Sebagai contoh untuk menentukan padding menjadi 10 pixel:

ini mempunyai efek:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M
Jarak Cell

Sebagai perbandingan atribut cellspacing menetapkan jarak diantara cell. Menetapkan jarak cell menjadi10:

memiliki efek:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M
Lebar Tabel

Anda bisa menentukan lebar tabel dengan menggunakan atribut width. Nilainya adalah lebar dalam pixel atau sebuah persentase yang mewakili persentase dari jarak yang tersedia antara margin kiri dan kanan. Sebagai contoh untuk menentukan lebar menjadi 80% dari margin:

yang memiliki efek:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M
Penempatan Teks dalam Cell

Browser pada umumnya akan memposisikan heading pada cell (th) di tengah, dan merapat kirikan data pada cell (td). Anda dapat merubah penempatan tersebut menggunakan atribut align, yang bisa ditambahkan ke tiap cell atau baris (tr element). Hal tersebut menggunakan nilai “left”, “center” atau “right”:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

dengan hasil sebagai berikut:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Atribut valign memainkan peranan yang mirip untuk penempatan vertikal dari isi sebuah cell. Hal tersebut menggunakan nilai “top”, “middle” atau “bottom”, dan dapat ditambahkan pada tiap cell atau baris. Pada umumnya, heading cell (th) memposisikan isi mereka di tengah cell sementara data cell di posisikan pada bagian atas tiap cell.
Cell Kosong

Browser mempunyai sebuah cara unik untuk berurusan dengan cell yang kosong, bandingkan:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M
2003

dengan
Tahun Penjualan
2000 $18M
2001 $25M
2002

yang pertama terjadi karena cellnya kosong:

Untuk mencegah hal ini gunakan sebuah non-breaking space:

 

Cell yang rentangnya lebih dari satu baris atau kolom

Mari menlanjutkan contoh di atas untuk membagi penjualan menjadi daerah penjualan utara dan selatan:
Tahun Penjualan
Utara Selatan Total
2000 $10M $8M $18M
2001 $14M $11M $25M

Heading “Tahun” sekarang tingginya dua baris, sementara heading “Penjualan” merentang selebar tiga kolom. Hal ini dilakukan dengan dengan menggunakan atribut rowspan dan colspan secara berturutan. Markup untuk tabel diatas adalah sebagai berikut:

Tahun Penjualan
Utara Selatan Total
2000 $10M $8M $18M
2001 $14M $11M $25M

Anda dapat menyederhanakannya dengan memanfaatkan fakta bahwa kebanyakan browser tidak membutuhkan tag penutup untuk cell tabel dan baris:

Tahun Penjualan

Utara Selatan Total

2000 $10M $8M $18M

2001 $14M $11M $25M

Perhatikan bahwa sementara heading “Tahun” memiliki tinggi dua baris, elemen th yang pertama pada baris kedua muncul pada kolom kedua dan bukan yang pertama.
Tabel tanpa garis pinggir

Hal ini umumnya digunakan untuk membuat layout dari sebuah dalam bentuk kotak-kotak. Apa yang anda perlu lakukan adalah dengan menambahkan border=”0″ dan cellspacing=”0″ pada elemen tabel:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Hal ini dihasilkan dengan menggunakan markup berikut:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Bila anda tidak mengikutkan atribut cellspacing maka anda akan mendapatkan sedikit jarak antara cell, seperti terlihat di bawah:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M
Mewarnai tabel anda

Halaman ini menggunakan sebuah style sheet untuk menentukan warna latar belakang untuk tabel, dengan warna yang berbeda untuk heading dan cell data. Aturan style yang saya gunakan adalah sebagai berikut:

table {
margin-left: -4%;
font-family: sans-serif;
background: white;
border-width: 2;
border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

Dua baris terakhir menetapkan warna latar belakang untuk cell th dan td dengan nilai red/green/blue. Nomor nomornya berada dalam kisaran 0 hingga 255 (nilai paling tinggi).

Cara lain untuk menetapkan latar belakang adalah dengan menggunakan atribut bgcolor. Ini bekerja untuk hampir semua browser dan tidak tergantung pada bantuan style sheet. Langkah pertama ialah menentukan nilai hexadesimal dari komponen merah, hijau dan biru dari warna yang anda inginkan. Sebuah alat pengubah disetakan dalam halaman style.

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Menengahkan tabel anda

Anda dapat menenghkan posisi tabel ditengah antara margin kiri dan kanan dengan menggunakan CSS. Bila style sheet mengandung aturan berikut, maka tabel akan di tengahkan:

table {
margin-left: auto;
margin-right: auto;
}

Anda dapat membuat hal ini spesifik pada sebuah tabel dengan memberikannya sebuah nilai id, atau dengan membuat sebuah class. Contoh berikut berlaku pada tabel dengan sebuah atribut class dengan nilai centered:

Pertama aturan stylenya:

table.centered {
margin-left: auto;
margin-right: auto;
}

dan ini adalah markup tabelnya:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

dan ini adalah bagaimana tabel anda akan ditampilkan pada browser:
Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Perlu dicatat bahwa anda dapat mengganti atribut border dengan aturan CSS rules untuk kontrol yang lebih baik pada tampilan table dan garis pembatas cell. Lihat petunjuk style untuk contoh bagaimana menentukan batasan dengan styles.
Membuat tabel anda lebih mudah dibaca

Bila anda tidak dapat melihat tabel tersebut maka akan sulit mengerti apa yang maksud dari tabel tersebut. Langkah pertama adalah menambahkan informasi menjelaskan tujuan dari struktur dari tabel tabel tersebut. Elemen caption memungkin anda membuat sebuah tulisan, dan memposisikannya di atas atau dibawah tabel tersebut. Elemen caption harus muncul sebelum elemen tr dari baris pertama.
Proyeksi keuntungan penjualan per tahun Tahun Penjualan
2000 $18M
2001 $25M

yang memiliki markup sebagai berikut:

Proyeksi keuntungan penjualan per tahun
Tahun Penjualan
2000 $18M
2001 $25M

Berikut tabel yang sama dengan align=”bottom” ditambahkan pada elemen caption:
Proyeksi keuntungan penjualan pe tahun Tahun Penjualan
2000 $18M
2001 $25M

Attribut summary yang merupakan salah satu elemen tabel seharusnya digunakan untuk mendeskripsikan struktur dari tabel untuk orang yang tidak dapat membaca table tersebut. Sebagai contoh: “kolom pertama adalah Tahun dan yang kedua adalah pendapatan untuk tahun tersebut”.

Menunjukkan hubungan antara header dan cell data

Ketika sebuah tabel di ubah menjadi suara atau Braille, sangatlah berguna untuk dapat mengidentifikasi header apa yang mendeskripsikan tiap cell. Sebagai contoh, sebuah browser suara memungkinkan anda untuk bergerak keatas dan kebawah atau ke kiri dan kenan dari cell ke cell yang lain, yang cocok dengan header yang sesuai diucapkan sebelum tiap cell.

Untuk mendukung hal ini anda harus membubuhi keterangan pada header tersebut dan atau cell data. Cara termudah untuk hal ini adalah dengan menambahkan atribut scope pada cell header. Hal tersebut dapat digunakan dengan nilai nilai berikut:

* row: Cell yang aktif memiliki informasi header untuk sisa dari baris tempat cell tersebut berada.
* col: Cell yang aktif memiliki informasi header untuk sisa dari kolom tempat cell tersebut berada.

Melakukan hal tersebut pada tabel contoh akan menghasilkan:

Proyeksi Keuntungan Penjualan per Tahun
Tahun Penjualan
2000 $18M
2001 $25M

Untuk tabel yang lebih kompleks, anda dapat menggunakan atribut headers pada tiap cell data untuk membuat tempat daftar terpisah dari pengidentifikasi cell header. Tiap header cell harus memiliki sebuah atribut id dengan pengidentifikasi yang sesuai.

Sebagai catatan akhir, anda sebaiknya mempertimbangkan atribut abbr yang menyatakan sebuah singkatan untuk header-header yang panjang. Hal ini membuatnya lebih dapat di tolerir untuk mendengar daftar dari daftar header tiap cell, sebagai contoh:

World Wide Web Consortium

Roll-Over dan trik trik lainnya

Sebuah JavaScript kecil dapat memeriahkan halaman anda secara jauh. Anda akan diperlihatkan bagaimana membuat “rollovers” dimana tampilan dari link berubah bila mouse diarahkan keatasnya. Anda juga akan belajar bagaimana membuat sebuah banner iklan yang beputar yang akan menolong mengrahkan pengunjung pada website sponsor anda
Roll-Over

Pada bentuk yang paling umum, sebuah roll-over terdiri dari sebuah gambar yang berfungsi sebagai link hyperteks. Bila pointer mouse diarahkan keatas gambar tersebut, tampilannya akan berubah untuk mengalihkan perhatian pada link tersebut. Sebagai contoh, anda dapat menambahkan efek berpendar, sebuah drop shadow atau hanya dengan mengubah warna latar belakang. Berikut sebuah contoh:

if (document.images)
{
image1 = new Image;
image2 = new Image;
image1.src = “enter1.gif”;
image2.src = “enter2.gif”;
}

function chgImg(name, image)
{
if (document.images)
{
document[name].src = eval(image+”.src”);
}
}

Enter if you dare!

dan berikut hasilnya…
Enter if you dare!

Saya membuat gambar-gambar berikut dengan menggunakan sebuah perangkat lunak yang gratis dengan menambahkan efek lilin panas pada teks tersebut. Anda dapat mencari banyak nasihat dan gambar gambar yang bebas royalti di Web melalui kebanyakan search engine.
Banner Iklan

Bila website anda miliki beberapa sponsor, maka anda dapat menggunakan sebuah link berupa gambar yang secara bergantian berputar untuk menampilkan para sponsor. Langkah pertama untuk menciptakan hal ini adalah untuk menciptakan sebuah gambar untuk tiap sponsor anda. Semua gambar harus memiliki ukuran yang sama. URL yang bersangkutan untuk gambar-gambar tersebut dan untuk situsnya ditempatkan pada sebuay larik (array) bernama adImages dan adURLs di definisikan pada awal script. Elemen img untuk link harus di awali dengan gambar pertama dalam array. Perputaran diawali dengan menggunakan event onload pada elemen body.

cycling banner ads

if (document.images)
{
adImages = new Array(“hosts/csail.gif”,
“hosts/ercim.gif”, “hosts/keio.gif”);
adURLs = new Array(“www.csail.mit.edu”,
“www.ercim.org”, “www.keio.ac.jp”);
thisAd = 0;
}

function cycleAds()
{
if (document.images)
{
if (document.adBanner.complete)
{
if (++thisAd == adImages.length)
thisAd = 0;

document.adBanner.src = adImages[thisAd];
}
}

// change to next sponsor every 3 seconds
setTimeout(“cycleAds()”, 3000);
}

function gotoAd()
{
document.location.href = “http://&#8221; + adURLs[thisAd];
}

Our sponsors

Sponsor kami: Our sponsors

Catatan: anda disarankan untuk memastikan bahwa semua gambar sama lebar dan tingginya. Sebuah cara lain adalah dengan menambahkan lebar dan tinggi dengan elemen img untuk memastikan gambar gambar sama ukurannya.
Bagaimana dengan browser yang tidak mendukung scripting?

Isi dari sebuah elemen noscript hanya di tampilkan bila browser tidak mendukung scripting. Hal tersebut sebaiknya digunakan bila anda ingin memberikan akses pada informasi ke orang dengan browser yang tidak mendukung scripting. Mari asumsikan bahwa anda ingin membuat link untuk sponsor anda tersedia dalam bentuk teks:

Our sponsors: MIT,
INRIA, and
Keio University.

Ada banyak informasi gratis mengenai scripting, yang dapat dengan mudah ditemukan melalui kebanyakan search engines.
Memungkinkan pengguna mendengarkan file suara

Mari asumsikan bahwa anda dan teman anda berkumpil untuk melakukan rekaman sebuah musik di garasi anda, dan anda juga ingin mengeluarkannya pada para khalayak ramai. Langkat pertama ialah mengkompresi rekaman suara, contohnya sebagai file mp3 dan menguploadnya ke website anda. Sebagai contoh, mari asumsikan bahwa ini kemudian tersedia di: http://example.com/music/myband.mp3. Dalam contoh dibawah anda harus mengganti ini dengan lokasi yang benar dari website anda.

Langkah berikutnya adalah dengan menciptakan sebuah file playlist dengan akhiran .m3u. Hal ini menghindari waktu panjang yang dibutuhkan sebelum pendengar mulai mendengar musik yang pada umumnya timbil bila anda menghubungkannya langsung ke file mp3 tersebut. Anda dapat menciptakan playlist tersebut dengan sebuah editor teks dan hal tersebut hanya membutuhkan URL dari file mp3 tersebut. Untuk file contoh tersebut, hal ini akan menjadi:

Upload file playlist m3u tersebut ke web server anda. Dan sekarang anda bisa menambahkan sebuah link pada halaman web dari band anda seperti berikut:

listen to our band

Anda juga mungkin harus menanyakan administrator web server bahwa tipe MIME yang benar digunakan untuk file mp3 dan m3u..

* m3u extension with audio/x-mpegurl
* mp3 extension with audio/mpeg

CATATAN pendekatan diatas bekerja dengan baik untuk orang orang dengan koneksi broadband. Anda sebaiknya mempertimbangkan penyedian versi dengan qualitas mp3 yang lebih rendah untuk orang orang dengan koneksi yang pelan (dalam hal ini jauh lebih pelan dari128K).

Sebuah pendekatan yang serupa juga dapat digunakan untuk file suara Ogg Vorbis (MIME berjenis “application/ogg” dan akhiran file “.ogg”). Hal ini dapat digunakanbersama dengan file playlist m3u atau pls, tetapi tidak semua pemain musik dapat di konfigurasi untuk mendunkung hal ini. Konsultasikan terlebih dulu di search engine untuk keterangan lebih lanjut mengenai hal ini dan bentuk file suara yang lain.
Mendapatkan Informasi Lebih Lanjut

Rekomendasi W3C tentang HTML 4.0 adalah spesifikasi yang sifatnya mutlak untuk HTML. Tetapi, hal tersebut adalah sebuah spesifikasi teknis. Untuk informasi yang bersifat lebih kurang teknis mungkin anda ingin membeli salah satu dari sekian banyak buku mengenai HTML, sebagai contoh “Raggett on HTML 4”, yang diterbitkan 1998 oleh Addison Wesley. Sekarang XHTML 1.0 adalah Rekomendasi W3C.

Semoga berungtung dan mulailah menulis!

Dave Raggett

Copyright © 1994-2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s