Tutorial HTML

Untuk memudahkan dan memperjelas, mulai sekarang saya hanya akan menuliskan apa yang ada di antara tag <BODY>. Saya tidak akan menuliskan tag <HTML>, <HEAD> & <TITLE>. Tentu saja anda harus tetap menuliskannya di dalam dokumen anda.

<BODY>
</BODY>

Tuliskan sesuatu yang menarik.

<BODY>
Sesuatu yang menarik
</BODY>
Sesuatu yang menarik

Setiap kali anda mengubah dokumen anda, simpanlah, kemudian tekan tombol Reload di browser anda untuk menampilkan perubahan tersebut. Kadang-kadang cara ini kurang berhasil…. untuk itu tekan tombol Reload sambil menekan tombol SHIFT.


Saya pikir hal pertama yang akan kita pelajari adalah cara mengubah warna latar belakang browser.

<BODY BGCOLOR=”#CCFFCC”>
Sesuatu yang menarik
</BODY>
Sesuatu yang menarik

CCFFCC adalah kode untuk warna hijau muda. Masih ada beberapa lagi.
Dalam mode 256 warna, Netscape menampilkan segala sesuatu sesuai warna-warna ini. Jika warna latar belakang yang kita gunakan bukan salah satu dari ini, Netscape biasanya akan memilih warna terdekat.


Anda dapat juga menggunakan gambar sebagai latar belakang. (Ingat, file gambar tersebut harus berada pada direktori yang sama dengan file HTML anda. Ini akan kita bahas lagi nanti.)

<BODY BACKGROUND=”swirlies.gif”>
Sesuatu yang menarik
</BODY>

Inilah gambar latar belakangnya.

Agar gambar tadi bisa tampil, browser harus dapat menemukannya. Untuk saat ini, kita ingin menempatkannya di direktori yang sama dengan file HTML anda (hal1.html). Cara termudah untuk itu adalah dengan meng-klik kanan gambar di atas dan memilih Save Image As (kurang lebih seperti itu). Cari direktori yang berisi hal1.html dan simpan gambar tersebut di sana. Nanti kita akan membahas hal ini lebih rinci lagi.


Rasanya sangat jelas bahwa gambar kecil di atas ditampilkan bersusun/berulang sehingga memenuhi seluruh browser (tiled, seperti memasang keramik). Jika anda menggunakan gambar kecil yang panjang, anda akan mendapatkan efek seperti ini….

<BODY BACKGROUND=”bluebar.gif”>
Sesuatu yang menarik
</BODY>

Ini adalah gambar latar belakang tersebut

(Ukuran sebenarnya 1700×4, tetapi saya ubah menjadi 564×4 agar bisa tampil utuh di layar)


Mari kita kembali ke tampilan awal.

<BODY>
Sesuatu yang menarik
</BODY>
Sesuatu yang menarik

Kita dapat membuatnya menjadi tebal (bold).

<BODY>
Sesuatu yang <B>menarik</B>
</BODY>
Sesuatu yang menarik

Yang kita katakan pada browser (kurang lebih) adalah: pada tag <B> mulai tampilan tebal, dan pada </B> mengakhiri tampilan tebal tersebut.


Prinsip yang sama berlaku untuk tampilan miring (italic)….

<BODY>
Sesuatu <I>yang</I> <B>menarik</B>
</BODY>
Sesuatu yang menarik

….dan bergaris bawah (underlined).

<BODY>
<U>Sesuatu</U> <I>yang</I> <B>menarik</B>
</BODY>
Sesuatu yang menarik

Kembali lagi ke tampilan awal.

<BODY>
Sesuatu yang menarik
</BODY>
Sesuatu yang menarik

Kita dapat menggabungkan beberapa tag jika kita mau.

<BODY>
Sesuatu yang <I><B>menarik</B></I>
</BODY>
Sesuatu yang menarik

Ini adalah contoh tag bersusun (nested tags). Jika anda ingin menggunakan gabungan beberapa tag (yang mungkin akan anda lakukan beberapa kali), maka agar tidak membingungkan browser, pasangan tag tersebut harus bersusun secara benar (nested), tidak bersilangan (overlapping). Lihat contoh berikut….

   <INI><ITU></INI></ITU>    Tag bersilangan…. jangan
   <INI><ITU></ITU></INI>    Tag bersusun…. bagus

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

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

%d blogger menyukai ini: