Listing HTML
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