A. PENGERTIAN DAN STRUKTUR DASAR HTML
HTML adalah suatu bahasa pemrograman yang merupakan
bahasa markup (penandaan)
terhadap sebuah dokumen teks. biasanya ditandai dengan
tanda lebih kecil (<)
dan tanda lebih besar (>). HTML dapat dibuat
mengunnakan teks editor sederhana seperti:
Notepad, Ms. Frontpage, Macromedia dreamiver, dan lain-lainnya.
berikut ini merupakan struktur dasar HTML :
<html>
<head>
<title> ..... </title>
</head>
<body>
...........................
</body>
</html>
keterangan :
<HTML></HTML> = Jenis dokumen. Terdapat
pada awal dan akhir dari file HTML
<TITLE></TITLE> = Judul. (Harus selalu
terdapat pada mukadimah)
<HEAD></HEAD> = keterangan umum, seperti
judul dsb. (mukadimah header)
<BODY></BODY> = Batang tubuh atau isi dari
file HTML.
B. TAG DAN ATTRIBUT PADA HTML
Tag-tag yang digunankan untuk menformat dokumen HTML,
antara lain :
- Tag
<BR> = Membuat baris baru (pengganti enter) dan tidak
memerlukan penutup </BR>
- Tag
<P> = Untuk memulai paragraf baru, tidak memerlukan penutup
</P>
- Tag
<Hn> = Heading sebuah dokumen. Nilai n bernilai 1 hingga 7
- Tag
<PRE> = Untuk membuat tampilan dokumen HTML pada browsew sama dengan
tampilan pada teks editor. Dengan tag <PRE>, maka tag <P> dan
tag <BR> jadi tidak berlaku lagi. Memerlukan penutup </PRE>
- Tag <CENTER>
= untuk teks rata tengah. mengunakan penutup </CENTER>.
- Tag
<B> = Untuk memampilkan atau membuat huruf tebal. Memerlukan penutup
</B>.
- Tag
<I> = Untuk memampilkan atau membuat huruf miring. Memerlukan
penutup </I>.
- Tag
<U> = Untuk memampilkan atau membuat huruf bergaris bawah pada teks.
Memerlukan penutup </U>.
- Tag
<TT> = untuk menampilkan huruf seperti huruf mesin ketik. memerlukan
penutup </TT>.
- Tag
<STRIKE> = Untuk menampilkan garis horozintal pada bagian tengah
huruf. Memerlukan penutup </STRIKE>.
- Tag
<BIG> = Untuk menampilkan ukuran huruf yang lebih besar. Memerlukan
penutup </BIG> .
- Tag
<SMALL> = Untuk menampilkan ukuran huruf yang lebih kecil.
Memerlukan penutup </SMALL>.
- Tag
<SUB> = Untuk menampilkan teks subscript (menurunkan teks 1/2 ke
bawah). Memerlukan penutup </SUB>
- Tag
<SUP> = Untuk menampilkan teks superscript (menaikan teks 1/2 ke
atas). Memerlukan penutup </SUP>.
- Tag
<HR> = Untuk membuat garis batas horizontal.
- Tag
<FONT> = Digunakan untuk menentukan ukuran, jenis, dan warna pada
teks. Memerlukan penutup </FONT>
- Tag
<MARQUEE> = Digunakan untuk memberi efek berjalan pada teks.
Memerlukan penutup </MARQUEE>.
- Tag
<IMG> = untuk menambahkan gambar. Tidak memerlukan penutup </IMG>.
Attribut-attribut :
- Tag
<BODY> =
- ALINK,
Menentukan warna link aktif.
- BACKGROUD,
untuk merjadikan URL atau direktori dari file gambar sebagai latar
belakang dokumen.
- BGCOLOR,
untuk menentukan warna latar belakang dokumen.
- BGPROPERTIES,
jika nilai attribut ini diisi "FIXED" maka gambar latar
belakang tidak ikut tergulung.
- LINK,
untuk menentukan warna link yang belum dikunjungi.
- TEXT,
untuk menentukan warna teks.
- VLINK,
untuk menentukan warna link yang belum dikunjungi.
example:
<html>
<head>
<title> .....</title>
</head>
<BODY BACKGROUND="......"> ..... </BODY>
</html>
- Tag
<HR> =
- ALIGN,
merupakan posisi vertikal garis pemisah. Nilainya : LEFT, RIGHT, atau
CENTER.
- WIDTH,
lebar garis batas. Nilainya berupa pixel atau persen (%) dari jendela browser.
- SIZE,
untuk menentukan tebal garis batas. Nilainya : 1 hingga 7.
- NOSHADE,
untuk menonaktifkan efek tiga dimensi.
- COLOR,
untuk menentukan warna garis batas.
example :
<html>
<head>
<title> ..... </title>
</head>
<body>
...........................
<hr width=...% size="..." color="..."
align="...">
</body>
</html>
- Tag
<FONT> =
- FACE,
untuk menentukan tipe atau jenis teks.
- SIZE,
untuk menentukan ukuran teks.
- COLOR,
untuk menentukan warna dari teks.
example :
<html>
<head>
<title> ..... </title>
</head>
<body>
<FONT FACE"..."
SIZE="..." COLOR="..."> ......</FONT>
...........................
</body>
</html>
- Tag
<IMG> =
- SCR,
menunjukkan URL atau direktori file gambar.
- ALIGN,
posisi teks disekitar gambar. nilainya : TOP atau MIDDLE.
- WIDTH,
lebar gambar dalam pixel atau persen (%).
- HEIGHT,
Tinggi gambar dalam pixel atau persen (%).
- ALT,
menampilkan teks pengganti jika gambar tidak dapat
ditampilkan. example :
<html>
<head>
<title> ..... </title>
</head>
<body>
...........................
<IMG SCR="nama_gambar . Extention"
WIDTH="...%" HEIGHT="...%">
</body>
</html>
C. BULLET AND NUMBERING
TAG <OL> = ORDER LIST
<OL>
<LI> ... </LI>
</OL>
Type <OL> terdiri : I, A, i,
a, 1.
TAG <uL> = UNORDER LIST
struktur dasar :
<UL>
<LI> ... </LI>
</UL>
- Type
<UL> terdiri : circle, disc, squre.
D. TABLE
- Tag
<TABLE> : untuk mendefinisikan sebuah tabel. Memerlukan penutup
</TABLE>
- Tag
<TR> : untuk mendefinisikan baris tabel. Memerlukan penutup
</TR>
- Tag
<TH> : untuk mendefinisikan judul tiap kolom atau baris. Memerlukan
penutup </TH>
- Tag
<TD> : untuk mendefinisikan isi tiap kolom. Memerlukan penutup
</TD>
struktur dasar table :
<TABLE>
<TR>
<TD> ..... </TD>
</TR>
</TABLE>
Attribut-attribut pada table :
- ALIGN,
posisi horizontal tabel.
- BACKGROUND,
menentukan gambar latar belakang tabel.
- BGCOLOR,
menentukan warna latar belakang tabel.
- BORDER,
menentukan tebal bingkai.
- BORDERCOLOR,
menentukan warna pada bingkai tabel.
- CELLSPACING,
jarak spasi antar sel.
- CELLPADDING,
jarak isi sel dengan bingkai.
- HEIGHT,
tinggi tabel.
- WIDTH,
lebar tabel.
- VALIGN,
menentukan posisi vertikal teks dalam sel.
example :
<html>
<head>
<title> ..... </title>
</head>
<body>
<TABLE BORDER="..."
BORDERCOLOR="...">
<TR>
<TD> .... </TD>
</TR>
</TABLE>
</body>
</html>
E. FORM
Adalah sebuah untuk meminta
informasi dari user untuk kemudian diolah. Tipe input yang dapat dibuat:
- text,
untuk membuat kotak teks.
- password,
untuk membuat kotak teks, tetapi semua karakter yang ditampilkan
akan berupa tanda *.
- check box,
untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.
- radio,
untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.
- reset,
untuk membuat tombol yang berfungsi menghapus semua isian form yang telah
diberikan.
- submit,
untuk membuat tombol yang berfungsi untuk mengirimkan data form agar
diolah.
Tag-tag yang diperlukan :
- Tag
<FORM> = digunakan untuk mendefinisikan sebuah form.
Attribut-attributnya :
- METHOD,
menentukan metode pengolahan form.
- ACTION,
menentukan URL atau direktori dari file yang digunakan untuk
mengolah form.
- Tag
<TEXTAREA> = digunakan untuk membuat sebuah kotak teks multi baris.
Attribut-attributnya :
- NAME,
mendefinisikan nama objek textarea
- ROWS,
menentukan jumlah baris textarea
- COLS,menentukan
lebar textarea.
example :
<html>
<head>
<title> ..... </title>
</head>
<body>
<FORM>
<TEXTAREA NAME="..." ROWS="..." COLS="...">
.....
</TEXTAREA>
</FORM>
</body>
</html>
- Tag
<SELECT> = digunanakan untuk membuat sebuah daftar pilihan.
Attribut-attributnya :
- NAME,
mendefinisikan nama dari objek select.
- SIZE,
menentukan berapa pilihan yang akan ditampilkan.
- MULTIPLE,
mengizinkan untuk memilih lebih dari satu.
example :
<html>
<head>
<title> ..... </title>
</head>
<body>
<FORM>
<SELECT NAME="..." SIZE="...">
.....
</SELECT>
</FORM>
</body>
</html>
- Tag
<INPUT> = digunakan untuk membuat komponen-komponen yang digunakan
untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan,
tombol,dll. Attribut-attributnya :
- NAME,
mendefinisikan nama dari objek imput. (kecuali untuk tipe submit dan
clear)
- SIZE,
menentukan ukuran kotak teks.
- MAXLENGHTH,
menentukan jumlah maksimum karakteryang dapat dimasukkan pada kotak teks.
- VALUE,
untuk :
- kotak
teks, menetukan teks yang ditulis.
- Cheks
box dan radio, menentukan nilai item yang dipilih.
- Submit
dan reset, menentukan teks yang ditulis pada tombol.
- HECKED, digunakan
untuk check box dan radio menentukan pilihan yang dipilih secara default.
( pada check box dan radio )
- TYPE,menentukan
tipe input yang dibuat.
example :
<html>
<head>
<title> ..... </title>
</head>
<body>
<FORM>
....... : <INPUT TYPE="..." NAME="..."
SIZE="...">
....... : <INPUT TYPE="..."
NAME="..." SIZE="...">
<INPUT TYPE="..."
NAME="..." SIZE="..."
VALUE="..."> .........
<INPUT TYPE="..."
NAME="..." SIZE="..."
VALUE="..."> .........
</FORM>
</body>
</html>
SELAMAT
MENCOBA