HTML Hyper Text Markup Language HTML adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform computer ke platform computer lainnya tanpa perlu melakukan suatu perubahan apapun. Dokumen HTML disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Perbedaan dokumen HTML dengan document teks adalah bahwa anda dapat memberikan suatu format tertentu, seperti bentuk tebal, miring, form, list, table pada dokumen HTML sedangkan pada teks biasa anda tidak dapat melakukannya. Disamping itu adalah adanya elemen-elemen HTML beserta tag-tagnya ( ditulis dengan tanda < > ) Untuk membuat dokument HTML, dapat digunakan beberapa editor seperti Notepad dan wordpad,
DASAR-DASAR HTML A. Elemen Dibagi menjadi dua kategori utama, yaitu elemen-elemen <HEAD> yang memberikan informasi tentang dokumen tersebut seperti judul dokumen atau hubungannya dengan dokumen lainnya, serta yang kedua adalah elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser internet, seperti paragraph, list, table, dsb. B. Tag Tag dinyatakan dengan tanda lebih kecil ( < ) dan tanda lebih besar (> ), tag biasanya merupakan suatu pasangan yang disebut tag awal <nama tag> dan tag akhir </nama tag> , sebagai contoh untuk menampilkan teks dalam format miring digunakan elemen I, yang dinyatakan seperti berikut : <I> Teks ini akan terlihat miring di browser </I> <B> Teks ini akan terlihat tebal di browser </B> Note : HTML tidak membedakan antara huruf besar dan huruf kecil dari suatu elemen, semuanya akan memberikan hasil yang sama. HTML tidak membenarkan penulisan tag yang tumpang tindih, seperti : <tag1> Teks untuk tag1 <tag2> Teks untuk tag2 </tag1> </tag2>
Contoh penulisan tag yang benar adalah Teks untuk tag1 <tag2> Teks untuk tag2 </tag2> </tag1> C. Atribut Tag awal bisa memiliki beberapa buah atribut atau property yang menyatakan karakteristik dari tag tersebut, misalnya dalam <P ALIGN=”center”>, atribut dengan nama ALIGN mempunyai nilai “center” yang berfungsi untuk menengahkan paragraph. Bahkan tag bias mengandung beberapa atribut, seperti pada <FONT FACE=”Arial” SIZE=8 COLOR=”red”> yang menyatakan jenis font, ukran serta warna font atau huruf yang digunakan. D. Struktur dokumen HTML Dokumen HTML mempunyai 3 buah tag utama yang membentuk struktur dari dokumen tersebut, yaitu : HTML = untuk menyatakan suatu dokumen HTML HEAD = memberikan informasi tentang dokumen BODY = menyimpan informasi / data yang akan ditampilkan dalam dokumen HTML Strukturnya dapat dilihat seperti berikut :
<HTML> <HEAD> *** Bagian HEAD *** </HEAD> <BODY> *** Bagian BODY *** </BODY> </HTML> Contoh dokumen HTMLnya : <TITLE> Home Page Pribadiku </TITLE> </HEAD><FONT COLOR=“RED”> <MARQUEE DIRECTION=“Right” >WELCOME In MY PERSONAL WEB </MARQUEE><BR> <HR SIZE=10 WIDTH=350 ALIGN=“center”> <BODY BGCOLOR=“BLUE”> <FONT COLOR=“ORANGE”> <P ALIGN=”center”> Hello….Apakah anda sudah mengetahui cara membuat home page ? jika belum, mari kita mempelajarinya bersama-sama menggunakan HTML, kelihatannya rumit tapi ternyata menarik…</P> <P ALIGN=”left”> Anda harus rajin menulis, mengcopy, atau bahkan cut & paste untuk mempercepat penulisan tag di dokumen notepad…</P>
Simpan fiel di atas dengan nama *.html Karakter * dapat diganti dengan nama file www.hniefs.com www.hniefs.blogspot.com
TAG-TAG dalam HTML PARAGRAPH syntaxnya : <P atribut >…</P> untuk membuat suat paragraph, contoh dalam dokumen HTML : <HTML> <HEAD><TITLE> Membuat paragraph</TITLE> </HEAD> <BODY> <P ALIGN=”left”> teks-teks suatu paragraph dengan atribut ALIGN=”left” akan diratakan pada margin kiri.</P> <P ALIGN=”center”>teks-teks suatu paragraph dengan atribut ALIGN=”left” akan diratakan pada margin tengah.</P> <P ALIGN=”right”> teks-teks suatu paragraph dengan atribut ALIGN=”left” akan diratakan pada margin kanan.</P> </BODY> </HTML> PREFORMATTED TEXT syntaxnya : <PRE>…</PRE> untuk menampilkan teks seperti yang dituliskan, sekalipun demikian anda tetap dapat menggunakan tag-tag lain ( seperti <B> untuk tebal, <I> untuk cetak miring ) tetapi tag-tag pemformatan paragraph ( seperti <P>, <H> ) ada baiknya untuk tidak digunakan.
<HTML> <HEAD><TITLE> Menggunakan PreFormat</TITLE> </HEAD> <BODY> <PRE> Teks ini menggunakan s p a s i dan juga tombol ENTER untuk berpindah ke baris ini. Table di bawah ini menggunakan elemen BOLD dan beberapa buah spasi untuk menebalkan baris judul. <B> Browser editor ------------------------------------------ </B> IE Notepad Mosaic HotMetal Anda juga dapat membuat gambar dalam preformatted text : /\___/\ ( o o ) /\ ---- </PRE> </BODY> </HTML>
<IMAGE>
EXAMPLE Siapkan file gambar dengan ukuran seperti di atas untuk digunakan Sebagai HEADER
LINK Link dalam HTML digunakan untuk menghubungkan object (teks, gambar) ke URL atau path atau gambar Basic TAG : <A HREF=“URL/path”>teks/gambar yang mengandung link</A> contoh : <A HREF=“http://sman3-smg.sch.id”>SMA 3</A> <A HREF=“gambarasli.html”>fotoku</A> <A HREF=“gambarasli.html”><IMG SRC=“foto.jpg”></A>