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 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 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. 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 informasiinformasi 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.