BAB I BELAJAR HTML

HTML (Hypertext Markup Language)  adalah bahasa program yang digunakan untuk  menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file  *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file  *.htm  atau  *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word. Untuk mudahnya,  kita gunakan program Notepad. Bukalah program Notepad. Bila anda belum tahu caranya, klik  Start  >  Programs  >  Accessories lalu Notepad. Sekarang ikutilah dengan seksama latihan-latihan berikut satu demi satu.
A. PENGENALAN KODE HTML
Dalam program Notepad anda, tulislah seperti ini: 
<HTML>
</HTML>
Masing-masing baris di atas disebut  tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing.  Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda  slash  (garis miring) di depan awal tulisannya. Tag di atas memberikan faidah bahwa yang  akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda  ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.  Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>.
Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML> 
Lihatlah hasil karya anda yang pertama!
Tulisan ini akan tampak dalam browser.
Dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan.  Tambahkan atribut BGCOLOR dan TEXT ke dalam tag body sebagai berikut:
<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Maka akan tampaklah hasilnya:
Tulisan ini akan tampak dalam browser
Penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa #rrggbb. Contoh :
black  #000000  blue  #0000FF  olive  #808000
white  #FFFFFF  fuchsia  #FF00FF  green  #008000
red  #FF0000  gray  #808080  teal  #008080
yellow  #FFFF00  silver  #C0C0C0  navy  #000080
lime  #00FF00  maroon  #800000  purple  #800080
aqua  #00FFFF        
Dengan demikian, kode HTML untuk contoh di atas bisa ditulis sebagai berikut:
<HTML>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Sekarang bukalah kembali source code tambahkanlah tag-tag berikut ini:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
B. MENGUTAK-ATIK HURUF
Tag-tag ini berfungsi untuk mengubah  tipe huruf yaitu menebalkan (bold), membuat
tulisan miring (italic) atau memberi garis bawah (underline). Buka lagi program
Notepad kemudian tuliskan seperti berikut ini:
<HTML>
<HEAD>
<TITLE>Tipe-tipe Teks</TILE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga
tipe tulisan tersebut sekaligus bergabung menjadi satu
berupa tulisan tebal, miring dan bergaris bawah.
</BODY>
</HTML>
sehingga menjadi seperti ini:
Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miringdan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah.
C. HEADER ATAU KEPALA TULISAN
Untuk menuliskan judul bab atau sub bab. Ada enam tingkatan header mulai dari H1
hingga H6. H1 adalah header yang paling  besar dan H6 adalah header yang paling
kecil. Coba tulis dalam Notepad anda sebagai berikut: 
<HTML><BODY>
<H1>Header level 1</H1>
<H2>Header level 2</H2>
<H3>Header level 3</H3>
<H4>Header level 4</H4>
<H5>Header level 5</H5>
<H6>Header level 6</H6>
<HTML><BODY>
Simpanlah dalam format file HTML kemudian buka dalam browser. Hasilnya akan tampak sebagai berikut:
Header level 1
Header level 2
Header level 3
Header level 4
Header level 5
Header level 6 
D. BARIS DAN PARAGRAF 
Cobalah membuat tulisan berikut pada Notepad: 
<HTML><BODY> 
Baris pertama 
Baris kedua 
Baris ketiga 
<HTML><BODY> 
Simpanlah sebagai file HTML kemudian bukalah dalam browser. Bagaimana hasilnya?
Ternyata hasilnya hanya seperti ini: 
Baris pertama Baris kedua Baris ketiga. 
Kesimpulannya, penekanan tombol  Enter  tidak menghasilkan baris dalam tampilan browser. Demikianlah sifat penulisan  dokumen HTML. Lantas, bagaimana caranya membuat baris? Gunakanlah tag <BR>. Tag ini tidak mempunyai tag penutup. Bukalah
source kode file HTML tadi lalu edit seperti berikut:
<HTML><BODY> 
Baris pertama
<BR>Baris kedua
<BR>Baris ketiga
</HTML></BODY>
Simpan kemudian lihat hasilnya dengan me-refresh  pada browser. Hasilnya kurang
lebih akan seperti ini:
Baris pertama
Baris kedua
Baris ketiga
Membuat baris kalimat, gampang kan ? Tag <BR> tersebut dapat pula digunakan untuk
membuat baris kosong, artinya baris yang tidak mempunyai kalimat apa-apa. Editlah
sekali lagi source code latih4.htm menjadi seperti ini:
<HTML><BODY>
Baris pertama<BR><BR>Baris kedua kosong, dan ini baris
ketiga<BR><BR><BR>Baris keempat dan kelima kosong, dan ini
baris keenam
</BODY></HTML>
Simpan lalu refresh sekali lagi maka hasilnya akan seperti ini:
Baris pertama
Baris kedua kosong, dan ini baris ketiga
 
Baris keempat dan kelima kosong, dan ini baris keenam
Di sini kita lihat bahwa tag <BR> yang ditulis dua kali akan menghasilkan dua baris,
demikian seterusnya. Setelah pandai membuat baris, sekarang kita akan belajar
membuat paragraf. Perhatikanlah contoh tulisan di bawah ini:
<HTML><BODY>
Paragraf pertama <P>Paragraf kedua <P>Paragraf ketiga
</BODY></HTML>
Bila dilihat dalam browser, hasilnya akan seperti ini:
Paragraf pertama
Paragraf kedua 
Paragraf ketiga

Terimakasih sekian dulu