Seri Tutorial - HTML 1
Dikutip dari http://www.rahim.f2o.org/html/html_1.php
Aha, jadi anda ingin mulai belajar HTML nech ceritanya. OK, dengan tutorial ini saya yakin anda akan mampu segera memasteri HTML, mmm tepatnya HTML statik. Karena kalau anda ingin belajar HTML dinamik, anda harus juga mempelajari tutorial lainnya yang untungnya saya sediakan di situs ini.
Saya tidak akan berbuih menerangkan kepada anda apa itu HTML, bagaimana sejarah HTML, karena target saya bukanlah menjadikan anda lulus ikut ujian "Pengenalan HTML", tapi target saya menjadikan anda mumpuni, dan mampu membuat hompej, minimal hompej pribadi.
Baik, file HTML (HyperText Markup Language, hehehe tetep aja mendingan tau kepanjangannya :)) minimal terdiri dari perintah berikut:
<HTML>
<BODY>
Ini file HTML pertama saya. Klik "back button" pada browser untuk kembali.
</BODY>
</HTML>
Demikianlah file HTML yang paling sederhana. 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. :( (hasil dapat anda lihat di sini)
Kalau begitu kita harus cepat melaju. 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.
<HTML>
<BODY>
<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. Sebagai contoh kalau anda klik link ini, 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:
<HTML>
<BODY>
komentar bebas
.
.
.
<A HREF="#tujuan">Link asal</A>
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.
<HTML>
<BODY>
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. Atau anda dapat melihat referensi di sini: Referensi Warna
Untuk lebih memahami tag di atas, silakan anda ketik kode di bawah dan simpan dengan ekstension html kemudian buka menggunakan browser favorit anda.
<HTML>
<BODY BGCOLOR="#FFFF66" TEXT="#0066FF" LINK="#66FF66" VLINK="#FF0000" ALINK="#FFFFFF">
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>
Hasil dari kode HTML di atas dapat dilihat di sini.
Dari kode di atas mungkin anda bertanya-tanya tentang target="_blank". Saya kira jawabannya akan saya pending sampai pembahasan frame nanti. Ingatkan saya. :)
Ma'af menginterupsi, ini adalah posisi yang dituju oleh link di atas. Untuk kembali klik link ini.
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)
|
&
|
⁄
|
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. Referensi lengkap tentang karakter khusus ini dapat anda lihat di: Referensi Karakter Khusus
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.
Situs-situs yang hanya berisi tulisan biasanya sangat membosankan. Wekss ... anda tidak menganggap situs ini membosankan kan ? please ...;)
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.
Cakep kan gambarnya. :)
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:
0 Response to "Belajar HTML 1 dasar "
Post a Comment