modul html
TRANSCRIPT
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>.
Contoh:
Mengatur Teks Secara Fisik
Contoh:
Mengatur Teks
Mengatur FontTag <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
Contoh:
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 :
MENGGUNAKAN TABEL
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:
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”>
Contoh:
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.
Contoh:
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 :
