Modul 4 Web Programming HTML Form & Hyperlink.pdf
0 likes6,955 views
Modul ini membahas tentang form dan hyperlink pada HTML. Modul menjelaskan konsep dasar form dan hyperlink, serta memberikan contoh kode untuk membuat form dengan checkbox, radio button, select, text area dan hyperlink absolut, relatif, dalam dokumen yang sama, serta ke alamat email. Modul ini juga memberikan latihan untuk membuat form.
Modul 4 Web Programming HTML Form & Hyperlink.pdf
- 1. 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)
- 2. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 2 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
- 3. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 3 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 c Buka file yang disimpan menggunakan browser, berikut tampilannya :
- 4. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 4 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. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 5 5. Praktikum membuat hyperlink absolut a Ketikkan script berikut di dalam notepad++ b Simpan dengan nama absolut.html c Buka file yang disimpan menggunakan browser, berikut tampilannya : 6. Praktikum membuat hypelink relatif d Ketikkan script berikut di dalam notepad++ e Simpan dengan nama absolut.html
- 6. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 6 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. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 7 7. Praktikum membuat hyperlink dalam dokumen yang sama a Ketikkan script berikut di dalam notepad++ b Simpan dengan nama hyperlink-3.html c Buka file yang disimpan menggunakan browser, berikut tampilannya : <!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. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 8 8. Praktikum membuat hypelink ke alamat email a Ketikkan script berikut di dalam notepad++ b Simpan dengan nama hyperlink-email.html c Buka file yang disimpan menggunakan browser, berikut tampilannya : <!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>
- 9. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 9
- 10. Modul Praktikum Pemrograman Web 1 2022 Setiya Nugroho, M.Eng Page 10 4.4. Latihan 1. Buat lah sebuah form dengan tampilah sebagai berikut :