Modul Web Pert-2

Modul Pemrograman Web
S1 Ilmu Komputer
Pertemuan Ke-2:
Hyperlink, Image, Table, Table Merging
dan Form
Disusun Oleh:
Asisten Dosen Pemrograman Web
Jurusan Ilmu Komputer Universitas Lampung
Tim Penyusun
Pengarah
RIZKY PRABOWO, M.KOM
Penyusun
● Satria Sapta Nugraha 2017051022
● Rendy Lutfi Prabowo 2017051053
● Rifan Setiadi 2017051019
● Kurniawan Dwi Yulianto 2057051010
● Alifan Renaldi 2017051044
● Fachri Azka Nur 2017051054
● Putu Putra Eka Persada 2057051016

Gambaran Umum
Mempelajari mengenai penggunaan HyperText Markup Language (HTML)
termasuk tag, paragraf, heading, list. Lalu, melakukan instalasi Visual Studio
Code (VS Code).
Capaian Pembelajaran
1. Praktikan dapat mengerti penggunan hyperlink, img dan table.
2. Praktikan mampu mengkreasikan penggunaan tag img dan table
marging.
3. Praktikan mampu membuat form sederhana.
Materi Praktikum
Hyperlink
Hyperlink yang sering di kenal dengan link yaitu menghubungkan antara

satu dokument dengan dokumen yang lain pada HTML. Tujuan dari
hyperlink ini membuat sebuah teks atau gambar yang ketika diklik akan di
alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan
hyerlink tersebut. hyperlink sendiri selalu diikiti oleh atribut href, dimana
didalam href (hypertext reference) ini lah yang akan diisikan alamat yang
dituju ketika text atau gambar diklik. Berikut penulisan hyperlink
menggunakan <a href=”#”> :
1. <a href="malasngoding.com">klik disini</a>
Jenis Hyperlink
Dalam penulisan alamat Membuat Hyperlink Pada HTML memiliki dua jenis
yaitu alamat absolute dan alamat alternatif.:
● Absolute : alamat absolute yaitu penulisa alamat file yang disertai
dengan alamat website. Contohnya :
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>belajar memubuat hyperlink</title>
5. </head>
6. <body>
7. ini adalah contoh alamat absolute <a
href="https://www.malasngoding.com/category/html/">klik disini</a>
8. </body>
9. </html>
● Alternatif : penulisan alamat file yang akan di panggil berada dalam

aplikasi yang sama, jadi sebelum memanggil file yang diperlukan
tidak usah menggunakan nama dari websitenya. Contohnya saya
akan memanggil file part7.html yang berada dalam projek saya (satu
folder dengan halaman yang sekarang dibuat).
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>belajar memubuat hyperlink</title>
5. </head>
6. <body>
7. ini adalah contoh alamat absolute <a
href="https://www.malasngoding.com/category/html/">klik disini</a>
8. </body>
9. </html>
Note : perlu di perhatikan dalam membuat Hyperlink pada HTML dalam

penulisan alamat alternatif, sebelum kita memanggil Filenya ada kalanya
file tersebut tidak berada dalam satu forlder maka folder tempat
keberadaan file perlu dipanggil.
Meta Dokumen
Elemen meta sebagai identitas dari halaman Web yang biasa terdiri dari
owner, keywords, layout, ataupun inisialisasi proses seperti refresh. Contoh:
1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

2. <meta name="owners" content="myWeb" />
3. <meta name="keywords" content="Sistem Informasi, Jurnal, Publikasi
Ilmiah" />
4. <meta name="layout" content="main" />
5. <meta HTTP-EQUIV="REFRESH" content="0; url=/myweb/myurl">
Elemen HTML
Jenis-jenis elemen data yang akan ditampilkan pada halaman Web seperti:
Form, Text, Image, Table, Drop-Box, Button dan lainnya. Contoh:
● Tittle
Ditampilkan pada header browser
1. <title>Praktikum Pemrograman Web</title>
● Text
1. <h1>Selamat Datang Di Website Kami!</h1>
2. <h2>Web Ini Adalah Tutorial Pemrograman Web</h2>
3. <h3>Praktikum Pemrograman Web</h3>
4. <p> <a href="http://uin-malang.ac.id"> Teknik Informatika
5. UIN Malang </a> </span> link for your success way </p>
● Image
1. <img src="images/myphoto.jpg" width="180" height="200"
2. alt="photo"/>
● Form
1. <form method="POST" action="response2.jsp"
enctype="multipart/form-data">
● Drop-Box
1. <select name="My Lab">
2. <option value=’CC’>Lab. Praktikum Computer Vision</option>
3. <option value=’SI’> Lab. Sistem Informasi </option>
4. <option value=’CAI’> Lab. Computing & AI </option>
5. </select>
● File Browser
1. <input type="file" name="upload" value="" width="200" />
2. Table
3. <table border="1" width="10">
4. <thead>
5. <tr>
6. <th>NIM</th>
7. <th>Mahasiswa</th>
8. </tr>
9. </thead>
10. <tbody>
11. <tr>
12. <td>123</td>
13. <td>Ani Rahmawati </td>
14. </tr>
15. <tr>
16. <td>124</td>
17. <td>Budi Susilo</td>
18. </tr>
19. </tbody>
20. </table>
● List
1. Bidang Minat:
2. <ol>
3. <li>Sistem Informasi
4. <ul>
5. <li>Data Warehousing </li>
6. <li>Enterprise Architecture </li>
7. </ul>
8. </li>
9. <li>Multimedia
10. <ul>
11. <li>Komputer Grafik </li>
12. <li>Machinema </li>
13. </ul>
14. </li>
15. </ol>
Cara Menampilkan Hasil Koding HTML

Untuk menampilan hasi koding menggunakan html, cukup dengan
menggunakan browser. Namun pada praktikum kita, kita akan
menggunakan chrome sebagai browser default kita. Sehingga untuk
membuka file html kita menggunakan cara sebagai berikut :
1. Buka lokasi file html,
2. klik kanan pada file html.
3. Lalu klik open with atau buka dengan.
4. Maka akan muncul opsi beberapa software yang bisa membuka file
format html.
5. Pilih chrome sebagai browser default kita.
Selain cara diatas, ada acara lain yang lebih cepat. Yakni dengan drag file
html kita menuju browser.
Kegiatan Praktikum
Sebagai kegiatan praktikum, maka ikuti instruksi berikut:
● Buat file pertemuan1.html
● Copy setiap kode script html diatas
● Amati yang terjadi pada browser dengan melakukan refresh
pada setiap perubahan kode
● Aktifkan plugin firebug pada browser Mozilla atau chrome,
kemudian lakukan inspeksi sambil melakukan perubahan-
perubahan kode HTML
Tag <Img>
Img menunjukkan image yang berarti gambar dan oleh karenanya

digunakan untuk menyisipkan gambar. Gambar didalam sebuah dokumen
html tidak dimasukkan sepenuhnya pada file (.html, misalnya) akan tetapi,
hanya merujukkan file sumber gambar tersebut berada (disimpan).
Atribut Tag <img>

HTML <img> element memiliki beragam attribute yang dapat ditulis sesuai
kebutuhan. Akan tetapi, hanya dua attribute yang wajib ditulis pada setiap
<img /> element, yaitu src dan alt attribute. Namun, ada beberapa tag lain
yang biasa digunakan, penjelasannya yakni sebagai berikut:
● src menujukkan sumber file tersebut berada. Attribute ini wajib ditulis
untuk menentukkan source atau sumber alamat (lokasi) dimana
gambar tersebut dimpan (berada).
● alt menujukkan alternatif text yang akan muncul sebagai pengganti
apabila gambar tersebut tidak dapat ditampilkan.
1. <img src="https://www.apacara.com/logo.png" alt="logo apacara.com" />
● height berarti tinggi, digunakan untuk menentukkan tinggi gambar.
1. <img src="https://www.apacara.com/logo.png" height="90" alt="" />
sizes menentukkan daftar ukuran gambar berdasarkan jendela layar

browser yang ditampilkan. Melibatkan media query dan ukuran
gambar (source-size) yang ingin ditampilkan sesuai kondisi tertentu.
1. <img src="/media/images/orange.jpg" srcset="/media/images/apple.jpg

1024w, /media/images/grape.jpg 640w, /media/images/banana.jpg 320w"
sizes="(min-width: 900px) 50vw, 100vw" alt="">
● srcset, memasukkan deretan gambar pilihan yang dapat digunakan

oleh browser sesuai kebutuhan atau situasi tertentu (Misalnya, untuk
layar kecil, layar dengan resolusi tinggi, dan sebagainya.).
Penulisannya, dipisahkan dengan tanda koma (,) per-item gambar.
1. <img src="https://www.apacara.com/logo.png" srcset="gambar-1x.png 1x,

gambar-2x.png 2x, gambar-3x.png 3x, gambar-4x.png 4x" />
● width berarti lebar, digunakan untuk menentukkan lebar gambar.
1. <img src="https://www.apacara.com/logo.png" width="160" alt="" />
Note : HMTL img element, tidak memiliki tag penutup (end/closing tag), jadi
hanya ditulis <img /> bukannya <img></img>.
Table
Salah satu cara atau format menampilkan informasi dalam web adalah
dengan tabel. Tabel terdiri dari 4 unsur utama:
1. Baris
2. Kolom
3. Sel
4. Garis
Tag Untuk Membuat Table

Ada beberapa tag yang bisa dipakai untuk membuat tabel di HTML:
1. Tag <table> untuk membungkus tabelnya
2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header
Note : Tag yang paling penting untuk diingat adalah tag <table>, <tr>,
dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh
digunakan boleh tidak.
Contoh :
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Belajar Membuat Tabel HTML</title>
5. </head>
6. <body>
7. <table>
8. <tr>
9. <td>Baris 1 kolom 1</td>
10. <td>baris 1 kolom 2</td>
11. </tr>
12. <tr>
15. </tr>
16. </table>
17. </body>
18. </html>
Hasil :
Atribut Pada Tag <table>

● border
Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1"
di dalam tag <table>. Contoh:
1. <table boder="1">
2. <tr>
5. </tr>
6. <tr>
9. </tr>
10. </table>
● cellpadding
Atribut cellpadding adalah atribut untuk mengatur jarak teks
dengan garis di dalam sel.
1. table boder="1">
2. <tr>
5. </tr>
6. <tr>
9. </tr>
10. </table>
Atribut Pada Tag <td>, <tr> dan <th>
● bgcolor
Untuk menambahkan warna pada sel dan baris, kita bisa
menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr>
(untuk baris). Nilai atribut bgcolor bisa kita isi dengan kode warna
dalam heksadesimal atau nama warna dalam bahasa inggris.
Contoh:
1. <table border="1" cellpadding="10">

2. <tr>
3. <td bgcolor="yellow">Baris 1 kolom 1</td>
5. </tr>
6. <tr bgcolor="#00ff80">
9. </tr>
10. </table>
● rowspan dan colspan

Atribut yang digunakan untuk menggabungkan sel tabel adalah
rowspan dan colspan. Atribut ini bisa kita berikan kepada tag <td>
atau <th>. Berikut uraiannya:
a. rowspan untuk menggabungkan baris;
b. colspan untuk menggabungkan kolom.
Berikut contoh kode source nya:
1. <html>
2. <head>
4. </head>
5. <body>
6. <table border="1">
7. <tr>
8. <th rowspan="2" bgcolor="yellow">Bulan</th>
9. <th colspan="2" bgcolor="#00ff80">Hasil
Panen</th>
10. </tr>
11. <tr>
12. <th>Padi</th>
13. <th>Kacang</th>
14. </tr>
15. <tr>
16. <td>Januari</td>
17. <td>500 Kg</td>
18. <td>231 Kg</td>
19. </tr>
20. <tr>
21. <td>Februari</td>
22. <td>342 Kg</td>
23. <td>423 Kg</td>
24. </tr>
25. <tr>
26. <td>Maret</td>
27. <td>432 Kg</td>
28. <td>124 Kg</td>
29. </tr>
30. <tr>
31. <td>April</td>
32. <td>453 Kg</td>
33. <td>523 Kg</td>
34. </tr>
35. </table>
36.
37. </body>
38. </html>
● elemen yang Lainnya

Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang
lain, seperti gambar, link, video, list, dsb. Berikut contoh kode
sourcenya:
1. <!DOCTYPE html>
2. <html>
3. <head>
5. </head>
6. <body>
7. <table border="1">
8. <tr>
9. <th colspan="3" bgcolor="yellow">Produk
Unggulan</th>
10. </tr>
11. <tr>
12. <td rowspan="4">
13. <img
src="https://www.petanikode.com/img/bibit.png" width="200" />
14. </td>
15. </tr>
16. <tr>
17. <td>Nama</td>
18. <td>Benih Kode</td>
19. </tr>
20. <tr>
21. <td>Harga</td>
22. <td>Rp 192.000</td>
23. </tr>
24. <tr>
25. <td>Fitur</td>
26. <td>
27. <ul>
28. <li>Dilengkapi Dokumentasi</li>
29. <li>Ukuran: 31MB</li>
30. <li>Masa Tanam: 6 Bulan</li>
31. <li>Lisensi: MIT</li>
32. </ul>
33. </td>
34. </tr>
35. </table>
36.
37. </body>
38. </html>r>
39. </table>
40.
41. </body>
42. </html>
Form
Form dalam web bisa disamakan dengan formuliar di dunia nyata. Form
dapat diisi, kemudian diproses dengan program tertentu.
Form di HTML dapat kita buat dengan tag <form>. Tag ini memiliki beberapa
atribut yang harus diberikan, seperti:
● action, untuk menentukan aksi yang akan dilakukan saat data dikirim;
● method, metode pengiriman data.
1. <form action="prosess.php" method="GET">
2. 
3. </form>
Untuk atribut action, kita dapat mengisinya dengan alaman URL dari
endpoint yang akan memproses form.
Field
Field adalah ruas yang dapat diisi dengan data. Field memiliki beberapa
atribut yang harus diberikan:
1. type merupakan type dari field.
2. name merupakan nama dari field yang akan menjadi kunci dan
variabel di dalam program.
Ada beberapa type field, diantaranya adalah sebagai berikut :

● submit ● radio ● url
● checkbox ● option ● number
● password ● textearea ● date
● text ● meter ● datetime
● email ● color ● DLL
Atribut Pada Field

• placeholder untuk menampilkan teks sementara (placeholder);
• value untuk memberikan nilai default pada field.
• Required agar bisa menjadi field wajib di isi.
Kegiatan Praktikum
Buatlah kode source seperti berikut :

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form HTML</title>
5. </head>
6. <body>
7. <form action="contact.php" method="POST">
8. <fieldset>
9. <legend>Form</legend>
10. <p>
11. <label>Alamat Web:</label>
12. <input type="url" name="name" placeholder="Masukan URL Web..."
/>
13. </p>
14. <p>
15. <label>Tanggal Lahir:</label>
16. <input type="date" name="tanggal" />
17. </p>
18. <p>
19. <label>Umur:</label>
20. <input type="number" min="10" max="90" name="umur" />
21. </p>
22. <p>
23. <input type="submit" name="submit" value="Send" />
24. </p>
25. </fieldset>
26. </form>
27. </body>
28. </html>
Pastikan hasilnya akan seperti berikut, atau wajibkan mengkreasikan

sendiri.

Modul Web Pert-2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Web Pert-2

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Pemrograman Web

● Rendy Lutfi Prabowo 2017051053

● Rifan Setiadi 2017051019

● Kurniawan Dwi Yulianto 2057051010

● Alifan Renaldi 2017051044

● Fachri Azka Nur 2017051054

● Putu Putra Eka Persada 2057051016

Hyperlink yang sering di kenal dengan link yaitu menghubungkan antara

1. <a href="malasngoding.com">klik disini</a>

● Alternatif : penulisan alamat file yang akan di panggil berada dalam

Note : perlu di perhatikan dalam membuat Hyperlink pada HTML dalam

1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Cara Menampilkan Hasil Koding HTML

Img menunjukkan image yang berarti gambar dan oleh karenanya

Atribut Tag <img>

1. <img src="https://www.apacara.com/logo.png" alt="logo apacara.com" />

● height berarti tinggi, digunakan untuk menentukkan tinggi gambar.

1. <img src="https://www.apacara.com/logo.png" height="90" alt="" />

sizes menentukkan daftar ukuran gambar berdasarkan jendela layar

1. <img src="/media/images/orange.jpg" srcset="/media/images/apple.jpg

● srcset, memasukkan deretan gambar pilihan yang dapat digunakan

1. <img src="https://www.apacara.com/logo.png" srcset="gambar-1x.png 1x,

● width berarti lebar, digunakan untuk menentukkan lebar gambar.

1. <img src="https://www.apacara.com/logo.png" width="160" alt="" />

Tag Untuk Membuat Table

Atribut Pada Tag <table>

Atribut Pada Tag <td>, <tr> dan <th>

1. <table border="1" cellpadding="10">

● rowspan dan colspan

Berikut contoh kode source nya:

● elemen yang Lainnya

Ada beberapa type field, diantaranya adalah sebagai berikut :

Atribut Pada Field

Buatlah kode source seperti berikut :

Pastikan hasilnya akan seperti berikut, atau wajibkan mengkreasikan

Anda mungkin juga menyukai