Enjoy With My Blog: Membuat Dokumen Dengan HTML Sesuai Spesifikasi

Sebelum membahas tentang bagaimana membuat dokumen dengan HTML, terlebih dahulu diketahui apa sebenarnya yang dimaksud dengan HTML.

HTML adalah singkatan dari Hyper Text Markup Language. HTML merupakan bahasa (kode-kode) yang digunakan untuk membuat halaman web. HTML bukanlah bahasa pengaturan seperti C, C++ atau Pascal, ia lebih kepada bahasa yang menetapkan corak paparan dokumen. Jika anda menggunakan Internet Explorer atau Netscape Navigator anda dapat melihat kode-kode halamannya dengan right-click dan memilih menu View Source.

Bahasa HTML ini ditulis dengan menggunakan teks editor seperti Windows Notepad, Ms-Edit, dan file di simpan menggunakan extensi .htm ataupun .html. Browser HTML seperti Internet Explorer atau Netscape Navigator akan menterjemahkan kode-kode html dan membuat paparan seperti apa yang telah dikodekan. Anda juga dapat membuat halaman web dengan menggunakan HTML Editor seperti Netscape Composer, Ms-Word 97 ataupun Microsoft FrontPage. Walapun demikian, terdapat kelebihan serta kekurangan jika anda menggunakan HTML Editor yang disebutkan.

Mengapa saya perlu belajar HTML?

Walaupun pada zaman yang canggih ini terdapat banyak Editor HTML WSYWIG seperti Microsoft FrontPage, Netscape Composer dan Microsoft Word 97, adakalanya terdapat beberapa keadaan yang tidak dapat dibiarkan. Masalah-masalah yang kerap berlaku seperti gambar yang tidak muncul, link yang mengarah ke arah lain dan beberapa masalah-masalah lain yang akan terjadi pada HTML Editor anda sendiri. Kadangkala masalah ini terjadi setelah anda meng-upload halaman-halaman anda ke Internet.

Jadi, untuk menyelesaikan masalah-masalah ini, anda memerlukan sedikit banyak pengetahuan mengenai bahasa HTML. Apa yang dilakukan sebenarnya oleh Microsoft FrontPage atau Netscape Composer ialah menuliskan kode-kode HTML untuk anda. Caranya sama jika anda menulis kode sendiri dengan menggunakan Notepad.

Disamping itu ada juga HTML Editor yang tidak optimum, ia menulis kode-kode yang tidak perlu secara berlebihan dan memungkinkan file HTML anda menjadi terlalu besar, mengambil waktu yang lama untuk di download.

Anda juga boleh bergerak selangkah lebih dari orang lain. Ini karena, apabila perusahaan-perusahaan seperti Microsoft atau Netscape mengeluarkan browser HTML

Sekilas Tentang Pembuatan Dokumen dengan HTML

Perlukah saya tersambung ke internet untuk membuat homepage?

Anda tidak perlu tersambung ke Internet ketika membuat homepage. Anda hanya perlu menyediakan file-file html dan disimpan dalam direktori komputer anda dengan menggunakan Microsoft FrontPage, Netscape Composer ataupun Windows Notepad dan file disimpan dengan ekstensi .htm atau .html. Apabila selesai, sambungkan ke Internet anda, upload file-file tersebut ke Internet (web hosting).

Apa yang perlu saya ketahui?

Selain Internet Explorer dan Netscape Navigator, terdapat banyak lagi browser HTML yang dapat digunakan untuk menjelajah Internet. Oleh kerana browser HTML ini dicipta oleh perusahaan-perusahaan yang berlainan, penterjemahan bahasa HTML oleh setiap web browser berbeda antara satu sama lain. Sebagai contoh, paparan sesuatu halaman web melalui Netscape Navigator tidak sama dengan paparan melalui Internet Explorer. Walaupun demikian dalam tutorial ini anda akan diajarkan menggunakan fungsi-fungsi global yang dapat digunakan oleh semua browser HTML. Tetapi, untuk membuat halaman yang bagus terdapat keadaan di mana anda perlu mengetahui apakah fungsi tersebut di dukung dalam sesuatu web browser atau tidak.

Apa yang perlu saya miliki?

Untuk mengikuti tutorial ini, anda hanya memerlukan teks editor seperti Windows Notepad dan browser HTML seperti Internet Explorer. Perlu diingatkan disini bahwa Microsoft Word dan WordPad bukanlah teks editor yang asli, beberapa penambahan yang tidak kelihatan telah dilakukan kepada file jenis doc dan wri.

Sebaiknya anda mempunyai 3 browser HTML. Internet Explorer 3, Internet Explorer 4 dan Netscape Navigator 4. Ini bertujuan supaya anda dapat mencoba halaman yang anda buat pada 3 browser yang berlainan.

Bentuk Umum HTML

Dibawah ini ada contoh/bentuk umum dari sebuah dokumen HTML yang akan terlihat pada waktu kita membukanya dengan menggunakan Text Editor atau NotePad:

<HTML>
<TITLE>Contoh Homepage</TITLE>
<BODY>Hallo apa kabar?<BR>
Mudah-mudahan kabarnya Baik.
</BODY>
</HTML>

Dari contoh diatas jika anda membuka file ini dengan menggunakan MicroSoft Internet Browser atau Netscape, anda hanya akan melihat tulisan:

Hallo apa kabar?
Mudah-mudahan kabarnya Baik.

Kode-kode html terdiri dari tag-tag. Setiap huruf yang terkandung di dalam '<' dan '>' dinamakan tag. Dalam contoh di atas anda telah diperkenalkan dengan tag.

· <HTML> dan </HTML>

· <HEAD> dan </HEAD>

· <BODY> dan </BODY>

Permulaan tag diletakkan dengan <nama tag> dan penutup tag diletakkankan dengan </nama tag>. Perhatikan tanda '/' yang berada di depan nama penutup tag. Tag-tag ini diperlukan karena menunjukkan bahwa dokumen itu adalah dokumen html dan akan dibaca oleh browser HTML anda. Tanda '/' atau "</>" menandakan akhir perintah tag, entah itu untuk </HEAD>, </TITLE> dsb. Perlu diingat bahwa nama dalam tag tidaklah case sensitive.

Jika ada Pembuka, harus ada Penutupnya juga!

Keterangan:

· <HTML>Pembuka/Awal setiap membuat suatu dokumen HTML.

· </HTML>Penutup/Akhir dari suatu dokumen HTML.

· <TITLE>Tag Pembuka untuk Judul Halaman/dokumen HTML.

· </TITLE>Tag Penutup untuk Judul Halaman/dokumen HTML.

· <BODY>Tag Awal dari Apa yang akan diketikan/diisi pada Dokumen HTML.

· </BODY>Tag Penutup dari isi dokumen HTML.

· <BR> Tag untuk memisahkan satu baris menjadi dua baris

Yang harus diingat adalah:

Apa yang kita ketikan di NotePad dengan yang akan ditampilkan sebagai suatu dokumen di Internet akan kelihatan beda.

Mengapa perlu pembuka dan penutup tag?

Untuk menjawab pertanyaan tersebut, lihatlah contoh kedua.

<html>

<head></head>

<body>

<b>Ini adalah</b> halaman <i>pertama</i> saya.

</body>

</html>

Akan keluar hasil seperti berikut:

Ini adalah halaman pertama saya

Terdapat 2 perubahan yaitu kata-kata "Ini adalah" telah ditebalkan (bold) dan perkataan "pertama" telah dimiringkan (italic). Ini terjadi karena kata-kata "Ini adalah" tersebut berada di antara tag <b> dan </b> (<b> untuk bold) dan perkataan "pertama" berada di antara tag <i> dan </i> (<i> untuk italic).

Saya mau kata-kata tersebut ditebalkan dan dimiringkan!

Untuk menjawab persoalan tersebut, lihatlah contoh ketiga.

<html>

<head></head>

<body>

<b><i>Ini adalah halaman pertama saya</i></b>

</body>

</html>

Akan keluar hasil seperti berikut:

Ini adalah halaman pertama saya

Apa gunanya tag head?

Untuk menjawab persoalan tersebut, lihatlah contoh keempat.

<html>

<head>

                   <title> Mari Belajar HTML </title>

</head>

<body>

                   <b>Ini adalah</b> halaman <i>pertama</i> saya.

</body>

</html>

Apabila anda melihat dokumen ini dengan menggunakan browser HTML anda. Anda mungkin tidak melihat adanya perubahan. Tetapi jika anda teliti, perkataan "Mari Belajar HTML" akan kelihatan pada title bar browser html anda. Ini gunanya tag <head>, di antara tag <head> ini anda letakkan tag-tag yang mempunyai fungsi khas. Terdapat banyak lagi fungsi-fungsi khas yang akan anda pelajari kemudian.

Anak panah menunjukkan title bar

Pemformatan Teks

Terdapat banyak cara untuk memformat teks. Pemformatan teks ini seperti bold, italic, subscript, superscript yang biasa anda lakukan dengan menggunakan Microsoft Word atau Word Perfect bisa juga dilakukan dalam dokumen html tetapi dengan cara berbeda. Pada bagian ini terdapat contoh contoh cara pemformatan teks yang akan diterangkan. Jika anda biasa menggunakan Microsoft Word maka tidak akan ada masalah untuk menggunakan formatan teks seperti di bawah.

Untuk memformat teks seperti bold, italic, subscript atau superscript pada halaman html, tag-tag berikut digunakan:

<b>….</b>	Teks yang berada diantara tag disebelah akan diboldkan
<blink>....</blink>	Menjadikan kata-kata yang berada diantara tag itu berkelip-kelip. Perhatian!, jika anda mengelipkan keseluruhan teks, maka teks itu akan susah dibaca!. Disamping itu, tag blink ini didukung oleh Netscape Navigator saja.
<i>....</i>	Teks ini akan dimiringkan.
<sub>....</sub>	Teks di dalam tag ini akan di_subscriptkan.
<sup>....</sup>	Teks di dalam tag ini akan di^superscriptkan.
<u>....</u>	Teks ini akan digarisbawahkan.
<cite>....</cite> <code>....</code> <em>....</em> <kbd>....</kbd> <samp>....</samp> <strong>....</strong> <var>....</var> <big>....<big> <small>....</small> <tt>....</tt>		Kesemua tag-tag ini mempunyai fungsi pemformatan yang tersendiri. Anda dapat mencoba tag-tag tersebut untuk membedakan fungís masing-masing tag.

Font Teks

Jika anda mengerti cara menggunakan Microsoft Word, anda pasti bisa menggunakan berbagai macam font pada dokumen Word anda. HTML juga bisa menggunakan font yang bermacam-macam. Caranya adalah dengan penggunaan tag <font>...</font>. Tag font ini tidak akan berfungsi tanpa penggunaan fungsi face.

-----------------------------------------------------------------------

kata-kata ini telah ditentukan font nya</font>

-----------------------------------------------------------------------

Jika anda perhatikan, terdapat 3 nilai untuk fungsi face. Ini bermaksud, jika komputer pengunjung itu tidak mempunyai font Arial, maka browser pengunjung akan mencari font Times New Roman, jika tidak ada maka Lucida Sans akan menjadi penggantinya. Kalau ketiga-tiga jenis font itu tidak ada, maka browser akan menggantinya dengan apa yang dianggap pantas. Tidak ada batas untuk font yang boleh diletakkan. Jika anda tidak meletakkan fungsi face maka font yang digunakan akan ditetapkan oleh configurasi komputer pengunjung.

Warna Teks

Untuk menjadikan teks berwarna, fungsi color digunakan pada tag <font>. Terdapat 256 warna yang dapat digunakan untuk mewarnai kata-kata. Lihat contoh di bawah.

-----------------------------------------------------------------------

<font color="#FF0000">baris ini berwarna merah</font>

-----------------------------------------------------------------------

Warna dalam html dapat diklasifikasikan menjadi 3 warna dasar yaitu merah, hijau dan biru. warna-warna tersebut jika dicampurkan akan menghasilkan warna-warna yang lain. Sistem nomor heksadecimal digunakan untuk mewakili warna-warna tersebut.

Sebagai contoh, untuk menjadikan teks halaman anda sebagai warna putih, maka nilai #FFFFFF digunakan pada fungsi text. 2 huruf pertama dari 6 huruf di atas mewakili warna merah, 2 huruf di tengah mewakili warna hijau dan 2 huruf terakhir mewakili warna biru.

Tabel warna dasar bilangan heksadesimal.

*Color*	*Hexadecimal*	*Color*	*Hexadecimal*
*Black*	#000000	Blue	#0000FF
*Olive*	#808000	Lime	#00FF00
*White*	#FFFFFF	Fuchsia	#FF00FF
*Green*	#008000	Maroon	#800000
*Red*	#FF0000	Gray	#808080
*Teal*	#008080	Purple	#800080
*Yellow*	#FFFF00	Silver	#COCOCO
*Navy*	#000080	Aqua	#00FFFF

Bagian-bagian yang dapat diwarnai adalah:

· Latar belakang Homepage

· Teks

· Link

· Link yang telah digunakan

· Latar belakang table

· Border table

· Font

Disamping itu Netscape Navigator serta Internet Explorer telah menggunakan satu cara khas untuk penggunaan warna-warna. Anda tidak perlu menggunakan nomor-nomor untuk menentukan warna yang dikehendaki, sebaliknya nomor-nomor ini telah digantikan dengan kata-kata untuk memudahkan anda.

Tag-tag yang berkaitan

Tag	<body>
Fungsi	· bgcolor - untuk mewarnai background halaman anda · text - untuk mewarnai semua teks. Perlu diingat bahwa teks yang berada di area tag <font> dan pengaktifan fungsi color tidak dipengaruhi oleh fungsi ini. · link - untuk menjadikan warna link lain dari yang telah ditetapkan oleh browser. · vlink - untuk menjadikan warna link yang telah digunakan berbeda dari yang telah ditetapkan oleh browser.
Contoh	<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#800080">

Tag	<font>
Fungsi	· color - untuk mewarnai semua huruf yang berada dalam area tag <font>
Contoh	<font color="#000000">

Tag	<table>
Fungsi	· bgcolor - warna latar belakang table · bordercolor - warna untuk border.
Contoh	<table bgcolor="#800080" bordercolor="#FFFFFF">

Ukuran Teks

Untuk menjadikan ukuran teks lebih besar atau lebih kecil dari biasa. Anda dapat menggunakan fungsi size pada tag font.

Contoh:

-----------------------------------------------------------------------

<font size=4>Baris ini berukuran 4</font>

-----------------------------------------------------------------------

Terdapat 1 hingga 7 nilai ukuran yang dapat digunakan untuk fungsi size ini dan nilai 1 merupakan ukuran yang paling kecil. Ukuran header / topik juga dapat dirubah dengan menggunakan tag <h1…h6>, tetapi penggunaan header berlawanan dengan font size, yaitu h1 sampai h6 dimana h1 adalah ukuran yang paling besar hingga h6 yang paling kecil. Selain itu, pada tag header tulisan dengan sendirinya sudah menjadi tebal, atau sudah di boldkan

Bagaimana cara memulai baris baru?

Untuk memulai baris baru, anda dapat menggunakan tag <br>. Jika anda meletakkan tag ini, memiliki fungsi seperti menekan tombol Enter pada Microsoft Word. Contoh:

-----------------------------------------------------------------------

Baris pertama<br>Teks ini akan dimulai pada baris berikutnya.

Bagaimana cara membuat rata tengah?

Untuk merata tengahkan, anda perlu menggunakan tag <center>...</center>. Tag center ini berfungsi untuk menengahkan apa saja yang berada di dalamnya, seperti gambar, table, teks dan lain-lain. Contoh:

-----------------------------------------------------------------------

<center>Teks ini berada di tengah</center>

-----------------------------------------------------------------------

Paragraf

Untuk memformatkan paragraf anda dapat menggunakan tag <p>...</p>. Letakkan <p> pada permulaan paragraf dan </p> diakhir paragraf. Browser HTML secara otomatis akan membuat jarak antar paragraf pertama dan kedua, dan paragraf baru akan dimula dengan baris baru. Contoh:

---------------------------

<p>

Ini adalah paragraf pertama untuk

teks ini.

</p>

<p>

Ini adalah paragraf kedua untuk

teks ini.

</p>

--------------------------

Untuk menjajarkan paragraf anda rata kiri atau ke kanan, anda dapat menggunakan fungsi align. Untuk menjajarkan paragraf anda rata kiri anda letakkan nilai left atau bila ingin merata kanankan, letakkan nilai right.

---------------------------

Ini adalah paragraf pertama untuk

teks ini, dan dibuat rata kiri.

</p>

Ini adalah paragraf kedua untuk

teks ini dan dibuat rata kanan.

</p>

--------------------------

Bagaimana cara memasukkan special character?

Special character adalah huruf-huruf yang tidak terdapat pada keyboard komputer anda. Untuk menuliskan special karakter anda perlu menggunakan cara lain. Huruf-huruf seperti © harus ditype dengan menggunakan © dan browser pengunjung akan menerjemahkan © kepada ©. Di bawah merupakan contoh beberapa spesial character yang dapat digunakan dalam pembuatan HTML:

Hasil	Keterangan	Karakter Istimewa	Nomor Karakter Istimewa
© ® ™ & « » ˝ < > * :	Copyright Registered trademark Trademark Non-breaking space ampersand angle quotation mark (left) angle quotation mark (right) tanda kutip lebih kecil lebih besar tanda kali tanda bagi	© ®   & « » " < > × ÷	© ® ™ ¡ & « » " < = × ÷

List HTML

List merupakan bentuk umum yang biasa kita gunakan untuk membuat daftar sesuatu, misalnya jenis-jenis list dalam HTML:

· List dengan nomor

· List tanpa nomor

· List definisi

List dengan nomor adalah model daftar yang setiap itemnya diberi nomor. Pada contoh list diatas merupakan contoh penggunaan list tanpa nomor.

Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang dapat digunakan untuk membuat list yang memberi uraian terhadap suatu item dalam daftar, disebut list definisi

Ordered List

Ordered list / List bernomor secara umum dimulai dengan menggunakan 1,2,3..., dst sampai dengan sejumlah item dalam list tersebut. Tetapi, kita juga dapat merubah susunan nomor dalam OL dengan model angka yang lain dengan mengisi atribut type pada tag <ol>.

Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list:

Type	Arti
I	Ditampilkan dengan menggunakan angka Romawi huruf besar
i	Ditampilkan dengan menggunakan angka Romawi huruf Cecil
A	Diubah dengan menggunakan abjad huruf kecil
a	Diubah dengan menggunakan abjad huruf besar

Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin menggunakan list dari nomor 7 maka berikut adalah contoh penggunaannya <ol start=7>...</ol>

Contoh ini menunjukkan berbagai jenis ordered list yang berbeda:

<!—Coba_orderedlist.html-->

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Letters list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Roman numbers list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</body>

</html>

Unordered List

Unordered list sering disebut sebagai bulleted list, mempunyai bullet default berupa noktah. Tetapi, jenis bullet tersebut dapat diubah dengan menggunakan atribut type seperti pada ordered list. Berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list.

· Disc, bentuk noktah tetapi tidak diarsir di tengahnya

· Square, bentuk kotak.

Berikut contoh berbagai jenis unordered list.

<html>

<body>

<h4>Disc bullets list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Square bullets list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

</body>

</html>

Nested List

Bullet dapat digunakan secara bersarang, maksudnya bahwa di dalam list ada list lagi. Contoh ini akan mendemonstrasikan bagaimana membuat nested list.

<html>

<body>

<h4>A Nested List:</h4>

<ul>

<li>Coffe</li>

<ul>

<li>Black Tea</li>

<li>Green Tea</li>

</ul>

</ul>

</body>

</html>

Definition List

Adalah list yang digunakan untuk memberikan uraian pada sebuah list. Contoh berikut akan menunjukkan sebuah definition list:

<!--Coba_definitionlist.htmlà

<html>

<body>

<h4>A Definition List:</h4>

<dl>

<dt>Coffe</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

</body>

</html>

Image HTML

Gambar di dalam suatu web page merupakan sebuah daya tarik bagi pengunjung suat web site. Umumnya web site dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu web site. Umumnya browser web dapat menampilkan iniline image (yaitu, gambar yang disajikan bersamaan dengan teks), yang mempunyai format X Bitmap (XBM), GIF, atau JPEG. Format-format gambar lain juga ada yang digabukangkan ke dalam browser web [misalnya: format PNG (Portable Network Graphic)]. Setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat penampilan suatu dokumen dalam browser. Karenanya hati-hatilah memilih gambar dan menyertakannya ke dalam suatu dokumen.

Untuk menyertakan sebuah inline image dalam dokumen web anda digunakan tag <img src=”namaimage.jpg/gif/jpeg/xbm”> dengan namaimage adalah URL dari file image tersebut.

Image Adjustment

Dengan melihat contoh di bawah, kita akan dapat menyesuaikan image dengan ukuran yang berbeda-beda.

<html>

<body>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

Kamu dapat membuat sebuah gambar menjadi lebih besar atau lebih kecil dengan merubah nilai “height” dan “width” dalam sebuah tag <img>

</p>

</body>

</html>

Image Sebagai Suatu Link

Dengan melihat contoh di bawah, kita akan mengetahui bagaimana cara membuat image sebagai suatu link.

<html>

<body>

<p>

Kamu juga dapat menggunakan sebuah image sebagai suatu link.

</a>

</p>

</body>

</html>

Pembuatan image sebagai suatu link merupakan alternatif dari link-link yang biasanya dibuat dalam bentuk list atau teks biasa, tujuannya agar dengan gambar suatu menu dapat terlihat lebih interaktif dan langsung dapat memberi gambaran tentang apa yang didapat jika memilih menu tersebut.

Background Image

Suatu image juga dapat digunakan sebagai latar belakang selain warna latar belakang. Contoh berikut akan memaparkan cara pemasangan image sebagai background:

<html>

<p>

Kamu dapat mengisi tampilan latar belakang dengan image.

</p>

</body>

</html>

Tabel HTML

Tabel digunakan dalam penyajian data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan.

Sebuah tabel umumnya mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan. Baris untuk informasi, dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi informasi header, setiap baris menjelaskan sebuah tag tabel HTML, dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag.

Elemen-elemen Tabel

Elemen

Penjelasan

Mendefiniskan sebuah tabel dalam HTML. Jika atribut broder dituliskan, maka browser akan menampilkan tabel dengan border.

Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas tabel. Atribut align=”bottom’ dapat digunakan untuk menempatkan judul pada bagian bawah tabel. Catatan: Judul dapat diberi tag apa saja.

Menspesifikasikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan atribut untuk seluruh baris: align (left,center,right) dan/atau valign (top,middle,bottom).

Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.

Mendefinisikan sebuah sel data tabel. Secara default teks dalam sel ini ditampilkan rata kiri, dan ditengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakterisiktik dari sel dan isinya.

Atribut Tabel

Catatan: Atribut yang didefinisikan dalam <th>...</th> atau <td>...</td> akan menggantikan alignment default yang didefiniskan dalam <tr>...</tr>

Elemen	Penjelasan
align={left \| center \| right} valign={top \| middle \| bottom} colspan=n rowspan=n nowrap	Alignment horisontal untuk sel Definisi alignment vertikal dalam sel Jumlah n kolom sel diperlebar Jumlah n baris sel diperbesar Matikan wrapping dalam sel

Contoh ini mendemonstrasikan bagaimana membuat tabel dalam sebuah dokumen HTML.

<!—Coba_tabel.html-->

<html>

<body>

<p>Setiap tabel dimulai dengan sebuah tag table.

Setiap baris dimulai dengan sebuah tag tr.

Setiap data dimulai dengan sebuah tag td.

</p>

<h4>Satu kolom:</h4>

<tr>

</tr>

</table>

<h4>Satu baris dan tiga kolom:</h4>

<tr>

</tr>

</table>

<h4>Dua baris dan dua kolom:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Catatan:

Jumlah baris tabel ditentukan dengan banyaknya <tr>...</tr> yang dituliskan dalam elemen tabel, dari <table>...</table>

Jumlah kolom dalam tabel ditentukan dengan banyaknya <td>...</td> di dalam setiap definisi baris, dari <tr>...</tr> Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.

Border Tabel

Border sebuah tabel dapat ditentukan dalam atribut border=”n” dalam tag <table> semakin besar nilai n, maka semakin tebal border sebuah tabel yang akan dihasilkan. Apabila nilai n diisi dengan “0” maka sebuah tabel akan menjadi tabel tanpa border.

Header

Contoh berikut akan menjelaskan cara penggunaan header tabel.

<html>

<body>

<h4>Table headers:</h4>

<tr>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

<h4>Vertical headers:</h4>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

<tr>

<th>Telephone:</th>

</tr>

</table>

</body>

</html>

Colspan dan Rowspan

Contoh berikut akan mendemonstrasikan bagaimana mendefinisikan sel tabel yang dilebarkan lebih dari satu baris atau satu kolom.

<html>

<body>

<h4>Cell that spans two columns:</h4>

<tr>

<th colspan=”2”>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

<h4>Cell that spans two rows:</h4>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan=”2”>Telephone:</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Tag di dalam suatu Tabel

Contoh berikut akan mendemonstrasikan bagimana menampilkan elemen lain di dalam tabel.

<html>

<body>

<tr>

<td>

<p>Sebuah paragraf</p>

<p>Paragraf lain</p>

</td>

<td>Sel ini mengandung sebuah tabel:

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>Sel ini mengandung list

<ul>

<li>Apples</li>

<li>Bananas</li>

<li>Pineapple</li>

</ul>

</td>

</tr>

</table>

</body>

</html>

Cellpadding dan Cellspacing

Cellpadding adalah atribut di dalam tag <table> yang berfungsi untuk menambahkan jarak spasi dari antara sel dan bordernya misal: <table border=”1” cellpadding=”10”> berarti menandakan bahwa jarak antar sel dan bordernya adalah 10 spasi.

Cellspacing juga merupakan atribut di dalam tag <table> yang berfungsi untuk menambah jarak antar sel, misal : <table border=”1” cellspacing=”10”> maka jarak antar sel yang terjadi adalah 10 spasi.

Background Tabel

Seperti elemen yang lain, tabel juga dapat diberi latar belakang, baik itu warna ataupun gambar. Dalam tabel, latar belakang dapat diubah dalam setiap selnya maupun keseluruhan tabelnya misal: <table bgcolor=”red” / background=”.../images/background.jpg”> ataupun di dalam sel: <td bgcolor=”yellow” / background=”.../images/background.jpg”>.

Tag-tag Tabel:

Tag Awal	NN	IE	W3	Kegunaan
<table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot>	3.0 3.0 3.0 3.0 3.0 4.0	3.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 4.0 4.0	3.2 3.2 3.2 3.0 3.2 4.0 4.0 4.0 4.0	Definisi tabel Definisi header tabel. Defiinisi baris tabel. Definisi sel tabel. Definisi caption tabel. Definisi kelompok kolom tabel. Definisi nilai atribut satu atau lebih kolom dalam tabel Definisi suatu header tabel yang tidak akan scroll. Definisi suatu body tabel yang scroll dalam suatu header dan footer tabel yang pasti. Definisi suatu footer tabel yang tidak akan scroll (fixed)

Link HTML

Kelebihan utama dari suatu dokumen HTML adalah kemampuannya memberikan link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot (‘highlight’) teks atau gambar yang diidentifikasi sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink)

Tag yang dipakai untuk membuat hyperlink adalah <a> dan tag penutupnya adalah </a>. Contoh: <a href=http://www.yahoo/com> Link ke yahoo </a>. Atribut <href> digunakan untuk mendefinisikan lokasi link.

Ada beberapa jenis link yang bisa anda gunakan, berdasarkan lokasi tujuannya link dibedakan:

· Link relatif yang menuju bagian lain dari halaman web anda

· Link relatif yang menuju halaman lain dalam satu website

Karena link menuju ke web yang sama, maka tidak perlu dituliskan alamat URL web tersebut, hanya perlu menuliskan URL file-nya. Berikut adalah beberapa variasi penulisan link berdasarkan letak penempatan file-nya.

· Bila file berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama file-nya, misalnya: <a href=”modul1.htm”>

· Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut, maka harus dituliskan nama folder-nya. Misalnya:<a href=" modul1/test001.htm">

· Bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti berikut:<a href="../rainbow.gif">Lihat gambar</a>

· Bila file yang dituju letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini:

<a href = "../../rainbow2.gif"> Contoh gambar ke 2</a> dan seterusnya

· Link menuju ke website lain atau resource yang berbeda

· Link yang menuju ke bagian tertentu (bookmark)

· Link yang menuju ke suatu file yang dapat ditampilkan dalam browser, misalnya file image atau animasi

· Link yang menuju ke suatu file tertentu yang tidak bisa ditampilkan atau dijalankan dalam browser misalnya: file program (EXE), file kompresi (ZIP), file audio (seperti MP3, RM), file video, dan lain-lain. Bila link semacam ini di-klik, akan muncul dialog box yang menanyakan apakah anda akan menyimpan (save) file itu dalam hardisk atau menjalankannya dengan program yang sesuai. Proses pengambilan dan penyimpanan file disebut download. Cara penulisan alamat link ini sama saja dengan cara penulisan link biasa.

· Link yang mengarah ke alamat email. Bila link ini diklik akan membuka jendela pengiriman email dari program email yang terinstall pada komputer user (misalnya Microsoft Outlook). Pada kotak tujuan email (To:) sudah tercantum alamat email tujuan. Contoh penulisan seperti : <a href = ”mailto:ar1f@gmail.com”> Kirim email! </a>

· Link yang membuka window baru. Link ini akan mengantar kita ke halaman lain dengan membukanya pada window baru, sehingga pengunjung tidak harus meninggalkan halaman sebelumnya. Link ini dapat dibuat dengan penggunaan atribut <target=”_blank”>. Contoh penulisan seperti :

· <a href = ”http://www.microsoft.com” target = _blank”> Microsoft </a>

· Link pada lokasi halaman yang sama. Link ini akan membawa kita tetap kepada halaman yang sama, misal dari halaman yang paling bawah ke atas, dan sebaliknya. Link ini dibuat dengan memakai atribut penamaan link <a name = ”top”>.

· Jadi setelah penamaan tersebut, jika dibuat link <a href = ”#top” >Kembali ke atas</a> maka halaman tersebut akan kembali ke bagian yang telah diberi nama “top”.

· Link yang tidak digarisbawahi. Link ini dapat dibuat dengan penambahan atribut <style = ”text-decoration:none”>

- - -

DAFTAR PUSTAKA

· Website:

o http://www.geocities.com/

o http://www.google.co.id

o http://id.wikipedia.org/

o Betha Sidik, Ir, Husni I. Pohan. HTML dan XML. Edisi ke-2. Informatika : Bandung, 2001.

Enjoy With My Blog

menu bar

Membuat Dokumen Dengan HTML Sesuai Spesifikasi

Sekilas Tentang Pembuatan Dokumen dengan HTML

Bentuk Umum HTML

Pemformatan Teks

List HTML

Tabel HTML

Link HTML

Tidak ada komentar:

Posting Komentar

Mengenai Saya