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 …
Bagian yang terdapat dalam tag HTML terdiri dari: Kepala Bagian kepala dalam dokumen HTML ditandai dengan tag berikut :
… Bagian kepala ini digunakan untuk membuat judul halaman web dengan menggunakan tag berikut : <TITLE> … Badan Bagian badan dalam dokumen HTML ditandai dengan tag berikut : … 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
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 …, 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 : <TITLE=”Halaman web dengan HTML”>
Mari belajar HTML..gampang kan? 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 , dan untuk menampilkan gambar dalam halaman web dapat mengunakan Tag
![]()
. Berikut contoh script menampilkan gambar : <TITLE>Halaman web dengan 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
. 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 : <TITLE>MEMBUAT GARIS HORISONTAL UNIVERSITAS UNIVERSAL
Kompleks Maha Vihara Duta Maitreya
Batam 29456
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
P.Web --> ini adalah title Website dapat dibedakan menjadi dua yaitu Web Statis dan Web Dinamis. - Web Statis adalah web yang berisi informasiinformasi 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. - 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 , sehingga script menjadi 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 :
-
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 : 6. 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
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.
