Pengenalan HTML
HTML merupakan singakatan dari HyperText Markup Language, yaitu bahasapemrograman untuk membangun aplikasi web. Untuk membangun sebuah web dan
mengakses halaman web tersebut diperlukan hal-hal berikut :
• Editor, untuk menuliskan kode-kode HTML (seperti notepad)
• Web Server, sebagai server untuk melayani permintaan klien (seperti Apache, IIS, Xitami)
• Web browser, untuk mengakses halaman web
Tag yang ada dalam HTML antara lain :
<HTML>
…
</HTML>
Bagian yang terdapat dalam tag HTML terdiri dari :
1. Kepala
Bagian kepala dalam dokumen HTML ditandai dengan tag berikut :<HEAD>
…
</HEAD>
bagian kepala ini digunakan untuk membuat judul halaman web dengan
menggunakan tag berikut :
<TITLE>
…
</TITLE>
2. Badan
Bagian badan dalam dokumen HTML ditandai dengan tag berikut :<BODY>
…
</BODY>
Bagian badan akan berisikan content yang akan ditampilkan dalam halaman web.
Aturan dalam menuliskan Tag-tag HTML yaitu :
• Tag ditulis dengan format diawali tanda < dan diakhiri tanda >, seperti <HTML>
• Tidak boleh ada spasi setelah tanda <. Contoh : <TITLE> tidak boleh dituliskan dengan < TITLE >
• Tag boleh ditulis dengan huruf kecil, huruf capital, ataupun kombinasi keduanya.
Menampilkan Tulisan / Teks
Untuk menampilkan teks dihalaman web, dengan mengetikkan teks dalam tag
<BODY>…</BODY>, dan untuk mengatur peletakan teks, ada beberapa Tag yang
digunakan antara lain :
No. Tag Fungsi
1. "P" Membuat paragraph. Dalam tag P terdapat berbagai atribut, seperti align yang berfungsi untuk mengatur posisi teks
2. "BR" Membuat baris baru atau pindah baris
3. "Center" Mengatur posisi teks agar berada ditengah
4. "DIV" Mengatur teks yang memiliki karakteristik yang sama
5. "B" Menebalkan cetakan teks
6. "SMALL" Menampilkan teks lebih kecil daripada ukuran normal
7. "BIG" Menampilkan teks lebih besar daripada ukuran normal
8. "U" Menambahkan garis bawah pada teks
9. "I" Menampilkan teks dengan bentuk tulisan miring
10. "SUB" Menampilkan teks sebagai subskrip
11. "SUP" Menampilkan teks sebagai superskrip
12. "TT" Menampilkan teks seperti ketikan menggunakan mesin ketik
13. "FONT" Mengatur jenis, ukuran, dan juga warna font. Dalam tag ini bisa mengandung banyak atribut, antara lain Face, color
3. Warna Font
Sebagai contoh perhatikan potongan script berikut :
<HTML>
<HEAD><TITLE=”Halaman web dengan HTML”></TITLE></HEAD>
<BODY bgcolor="#00FF66">
<font color="fuchsia">membuat halaman web sangatlah mudah.</font>
</BODY>
</HTML>
Jika halaman web dijalankan di browser maka akan menghasilkan tampilan teks dengan warna fuchsia dan latar belakang teks berwarna hijau, seperti gambar berikut :
Pemberian warna pada atribut COLOR, BGCOLOR, dan TEXT dapat mengikuti aturan
berikut :
• Menggunakan nama warna
• Menggunakan nilai RGB (Red-Green-Blue), dengan format “#RRGGBB”
Table berikut menunjukkan nilai warna :
Nama Warna RGB :
Aqua 00FFFF
Navy 000080
Black 000000
Olive 808000
Blue 0000FF
Purple 800080
Fuchsia FF00FF
Red FF0000
Gray 808080
Silver C0C0C0
Green 008000
Teal 008080
Lime 00FF00
Yellow FFFF00
Maroon 800000
White FFFFFF
4. Cara Menampilkan Gambar di HTML
Menampilkan Gambar Sebuah web membolehkan kita untuk menampilkan gambar, baik sebagai content web maupun sebagai gambar latar belakang web. Untuk menampilkan gambar sebagai gambarlatar belakang halaman web dapat menambahkan atribut BACKGROUND pada tag <BODY>, dan untuk menampilkan gambar dalam halaman web dapat mengunakan Tag <IMG>. Berikut contoh script menampilkan gambar :
<HTML>
<HEAD> <TITLE>Halaman web dengan HTML</TITLE>
</HEAD>
<BODY background="disket.gif">
<img src="monitor.jpg">
</BODY>
</HTML>
dari script diatas, halaman web menggunakan gambar “disket.gif” sebagai gambar latar, dan didalam halaman web menampilkan gambar “monitor.gif”. Hasil yang ditampilkan
dalam browser adalah :
Beberapa atribut yang digunakan untuk mengatur gambar antara lain :
1. HEIGHT Mengatur tinggi gambar
2. WIDTH Mengatur lebar gambar
3. ALIGN Mengatur penempatan teks terhadap gambar dengan menggunakan nilai TOP, MIDDLE, BOTTOM
4. BORDER Memberikan bingkai pada gambar dengan memberikan nilai menggunakan satuan piksel
5. VSPACE Mengatur jarak gambar terhadap teks dengan memberikan ruang kosong diatas dan dibawah gambar sesuai dengan nilai satuan piksel yang disebutkan
6. HSPACE Mengatur jarak gambar terhadap teks dengan memberikan ruang kosong dikanan dan dikiri gambar sesuai dengan nilai satuan piksel yang disebutkan
5. Membuat Garis Horisontal
Tag untuk membuat sebuah garis horizontal dapat menggunakan tag <HR>. Beberapa atribut pada tag HR antara lain :1. SIZE Mengatur ketebalan garis
2. ALIGN Mengatur posisi teks dalam baris
3. NOSHADE Menghilangkan bayangan pada garis
4. WIDTH Mengatur lebar garis
5. COLOR Menentukan warna garis
Contoh :
<HTML>
<HEAD><TITLE>Halaman web dengan HTML</TITLE></HEAD>
<BODY>
STMIK AKAKOM<HR align="center" color="#0000FF" noshade size="12">
Jalan Raya Janti Kanoman<br>
Yogyakarta 55198
</BODY>
</HTML>
Dari script diatas akan menampilkan garis horizontal berwarna biru dengan ukuran 12
dan tidak menyertakan bayangan.
