Pages

Selasa, 30 September 2014

Modul 2 HTML Lanjut

MODUL 2
HTML (Hyper Text Marcup Language)
LANJUT

A. TUJUAN
Mengetahui dan memahami tag-tag dalam HTML lebih lanjut, dan mengetahui fungsi dari tag-tag tersebut.

B. LANDASAN TEORI 
1. Hyperlink

Hyperlink sering disebut anchor digunakan untuk menghubungkan (link) antara satu halaman web dengan halaman web yang lainnya, dalam satu website ataupun antar website juga dapat digunakan berpindah ke suatu posisi dalam halaman website. Deskripsi dari sifat yang dimiliki hyperlink :
a.       Link saat hyperlink belum dikunjungi
b.      Visited telah dikunjungi
c.       Active dalam keadaan in focus atau terpilih.

2. Form


 C. ALAT DAN BAHAN
1.      Laptop
2.      Sistem Operasi Windows 7
3.      Browser Chrome
4.      Notepad ++
5.      File gambar ber-ekstensi .jpg
6.      Lembar kerja percobaan
 
D. LANGKAH-LANGKAH PRAKTIKUM
     Percobaan 1 Hyperlink
  1. Siapkan logo Google ber-ekstensi .jpg, ubah nama gambar tersebut menjadi google.jpg
  2. Ketik scrip berikut didalam notepad
    3. <html>
    <head><title>Hyperlink</title></head>
    <body>
    <h1>Ini adalah halaman 2</h1>
    </br>
    Untuk kembali ke halaman 1 silahkan klik dibawah ini:
    </br>
    <a href='halaman1.html' target='_top'> Kembali</a>
    </body>
    </html>
  3.  Simpan dengan nama halaman1.html
  4.  Buka kembali notepad baru, ketik script berikut
    5. <html>
    <head><title>Hyperlink</title></head>
    <body>
    <h1>Ini adalah halaman 2</h1>
    </br>
    Untuk kembali ke halaman 1 silahkan klik dibawah ini:
    </br>
    <a href='halaman1.html' target='_top'> Kembali</a>
    </body>
    </html>
  5.  Simpan dengan nama halaman2.html
  6.  Hasil

     Percobaan 2 Form
  1. Buka aplikasi  Notepad.
  2. Ketik script berikut
    3. <html>
    <head>
    <title>Form</title>
    </head>
    <body>
    <h2 align="center"><font color="#9966FF">Free Registration</font></h2>
    <form action="proses.php" method="post" name="form">
    <table width="68%" border="0" align="center" cellpadding="0">
    <tr>
    <td width="15%">Nama</td>
    <td width="2%">:</td>
    <td width="83%"><input name="txtNama" type="text" id="txtNama"></td>
    </tr>
    <tr>
    <td>Tgl Lahir</td>
    <td>:</td>
    <td><input name="txtTgl" type="text" id="txtTgl" size="4" maxlength="2">
    /
    <input name="txtBulan" type="text" id="txtBuulan" size="4" maxlength="2">
    /
    <input name="txtTahun" type="text" id="txtTahun" size="8" maxlength="4"></td>
    </tr>
    <tr>
    <td>Alamat</td>
    <td></td>
    <td><textarea name="txtAlamat" cols="40" row="2" id="txtAlamat"></textarea></td>
    </tr>
    <tr>
    <td>Kota</td>
    <td>:</td>
    <td><input name="txtKota" type="text" id="txtKota"></td>
    </tr>
    <tr>
    <td>Pekerjaan</td>
    <td>:</td>
    <td><select name="cboJob" id="cboJob">
    <option>Tani</option>
    <option>Nelayan</option>
    <option>Karyawan</option>
    </select></td>
    </tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td><input name="radJk" type="radio" value="1" checked> Laki-Laki
    <input type="radio" name="radJk" value="2"> Perempuan</td>
    </tr>
    <tr>
    <td>Hobby</td>
    <td>:</td>
    <td><input name="cekReading" type="checkbox" id="cekReading" value="1"> Reading </td>
    </tr>
    <tr>
    <td></td>
    <td></td><td><input name="cekSport" type="checkbox" id="cekSport" value="2"> Sport</td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td><input name="cekSing" type="checkbox" id="cekSing" value="3">Singing</td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td><input name="cekTravel" type="checkbox" id="cekTravel" value="4">Traveling</td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
    <input name="btnCancel" type="reset" id="btnCancel" value="Cancel"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
  3. Simpan file dengan nama form.html
  4. Hasil


  Percobaan 3 Animasi
  1. Buka aplikasi  Notepad.
  2. Ketik script berikut
    3. <html>
    <head><title>Animasi</title></head>
    <body>
    <marquee>Teks ini berjalan</marquee>
    </br>
    <blink>Teks ini berkedip-kedip</blink>
    </body>
    </html>
  3. Simpan file dengan nama animasi.html
  4. Hasil

D. TUGAS

  1. Tulislah 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) 
    <html>
    <head><title>Tugas 1 yahoo</title></HEAD>
    <body>
    <marquee><a href='http://www.yahoo.com' target='_blank'>
    <img src='yahoo.jpg' width=100px height=50px></a></marquee>
    </br>
    </body>
    </html>
      2. Jelaskan fungsi dari tag :
No
Tag/atribut
Fungsi
1.
<a href='halaman2.html' >
Hyperlink, berpindah ke halaman lain dalam satu website
2.
<a href='http://www.yahoo.com'>
Hyperlink, berpindah ke website lain
3.
<a href=’referensi’ >
Hyperlink Bookmark, berpindah ke posisi lain dalam satu halaman web(web yang sama)
4.
Target=’blank’
Link dokumen ke jendela baru
5.
<input type=’checkbox’>
Untuk membuat kotak-kotak cek
6.
<name=’cekSing’>
Memberi nama untuk input checkbok yang berlaku
7.
<input type=’text’>
Digunakan untuk isian seperti nama orang/ alamat(berupa tulisan teks).
8.
Id=’txtKota’
Untuk melihat hasilnya
9.
Maxlenght=’20’
Untuk menentukan batas maksimal masukan karakter yang dapat diberikan ke dalam kotak masukan teks
10.
<TEXTAREA></TEXTAREA>
Untuk pengisian text /karakter yng panjang seperti komentar/ email
11.
Cols=’20’
Membuat kolom dengan ukuran 20
12.
&nbsp;
Untuk memberikan spasi
13.
<marquee>...</marquee>
Membuat teks atau gambar berjalan
14.
<blink>....</blink>
Membuat teks atau gambar berkedip-kedip
 


Posted by at 03.57
Labels:

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)