MODUL I
PENGENALAN HTML
A. MAKSUD
DAN TUJUAN
1. Maksud
a.Mengenalkan
kepada siswa mengenai pemrograman WEB dengan menggunakan HTML
b. Mengenalkan
kode-kode HTML
2. Tujuan
a. siswa
dapat membuat halaman Web dengan menggunakan kode HTML
b. siswa
dapat membuat tampilan dokumen HTML dengan menggunakan permainan warna, dan
berbagai jenis tampilan teks
B. DASAR TEORI
B. DASAR TEORI
Pengenalan HTML
HTML
merupakan singkatan dari HyperText Markup
Language, yaitu bahasa pemrograman untuk membangun aplikasi web. Untuk
membangun sebuah web dan mengakses halaman web tersebut diperlukan hal-hal
berikut :
· Editor,
untuk menuliskan kode-kode HTML (seperti notepad)
· Web
Server, sebagai server untuk melayani permintaan klien (seperti Apache, IIS,
Xitami)
· Web
browser, untuk mengakses halaman web
Tag yang ada dalam HTML antara lain
<HTML>
…
</HTML>
|
Bagian yang terdapat dalam tag HTML terdiri
dari:
· Kepala
Bagian
kepala dalam dokumen HTML ditandai dengan tag berikut :
<HEAD>
…
</HEAD>
|
Bagian
kepala ini digunakan untuk membuat judul halaman web dengan menggunakan tag
berikut :
<TITLE>
…
</TITLE>
|
· Badan
Bagian badan dalam dokumen HTML ditandai
dengan tag berikut :
<BODY>
…
</BODY>
|
Bagian
badan akan berisikan content yang akan ditampilkan dalam halaman web.
Aturan
dalam menuliskan Tag-tag HTML yaitu :
·
Tag ditulis dengan format
diawali tanda < dan diakhiri tanda >, seperti <HTML>
·
Tidak boleh ada spasi
setelah tanda <. Contoh : <TITLE> tidak boleh dituliskan dengan <
TITLE>
·
Tag boleh ditulis dengan
huruf kecil, huruf capital, ataupun kombinasi keduanya.
Menampilkan Tulisan / Teks
Untuk
menampilkan teks dihalaman web, dengan mengetikkan teks dalam tag
<BODY>…</BODY>, dan untuk mengatur peletakan teks, ada beberapa Tag
yang digunakan antara lain :
No.
|
Tag
|
Fungsi
|
1.
|
P
|
Membuat
paragraph. Dalam tag P terdapat berbagai atribut, seperti align yang
berfungsi untuk mengatur posisi teks
|
2.
|
BR
|
Membuat
baris baru atau pindah baris
|
3.
|
Center
|
Mengatur
posisi teks agar berada ditengah
|
4.
|
DIV
|
Mengatur
teks yang memiliki karakteristik yang sama
|
5.
|
B
|
Menebalkan
cetakan teks
|
6.
|
SMALL
|
Menampilkan
teks lebih kecil daripada ukuran normal
|
7.
|
BIG
|
Menampilkan
teks lebih besar daripada ukuran normal
|
8.
|
U
|
Menambahkan
garis bawah pada teks
|
9.
|
I
|
Menampilkan
teks dengan bentuk tulisan miring
|
10.
|
SUB
|
Menampilkan
teks sebagai subskrip
|
11.
|
SUP
|
Menampilkan
teks sebagai superskrip
|
12.
|
TT
|
Menampilkan
teks seperti ketikan menggunakan mesin ketik
|
13.
|
FONT
|
Mengatur
jenis, ukuran, dan juga warna font. Dalam tag ini bisa mengandung banyak
atribut, antara lain Face, color
|
Warna Font
Warna
Font dapat diatur pada BODY dan juga tag FONT. Untuk warna latar belakang teks
dapat ditentukan dengan menggunakan atribut BGCOLOR pada tag BODY. Dan untuk
warna latar depan teks diatur melalui atribut COLOR pada tag FONT.
Sebagai
contoh perhatikan potongan script berikut :
<HTML>
<HEAD><TITLE=”Halaman
web dengan HTML”></TITLE></HEAD>
<BODY
bgcolor="#00FF00">
<font
color="blue">Mari belajar HTML..gampang kan?</font>
</BODY>
</HTML>
|
Jika
halaman web dijalankan di browser maka akan menghasilkan tampilan teks dengan
warna fuchsia dan latar belakang teks berwarna hijau, seperti gambar berikut :
Pemberian
warna pada atribut COLOR, BGCOLOR, dan TEXT dapat mengikuti aturan berikut :
·
Menggunakan nama warna
·
Menggunakan nilai RGB
(Red-Green-Blue), dengan format “#RRGGBB”
Table
berikut menunjukkan nilai warna :
Nama Warna
|
RGB
|
Nama Warna
|
RGB
|
Aqua
|
00FFFF
|
Navy
|
000080
|
Black
|
000000
|
Olive
|
808000
|
Blue
|
0000FF
|
Purple
|
800080
|
Fuchsia
|
FF00FF
|
Red
|
FF0000
|
Gray
|
808080
|
Silver
|
C0C0C0
|
Green
|
008000
|
Teal
|
008080
|
Lime
|
00FF00
|
Yellow
|
FFFF00
|
Maroon
|
800000
|
White
|
FFFFFF
|
Menampilkan Gambar
Sebuah web membolehkan kita untuk menampilkan gambar, baik sebagai content web maupun sebagai gambar latar belakang web. Untuk menampilkan gambar sebagai gambar latar belakang halaman web dapat menambahkan atribut BACKGROUND pada tag <BODY>, dan untuk menampilkan gambar dalam halaman web dapat mengunakan Tag <IMG>. Berikut contoh script menampilkan gambar :
<HTML>
<HEAD>
<TITLE>Halaman web dengan HTML</TITLE>
</HEAD>
<BODY
background="php.gif">
<img
src="login_.jpg">
</BODY>
</HTML>
|
dari
script diatas, halaman web menggunakan gambar “disket.gif” sebagai gambar
latar, dan didalam halaman web menampilkan gambar “monitor.gif”. Hasil yang
ditampilkan dalam browser adalah :
Untuk
menggunakan gambar sebagai latar belakang web sebaiknya gunakan gambar
berukuran kecil, karena browser akan mengulang gambar tersebut (seperti tampak
pada gambar). Tipe-tipe gambar yang dapat ditampilkan dalam web yaitu, GIF,
JPEG/JPG, PNG, dan TIFF/TIF.
Beberapa
atribut yang digunakan untuk mengatur gambar antara lain :
No.
|
Atribut
|
Fungsi
|
1.
|
HEIGHT
|
Mengatur
tinggi gambar
|
2.
|
WIDTH
|
Mengatur
lebar gambar
|
3.
|
ALIGN
|
Mengatur
penempatan teks terhadap gambar dengan menggunakan nilai TOP, MIDDLE, BOTTOM
|
4.
|
BORDER
|
Memberikan
bingkai pada gambar dengan memberikan nilai menggunakan satuan piksel
|
5.
|
VSPACE
|
Mengatur
jarak gambar terhadap teks dengan memberikan ruang kosong diatas dan dibawah
gambar sesuai dengan nilai satuan piksel yang disebutkan
|
6.
|
HSPACE
|
Mengatur
jarak gambar terhadap teks dengan memberikan ruang kosong dikanan dan dikiri
gambar sesuai dengan nilai satuan piksel yang disebutkan
|
Membuat Garis Horisontal
Tag
untuk membuat sebuah garis horizontal dapat menggunakan tag <HR>.
Beberapa atribut pada tag HR antara lain :
No.
|
Atribut
|
Fungsi
|
1.
|
SIZE
|
Mengatur
ketebalan garis
|
2.
|
ALIGN
|
Mengatur
posisi teks dalam baris
|
3.
|
NOSHADE
|
Menghilangkan
bayangan pada garis
|
4.
|
WIDTH
|
Mengatur
lebar garis
|
5.
|
COLOR
|
Menentukan
warna garis
|
