MODUL 2
“HTML (Hyper Text Markup Language) Lanjut”
A. Tujuan
Dapat
mengetahui dan memahami tag-tag dalam HTML lebih lanjut, berserta fungsi dari
tag-tag tersebut.
Dalam mengakses informasi dari dunia internet, pengguna
akan menuju ke sebuah alamat unik internet yang disebut nama domain (Domain Name/ URL – Uniform Resource Locator) dan menemukan informasi berbentuk teks,
gambar, animasi bergerak ataupun suara dalam sebuah media, yang disebuat
website atau situs. Website ini dibuka melalui sebauh program penjelajah (Browser) yang berada disebuah komputer.
Program penjelajah yang bisa digunakan dalam komputer diantaranya : IE (Internet Explorer), Mozilla Firefox,
Netscape, Safari, dan Opera.
Beberapa hal yang akan dipelajari:
1.
Hyperlink
2.
Form
C.
Alat dan Bahan
Alat dan bahan
yang digunakan dalam praktikum adalah:
1. PC (Personal Komputer) atau Laptop
2. Sistem Operasi Windows
3. Browser (Mozilla Firefox)
4. Notepad++
5. File gambar ber-ekstensi .jpg
6. Microsoft Word
1. PC (Personal Komputer) atau Laptop
2. Sistem Operasi Windows
3. Browser (Mozilla Firefox)
4. Notepad++
5. File gambar ber-ekstensi .jpg
6. Microsoft Word
D.
Langkah-langkah Percobaan
Percobaan 1: Hyperlink
1. Mencari gambar logo Google dari internet ber-ekstensi.jpg dan menempatkan satu
folder dengan file percobaan yang disimpan.
2. Mengubah nama gambar tersebut menjadi google.jpg
3. Membuka Notepad++
4. Mengetik Srcipt berikut:
5.
Menyimpan file
dengan nama halaman1.html 1. Mencari gambar logo Google dari internet ber-ekstensi.jpg dan menempatkan satu
folder dengan file percobaan yang disimpan.
2. Mengubah nama gambar tersebut menjadi google.jpg
3. Membuka Notepad++
4. Mengetik Srcipt berikut:
6. Membuka kembali lembaran baru Notepad++
7. Mengetik Srcipt berikut:
9. Membuka file halaman1.html menggunakan browser.
10. Hasil
(klik gambar untuk lebih
jelas)
Percobaan 2: Form
1.
Membuka Notepad++
2. Mengetik Srcipt berikut:
2. Mengetik Srcipt berikut:
4. Membuka file menggunakan browser.
5. Hasil
Percobaan 3: Animasi
1. Membuka Notepad++
2. Mengetik Srcipt berikut:
1. Membuka Notepad++
2. Mengetik Srcipt berikut:
4. Membuka file menggunakan browser.
5. Hasil
(klik gambar
untuk lebih jelas)
E.
Tugas
1. Membuat script HTML untuk membuat gambar berjalan yang mana gambar tersebut adalah hyperlink menuju alamat www.yahoo.com (ukuran gambar 100 x 50 pixel, dan target hyperlink pada jendela yang sama)
1. Membuat script HTML untuk membuat gambar berjalan yang mana gambar tersebut adalah hyperlink menuju alamat www.yahoo.com (ukuran gambar 100 x 50 pixel, dan target hyperlink pada jendela yang sama)
Hasil
(klik gambar untuk lebih
jelas)
2. Menjelaskan fungsi dari tag atau attribut berikut:
No
|
Tag/atribut
|
Fungsi
|
1
|
<a href='halaman2.html' >
|
Setelah di klik akan menuju halaman2.html
|
2
|
<a
href='http://www.google.com'>
|
Stelah di klik akan menuju ke www.google.com
|
3
|
<a href='referensi'>
|
setelah di klik akan menuju ke tempat yang
sudah ditandai dengan #referensi
|
4
|
Target='_blank'
|
membuka jendela baru pada link yang sudah
ditandai
|
5
|
<input type='checkbox'>
|
untuk membuat kotak cek pada suatu bentuk
masukan ataupun pilihan
|
6
|
<name='cekSing'>
|
memberi nama untuk inputan
|
7
|
<input type='text'>
|
memberi inputan bertype text
|
8
|
Id='txtKota'
|
memanggil id txtkota
|
9
|
Maxlenght='20'
|
panjang maksimal 20 karakter
|
10
|
<TEXTAREA></TEXTAREA>
|
membuat pengisian text yang lumayan panjang
seperti alamat
|
11
|
Cols='20'
|
membuat kolom berukuran 20
|
12
|
|
membuat spasi
|
13
|
<marquee>...</marquee>
|
membuat teks atau gambar berjalan
|
14
|
<blink>....</blink>
|
Membuat teks atau gambar berkedip-kedip
|
Tidak ada komentar:
Posting Komentar