Modul HTML

DISUSUN OLEH KELOMPOK 5
 Zuhal Murniati (35)
 Yuniar Hardiyani F. (32)
 Rusli Apriyadi (08)

PENGERTIAN HTML (HyperText Mark-up Language)
HTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat
sebuah halaman Web. Untuk menulis kode HTML digunakan editor teks seperti NotePad
atau FrontPage. Contoh kode HTML yang sangat sederhana :
Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas :
1. kepala, ditandai dengan pasangan tag <HEAD> dan </HEAD>
2. badan, ditandai dengan pasangan tag <BODY> dan </BODY>
Pada bagian kepala, bisa ditentukan judul dokumen HTML. Judul ini ditulis
dalam pasangan tag <TITLE> dan </TITLE>. Pada contoh di atas, judul dokumen HTML
adalah Latihan Pertama. Judul ini diletakkan di bagian atas jendela browser.

 Cara Menuliskan Tag
Nama tag ditulis di dalam tanda < dan >. Antara nama tag
dan tanda < ditulis tanpa spasi sama sekali. Nama tag
boleh ditulis dengan huruf kecil, huruf kapital, ataupun
kombinasi antara huruf kecil dan huruf kapital. Dengan
kata lain, penulisan :
<HTML>
<html>
<Html>
dianggap sama. Namun umumnya nama tag ditulis
dengan huruf kecil saja atau huruf kapital saja.

 Tag <CENTER>
Untuk menengahkan suatu teks, bisa juga digunakan tag <CENTER>. Tentu
saja, untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak
ditengahkan), perlu disertakan </CENTER>.
 Tag <BR>
Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris.
 Tag <P>
Tag <P> digunakan untuk membuat paragraf.
Di dalam tag <P> bisa disertakan atribut ALIGN yang berguna untuk
mengatur peletakan teks di dalam masing-masing baris. Salah satu nilai yang
dapat diberikan pada ALIGN adalah CENTER, yang menempatkan teks berada
di tengah-tengah layar pada baris yang bersangkutan.
 Tag Judul
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks
yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa
:
• <H1> ... </H1>
• <H2> ... </H2>
• <H3> ... </H3>
• <H4> ... </H4>
• <H5> ... </H5>
• <H6> ... </H6>

Seperti halnya pada tag <P>, tag judul atau heading ini juga memiliki atribut ALIGN.
Nilai yang dapat diberikan pada ALIGN adalah :
• LEFT (default), mengatur teks rata kiri terhadap halaman
• RIGHT, mengatur teks rata kanan terhadap halaman
• CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan
• JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang
sangat panjang.
 Tag <HR>
Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan
garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan
menyertakan tag <HR>.

Mengatur Teks Secara Fisik
Contoh:
Mengatur Teks

Mengatur Font
Tag <FONT>…</FONT> berguna untuk mengatur jenis, ukuran,
maupun warna font.
 Jenis Font
Untuk menentukan jenis font, digunakan atribut FACE.
 Ukuran Font
Untuk font ditentukan oleh atribut SIZE.
 Warna Font

MEMBUAT LINK
Hyperlink ke Halaman Web
Untuk membuat link ke halaman lain, digunakan pasangan tag <A>…</A>
atau yang biasa yang disebut tag jangkar atau anchor tag. Bentuk paling sederhana
penggunaan tag jangkar adalah sebagai berikut :
<A HREF = “URL”>Label</A>
Dalam hal ini, URL (Uniform Resource Locator) dapat berupa alamat suatu
dokumen Web, berkas grafik, ataupun menyatakan suatu protokol lain (misalnya FTP).
Untuk mempraktikan link, buatlah terlebih dulu dua buah berkas HTML
bernama halx.htm dan haly.htm.
 File halx2.htm :

 File haly2.htm :
Sekarang marilah membuat kode HTML yang menyediakan link ke dua buah
kode HTML di depan.
 File halutama.htm :

 Menentukan Warna Hyperlink
Warna pada Hyperlink tersebut dapat diubah dengan menggunakan
atribut LINK yang terdapat pada tag <BODY>. Contoh :

 Memberi Garis pada Tabel
Bentuk : <TABLE BORDER = ‘bilangan”>
Kalau BORDER tidak disertakan dalam tag <TABLE>, nilai untuk BORDER
dianggap sama dengan nol, dengan akibat garis tidak ditampilkan. Dengan
kata lain,
<TABLE>
identik dengan
<TABLE BORDER = “0”>
Contoh:

 Meletakkan Judul di Bawah Tabel
Untuk menampilkan judul di bawah table, digunakan atribut ALIGN =
“BOTTOM” pada tag <CAPTION>.
 Menentukan Warna Latar Belakang Table
Untuk menambahkan warna latar belakang table, digunakan atribut
BGCOLOR pada tag <TABLE>.
Contoh:

 Menggabungkan Sel
Untuk menggabungkan beberapa baris sel, digunakan atribut
ROWSPAN pada tag <TD>.
Untuk menggabungkan beberapa sel dalam satu baris, digunakan
atribut COLSPAN pada tag <TH> atau <TD>.
Contoh:

MENAMBAHKAN GAMBAR
 Mengatur Gambar Latar Belakang
Latar belakang kadangkala mempercantik tampilan
halaman Web. Untuk menyertakan suatu gambar sebagai
latar belakang, dapat digunakan atribut BACKGROUND pada
tag <IMG>. Bentuknya sebagai berikut :
<BODY BACKGROUND = ”NamaFileGambar”>
Contoh : <BODY BACKGROUND = ”Caladium.jpg”>
 Menampilkan Gambar
Untuk menampilkan gambar, digunakan tag <IMG>.
Bentuk paling sederhana dari tag <IMG> :
<IMG SRC = ”nama_gambar”>
Contoh : <IMG SRC = ”keladi.jpg”>

MENGGUNAKAN FORM
 Dasar Penggunaan Form
Form dibentuk dengan menggunakan pasangan tag <FORM> dan
</FORM>.
 Memasukkan Data dengan INPUT
Tag <INPUT> digunakan untuk melakukan pemasukan data dan
letaknya berada dalam pasangan tag <FORM> dan </FORM>. Ada
bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak
password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET.

 Tipe TEXT
Tipe TEXT bermanfaat untuk memasukkan data seperti
nama orang atau alamat seseorang.
Contoh pemakaian :
<INPUT TYPE = “TEXT” NAME = “nama_pegawai” SIZE = “20” MAXLENGTH =
“20”>
Dengan menggunakan atribut VALUE pada tag <INPUT>,
field teks dapat diberi nilai bawaan.
Contoh :
<INPUT TYPE = “TEXT” NAME = “nama_pegawai” SIZE = “20” MAXLENGTH =
“20” VALUE = “Isi dengan nama Anda”>

 Tombol SUBMIT dan RESET
Tipe SUBMIT pada tag <INPUT> akan membentuk tombol Submit,
yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag
<FORM> akan dimuat. Contoh penulisan kode dengan tombol Submit yang
paling sederhana :
<INPUT TYPE = “SUBMIT”>
Jika tulisan pada tombol tidak berisi Submit, perlu disebutkan pada
atribut VALUE. Contoh :
<INPUT TYPE = “SUBMIT” VALUE = ”Kirim”>
Tombol Reset berfungsi untuk mengosongkan atau mengembalikan
nilai field teks ke nilai bawaan.

 Tipe PASSWORD
Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag <INPUT> akan
membuat setiap karakter yang diketikkan oleh pemakai pada field ini
disembunyikan (misalnya dengan diganti tanda * untuk setiap karakter yang
diketikkan pemakai). Contoh :

 Tipe CHECKBOX
Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek
adalah suatu bentuk masukan yang memungkinkan pemakai mencentang
atau tidak mencentang kotak tersebut dengan mengklik mouse pada saat
penunjuk mouse menunjuk kotak cek.
Contoh:

 Tombol Radio
Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang
memungkinkan pemakai hanya memilih satu dari sekian tombol. Untuk
membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut
NAME perlu diisi dengan nama yang sama. Atribut VALUE untuk menentukan
nilai terhadap nama data sekiranya tombol tersebut diklik.
Contoh :

Modul HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (7)

Similar to Modul HTML

Similar to Modul HTML (20)

Recently uploaded

Recently uploaded (20)

Modul HTML