A. Struktur Dasar
Latihan 1
1. Gunakanlah teks editor (Notepad), tuliskan kode dibawah ini :
<HTML>
<HEAD>
<TITLE>
Web Sederhana </TITLE>
</HEAD>
<BODY>
Ini halaman web pertama saya
</BODY>
</HTML>
|
2.
Simpan dengan nama coba.htm di folder anda,
pada bagian save as type ubah menjadi all files.
3.
Buka Internet Explorer
(IE), klik File >
Open > browse (cari file coba.htm) > Open
B. Bagian HEAD
Bagian Head sebenarnya tidak
harus ada
pada
dokumen HTML, tetapi pemakaian head
yang benar
akan meningkatkan kegunaan suatu
dokumen
HTML.
Isi
bagian
head
–
kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut.
Elemen yang mungkin terdapat pada bagian head :
Ø Tag <TITLE>,
digunakan untuk memberi judul dokumen.
Ø Tag <BASE>, digunakan untuk menentukan basis URL
sebuah dokumen. Penggunaannya adalah sebagai berikut :<BASE HREF=”URL”>
Ø Tag <LINK>,
digunakan untuk menunjukkan relasi antar dokumen HTML. Tag ini mempunyai beberapa atribut :
ATRIBUT
|
FUNGSI
|
HREF
|
Menunjuk pada URL dokumen lain
|
REL
|
Mendefinisikan relasi terhadap sebuah dokumen dan dokumen lain yang berisi informasi tentang
personil yang memberi kontribusi terhadap
dokumen tersebut
|
REV
|
Mendefinisikan relasi sebuah dokumen HTML
dengan dokumen lain
|
TYPE
|
Menentukan tipe dan parameter
dari relasi
|
Penggunaannya adalah sebagai berikut :
<LINK [{REV | REL}=”teks”
HREF=”URL”>
Contoh :
<LINK REV=”made”
HREF=”mailto:nama@alamat.com”>
<LINK REL=”toc” HREF=”contents.htm”>
<LINK REL=”index” HREF=”index.htm”>
<LINK REL=”copyright” HREF=”copyright.htm”>
|
Ø Tag <META>, digunakan untuk mendefinisikan
informasi-informasi
di luar
HTML Informasi meta
dapat
digunakan
oleh browser
untuk menjalankan suatu
aktivitas
yang
belum didukung oleh HTML.
Tag <META> mempunyai atribut :
ATRIBUT
|
FUNGSI
|
HTTP-EQUIV
|
Mendefinisikan properti dari elemen
|
NAME
|
Menyediakan deskripsi tambahan dari elemen
|
URL
|
Mendefinisikan target dokumen dari sebuah
properti
|
CONTENT
|
Menyediakan nilai respon dari properti
|
Untuk lebih memperjelas penggunaan atribut tag <META> perhatikan cth berikut ini :
<META HTTP-EQUIV=”refresh” CONTENT=”60”
URL=”www.alamat.com”>
|
Perintah
diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik, kemudian panggil dokumen
baru pada www.alamat.com”. Jika atribut URL tidak disertakan, maka halaman itu sendiri yang akan dipanggil,
jadi setara dengan mengklik tombol Refresh/Reload pada browser.
Penggunaan elemen <META>
yang
paling
populer adalah
penggunaan properti
Keyword
dan Description. Kedua properti ini sangat berguna untuk membantu kerja search engine. Biasanya search
engine
akan menggunakan teks yang
disebutkan pada properti
Keyword untuk mengindeks
dokumen dan menggunakan
teks
yang
terdapat pada properti Description untuk mendeskripsikan indeks tersebut.
Contoh :
<HTML>
<HEAD>
<TITLE> General
Officers of the
US Army in the Civil War
</TITLE>
<META NAME=”Keywords”
CONTENT=”Yankee, Grand
Army of the
Republic,
War Between the States”>
<META NAME=”Description” CONTENT=”A Listing of the General officers of the US Army in
the Civil WAR”>
</HEAD>
</HTML>
|
C. Bagian BODY
Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <BODY> dan ditutup </BODY>.
Atributnya :
ATRIBUT FUNGSI
ALINK Menentukan warna link aktif
BACKGROUND Merujuk URL atau direktori dari file gambar yang digunakan sbg latar belakang
BGCOLOR Menentukan warna latar belakang
BGPROPERTIES Jika nilai atribut ini diisi “FIXED”, maka gambar latar belakang tidak ikut tergulung
LEFTMARGIN Batas kiri dokumen
LINK Menentukan warna link yang belum dikunjungi
TEXT Menentukan warna teks
TOPMARGIN Menentukan batas atas
VLINK Menentukan warna link yang telah dikunjungi
Latihan 2 :
Gunakanlah Notepad, tuliskan kode dibawah ini dan kemudian simpan dengan nama body.html :
<HTML>
<HEAD>
<TITLE> Penggunaan BODY </TITLE>
</HEAD>
<BODY BGCOLOR=”Silver” TEXT=”Blue” ALINK=#000000 VLINK=#FF0000 LINK=”Green”>
ini adalah contoh penggunaan body
ini adalah sebuah <A HREF=”alamatwebsite.com”> link </A>
</BODY>
</HTML>
Beberapa
Contoh Kode Warna Yang Dapat Digunakan:
WARNA
|
NILAI
|
Black
Maroon
Green
Olive
Navy
Purple
Teal
Gray
Silver
Red
Lime
Yellow
Blue
Fuchsia
Aqua
White
|
#000000
#800000
#008000
#808000
#000080
#800080
#008080
#808080
#C0C0C0
#FF0000
#00FF00
#FFFF00
#0000FF
#FF00FF
#00FFFF
#FFFFFF
|
Kode warna dapat dengan
mudah kita temukan pada aplikasi photoshop:
A.
Memberi Komentar
Untuk mempermudah
pembacaan kembali kode-kode HTML, kadang-kadang
ditambahkan
komentar ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca browser, maka harus digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda --> .
Latihan 4 :
Gunakanlah
Notepad, tuliskan kode dibawah ini dan kemudian simpan dengan nama komentar.html :
<HTML>
<HEAD>
<!-- ini adalah bagian head -->
</HEAD>
<BODY BGCOLOR=#FF0000 >
<!-- warna
background adalah merah -->
</BODY>
</HTML>
|
A. Memberi Identitas
Kadang-kadang orang yang merancang suatu halaman web ingin mencantumkan namanya pada
dokumen web
tersebut atau
mungkin
mencantumkan hak cipta
terhadap
dokumen tersebut. Untuk
mencantumkan informasi-informasi
tersebut digunakan tag
<ADDRESS>. Umumnya informasi tersebut diletakkan pada bagian paling akhir suatu dokumen.
Latihan 5 :
Gunakanlah
Notepad, tuliskan kode dibawah ini dan kemudian simpan dengan nama address.html :
<HTML>
<HEAD>
<TITLE> Penggunaan Address </TITLE>
</HEAD>
<BODY>
Selamat datang di web amatir
<ADDRESS>
Dokumen ini di rancang oleh Ferry Gustiawan <BR>
Pada tanggal 13 Sept 2005
</ADDRESS>
</BODY>
</HTML>
|
0 komentar:
Posting Komentar