Modul
Pembelajaran
HTML
∙ Pengenalan
HTML (Hypertext Markup Language) adalah
bahasa markup yang digunakan untuk membuat
dan memformat halaman web. Dalam modul ini,
Anda akan mempelajari dasar-dasar HTML dan
bagaimana membuat halaman web sederhana.
∙ Struktur Dasar Dokumen HTML
Setiap dokumen HTML terdiri dari dua bagian
utama: head dan body. Bagian head berisi
informasi tentang dokumen seperti judul dan
metadata, sedangkan bagian body berisi isi
halaman.
Penjelasan :
1. DOCTYPE = Deklarasi untuk mendefinisikan dokumen menjadi
HTML
2. <html> </html> = Tag untuk membuat sebuah dokumen HTML
3. <head> </head> = Informasi meta tentang dokumen
4. <title> = Membuat judul halaman yang nantinya akan
ditampilkan di browser
5. <body> </body> = Tempat dibuatnya semua konten Website
menggunakan HTML
∙ Tag HTML
Tag HTML adalah elemen dasar dari
dokumen HTML. Mereka digunakan
untuk memformat teks, gambar, audio,
dan video, serta untuk membuat hyperlink
dan formulir.
Tag HTML terdiri dari tanda kurung
sudut (< dan >) yang membungkus nama
tag dan beberapa atribut. Atribut
memberikan informasi tambahan tentang
tag, seperti id atau class.
Berikut adalah contoh tag HTML dasar :
Penjelasan :
1. <h1> </h1> = memberitahu Google tentang konten halaman tersebut, apa yang ada di dalamnya.
2. <p> </p> =elemen HTML yang digunakan untuk menandai sekumpulan teks sebagai suatu
paragraf.
3. <img src= “ “ alt=” “> = berisi alamat dari gambar yang akan ditampilkan.
4. <audio src=” “ alt=” “> </audio> =Tag untuk membuat isi suara
5. <video src=” “ alt=” “> </video> = Tag untuk membuat sebuah video atau film
6. <a href=” “> </a> = Tag untuk membuat Hyperlink
7. <form> </form> = Tag untuk membuat sebuah form HTML untuk input pengguna
8. <label for=” “> </label> = Tag untuk membuat sebuah label untuk sebuah elemen <input>
9. <br> = untuk membuat baris baru.
10. <input type=” “ value=” “> = element digunakan untuk menunjukkan sebuah inputan (masukkan)
dalam bentuk kotak dan sejenisnya yang dapat diedit/diketik untuk diisi data tertentu (seperti
memasukkan data diri nama, email, tanggal dan lain sebagainya).
∙ Atribut HTML
Atribut HTML memberikan informasi tambahan tentang tag. Beberapa atribut yang umum digunakan
adalah id, class, src, href, dan style.
Berikut adalah contoh penggunaan atribut HTML :
<ul>
adalah singkatan dari "unordered list" dalam HTML (Hypertext Markup
Language), yang merupakan salah satu elemen yang digunakan untuk
membuat daftar tak berurutan di dalam halaman web. Daftar tak berurutan
adalah daftar yang tidak memiliki urutan atau hierarki tertentu antara elemen-
elemennya. Berikut adalah contoh sintaks dasar penggunaan elemen <ul>
dalam HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Dalam contoh di atas, <ul> digunakan untuk memulai daftar tak berurutan, dan <li> (singkatan dari "list
item") digunakan untuk menandai setiap item dalam daftar. Setiap item dalam daftar ditempatkan di antara
tag <li></li>, dan akan ditampilkan sebagai item terpisah dalam daftar di dalam halaman web. Hasil dari
contoh di atas akan menjadi: Item 1 Item 2 Item 3 Elemen <ul> dapat digunakan bersama dengan elemen-
elemen HTML lainnya untuk memperluas fungsionalitas dan tampilan daftar, seperti menggabungkannya
dengan elemen <li> dan elemen-elemen lain seperti <a> untuk membuat daftar tautan atau menambahkan
gaya CSS untuk mengatur tampilan daftar.
Table tag pada HTML digunakan untuk membuat tabel atau grid
dengan baris dan kolom. Tabel ini terdiri dari beberapa elemen
HTML, diantaranya:
1. <table> : digunakan untuk memulai tabel.
2. <tr> : digunakan untuk membuat baris pada tabel.
3. <th> : digunakan untuk membuat header pada tabel.
4. <td> : digunakan untuk membuat sel atau kolom pada tabel.
<tr>
Contoh kode HTML di
samping untuk membuat <th>Kolom 1</th>
tabel sederhana dengan 3 <th>Kolom 2</th>
baris dan 3 kolom: <th>Kolom 3</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
Pada contoh kode HTML di samping, </tr>
terdapat satu elemen `<table>` yang berisi <tr>
tiga elemen `<tr>` sebagai baris, dan
<td>Baris 2 Kolom 1</td>
masing-masing elemen `<tr>` tersebut
berisi tiga elemen `<td>` sebagai kolom. <td>Baris 2 Kolom 2</td>
Elemen `<th>` digunakan pada baris <td>Baris 2 Kolom 3</td>
pertama sebagai header tabel. </tr>
</table>