Pertama kali Anda harus hafal:

Ini file HTML pertama saya. Klik "back button" pada browser untuk kembali.

</BODY>
</HTML>

Dimulai dengan tag <HTML>, kemudian dilanjutkan dengan tag <BODY>, setelah itu isi dari file. Dan terakhir ditutup dengan dua tag berikut, </BODY></HTML>. Lihat ada tanda "/" pada setiap tag penutup.
Hey, tunggu apa lagi, buka notepad anda (saya katakan notepad bukan Microsoft Frontpage dan software-software fancy lainnya - karena untuk memahami dasar HTML secara baik, yang anda perlukan hanyalah notepad dan sebuah browser). Ketik ulang kode di atas, atau kalau anda malas saya perbolehkan anda melakukan copy-paste. Kemudian simpan file anda dengan ekstension html, contohnya simpan dengan nama file1.html. Setelah itu buka file tersebut dengan browser favorit anda, mungkin Internet Explorer atau Netscape. Jrenggg ..... hehehe kelihatannya anda belum tertarik.

Berikutnya saya akan memberikan contoh tentang manipulasi teks. Seperti anda lihat di atas, kode-kode dalam file HTML selalu dibatasi oleh tag < ... >. Demikian pula untuk keperluan manipulasi teks ini, kita mempunyai beberapa tag yang dapat digunakan, seperti:

<B>Untuk membuat huruf tebal.</B>
<I>Untuk membuat huruf miring.</I>
<U>Untuk membuat garis bawah.</U>

Anda juga dapat memanipulasi teks dengan tag <FONT SIZE="bebas" COLOR="bebas" face="bebas"> teks anda</FONT>. Di sini size adalah ukuran huruf, color adalah warna yang anda inginkan (lihat saya ngefans dengan warna biru), dan face adalah jenis font yang digunakan. O, ya anda dapat menggabung lebih dari satu tag sekaligus, sebagai contoh <B><U>akan membuat huruf tebal yang bergaris bawah</U></B>. Hanya jangan lupa jika tag pembuka berada di dalam, maka tag penutupnya juga sebaiknya di dalam, seperti tag <U> di atas. Baik kita lihat kembali contoh berikut:

<FONT COLOR="red">Ini warna merah.</FONT>
<FONT COLOR="blue">Ini warna biru.</FONT>
<FONT COLOR="green">Ini warna hijau.</FONT>
<FONT COLOR="yellow">Ini warna kuning.</FONT>
<FONT>Ini warna hitam (tanpa menulis color, tulisan anda berwarna hitam sebagai default. </FONT>

<FONT SIZE="1">Ini ukuran 1.</FONT>
<FONT SIZE="2">Ini ukuran 2.</FONT>
<FONT SIZE="3">Ini ukuran 3.</FONT>
<FONT SIZE="4">Ini ukuran 4.</FONT>
<FONT SIZE="5">Ini ukuran 5.</FONT>
<FONT SIZE="6">Ini ukuran 6.</FONT>
<FONT SIZE="7">Ini ukuran 7.</FONT>

<FONT FACE="Arial">Ini memakai font arial.</FONT>
<FONT FACE="Arial Black">Ini memakai font arial black.</FONT>
<FONT FACE="Comic Sans MS">Ini memakai font comic sans MS.</FONT>
<FONT FACE="Courier New">Ini memakai font courier new.</FONT>
<FONT FACE="Helvetica">Ini memakai font helvetica.</FONT>
<FONT FACE="Impact">Ini memakai font impact.</FONT>
<FONT FACE="Times New Roman">Ini memakai font times new roman.</FONT>
<FONT FACE="Verdana">Ini memakai font verdana.</FONT>

<FONT SIZE="4" FACE="Comic Sans MS" COLOR="green"><B> Ini huruf tebal, memakai font Comic Sans MS, berukuran 4, berwarna hijau. </B></FONT>

Anda dapat melihat bahwa urutan antara FACE, SIZE, dan COLOR di dalam tag FONT tidak memiliki aturan baku, dalam arti anda bebas menulis mana duluan. Selain itu anda dapat menulis dengan huruf besar, seperti "FONT" maupun dengan huruf kecil, seperti "font". Keduanya akan memberikan hasil yang sama.

Anda juga dapat mengubah ukuran huruf dengan tag heading, yaitu <H1> sampai <H6>, di mana <H1> adalah yang terbesar, dan <H6> adalah yang terkecil. Perhatikan contoh berikut:

<H1>Ini menggunakan Heading 1</H1>

<H2>Ini menggunakan Heading 2</H2>

<H3>Ini menggunakan Heading 3</H3>

<H4>Ini menggunakan Heading 4</H4>

<H5>Ini menggunakan Heading 5</H5>

<H6>Ini menggunakan Heading 6</H6>

Terakhir, dalam memanipulasi tulisan, anda harus mengenal tiga tag berikut:

<CENTER> Tag ini berfungsi membuat tulisan berada di tengah.</CENTER>

<BR>: Tag ini berfungsi untuk membuat baris baru.
<P>: Tag ini berfungsi untuk membuat paragraf baru.</P>

Tag <P> mempunyai atribut align, seperti <P align="left"> yang membuat paragraf menjadi rata kiri, <P align="right"> yang membuat paragraf menjadi rata kanan dan <P align="center"> membuat paragraf menjadi berada di tengah.

Anda perlu mencoba menulis kode berikut menggunakan notepad dan mencobanya sendiri agar lebih memahami.

<H1>Pemakaian tag</H1>

<P align="right"><FONT COLOR="red"><B> Paragraf ini memberi contoh penggunaan tag P align="right" yang menyebabkan keseluruhan paragraf menjadi rata kanan. Penggunaan tag FONT COLOR="red" menyebabkan seluruh huruf berwarna merah, dan tag B menyebabkan semua menjadi huruf tebal. </B></FONT></P>

Sedang kalau paragraf ini memberi contoh <BR>
pengunaan tag BR. <BR>
Dapat anda lihat walaupun masih tersisa banyak space di kanan, dengan <BR>
menggunakan <BR>
tag BR tulisan dipaksa membuat baris baru. Tanpa tag BR tulisan akan terus mengalir membentuk paragraf yang wajar seperti yang sekarang anda baca. Tulisan tanpa tag BR ini hanya akan membentuk baris baru manakala space sudah habis terisi semua.

<P align="center">Sekarang adalah contoh penggunaan tag P align="center". Tag ini menyebabkan tulisan menjadi berada di tengah, seperti dapat anda lihat sekarang. Juga anda mungkin dapat merasakan perbedaan antara tag P dengan tag BR. Kalau tag BR hanya menyebabkan pindah ke baris baru, tag P menyebabkan lompat membentuk paragraf baru. </P>

</BODY>
</HTML>

OK anda sudah faham cara memanipulasi teks. Kini saya akan memperkenalkan cara membuat link.

Perintah untuk membuat link adalah dengan <A HREF="http://rahim.f2o.org">Nama Link</A>. Anda melihat bahwa tag tersebut diawali dengan A yang merupakan singkatan dari Anchor, kemudian HREF (hypertext reference), yang setelah itu dilanjutkan alamat yang dituju. Perlu diingat alamat yang dituju ini harus berada di antara tanda petik. Setelah itu anda menuliskan nama link-nya - bebas terserah anda, dan terakhir menutup dengan tag </A>. Demikianlah cara membuat link.

Nah berikut ini contoh link beneran yang dapat anda klik. Silakan:

Link di atas akan membawa anda ke situs dengan alamat: http://snow.prohosting.com/nasyrul.

Link tidak harus menuju ke alamat situs lain, tapi dapat juga diarahkan ke alamat imel. Sebagai contoh adalah link berikut, yang kalau anda klik akan membuka software untuk mengirim imel (saya tebak MS Outlook :D) dan mengirim ke alamat email yang dituju.

Perbedaan link untuk email dan link ke alamat situs adalah, untuk link email ada kata mailto sebelum alamat email. Kongkritnya, link di atas saya tulis dengan menggunakan perintah:
<A HREF="mailto:rohim94@yahoo.com">Mengirim email</A>
Nah anda lihat, sebelum menulis alamat email, yaitu rohim94@yahoo.com, saya menyisipkan kata mailto tanpa spasi.

Pemakaian link berikutnya adalah untuk membawa kursor ke posisi tertentu dalam sebuah halaman. Maka kursor akan berpindah ke tulisan di bawah yang menerangkan tentang karakter khusus. Untuk link seperti ini bentuk yang digunakan adalah "<A HREF="#tujuan">Link yang dimaksud</A>". Dan posisi yang dituju ditandai dengan "<A NAME="tujuan"> Posisi yang dituju</A>". Bentuk skema file keseluruhan kira-kira seperti ini:

komentar bebas
.
.
.

komentar bebas
.
.
.

<A NAME="tujuan">Posisi tujuan</A>

komentar bebas
.
.
.

</BODY>
</HTML>

Dari contoh-contoh link di atas, dapat anda lihat bahwa sebelum diklik, link akan berwarna biru dan setelah diklik warnanya berubah menjadi ungu. Hmm, mungkin tadi anda tidak memperhatikan. Baiklah saya beri contoh sebuah link baru yang belum diklik sehingga masih berwarna biru (jika nanti anda klik, warnanya akan berubah menjadi ungu).

Sebenarnya pewarnaan tersebut dapat anda modifikasi dengan tag <BODY>. Bahkan tag <BODY> ini dapat memodifikasi beberapa hal menarik lainnya. O, iya mungkin anda lupa, tag <BODY> telah anda temui pada file contoh pertama anda dalam Tutorial HTML 1. Saya ulangi lagi biar lebih jelas.

Ini file HTML pertama saya. Klik "back button" pada browser untuk kembali.

</BODY>
</HTML>

Pada kode di atas anda melihat tag <BODY>. Untuk memodifikasinya kita memanipulasi atribut pada tag <BODY> tersebut, yaitu :
<BODY BGCOLOR="#FFFF66" TEXT="#0066FF" LINK="#66FF66" VLINK="#FF0000" ALINK="#FFFFFF">
BGCOLOR akan mengubah warna latar belakang, TEXT akan mengubah warna teks yang ditulis, LINK akan mengubah warna link sebelum diklik, VLINK akan mengubah warna link setelah diklik, dan ALINK akan mengubah warna link aktif (artinya saat bekas kursor masih berada di link itu). Sedang mengenai warna, berikut adalah kode yang sering digunakan:

#FFFFFF adalah putih
#FFFF66 adalah kuning
#FF66FF adalah ungu
#FF0000 adalah merah
#66FF66 adalah hijau
#0066FF adalah biru
#00000 adalah hitam

Anda dapat mencoba memvariasikan sendiri kombinasi 6 angka di atas untuk memperoleh warna lainnya.

Untuk lebih memahami tag di atas, silakan anda ketik kode di bawah dan simpan dengan ekstension html kemudian buka menggunakan browser favorit anda.

Latar belakang file ini menjadi kuning. <BR>
Tulisan teks menjadi berwarna biru, walaupun tanpa tag FONT <BR>
Link menjadi berwarna hijau, contohnya <A HREF="http://www.php.net" target="_blank"> link ini</A>. <BR>
Setelah link di atas diklik: <BR>
Warna link berubah menjadi putih, saat bekas kursor masih ada di sana (ALINK) <BR>
Dan setelah bekas kursor anda pindahkan, link tadi menjadi berwarna merah.

</BODY>
</HTML>

Dari kode di atas mungkin anda bertanya-tanya tentang target="_blank". Saya kira jawabannya akan saya pending sampai pembahasan frame nanti. Ingatkan saya.

Berikutnya, saya ingin menginformasikan anda bahwa ada beberapa karakter khusus dalam file HTML. Beberapa yang sering digunakan antara lain:

"	Tanda petik (quote)	"
&	Tanda dan (ampersand)	&
&frasl;	Slash	⁄
<	Kurang dari (less than)	<
>	Lebih dari (greater than)	>
	Spasi
©	Copy right	©

Sebagai contoh, jika anda ingin menulis spasi seperti ini, anda harus menggunakan tanda   karena spasi biasa dalam file kode HTML akan diabaikan. Dan tanda-tanda karakter khusus tadi harus anda tulis menggunakan huruf kecil, persis seperti tabel di atas.

Kemudian sebelum terlupa, saya ingin mengingatkan tentang satu hal. Selama ini kita hanya bermain di dalam blok <BODY> ... </BODY>. Padahal sebenarnya file HTML tidak hanya terdiri dari blok tersebut. Bentuk lengkap dari file HTML adalah:

<HTML>
<HEAD>

Ada sesuatu yang dapat dilakukan di sini.

</HEAD>
<BODY>

Perintah-perintah HTML seperti biasa.

</BODY></HTML>

Tepat kini kita akan mencoba memanipulasi apa yang berada di antara blok
<HEAD> ... </HEAD>.

Apa yang berada di antara blok <HEAD> ... </HEAD> memang tidak akan ditampilkan dalam halaman web anda. Namun tetap mereka memiliki manfaat tersendiri. Untuk saat ini yang saya anggap perlu anda ketahui adalah bahwa ada yang dinamakan tag <TITLE> yang berfungsi memberi judul halaman web anda. Sebagai contoh anda dapat membuat file HTML berbentuk:

<HTML>
<HEAD>
<TITLE>Situs Terhebat di Dunia</TITLE>
</HEAD>
<BODY>

Perintah-perintah HTML seperti biasa.

</BODY></HTML>

Saya sarankan anda membuat file HTML di atas kemudian membukanya menggunakan browser sehingga anda akan mengerti fungsi tag <TITLE> di atas. Yup anda akan melihat judul halaman web anda di bagian atas browser. Saya tidak akan memberi contoh yang bisa anda klik di sini, silakan kerjakan sendiri.

Baik, kini saya akan memberikan tutorial tentang cara menyisipkan gambar dalam situs anda. Tapi ada satu syarat, anda tidak menganggap situs ini membosankan. OK. :D

Perintah untuk menyisipkan gambar dalam file HTML dilakukan menggunakan tag <IMG SRC="nama_gambar.gif">. Yup, hanya dengan tag tersebut. Sebagai contoh kini saya akan menampilkan satu gambar di bawah dengan cara seperti itu.

Sebelum melangkah lebih jauh, terutama membicarakan masalah atribut, rasanya perlu saya jelaskan bahwa file gambar yang umum digunakan untuk hompej ada tiga jenis. Pertama file gif (Graphics Interchange Format) seperti di atas, kemudian file jpg (Joint Photographic Experts Group, terkadang disebut file jpeg) dan yang terakhir file bmp (bitmap). Di antara ketiganya file bmp memiliki kualitas gambar terbaik, namun berukuran relatif besar sehingga akan menambah beban saat meload halaman hompej. Apalagi kalau koneksi internet anda menggunakan dial up, modem 28 kbps ... hehehe ... ke laut deh. Oleh karena itu orang sering menggunakan gambar gif atau jpg. Gambar gif sendiri memiliki satu keunggulan tersendiri, yaitu memungkinkan latar transparan. Contohnya file tintin.gif di atas sebenarnya berbentuk kotak (persegi). Namun karena latarnya transparan menyebabkan terlihat seperti bukan gambar berbentuk kotak.

Anda juga dapat membuat gambar sebagai link. Caranya dengan menulis seperti contoh berikut:<A HREF="http://www.tintin.com" target="_blank"><IMG SRC="tintin.gif"></A>Anda dapat melihat hasilnya di bawah ini, silakan coba diklik:

Keren kan.Kini kita masuk ke atribut. Tag IMG memiliki beberapa atribut yang dapat kita manipulasi. Beberapa atribut yang umum digunakan adalah:

<IMG SRC="nama_gambar.gif" BORDER="0" ALIGN="right" HEIGHT="100" WIDTH="50" ALT="apa hayo" HSPACE="5" VSPACE ="5">

Harga tiap atribut di atas saya tulis sembarang, mari kita bahas satu persatu.
Border berfungsi memberikan pigura pada gambar yang ditampilkan. Mungkin lebih enak kalau saya menerangkan dengan contoh. Jadi di bawah ini gambar Tintin di atas saya tampilkan dengan border yang berbeda-beda.

Gambar ini tanpa memakai align, kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)	Gambar ini memakai align="left", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)
Gambar ini memakai align="right", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)	Gambar ini memakai align="top", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)
Gambar ini memakai align="middle", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)	Gambar ini memakai align="bottom", kemudian tulisannya sengaja dipanjangin untuk ngeliat efeknya terhadap posisi gambar. Apakah anda sudah dapat melihat perbedaannya, kalau belum mending ke laut deh. :)

Kini saya akan menjelaskan tentang align, yaitu posisi terhadap teks. Posisi yang umum digunakan adalah "left", "right", "top", "middle", "bottom". Anda dapat melihat hasil penggunaan align yang berbeda pada contoh berikut.

Gambar di atas menggunakan perintah yang sama, yaitu:
<IMG SRC="asterix.jpg" ALIGN="......">Gambar ini memakai align="....".... . Namun ternyata hasil yang ditampilkan berbeda tergantung align yang digunakan. Penggunaan align="left" menyebabkan gambar berada di sebelah kiri tulisan, dan sebaliknya penggunaan align="right" menyebabkan gambar berada di sebelah kanan tulisan, dst.

Atribut berikutnya adalah HEIGHT dan WIDTH, yaitu tinggi dan lebar gambar yang akan ditampilkan. Angka yang ditampilkan sebaiknya sesuai dengan ukuran gambar (proporsional) sehingga bentuk gambar yang ditampilkan tidak mengalami distorsi. Di bawah ini saya berikan contoh penggunaan atribut HEIGHT dan WIDTH secara sembarangan.


HEIGHT="100" WIDTH="50"	HEIGHT="50" WIDTH="100"	HEIGHT="188" WIDTH="160"	HEIGHT="94" WIDTH="80"

Kita lihat dengan mempermainkan harga HEIGHT dan WIDTH kita dapat mendistorsi gambar yang ditampilkan, juga dapat memperbesar gambar asalkan harga HEIGHT dan WIDTH yang kita tampilkan proporsional dengan ukuran sebenarnya. Untuk mengetahui harga HEIGHT dan WIDTH yang sebenarnya, salah satunya dengan menggunakan Adobe Photoshop. Buka file gambar yang ingin kita ketahui ukurannya, kemudian klik Image -> Image Size. Maka akan kita peroleh ukuran gambar yang sebenarnya. File tintin.gif di atas memiliki ukuran HEIGHT="94" dan WIDTH="80".

Atribut selanjutnya yang akan kita bahas adalah ALT. Harga yang kita isi pada atribut ALT akan memberikan keterangan tentang gambar yang akan ditampilkan. Juga saat gambar tidak dapat ditampilkan (misalkan file gambar yang dipanggil tidak ada), maka tulisan pada ALT tersebut yang akan ditampilkan. Hal ini berguna untuk memberikan informasi kepada pengunjung situs, saat gambar tidak muncul karena satu dan lain hal.

Gerakkan kursor anda ke sekitar gambar, maka tulisan pada pesan ALT di atas akan muncul.

Atribut terakhir yang akan dibahas di sini adalah HSPACE dan VSPACE. Atribut ini mengatur jarak antara gambar dengan tulisan yang berada di sekitarnya. HSPACE mengatur jarak horizontal antara gambar dan tulisan, sedang VSPACE mengatur jarak vertikal antara gambar dan tulisan. Contoh penggunaannya adalah pada gambar berikut.

Pada contoh gambar ini tidak digunakan atribut HSPACE dan VSPACE yang dapat juga diartikanHSPACE="0" dan VSPACE="0". Sengaja digunakan align="left" agar dampak penggunaan atribut HSPACE dan VSPACE dapat lebih jelas terlihat. Hmm saya masih perlu tambahan tulisan lain agar apa yang saya maksudkan terlihat jelas. Oleh karena itu tulisan yang sebenarnya tidak perlu ini, tetap saya tulis. Garink banget kan. :)

Sedang gambar ini menggunakan atribut SPACE="20" dan VSPACE="20". Gambar ini juga menggunakan align="left" dengan maksud yang sama seperti gambar di atas, agar dampak penggunaan atribut HSPACE dan VSPACE dapat lebih jelas terlihat. Hmm saya masih perlu tambahan tulisan lain agar apa yang saya maksudkan terlihat jelas. Oleh karena itu tulisan yang sebenarnya tidak perlu ini, tetap saya tulis. Garink banget kan. :)

Anda dapat melihat perbedaannya. Dengan adanya atribut HSPACE dan VSPACE, maka terdapat jarak antara gambar dan tulisan.

Kemudian tentang gambar, ada satu penggunaan penting lainnya yang belum saya sebutkan, yaitu sebagai latar belakang. Jika digunakan sebagai latar belakang maka gambar tersebut akan disusun hingga memenuhi seluruh layar. Sebagai contoh kita dapat menggunakan gambar kecil berikut,

Perintah yang digunakan untuk menjadikan gambar sebagai latar belakang adalah menggunakan tag <BODY>. Satu atribut penting yang belum dibahas saat membahas tag ini pada tutorial sebelumnya adalah atribut BACKGROUND. Jadi perintah yang digunakan untuk membuat halaman seperti pada contoh tadi adalah:

<HTML><BODY BACKGROUND="back.jpg"></BODY></HTML>

Untuk membuat tabel, tag yang digunakan minimal ada tiga, <TABLE>, <TR> dan <TD>. OK, saya contohkan tabel yang paling sederhana, yang hanya terdiri dari satu sel (satu kotak). Perhatikan contoh berikut:

<TABLE><TR><TD>Isi Tabel</TD></TR></TABLE>

Tabel di atas akan memberikan hasil seperti ini

Isi Tabel

Masih belum seperti tabel ya ... tapi percayalah itu adalah tabel. Trust me, I know what I'm doing. Keterangan perintah di atas kira-kira seperti ini:
<TABLE>: Tag ini menyuruh membuat tabel.
<TR>: Nah kalau tag yang ini nyuruh bikin baris.
<TD>: Terakhir tag yang ini, nyuruh bikin kolom.
Jadi urutannya seperti di atas bikin tabel, terus bikin baris, dan terakhir bikin kolom. Kita dapat menambah isi tabel tersebut, misalnya menjadi 2 baris dan 3 kolom dengan perintah berikut:

<TABLE><TR><TD>Baris 1 Kolom 1</TD><TD>Baris 1 Kolom 2</TD><TD>Baris 1 Kolom 3</TD></TR><TR><TD>Baris 2 Kolom 1</TD><TD>Baris 2 Kolom 2</TD><TD>Baris 2 Kolom 3</TD></TR></TABLE>

Berikut ini tabel di atas saya modifikasi dengan perintah border (Dari tabel di atas kita dapat menarik kesimpulan bahwa default adalah BORDER="0", artinya jika tidak ditulis harga tersebutlah yang berlaku).

<TABLE BORDER="1"><TR><TD>Baris 1 Kolom 1</TD><TD>Baris 1 Kolom 2</TD><TD>Baris 1 Kolom 3</TD></TR><TR><TD>Baris 2 Kolom 1</TD><TD>Baris 2 Kolom 2</TD><TD>Baris 2 Kolom 3</TD></TR></TABLE>

Hasilnya akan menjadi seperti ini:

Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3

Kita dapat mengubah ukuran border dengan bebas. Sebagai contoh jika menggunakan BORDER="5", maka hasilnya akan menjadi:

Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3

Dan jika menggunakan BORDER="20" hasilnya akan seperti ini:

Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3

Selain border, ada 4 atribut lainnya pada tag <TABLE> yang sering digunakan, yaitu CELLSPACING, CELLPADDING, WIDTH dan HEIGHT. Kita bahas satu-persatu.

CELLSPACING mengatur jarak antar sel. Sebagai contoh, tabel di atas kita modifikasi menggunakan CELLSPACING="10" sebagai berikut. Sebagai informasi, default untuk CELLSPACING adalah CELLSPACING="2".

<TABLE BORDER="1" CELLSPACING="10"><TR><TD>Baris 1 Kolom 1</TD><TD>Baris 1 Kolom 2</TD><TD>Baris 1 Kolom 3</TD></TR><TR><TD>Baris 2 Kolom 1</TD><TD>Baris 2 Kolom 2</TD><TD>Baris 2 Kolom 3</TD></TR></TABLE>

Maka hasilnya adalah sebagai berikut:

Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3

Dan jika menggunakan CELLSPACING="20", maka jarak antar sel akan semakin besar, seperti pada tabel berikut:

Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3

Sedang CELLPADDING akan menentukan jarak antara isi sel dengan bordernya. Sebagai contoh jika tabel dengan BORDER="1" menggunakan CELLPADDING="10" seperti kode berikut ini. O, ya default nilai CELLPADDING adalah CELLPADDING="1".

<TABLE BORDER="1" CELLPADDING="10"><TR><TD>Baris 1 Kolom 1</TD><TD>Baris 1 Kolom 2</TD><TD>Baris 1 Kolom 3</TD></TR><TR><TD>Baris 2 Kolom 1</TD><TD>Baris 2 Kolom 2</TD><TD>Baris 2 Kolom 3</TD></TR></TABLE>

Menambah harga CELLPADDING menjadi CELLPADDING="20" akan makin memperbesar ukuran sel (menambah jarak dari sel ke border) seperti pada tabel di bawah ini:

Atribut terakhir pada tag <TABLE> yang akan kita bahas adalah WIDTH. Atribut ini akan menentukan lebar tabel.

<TABLE BORDER="1" WIDTH="400">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
<TD>Baris 2 Kolom 3</TD>
</TR>
</TABLE>

Jika juga dapat mengubah harga WIDTH menjadi WIDTH="500" yang tentu akan memperlebar ukuran tabel, seperti contoh berikut:

Lebar tabel tidak hanya didefinisikan dengan harga yang fix seperti di atas, tetapi bisa juga didefinisikan dengan persentasi dari lebar window.

Apabila anda memperkecil ukuran window anda, maka akan anda lihat lebar tabel akan berubah jika kita mendefinisikan dalam persen. Namun lebar tabel akan tetap jika didefinisikan dalam harga mutlak.

Atribut HEIGHT mirip dengan WIDTH, hanya HEIGHT mendefinisikan tinggi tabel. Sebagai contoh tinggi tabel di atas kita ubah menjadiHEIGHT="100". Maka kode kita menjadi:
<TABLE BORDER="1" HEIGHT="100">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
<TD>Baris 2 Kolom 3</TD>
</TR>
</TABLE>

Kini kita akan membicarakan atribut dalam tag <TR> dan <TD>. Atribut yang pertama kita bicarakan adalah ALIGN dan VALIGN. Atribut ALIGN mempunyai tiga harga, "left", "center" dan "right", yang berarti rata kiri, di tengah, dan rata kanan. Sedang VALIGN juga mempunyai tiga harga, "top", "middle" dan "bottom", yang berarti di atas, di tengah dan di bawah. Sebagai contoh adalah tabel berikut ini. Anda dapat melihat bahwa tiap sel memiliki harga ALIGN dan VALIGN yang berbeda-beda, sehingga posisinya akan berbeda-beda juga. Pada baris pertama dan baris kedua, harga ALIGN dan VALIGN diset untuk setiap sel (pada tag <TD>), sedang pada baris ketiga dan keempat harga ALIGN dan VALIGN diset untuk setiap baris (pada tag <TR>).
Sebagai catatan, atribut ALIGN dan VALIGN tidak dapat digunakan bersamaan dengan atribut CELLPADDING. Karena penggunaan atribut CELLPADDING otomatis akan menyebabkan isi sel berada di tengah. Default untuk ALIGN dan VALIGN adalah ALIGN="left" dan VALIGN="middle"

<TABLE BORDER="5" WIDTH="500" HEIGHT="200">
<TR>
<TD ALIGN="left" VALIGN="top">Baris 1 Kolom 1</TD>
<TD ALIGN="center" VALIGN="middle">Baris 1 Kolom 2</TD>
<TD ALIGN="right" VALIGN="bottom">Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD ALIGN="left" VALIGN="bottom">Baris 2 Kolom 1</TD>
<TD ALIGN="center" VALIGN="top">Baris 2 Kolom 2</TD>
<TD ALIGN="right" VALIGN="middle">Baris 2 Kolom 3</TD>
</TR>
<TR ALIGN="left" VALIGN="top">
<TD>Baris 3 Kolom 1</TD>
<TD>Baris 3 Kolom 2</TD>
<TD>Baris 3 Kolom 3</TD>
</TR>
<TR ALIGN="right" VALIGN="bottom">
<TD>Baris 4 Kolom 1</TD>
<TD>Baris 4 Kolom 2</TD>
<TD>Baris 4 Kolom 3</TD>
</TR>
</TABLE>
Kini kita akan membicarakan beberapa atribut pada tag <TD>, yaitu COLSPAN dan ROWSPAN. Kita mulai dari COLSPAN. Atribut COLSPAN ini digunakan untuk menggabung beberapa kolom. Harga yang diisi adalah jumlah kolom yang bergabung. Sebagai contoh anda dapat melihat kode HTML berikut:

<TABLE BORDER="5">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
<TD>Baris 1 Kolom 4</TD>
<TD>Baris 1 Kolom 5</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD COLSPAN="3">Kolom 2, 3 dan 4 bergabung</TD>
<TD>Baris 2 Kolom 5</TD>
</TR>
</TABLE>

(ATAU)

<TABLE BORDER="5">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
<TD>Baris 1 Kolom 4</TD>
<TD>Baris 1 Kolom 5</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD COLSPAN="3">Kolom 2, 3 dan 4 bergabung</TD>
<TD>Baris 2 Kolom 5</TD>
</TR>
</TABLE>

Atribut ROWSPAN mirip dengan atribut COLSPAN, hanya di sini yang bergabung adalah baris. Contoh penerapannya adalah sebagai berikut:

<TABLE BORDER="5">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD ROWSPAN="2">Baris 1 dan 2 bergabung.</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
</TR>
</TABLE>

Kini kita akan membahas tentang WIDTH sekali lagi, hanya kali ini kita gunakan untuk tag <TD>. Tanpa menggunakan atribut ini, lebar kolom biasanya akan menyesuaikan diri sesuai dengan isi kolom. Sebagai contoh perhatikan kode HTML berikut:

<TABLE border="5"><TR><TD>Pensil</TD><TD>Komputer IBM Thinkpad</TD><TD>Penghapus</TD></TR><TR><TD>Buku</TD><TD>Penggaris</TD><TD>Buku Panduan Macromedia Flash MX</TD></TR></TABLE>

Kita lihat kode HTML di atas secara otomatis akan menghasilkan kolom yang lebar untuk sel yang isinya panjang, seperti terlihat pada tabel di bawah.

Pensil	Komputer IBM Thinkpad	Penghapus
Buku	Penggaris	Buku Panduan Macromedia Flash MX

Namun kita dapat mengatur lebar kolom sesuai keinginan dengan menggunakan atribut WIDTH di dalam tag <TD>. Contohnya adalah sebagai berikut:

<TABLE border="5">
<TR>
<TD WIDTH="200">Pensil</TD>
<TD WIDTH="100">Komputer IBM Thinkpad</TD>
<TD WIDTH="150">Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>

Hasilnya akan terlihat sebagai berikut:

Pensil	Komputer IBM Thinkpad	Penghapus
Buku	Penggaris	Buku Panduan Macromedia Flash MX

Kita juga dapat memberikan nilai WIDTH berupa persentase, seperti contoh berikut:

<TABLE border="5" WIDTH="600"><TR><TD WIDTH="40%">Pensil</TD><TD WIDTH="35%">Komputer IBM Thinkpad</TD><TD WIDTH="25%">Penghapus</TD></TR><TR><TD>Buku</TD><TD>Penggaris</TD><TD>Buku Panduan Macromedia Flash MX</TD></TR></TABLE>

Hasilnya akan terlihat sebagai berikut:

Pensil	Komputer IBM Thinkpad	Penghapus
Buku	Penggaris	Buku Panduan Macromedia Flash MX

Sebagai catatan, jika menginginkan lebar tabel tetap walaupun window diperkecil hingga lebih kecil daripada lebar tabel, maka perlu menggunakan atribut WIDTH="angka (bukan persen)" di dalam tag <TABLE> bukan di dalam tag <TD>.

Sekarang kita akan bermain warna. Untuk memberi warna pada latar kita menggunakan atribut BGCOLOR yang dapat diletakkan pada tag <TABLE>, tag <TR> maupun tag <TD>. Kode warna yang digunakan sama dengan yang telah kita pelajari pada Tutorial HTML 1. Sebagai contoh, saya akan membuat sebuah tabel dengan latar belakang berwarna kuning. Maka kode yang saya gunakan adalah. O ya untuk mengubah warna tulisan tentu saja seperti biasa anda dapat mempergunakan tag <FONT> di dalam <TD>. Sebagai contoh tulisan komputer akan saya buat berwarna merah.

<TABLE border="5" BGCOLOR=#FFCC00><TR><TD>Pensil</TD><TD><font color="red"> Komputer IBM Thinkpad</font></TD><TD>Penghapus</TD></TR><TR><TD>Buku</TD><TD>Penggaris</TD><TD>Buku Panduan Macromedia Flash MX</TD></TR></TABLE>

Lihat saya telah membuat latar berwarna kuning.

_top, akan menampilkan alamat yang dipanggil di window yang sama - full satu window - tidak peduli sebelumnya ada frame atau tidak.

_self, menampilkan alamat yang dipanggil di tempat yang sama. Kalau yang memanggil adalah sebuah frame, maka halaman yang dipanggil akan ditampilkan di frame itu.

_parent, ini akan menampilkan alamat yang dipanggil di frameset satu tingkat lebih tinggi dari frame yang memanggil.

Jadi kalau anda bermain dengan frame, yang paling aman adalah menggunakan target="_top" yang berarti alamat yang dipanggil akan muncul lengkap mengisi satu window, full; atau sekalian memakai target="_blank" yang berarti alamat yang dipanggil akan muncul di window baru.

Terakhir, anda harus memperhatikan bahwa ada browser tertentu yang tidak mensupport frame. Artinya halaman situs anda tidak akan tampak, saat mereka panggil. Untuk mensiasatinya anda dapat menggunakan tag <NOFRAME>. Tempatkan tag ini di dalam tag <FRAMESET>. Jika browser tidak mensupport frame, maka tulisan yang ada di dalam tag NOFRAME lah yang akan ditampilkan. Perhatikan contoh berikut.

<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>

<NOFRAME>
Tulisan yang berada di sini akan ditampilkan oleh browser yang tidak mensupport frame. Di sini anda dapat menulis apapun, termasuk menampilkan gambar dan link.
</NOFRAME>

</FRAMESET>

</HTML>

Akhirnya ... capekk. :( ... Ngantuk .. tapi seneng. :)
btw saya masih punya hutang satu tutorial HTML lagi untuk diselesaikan. Huahhh.

Operasi Semut, Menyisir Yang Tersisa
oleh Abdur Rahim

Sebenarnya anda bisa dibilang sudah mahir kalau memang mengikuti keseluruhan tutorial yang telah saya sampaikan sebelumnya. Tapi kalau anda ingin tahu lebih banyak, baiklah akan saya beberkan beberapa jurus rahasia yang hanya boleh dipelajari oleh mereka yang telah memiliki kuda-kuda yang cukup baik. :D

Pertama, sekali lagi kita bicara tentang format dan manipulasi teks. Ada beberapa tag yang belum saya bahas, antara lain:

Tag ini gunanya untuk mengkuot (bahasa Indonesia yang bener apaan sih) paragraf. Contohnya, ya ini. Anda bisa melihat sendiri kalau paragraf ini berbeda kan dengan paragraf lainnya.:) Yup, paragraf ini jadi sedikit lebih ke dalam, istilahnya indent.

Kemudian yang fungsinya agak mirip adalah tag berikut:

Tag Cite: Tag <CITE> ini berguna kalau misalnya kita sedang mengutip. Misalnya kayak tulisan ini yang saya maksudkan sebagai definisi penggunaan tag <CITE>. Dengan memakai tag <CITE> tulisan menjadi miring (italic), ya kayak inilah.

Nah tag lain yang juga membahas tentang paragraf adalah tag DIV seperti ini:

Tag <DIV> ini berguna untuk memformat satu paragraf dan dengan atribut yang umum dipakai ALIGN dan STYLE. Untuk atribut ALIGN bisa diisi "left", "center" atau "right" yang artinya rata kiri, tengah, atau rata kanan. Sedang STYLE berguna untuk mendefinisikan font dalam paragraf tersebut, baik ukuran (SIZE), jenis font (FACE), pokoknya tentang font deh. Tapi STYLE ini harus didefinisikan dulu di bagian <HEAD>. Masih ingat kan tentang HEAD ? Itu lho bagian di atas . Tapi .. mmm saya fikir untuk saat ini kita belum perlu belajar STYLE. Kalau contoh pemakaian DIV, ya paragraf ini. Sekarang saya bikin align="center".

Berikutnya ada tag yang rada cool:

Dengan tag ini kita bisa membuat tulisan yang kita tampilkan akan muncul dengan persis. Misal tulisan seperti ini:

       **********************

          MAUNYA SIH BIKIN

           @          @

* *

            *********

           KEPALA ORANG

       **********************

Tanpa menggunakan tag <PRE>, hasilnya akan seperti ini:

********************** MAUNYA SIH BIKIN @ @ * * * ********* KEPALA ORANG **********************

Dengan menggunakan tag <PRE> .... </PRE>, noda-noda yang membandel akan hilang .. jrenggg ..

       **********************

          MAUNYA SIH BIKIN

           @          @

* *

            *********

           KEPALA ORANG

       **********************

Berikutnya, kita akan membahas tentang tag tag <STRIKE>. Saya sendiri hampir nggak pernah make nih. Bentuknya:

Tag ini akan menyebabkan ada garis yang memotong huruf. Mungkin salah satu gunanya menunjukkan adanya koreksi. Misalnya saya tulis seperti ini:
Harga Lama: ~~1500~~
Harga Baru: 2000

Nah untuk harga lama kita pakai STRIKE - dicoret.

Terus sekarang kita akan membahas tag berikut:

Tulisan yang berada di antara tag <SUB> dan </SUB> akan ditampilkan turun (subscript). Contoh penggunaannya untuk menulis rumus kimia, misalnya seperti ini:

H₂O adalah air, kalau C₆H₁₂O₆ adalah karbohidrat. Gitu, keren kan.

Nah kalau ngomongin SUB, tentu kita ingat pasangannya.

SUP kebalikannya, akan menampilkan tulisan naik (superscript). Contohnya seperti di rumus berikut: E = mc²

Adalagi tag yang seperti ini:

Tag <TT> ini akan menampilkan toelisan jang mirip dengan toelisan mesin ketik zaman perdjoeangan. Tjontoh-tjontoh toelisan di masa silam terseboet akan tjoba saya tampilkan dalam toelisan jang sederhana ini. Sengaja font size jang digoenakan saya perbesar agar kegoenaan tag TT ini lebih dapat mendjadi periksa. Apa tjoba .. Gitjuuu. :D

Terus untuk urusan tabel sebenarnya kita punya tag <CAPTION> yang gunanya untuk ngasih judul, dan tag <TH> yang gunanya bikin header. Lihat deh contoh pemakaiannya. Saya akan menulis seperti ini. Tag <CAPTION> otomatis membuat tulisan jadi di tengah, sedang tag <TH> otomatis membuat tulisan jadi tebal. Tag <CAPTION> ditulis di luar tag <TR> dan <TD>. Sedang tag <TH> digunakan untuk membuat sel seperti biasa (sama dengan tag <TD>>

<TABLE BORDER="1">
<CAPTION>Ini Caption</CAPTION>
<TR>
<TH>Ini Header pake TH</TH>
<TD>Ini pake TD</TD>
</TR>
<TR>
<TD>Ini sel biasa</TD>
<TD>Ini juga sel biasa</TD>
</TR>
</TABLE>

Dan hasilnya akan seperti ini:

Ini Caption
Ini Header pake TH	Ini pake TD
Ini sel biasa	Ini juga sel biasa

Sekarang kita bicara tentang list. Ada beberapa tag yang berhubungan dengan fungsi list, yaitu:

<OL> ....... </OL>
<UL> ....... </UL>
<LI>

Lihat di atas saya telah menggunakan list. Anda penasaran bagaimana membuatnya, simak penuturan saksi mata di bawah ini.

UL (unordered list) digunakan untuk membuat list dengan bulletizing. Jadi membuat daftar barang memakai bullet (item-item di depan tiap barang). Cara pemakaiannya adalah seperti ini.

<UL>
<LI> Barang Pertama
<LI> Barang Kedua
<LI> Barang Ketiga
</UL>

Jadi dibuka dengan <UL> dan ditutup dengan </UL>. Di dalamnya diisi dengan tag <LI> sebanyak barang yang dibutuhkan. Dapat kita lihat tag <LI> tidak perlu ditutup dengan </LI>. Hasil kode di atas seperti ini.

Barang Pertama
Barang Kedua
Barang Ketiga

Kalau kita mengganti UL dengan OL (ordered list), maka list kita akan diberi nomor (bukan bullet). Lihat kode di bawah ini:

<OL>
<LI> Barang Pertama
<LI> Barang Kedua
<LI> Barang Ketiga
</OL>

Dan hasilnya seperti ini:

Barang Pertama
Barang Kedua
Barang Ketiga

Terakhir kita bicara tentang URL. Anda tahu kan URL ini adalah halaman sebuah situs yang mengacu kepada sebuah file, misalnya "http://rahim.f2o.org/html/final.html". Kita telah sering menggunakan URL sebelumnya, misalnya pada saat menulis:

<IMG SRC="tintin.gif">
<A HREF="final.html">

Anda masih ingat kode HTML di atas bukan ? Nah mungkin anda bertanya mengapa kita tidak menggunakan URL lengkap seperti misalnya:
<A HREF="http://rahim.f2o.org/html/final.html">
tetapi kita hanya menuliskannya:
<A HREF="final.html">

Jawabannya adalah karena kita menggunakan URL relatif, bukan URL absolut. URL relatif ini dapat anda gunakan jika file yang anda tuju (*.html, *.gif, *.jpg, dll) berada pada server yang sama. Jika file tersebut berada pada server yang berbeda, mau tidak mau anda harus menuliskannya lengkap, seperti:
<A HREF="http://www.oocities.com/rohim94/index.html">

Nah untuk URL relatif, aturannya adalah sebagai berikut:

Jika file berada pada folder yang sama, maka kita cukup memanggil namanya, misal:
<A HREF="final.html">
Posisi file mungkin seperti ini:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/html/final.html
Dari file tutorial.html untuk memanggil file final.html, cukup namanya saja.
Jika file berada pada folder yang lebih atas, maka digunakan "../sesuatu.html", contohnya:
<A HREF="../contoh.html">
Posisi file mungkin seperti ini:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/contoh.html
Sekali lagi, kita sedang berada di tutorial.html dan akan memanggil contoh.html. (Pokoknya kita tuh selalu tutorial.html - apapun yang terjadi).
Jika file berada pada folder yang lebih bawah, maka kita tuliskan foldernya "folder/sesuatu.html", contohnya:
<A HREF="frame/tambahan.html">
Posisi file mungkin seperti ini:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/html/frame/tambahan.html
atau
<IMG SRC="pic/tintin.gif">
Dengan posisi file:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/html/pic/tintin.gif
Jika file berada pada folder yang berbeda, maka kita harus 'naik' dulu kemudian 'turun' ke folder yang dituju "../folder/sesuatu.html", misalnya:
<A HREF="../php/script.php">
Posisi file mungkin seperti ini:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/php/script.php

Untuk Belajar Membuat Frame, Silahkan Download File Ini:

Untuk Mendownload Yang Ada di Atas, Klik Gambar Di bawah ini:

Cari Blog Ini

Cara Belajar HTML++

Cara Membuat HTML

<H1>Ini menggunakan Heading 1</H1>

<H2>Ini menggunakan Heading 2</H2>

<H3>Ini menggunakan Heading 3</H3>

<H4>Ini menggunakan Heading 4</H4>

<H5>Ini menggunakan Heading 5</H5>

<H6>Ini menggunakan Heading 6</H6>

<H1>Pemakaian tag</H1>

Komentar

Posting Komentar

Banner Atas
Menu Samping	Isi Menu Utama berupa tabel

Gambar	Judul
Cerita

File: "judul.html"
File= "menu.html"	File= "isi.html"