Modul 4 Web Programming HTML Form & Hyperlink.pdf

Modul Praktikum Pemrograman Web 1 2022
Setiya Nugroho, M.Eng Page 1
MODUL 4. Form dan Hyperlink HTML
4.1. Tujuan
1. Mengenalkan kepada mahasiswa konsep form dan hyperlink pada HTML
2. Mahasiswa dapat memahami pembuatan form dan hyperlink
3. Mahasiswa dapat membuat program menggunakan form dan hyperlink
4.2. DASAR TEORI
HTML Form digunakan untuk memberikan data ke sebuah server. Sebuah
HTML Form dapat memiliki input – input element antara lain text field, checkbox,
radiobutton, submit button dan lain-lain. Sebuah form juga dapat mengandung
select lists, textarea, fieldset, legend, dan element label.
HTML menggunakan tag <a> untuk membuat suatu link kepada dokumen lain
dalam web. Sintaks dari penghubungan dalam HTML dengan menggunakan tag
<a>, atribut href digunakan untuk mendefinisikan lokasi link.
Ada beberapa jenis link, diantaranya :
➢ link absolut : link yang terhubung dengan jaringan internet online
➢ link relatif : link ke ke page lain pada komputer yang sama
➢ link dalam dokumen yang sama
➢ link ke alamat email
Atribut target Kegunaan
target="_blank" Memuat dokumen baru ke dalam window baru yang kosong
target="_self" Memuat dokumen baru ke dalam window yang sama dengan
anchor (default)
target="_top" Memuat dokumen baru ke dalam keseluruhan window browser
(cara yang umum digunakan untuk keluar dari frame)
target="_parent" Memuat dokumen baru ke dalam parent frame (bila
menggunakan frame)

4.3. PELAKSANAAN PRAKTIKUM
1. Praktikum membuat form dengan checkbox
a Ketikkan script berikut di dalam notepad++ :
b Simpan dengan nama checkbox.html
c Jalankan dengan web browser, berikut hasil tampilannya :
2. Praktikum membuat form radio button dengan fieldset
a Buka aplikasi notepad++, ketikkan script berikut :
b Simpan dengan nama radio.html

c Buka file yang disimpan menggunakan browser, berikut tampilannya :
3. Praktikum membuat form dengan select
a Ketikkan script berikut di dalam notepad++
b Simpan dengan nama select.html

4. Praktikum membuat form dengan text area.
a Buka aplikasi notepad++, ketikkan script berikut :
b Simpan dengan nama textarea.html
c Buka aplikasi notepad++, ketikkan script berikut :
d Simpan dengan nama form.html
e Buka file yang disimpan menggunakan browser, berikut tampilannya :
<!DOCTYPE html>
<HTML>
<HEAD> <TITLE>Text Area</TITLE> </HEAD>
<BODY>
<FORM ACTION = "form.html" METHOD = "POST">
<table> <tr> <td> Nama Lengkap </td> <td>:</td> <td> </td>
<td><input type="text" placeholder="nama Anda"size="20"
name="namaku" id="nama" MAXLENGTH = "50" /></td> </tr>
<tr> <td> Password </td> <td>:</td> <td> </td>
<td><input type="password" size="20" name="kunci" id="pass"
MAXLENGTH = "20" placeholder="min 6 char"/></td> </tr></table>
<TEXTAREA NAME = "komentar" ROWS = "3" COLS = "40" WRAP>
</TEXTAREA> <BR>
<INPUT TYPE = "SUBMIT" VALUE = "Kirim">
<INPUT TYPE = "RESET" VALUE = "Kosongkan">
</FORM>
</BODY>
</HTML>

5. Praktikum membuat hyperlink absolut
b Simpan dengan nama absolut.html
6. Praktikum membuat hypelink relatif
d Ketikkan script berikut di dalam notepad++
e Simpan dengan nama absolut.html

f Ketikkan script berikut di dalam notepad++
g Simpan dengan nama setiya.html
h Buka file yang disimpan menggunakan browser, berikut tampilannya :
<!DOCTYPE html>
<Html>
<Head> <Title> Membuat Link Relatif </Title> </Head>
<Body>
<p> Daftar Riwayat Hidup Setiya Nugroho </P>
<P> Nama : Setiya Nugroho, S.T., M.Eng </p>
<P> NIDN : 0631088203 </p>
<P> Pendidikan : </P>
<p> S1 : Teknik Elektro UNDIP </p>
<p> S2 : MTI UGM </p>
<a href="hyperlink-relatif.html">Kembali </a>
</Body>
</Html>

7. Praktikum membuat hyperlink dalam dokumen yang sama
b Simpan dengan nama hyperlink-3.html
<!DOCTYPE html>
<Html>
<Head><Title> Link Dokumen sama </Title> </Head>
<Body>
<p> <b>Cara Menerapkan Pendidikan Karakter </b><p>
<p> <a href="#otonom">Model Otonom </a></p>
<p> <a href="#integrasi">Model Integrasi </a></p>
<a name="otonom"> <p><h3>Model Otonom</h3></P>
<p> Model otonomi yang memposisikan pendidikan karakter sebagai
mata sebuah pelajaran tersendiri menghendakiadanya rumusan yang
jelas seputar standar isi, kompetensi dasar, silabus, rencana
pembelajaran, bahan ajar,metodologi dan evaluasi pembelajaran.
Jadwal pelajaran dan alokasi waktu merupakan konsekuensi lain
dari model ini. </p>
<a name="integrasi"> <p><h3>Model Integrasi</h3></P>
<p> Ada pun model ke dua yang mengintegrasikan pendidikan
karakter dengan seluruh mata pelajaran ditempuh dengan paradigma
bahwa semua guru adalah pengajar karakter (character educator).
</p>
<a href ="#top">Kembali ke atas </a>
</Body>
</Html>

8. Praktikum membuat hypelink ke alamat email
b Simpan dengan nama hyperlink-email.html
<!DOCTYPE html>
<html>
<body>
<form
action="mailto:setiyanugroho@gmail.com?subject=Web%20Programming
%20kelas..." method="post" enctype="text/plain">
<h3>Form ini mengirim sebuah e-mail ke W3C.</h3>
Nama<br>
<input type="text" name="Nama" value="Setiya Nugroho"
size="20"> <br>
NPM:<br>
<input type="text" name="NIM" value="0123456789"
size="20"> <br>
Tugas:<br>
<input type="text" name="Tugas" value="Tugas Modul 4"
size="40"> <br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>

4.4. Latihan
1. Buat lah sebuah form dengan tampilah sebagai berikut :

Modul 4 Web Programming HTML Form & Hyperlink.pdf

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Modul 4 Web Programming HTML Form & Hyperlink.pdf

Similar to Modul 4 Web Programming HTML Form & Hyperlink.pdf (20)

More from Setiya Nugroho

More from Setiya Nugroho (11)

Modul 4 Web Programming HTML Form & Hyperlink.pdf