Pemrograman Web - HTML Modul 1

BUKU PANDUAN BELAJAR
PEMROGRAMAN WEB
HTML
Oleh :
Yayan Aminudin, S.Kom.
TEKNIK KOMPUTER DAN JARINGAN

SEKOLAH MENENGAH KEJURUAN
TAMTAMA 1 SIDAREJA
2017
Panduan Belajar HTML
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 dan memanipulasi tampilan dokumen
HTML dengan menggunakan permainan warna dan berbagai
jenis tampilan teks
B. DASAR TEORI
1. 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 :
a. Editor, untuk menuliskan kode-kode HTML (seperti notepad)
b. Web Server, sebagai server untuk melayani permintaan klien
(seperti Apache, IIS, Xitami, Xampp)
c. Web browser, untuk mengakses halaman web
Setiap file/dokumen HTML akan diawali dan diakhiri dengan

tag HTML (<HTML>). Perhatikan tag berikut :
<HTML>
…
</HTML>
Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 1

mass_amin@yahoo.com Kusus Untuk Kalangan Sendiri
Bagian-bagian dalam file HTML dikenal dengan istilah Tag

(Bagian). Bagian-bagian tersebut antara lain:
a. Kepala
Bagian kepala dalam dokumen HTML ditandai dengan
tag berikut :
<HEAD>
…
</HEAD>
Bagian kepala ini digunakan untuk membuat judul pada

halaman web yang diawali dan diakhiri dengan tag berikut :
<TITLE>
…
</TITLE>
b. Badan
Bagian badan dalam dokumen HTML ditandai dengan
tag berikut :
<BODY>
…
</BODY>
Bagian badan akan berisikan content yang akan

ditampilkan dalam halaman web.
Aturan penulisan dalam menuliskan Tag-tag pada file

HTML yaitu :

1) Tag pembuka ditulis dengan diawali tanda < dan diakhiri

tanda >, seperti <HTML>
2) Tag penutup ditulis dengan diawali tanda </ dan diakhiri
tanda >, seperti </HTML>
3) Tidak boleh ada spasi setelah tanda < Contoh : <TITLE>
tidak boleh dituliskan dengan < TITLE>
4) Tag boleh ditulis dengan huruf kecil, huruf capital, ataupun
kombinasi keduanya.
2. Menampilkan Tulisan / Teks

Untuk menampilkan teks di halaman 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 di tengah
4. DIV Mengatur teks yang memiliki karakteristik yang
sama
5. B Menebalkan cetakan teks
6. SMALL Menampilkan teks lebih kecil dari pada ukuran
normal
7. BIG Menampilkan teks lebih besar dari pada 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

3. 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">
Mari belajar HTML..gampang
kan?
</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 :
a. Menggunakan nama warna
b. 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
4. 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 di atas, halaman web menggunakan gambar

“disket.gif” sebagai gambar latar, dan di dalam 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

5. 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
Contoh :
<HTML>
<HEAD><TITLE>MEMBUAT GARIS
HORISONTAL</TITLE></HEAD>
<BODY>
SMK TAMTAMA 1 SIDAREJA<HR align="center"
color="#0000FF" noshade size="10">
Jalan Jenderal Akhmad Yani No. 31 
Sidareja 53261 
</BODY>
</HTML>
Dari script diatas akan menampilkan garis horizontal

berwarna biru dengan ukuran 12 dan tidak menyertakan
bayangan. Seperti tampak pada gambar berikut :

C. PRAKTEK
Catatan yang harus diperhatikan:
Jika setiap script akan disimpan dengan nama file yang
berbeda-beda, sebaiknya buat sebuah folder terlebih dahulu, dan
simpan semua file anda dalam folder tersebut.
1. Buka lembar kerja textpad/notepad baru.
2. Ketikkan script berikut
<html>
<head>
<title>P.Web --> ini adalah title</title>
</head>
<body>
Website dapat dibedakan menjadi dua yaitu
Web Statis dan Web Dinamis.
- Web Statis adalah web yang berisi
informasi-informasi yang bersifat statis
(tetap). 
- Web statis yang ditonjolkan adalah sisi
tampilan yang banyak mengandung grafis
sehingga untuk merancang web statis
tidak diperlukan kemampuan pemrograman
yang handal. Yang dibutuhkan hanya
kemampuan design grafis/web dan cita
rasa seni belaka. 
- Web Dinamis adalah web yang menampilkan
informasi yang bersifat dinamis
(berubah-ubah) dan dapat saling
berinteraksi dengan user.
- Web dinamis yang banyak ditonjolkan
adalah pengolahan data sehingga
dibutuhkan kemampuan dalam pemrograman
web.
</body>
</html>
 Simpan script tersebut dengan ekstensi .htm atau .html
(contoh: web1.htm atau web1.html)
 Jalankan halaman web dengan menggunakan web browser
(Internet Explorer/Mozilla). Perhatikan TITLE dan teks yang
tampil dihalaman web, teks yang ditampilkan tidak rapi seperti
yang diketikkan di editor. Bandingkan antara text yang
menggunaan tag dan yang tidak.

3. Modifikasilah tampilan web dengan memberikan warna pada latar

belakang web. Yaitu dengan menambahkan atribut BGCOLOR
pada <BODY>, sehingga script menjadi
<BODY BGCOLOR=”blue”>
4. Jalankan lagi halaman web tersebut, amati hasilnya.
5. Sisipkan sebuah gambar (dengan megambil satu gambar yang
tersedia di komputer), dan letakkan dibawah teks, kemudian
aturlah lebar dan tinggi gambar. Gunakan tag berikut :
<img src=”nama_file_gambar” width=”lebar”
height=”tinggi”>
 Penulisan nama_file_gambar harus diikuti ekstensinya
(contoh: gambar.jpg)
 Ukuran lebar dan tinggi gambar gunakan satuan pixel
6. Cobalah menggunakan gambar (cari gambar dengan ukuran kecil,
contoh: file berekstensi .gif) untuk diletakkan sebagai gambar latar
belakang halaman web dengan menggunakan tag :
<BODY background="nama_file_gambar">
7. Modifikasilah warna teks dengan menambahkan atribut untuk
warna teks pada tag font seperti berikut:
 teks yang akan di beri warna

D. LATIHAN
a. Modifikasilah halaman web pada praktik diatas dengan
memberikan tag untuk membuat tampilan teks menjadi rata
kanan, rata kiri dan tengah.
b. Tambahkan sebuah garis pada akhir tulisan dengan tag <HR>
dengan ukuran 10 dan gunakan warna aqua.

E. TUGAS
Buatlah sebuah surat kepada orang terdekat anda (tema bebas)
dalam halaman web. Ketentuan:
1. Terdiri dari 2 paragraf.
2. Modifikasilah teks pada surat tersebut dengan beberapa warna
font, jenis font dan ukuran font.
3. Tambahkan foto anda masing-masing diakhir surat.
4. Simpan halaman web tersebut dengan nama “index”. Kemudian
jalankan halaman tersebut di browser dengan localhost.
Contoh surat :
Untukmu cintaku,
Seandainya hatimu adalah sebuah system,

maka aku akan scan kamu untuk mengetahui port mana yang terbuka Sehingga
tidak ada keraguan saat aku c:\> nc -l -o -v -e ke hatimu,tapi aku hanya berani
ping di belakang anonymouse proxy, inikah rasanya jatuh cinta sehingga
membuatku seperti pecundang atau aku memang pecundang sejati whatever!
Seandainya hatimu adalah sebuah system,

jangan ada kata "You dont have permission to access it" untuk aku, kalau
ga mau di ping flood Atau DDos Attack jangan ah....! kamu harus
menjadi sang bidadari penyelamatku.
Seandainya hatimu adalah sebuah system, ...?
Tapi sayang hatimu bukanlah sebuah system,

kamu adalah sang bidadari impianku, yang telah mengacaukan systemku!
Suatu saat nanti aku akan datang n mengatakan kalau di hatiku sudah
terinfeksi virus yang Menghanyutkan, Ga ada anti virus yang dapat
menangkalnya selain ...kamu.

Pemrograman Web - HTML Modul 1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemrograman Web - HTML Modul 1

Diunggah oleh

Hak Cipta:

Format Tersedia

BUKU PANDUAN BELAJAR

TEKNIK KOMPUTER DAN JARINGAN

A. MAKSUD DAN TUJUAN

Setiap file/dokumen HTML akan diawali dan diakhiri dengan

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 1

Bagian-bagian dalam file HTML dikenal dengan istilah Tag

Bagian kepala ini digunakan untuk membuat judul pada

Bagian badan akan berisikan content yang akan

Aturan penulisan dalam menuliskan Tag-tag pada file

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 2

1) Tag pembuka ditulis dengan diawali tanda < dan diakhiri

2. Menampilkan Tulisan / Teks

No. Tag Fungsi

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 3

Jika halaman web dijalankan di browser maka akan

Pemberian warna pada atribut COLOR, BGCOLOR, dan

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 4

Table berikut menunjukkan nilai warna :

Nama Warna RGB Nama Warna RGB

dari script di atas, halaman web menggunakan gambar

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 5

Untuk menggunakan gambar sebagai latar belakang web

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 6

5. Membuat Garis Horisontal

No. Atribut Fungsi

Dari script diatas akan menampilkan garis horizontal

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 7

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 8

3. Modifikasilah tampilan web dengan memberikan warna pada latar

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 9

Seandainya hatimu adalah sebuah system,

Seandainya hatimu adalah sebuah system,

Seandainya hatimu adalah sebuah system, ...?

Tapi sayang hatimu bukanlah sebuah system,

Yayan Aminudin, S.Kom. Praktikum Pemrograman Web Hal. 10

Anda mungkin juga menyukai