Modul Pemrograman Web

S1 Ilmu Komputer

Pertemuan Ke-3:
layout element, form attribute, element,
input attribute, dan input form attribute
(HTML)

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
Belajar HTML layout element, HTML form attribute, element, input attribute,
dan input form attribute akan memberikan pemahaman dasar tentang
cara mengatur tampilan dan interaksi pengguna pada halaman web
menggunakan HTML. Dalam pembelajaran ini, Anda akan mempelajari
elemen-elemen dasar HTML untuk mengatur struktur dan tata letak
halaman, serta atribut-atribut yang digunakan untuk mengontrol perilaku
dan penampilan elemen-elemen tersebut. Anda juga akan mempelajari
cara membuat formulir HTML dan mengatur atribut untuk validasi dan
interaksi pengguna.

Capaian Pembelajaran
1. Memahami konsep dasar tentang struktur dan tata letak halaman
web menggunakan HTML.
2. Menggunakan elemen-elemen seperti header, nav, section, aside,
dan footer untuk mengorganisir konten halaman.
3. Menggunakan atribut-atribut seperti class, id, style, dan src untuk
mengontrol penampilan dan perilaku elemen-elemen HTML.
4. Membuat formulir HTML dengan menggunakan elemen-elemen
seperti form, input, label, dan button.
5. Menggunakan atribut-atribut seperti required, placeholder, dan type
pada elemen input untuk validasi dan interaksi pengguna.
6. Memahami prinsip-prinsip dasar pengembangan web dengan HTML.
Materi Praktikum
Pengantar HTML

pembelajaran HTML tentang layout element, form attribute, element, input

attribute, dan input form attribute. HTML (Hypertext Markup Language)
merupakan bahasa markah yang digunakan untuk membuat struktur dan
tampilan konten pada halaman web. Dalam pembelajaran ini, Anda akan
belajar bagaimana mengatur tampilan halaman web dan berinteraksi
dengan pengguna menggunakan elemen-elemen dan atribut-atribut
yang disediakan oleh HTML. Pemahaman yang baik tentang HTML sangat
penting bagi pengembang web, karena HTML menjadi dasar dalam
membangun halaman web yang interaktif dan responsif. Dalam
pembelajaran ini, kita akan menjelajahi beberapa konsep dasar yang akan
membantu Anda memulai perjalanan Anda dalam membangun halaman
web yang menarik dan fungsional. Pertama, kita akan belajar tentang
layout element HTML. Anda akan mempelajari elemen-elemen seperti
header, nav, section, aside, dan footer yang membantu mengatur struktur
konten pada halaman web. Kemudian, kita akan melanjutkan dengan
mempelajari form attribute dan element. Anda akan belajar cara membuat
formulir yang memungkinkan pengguna untuk menginput dan mengirim
data melalui halaman web. Atribut-atribut seperti required, placeholder,
dan type akan digunakan untuk memvalidasi dan mengontrol input
pengguna. Selanjutnya, kita akan fokus pada input attribute dan input form
attribute. Anda akan mempelajari cara mengatur atribut pada elemen
input, seperti text, password, checkbox, radio button, dan banyak lagi.
Atribut-atribut ini memungkinkan Anda untuk mengatur perilaku dan
penampilan elemen input sesuai dengan kebutuhan Anda. Dalam setiap
konsep yang dipelajari, kami akan memberikan contoh nyata dan kode
HTML yang dapat Anda ikuti. Anda juga akan diberikan tugas-tugas latihan
untuk mempraktikkan apa yang telah Anda pelajari. Pembelajaran ini akan
memberikan dasar yang solid dalam pengembangan web menggunakan
HTML. Setelah Anda menguasai konsep-konsep dasar ini, Anda akan siap
untuk melangkah ke tingkat selanjutnya dan memperluas pengetahuan
Anda tentang teknologi web.
Pembelajaran

Berikut ini adalah contoh kegiatan praktikum yang dapat dilakukan untuk
mempraktikkan penggunaan berbagai jenis atribut dalam HTML:

Kegiatan Praktikum: Eksplorasi Jenis Atribut HTML

Deskripsi:
Kegiatan ini bertujuan untuk memperkuat pemahaman tentang berbagai
jenis atribut dalam HTML. Anda akan membuat beberapa contoh
menggunakan atribut-atribut tersebut dan melihat hasilnya dalam
browser.

Langkah-langkah:

1. Siapkan file HTML kosong dengan struktur dasar sebagai berikut:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
7. <title>Praktikum Atribut HTML</title>
8. </head>
9. <body>
10. <!-- Tempatkan kode praktikum di sini -->
11. </body>
12. </html>

2. Mulailah dengan eksplorasi atribut global. Tambahkan elemen `<div>`

dengan atribut `id` dan `class` ke dalam `<body>`. Berikan nilai yang sesuai
untuk atribut-atribut tersebut. Contohnya:

13. <body>
14. <div id="myDiv" class="box">Ini adalah sebuah div dengan
atribut global.</div>
15. </body>

3. Selanjutnya, lanjutkan dengan atribut untuk gambar. Tambahkan elemen

`<img>` dengan atribut `src`, `alt`, `width`, dan `height` ke dalam `<body>`. Isi
nilai atribut sesuai dengan gambar yang ingin Anda tampilkan.

16. <body>
 17. <img src="gambar.jpg" alt="Gambar" width="300" height="200">
18. </body>

4. Lanjutkan dengan atribut untuk tautan. Tambahkan elemen `<a>` dengan

atribut `href`, `target`, dan `title` ke dalam `<body>`. Isi nilai atribut dengan URL
yang ingin Anda tuju, target pembukaan tautan, dan judul tautan.

19. <body>
20. <a href="https://www.example.com" target="_blank"
title="Kunjungi Situs">Klik disini</a>
21. </body>

5. Dilanjutkan dengan atribut untuk formulir. Tambahkan elemen `<form>`

dengan atribut `action` dan `method` ke dalam `<body>`. Tambahkan juga
elemen-elemen input seperti `<input>` dan `<textarea>` dengan atribut-
atribut yang sesuai. Berikan nilai atribut yang diperlukan.
Isi daftar dengan item-item yang Anda inginkan dan tambahkan beberapa
paragraf.

22. <body>
23. <form action="proses.php" method="POST">
24. <label for="nama">Nama:</label>
25. <input type="text" id="nama" name="nama" required
placeholder="Masukkan nama Anda">
26.
27. <label for="email">Email:</label>
28. <input type="email" id="email" name="email" required
placeholder="Masukkan email Anda">
29.
30. <label for="pesan">Pesan:</label>
31. <textarea id="pesan" name="pesan" required
placeholder="Tulis pesan Anda"></textarea>
32.
33. <input type="submit" value="Kirim">
34. </form>
35. </body>
36.

6. Selanjutnya, eksplorasi atribut untuk audio dan video. Tambahkan elemen

<audio> dan <video> dengan atribut src dan controls ke dalam <body>. Isi
nilai atribut dengan sumber audio dan video yang ingin Anda tampilkan.

37. <body>
38. <audio src="audio.mp3" controls></audio>
39. <video src="video.mp4" controls width="400"
height="300"></video>
40. </body>
41.
 7. Dilanjutkan dengan atribut untuk tabel. Tambahkan elemen <table>,
<thead>, <tbody>, <th>, dan <td> dengan atribut-atribut yang sesuai
ke dalam <body>. Isi tabel dengan data yang Anda inginkan.

42. <body>
43. <table>
44. <thead>
45. <tr>
46. <th>Nama</th>
47. <th>Usia</th>
48. </tr>
49. </thead>
50. <tbody>
51. <tr>
52. <td>John Doe</td>
53. <td>25</td>
54. </tr>
55. <tr>
56. <td>Jane Smith</td>
57. <td>30</td>
58. </tr>
59. </tbody>
60. </table>
61. </body>
62.

8. Terakhir, eksplorasi atribut untuk daftar dan paragraf. Tambahkan elemen

<ol> dan <p> dengan atribut-atribut yang sesuai ke dalam <body>. Isi daftar
dengan item-item yang Anda inginkan dan tambahkan beberapa
paragraf.

63. <body>
64. <ol>
65. <li>Item 1</li>
66. <li>Item 2</li>
67. <li>Item 3</li>
68. </ol>
69.
70. <p>Ini adalah paragraf dengan beberapa atribut.</p>
71. </body>

8. Simpan file HTML tersebut dan buka dalam browser. Anda akan
melihat contoh-contoh penggunaan atribut-atribut HTML yang telah
Anda implementasikan.

Hasil Implementasi
Pembahasan

- **Atribut Global**: Pada contoh ini, kita menggunakan `<div>` dengan

atribut global `id` dan `class`. Atribut `id` digunakan untuk memberikan
identitas unik pada elemen, sedangkan atribut `class` digunakan untuk
memberikan kelas atau grup tertentu pada elemen.

- **Atribut untuk Gambar**: Kita menggunakan elemen `<img>` dengan

atribut `src` untuk menentukan lokasi gambar yang akan ditampilkan.
Atribut `alt` digunakan untuk memberikan teks alternatif yang akan muncul
jika gambar tidak dapat ditampilkan. Atribut `width` dan `height` digunakan
untuk mengatur lebar dan tinggi gambar.

- **Atribut untuk Tautan**: Kita menggunakan elemen `<a>` dengan atribut

`href` untuk menentukan URL yang akan dituju ketika tautan diklik. Atribut
`target="_blank"` digunakan untuk membuka tautan dalam tab atau
jendela baru. Atribut `title` digunakan untuk memberikan judul saat kursor
mouse mengarah ke tautan.
- **Atribut untuk Formulir**: Kita menggunakan elemen `<form>` dengan
atribut `action` untuk menentukan file pemrosesan data. Atribut `method`
digunakan untuk menentukan metode pengiriman data, dalam contoh ini
adalah `POST`. Elemen-elemen input seperti `<input>` dan `<textarea>`
memiliki atribut `name` untuk mengidentifikasi data yang dikirimkan, dan
atribut `placeholder` untuk memberikan petunjuk teks pada input. Atribut
`required` digunakan untuk menandai bahwa input tersebut harus diisi
sebelum formulir dikirim.

- **Atribut untuk Audio dan Video**: Kita menggunakan elemen `<audio>`

dan `<video>` dengan atribut `src` untuk menentukan lokasi file audio dan
video yang akan ditampilkan. Atribut `controls` digunakan untuk
menampilkan kontrol pemutaran seperti tombol play, pause, dan volume.
Atribut `width` dan `height` digunakan untuk mengatur lebar dan tinggi
media.

- **Atribut untuk Tabel**: Kita menggunakan elemen `<table>`, `<th>`, dan

`<td>` untuk membuat tabel. Atribut `border-collapse` pada elemen `<table>`
digunakan untuk menggabungkan batas sel dalam tabel menjadi satu.

- **Atribut untuk Daftar**: Kita menggunakan elemen `<ol>` untuk membuat

daftar terurut. Setiap elemen daftar ditandai dengan elemen `<li>`.

- **Atribut untuk Paragraf**: Pada contoh ini, kita hanya menampilkan

sebuah paragraf biasa menggunakan elemen `<p>`.

- **Atribut untuk Checkbox dan Radio**: Kita menggunakan elemen

`<checkbox>` dan `<radio>` dengan atribut `name` untuk mengelompokkan
pilihan-pilihan yang terkait. Atribut `

value` digunakan untuk memberikan nilai yang akan dikirimkan saat pilihan
dipilih. Pada elemen radio, atribut `checked` digunakan untuk menandai
pilihan awal yang terpilih.

Setiap contoh atribut di atas dapat disesuaikan dengan kebutuhan Anda.

Anda telah berhasil melakukan praktikum dengan berbagai jenis atribut

dalam HTML. Praktikum ini membantu Anda memperkuat pemahaman
dan penggunaan atribut-atribut dalam pengembangan web. Anda dapat
melanjutkan eksplorasi lebih lanjut dan menggabungkan atribut-atribut ini
dengan elemen-elemen HTML lainnya sesuai kebutuhan proyek Anda.