MODUL I PENGENALAN HTML
A. MAKSUD DAN TUJUAN 1. Maksud
a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML
b. Mengenalkan kode-kode HTML 2. Tujuan
a. Mahasiswa dapat membuat halaman Web dengan menggunakan kode HTML
b. Mahasiswa dapat membuat tampilan dokumen HTML dengan menggunakan permainan warna, dan berbagai jenis tampilan teks
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
<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.
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
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
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>
UNIVERSITAS UNIVERSAL<HR align="center" color="#0000FF" noshade size="10">
Kompleks Maha Vihara Duta Maitreya<br> Batam 29456<br>
</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.
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).<br> - 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.<br>
- 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 <br> 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”>
Jalankan lagi halaman web tersebut, amati hasilnya.
4. 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
5. 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">
6. Modifikasilah warna teks dengan menambahkan atribut untuk warna teks pada tag font seperti berikut:
<font color=”red”> teks yang akan di beri warna </font>
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.
