A. DASAR-DASAR HTML
1. Penggunaan syntak HTML, bagian-bagian HTML, penggunaan komentar dan tag <BR> untuk
ganti baris.
2. Menggunakan tag <P> untuk membuat paragraph; tag judul <H1> s/d <H6> untuk
pembesaran huruf.
3. Membuat garis horizontal <HR>
<HTML>
<HEAD>
<TITLE>Latihan HTML</TITLE>
</HEAD>
<!-- Ini merupakan suatu komentar -->
<BODY>
Selamat Belajar HTML<BR>
Semoga Sukses !
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Pengaturan Judul</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”> Pesona Tanaman Hias </H1><P>
Keindahan tanaman hias<BR>
membawa suatu pesona tersendiri<BR>
Warna-warni bunga
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Atribut NOSHADE pada Tag HR</TITLE>
</HEAD>
<BODY>
<H1>KEBUN PESONA</H1>
<HR SIZE = "10" NOSHADE>
Jl. Solo Km 14<BR>
Surabaya <BR>
Indonesia<BR>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
7
4. Menggunakan tag <DIV> untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik
yang sama.
B. PENGATURAN TEKS
1. Penggunaan <PRE> untuk menampilkan teks apa adanya.
Coba hilangkan tag <PRE> dan lihat apa perbedaanya.
2. Pengaturan Font : Face (untuk jenis Font), Size (untuk ukuran Font), Color (untuk warna)
<HTML>
<HEAD>
<TITLE>Tag DIV</TITLE>
</HEAD>
<BODY>
<DIV ALIGN = "RIGHT">
<H1><U>PENS ITS</U></H1>
<H2>Jl. Raya ITS</H2>
<H2>Surabaya</H2>
</DIV>
<HR>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Praformat </TITLE>
</HEAD>
<BODY>
<H2>Daftar Harga Keladi:</H2>
<PRE>
Red Flash.........35.000
Red Fire..........60.000
Fannie Munson.....60.000
</PRE>
Harga sewaktu-waktu bisa berubah.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Normal: 012345ABCD<BR>
<FONT COLOR="blue" FACE = "Arial">Arial:
012345ABCD</FONT>
<BR>
<FONT COLOR="green" FACE = "Courier" SIZE="5">
Courier: 012345ABCD</FONT>
<BR>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
8
3. Pengaturan warna background : BGCOLOR
C. MENAMPILKAN DAFTAR ITEM (LIST)
1. Penggunaan tag <UL> untuk daftar list yang tidak diberi nomor; tag <LI> untuk daftar item yang
diberi bulatan.
2. Penggunaan tag <OL> untuk menampilkan daftar item dengan nomor urut.
<HTML>
<HEAD>
<TITLE>Warna - Bagian 2</TITLE>
</HEAD>
<BODY BGCOLOR = "black" TEXT = "gray">
Normal<BR>
<FONT COLOR = "blue">Warna Biru</FONT><BR>
<FONT COLOR = "green">Warna Hijau</FONT><BR>
<FONT COLOR = "red">Warna Merah</FONT><BR>
<FONT COLOR = "yellow">Warna kuning</FONT><BR>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Pemakaian Tag UL dan LI</TITLE>
</HEAD>
<BODY>
<H2>Daftar Jurusan di PENS ITS :</H2>
<UL>
<LI>Telekomunikasi <BR>
<LI>Teknologi Informasi <BR>
<LI>Elektronika <BR>
<LI>Elektro Industri <BR>
</UL>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Tag OL dengan TYPE</TITLE>
</HEAD>
<BODY>
<B>Dengan huruf kapital:</B>
<OL TYPE = "A">
<LI>Yogya<BR>
<LI>Solo<BR>
</OL>
<HR>
<B>Dengan angka romawi:</B>
<OL TYPE = "i">
<LI>Yogya<BR>
<LI>Magelang<BR>
</OL>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
9
3. Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan tampilan
menjorok ke kanan.
D. MENAMPILKAN GAMBAR
1. Penggunaan <BODY BACKGROUND> untuk menampilkan background dan <IMG SRC>
untuk menampilkan gambar.
Jika letak file gambar dalam folder yang sama dengan file html, bisa langsung dituliskan
nama filenya, tapi bila berbeda perhatikan cara diatas (bila file html diatas disimpan dalam
folder /html, maka gunung.jpg akan terletak dalam folder /html/citra/)
2. Pengaturan ukuran gambar dengan atribut HEIGHT dan WEIGHT, serta penggunaan atribut
BORDER untuk memberi bingkai gambar.
<HTML>
<HEAD>
<TITLE>Daftar Definisi</TITLE>
</HEAD>
<BODY>
<B>Kamus Teknologi Informasi:</B>
<DL>
<DT>HTML</DT>
<DD>Bahasa yang digunakan untuk menyusun Web</DD>
<DT>HTTP</DT>
<DD>Protokol yang dipakai untuk mentransfer HTML</DD>
</DL>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Menampilkan Gambar</TITLE>
</HEAD>
<BODY BACKGROUND = "../citra/gunung.jpg">
Gambar Komputer terbaru
<IMG SRC = "komputer.gif" ALIGN = "MIDDLE">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Ukuran Gambar</TITLE>
</HEAD>
<BODY>
<IMG SRC = "../citra/komputer.jpg"
HEIGHT = "150" WIDTH = "150" BORDER="2">
<BR>
<IMG SRC = "../citra/komputer.jpg"
HEIGHT = "50" WIDTH = "50" BORDER="3">
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
10
E. PENGGUNAAN TABEL
1. Tag-tag yang digunakan :
<TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.
<CAPTION> menentukan judul tabel
<TR> membuat baris dalam tabel
<TH> membuat judul kolom
<TD> membuat sebuah sel data
2. Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN>
a. Atribut ROWSPAN ditempatkan pada tag <TD>
b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>
<HTML>
<HEAD>
<TITLE>Tabel dengan Garis</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Harga Keladi</CAPTION>
<TR><TH>Nama</TH><TH>Harga</TH></TR>
<TR><TD>Red Flash</TD><TD>35.000</TD></TR>
<TR><TD>Red Fire</TD><TD>60.000</TD></TR>
<TR><TD>Fannie Munson</TD><TD>60.000</TD></TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Penggunaan ROWSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Wilayah dan Kota</CAPTION>
<TR>
<TD ROWSPAN = "3">Jawa Tengah</TD>
<TD>Semarang</TD>
</TR>
<TR><TD>Kudus</TD></TR>
<TR><TD>Solo</TD></TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Penggunaan COLSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Target</CAPTION>
<TR>
<TH COLSPAN = "2">Area: Jawa Tengah</TH>
</TR>
<TR><TD>Semarang</TD><TD>15.000</TD></TR>
<TR><TD>Kudus</TD><TD>11.000</TD></TR>
</TABLE>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
11
3. Pengaturan jarak dalam tabel :
CELLSPACING mengatur jarak bagian sel thd tepi dalam bingkai tabel.
CELLPADDING mengatur jarak teks terhadap tepi kiri.
F. PEMBUATAN LINK
1. Penggunaan tag <A HREF>
Buatlah file halx.htm, sehingga ketika diklik pada Halaman X akan menuju file yang dimaksud.
<HTML>
<HEAD>
<TITLE>Tombol dengan Tabel</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "5" CELLSPACING = "5"
CELLPADDING = "5" BGCOLOR = "green">
<TR><TD>
<FONT COLOR = "red"><B>e-mail</B></FONT>
</TD></TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Halaman Utama</TITLE>
</HEAD>
<BODY>
<H1>Halaman Utama</H1>
Silakan klik pada link-link berikut:<BR>
<A HREF = "halx.htm">Halaman X</A><BR>
<A HREF = "http://lecturer.eepis-its.edu/~zenhadi">Homepage
saya</A><BR>
<A HREF = "computer.jpg"><IMG SRC = “computer.jpg> Membuat
link dengan gambar </A><BR>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
12
2. Menggunakan bookmark pada suatu halaman web yang panjang.
Perkecillah halaman web browser anda (IE) untuk melihat efeknya.
G. PENGGUNAAN FORM
1. Input data dengan input
<HTML>
<HEAD>
<TITLE>Bookmark</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>BUKU</H1>
<B>Daftar Isi:</B><BR>
<A HREF = "#bab1">Bab 1</A><BR>
<A HREF = "#bab2">Bab 2</A><BR>
<HR>
<A NAME = "#bab1">
<H2>BAB 1</H2>
...<BR>
...<BR>
<HR>
<A NAME = "#bab2">
<H2>BAB 2</H2>
...<BR>
...<BR>
<HR>
</CENTER>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM ACTION = "info.htm" METHOD = "POST">
Nama :
<INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20"
MAXLENGTH = "20">
<BR>
Hobby :
<INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25"
MAXLENGTH = "40">
<BR>
<INPUT TYPE = "SUBMIT" VALUE = "Kirim">
<INPUT TYPE = "RESET" VALUE = "Kosongkan">
</FORM>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
13
File info.htm yang dituju oleh web diatas.
2. Penggunaan tipe checkbox
3. Penggunaan tombol radio dan komentar
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
Info
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM>
Buah yang Anda sukai:<BR>
<INPUT TYPE = "CHECKBOX" NAME = "anggur" CHECKED>Anggur<BR>
<INPUT TYPE = "CHECKBOX" NAME = "jeruk">Jeruk<BR>
<INPUT TYPE = "CHECKBOX" NAME = "melon">Melon<BR>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM>
Jenis Kelamin:<BR>
<INPUT TYPE = "RADIO"
NAME = "sex" CHECKED>Pria<BR>
<INPUT TYPE = "RADIO"
NAME = "sex">Wanita<BR>
<BR>
Komentar Anda:<BR>
<TEXTAREA NAME = "komentar"
ROWS = "5" COLS = "40" WRAP>
</TEXTAREA>
<BR>
</FORM>
</BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
14
4. Pemilihan dengan select
Sekarang, ubahlah baris select diatas dengan : <SELECT NAME=”olahraga” SIZE=”3”>,
perhatikan perbedaannya dengan yang diatas.
H. PENGGUNAAN TAG META
Ditempatkan dalam bagian header, dan biasanya diletakkan setelah </TITLE>.
Digunakan untuk menyimpan sejumlah informasi.
Contoh :
1. Jika anda membuat dokumen HTML melalui FrontPage 2000 akan muncul tag meta sebagai
berikut :
<META NAME=”Generator” CONTENT=”Microsoft FrontPage 4.0”>
2. Agar halaman web yang dibuat disertakan ketika mesin pencari web (mbah Google) melakukan
pencarian, gunakan atribut keywords, semakin banyak keywords yang dimasukkan, akan
semakin besar halaman web disebutkan dalam hasil pencarian.
<META NAME=”keywords” CONTENTS=”teknologi, komputer, telekomunikasi”>
3. Mengarahkan ke halaman lain
Buatlah file baru.htm
<HTML>
<HEAD>
<TITLE>Contoh SELECT - Model Drop Down</TITLE>
</HEAD>
<BODY>
<FORM>
Olahraga yang paling Anda sukai:<BR>
<SELECT NAME = "olahraga">
<OPTION VALUE = "Sepakbola" SELECTED>Sepak Bola
<OPTION VALUE = "Bulutangkis">Bulutangkis
<OPTION VALUE = "Tenismeja">Tenis Meja
<OPTION VALUE = "Basket">Basket
<OPTION VALUE = "Lain-lain">Lain-lain
</SELECT>
<BR>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Pengalihan Halaman</TITLE>
<META HTTP-EQUIV = "REFRESH"
CONTENT = "5; URL = baru.htm">
</HEAD>
<BODY>
Halaman web kami sudah dipindah.
Anda akan dipindahkan ke halaman
tersebut dalam waktu 5 detik.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Halaman Baru</TITLE>
</HEAD>
<BODY>
Anda berada pada halaman
baru kami.
</BODY>
</HTML
Komentar