A. TUJUAN
Mengetahui dan memahami dasar-dasar bahasa HTML (HyperText Markup Language) sebagai bahasa pemrograman untuk membuat halaman web statis.
B. LANDASAN TEORI
Dalamn 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, atau situs. Website ini dibuka melalui sebuah program penjelajah (Browser) yang berada di sebuah computer. Program penjelajah yang biasa digunakan dalam computer di antaranya adalah : IE(Internet Explorer) , Mozila Firefox, Netscape, Safari, dan Opera.
Website atau situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks , gambar diam atau gerak, animasi, suara dan atau gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait di mana masing-masing dihubungkan dengan jaringan-jaringan halaman (Hyperlink).
Pengunjung website terkadang ingin berinteraksi dengan admin situs ataupun dengan pengunjung lain untuk berbagi informasi yang disajikan dalam suatu halaman web. Oleh karena itu, disediakan suatu tempat untuk mengisikan pesan ataupun identitas tersebut sering disebut dengan form. Form terdiri dari beberapa jenis masukkan data, seperti berupa teks, gambar(image), password, checkbox, dan lain-lain. Kemudian data-data tersebut dikirim menggunakan sebuah tombol, atau teks yang dijadikan tombol.
C. ALAT DAN BAHAN
Alat dan bahan yang digunakan untuk praktikum adalah :
1. PC (Personal Computer)
2. Sistem Operasi Windows
3. Browser (Mozila Firefox/Chrome)
4. Notepad (terintegrasi dengan Windows)
5. File gambar ber-ekstensi .jpg.
6. Lembar kerja percobaan.
D. LANGKAH-LANGKAH PRAKTIKUM
1. percobaan 1 (Hyperlink)
a. membuat file dengan nama halaman 1.html
b. membuat halaman 2.html untuk link
a. membuat file dengan nama halaman 1.html
| <html> | |
| <head> | |
| <title>hyperlink</title> | |
| </head> | |
| <h1>Ini adalah halaman 1</h1> | |
| <br> | |
| untuk pergi ke halaman 2 klik <a href='halaman2.html' target='_top'>disini</a> | |
| </br> | |
| untuk pergi ke halaman google silahkan klik gambar dibawah : | |
| <br> | |
| <a href='http://www.google.com' target='_blank'><img src='google.jpg' width='200' height='50' alt='google'></a></alt> | |
| <br> | |
| untuk melihat referensi tentang pemograman web silahkan klik teks dibawah : </br> | |
| <a href='#referensi'><b> lihat referensi tentang pemograman web</b></a> | |
| </br> | |
| <br><br><br><br> | |
| </br></br></br> | |
| <a name='referensi'><b>referensi pemograman web</b></a> | |
| </br> | |
| di sini adalah terks berisi tentang referensi pemograman web. | |
| di sini adalah terks berisi tentang referensi pemograman web. | |
| di sini adalah terks berisi tentang referensi pemograman web. | |
| di sini adalah terks berisi tentang referensi pemograman web. | |
| di sini adalah terks berisi tentang referensi pemograman web. | |
| </body> | |
| </html> |
Hasil dari percobaan 1 :
b. membuat halaman 2.html untuk link
| <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> |
2. percobaan 2 (Form)
3. percobaan 3 (Animasi)
1. Tulis script HTML untuk membuat gambar berjalan, gambar tersebut adalah hyperlink menuju alamat yahoo.com (ukuran gambar 100 x 50 pixel)
2. fungsi dari tag :
| <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="txtBulan" size="4" maxlength="2">/<input name="txtTahun" type="text" id="txtTahun" size="8" maxlength="4"></td> | |
| </tr> | |
| <td>Alamat</td> | |
| <td> </td> | |
| <td><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textarea></td> | |
| <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>---pilih---</option> | |
| <option>Tani</option> | |
| <option>Nelayan</option> | |
| <option>Karyawan/Swasta</option> | |
| </select></td> | |
| </tr> | |
| <tr> | |
| <td>Jenis Kelamin</td> | |
| <td>:</td> | |
| <td><input name="radJK" type="radio" value="1" checked>Laki-laki<input name="radJK" type="radio" value="2" checked>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> | |
| <td> </td> | |
| <td> </td> | |
| <td><input name="cekTravel" type="checkbox" id="cekTravel" value="4">Traveling</td> | |
| </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> | |
Hasil :
3. percobaan 3 (Animasi)
| <html> | |
| <head> | |
| <title>Animasi</title> | |
| </head> | |
| <body> | |
| <marquee>Teks ini berjalan</marquee> | |
| <br> | |
| <blink>Teks ini berkedip-kedip</blink> | |
| </br> | |
| </body> | |
| </html> | |
Hasilnya :
D. Tugas
| <html> | |
| <head> | |
| <title>gambar berjalan hyperlink _top</title> | |
| </head> | |
| <body> | |
| <marquee><a href="http://www.yahoo.com" target="_top"><img src='yahoo.jpg' width='100' height='50' alt='yahoo'></marquee></a> | |
| </body> | |
| </html> |
Hasilnya:
2. 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
|
|
Untuk memberikan spasi
|
13
|
<marquee>...</marquee>
|
Membuat teks atau gambar berjalan
|
14
|
<blink>....</blink>
|
Membuat teks atau gambar berkedip-kedip
|
Tidak ada komentar:
Posting Komentar