HTML
HTML atau Hypertext Markup Language adalah bahasa markup yang mendefinisikan struktur dari halaman website. HTML terdiri dari beberapa elemen, yang dapat dibungkus menggunakan tag agar konten itu dapat ditampilkan dengan bentuk tertentu. Tag dapat membuat sebuah kata atau gambar mengarah ke halaman lain, membuat kata menjadi miring, memperbesar atau memperkecil tulisan, dsb. Sebagai contoh, perhatikan kalimat di bawah ini:
My cat is very grumpy
Jika kita ingin membuat kalimat ini dapat berdiri sendiri, kita dapat membungkus kalimat terrsebut dalam paragraph tags
<p>My cat is very grumpy</p>
Bagian utama dari elemen di atas adalah sebagai berikut:
- Opening tag: terdiri dari nama elemen (dalam hal ini, p), yang dibungkus dengan kurung siku.
- Closing tag: sama seperti opening tag dengan tambahan garis miring ke depan (forward slash) sebelum nama elemen.
- Content: konten dari elemen, dalam hal ini hanya berupa teks.
- Element: terdiri dari opening tag, closing tag, dan content.
Nama elemen sama dengan nama tag terluarnya. Pada kasus nested element <p>My cat is <strong>very</strong> grumpy.</p>, nama elemen dari potongan kode tersebut adalah <p>.
Elemen juga dapat memiliki attribut seperti berikut:
Atribut mengandung informasi ekstra mengenai elemen yang tidak akan ditampilkan pada halaman website. Dalam kasus ini, class adalah nama atribut dan editor-note adalah nilai dari atribut. Atribut class digunakan sebagai identifier untuk sekelompok elemen. Pengelompokan ini dapat digunakan sebagai target untuk memberikan style (CSS) ataupun memberikan behaviour (JS).
Selain class, atribut id juga dapat digunakan sebagai identifier. Namun, atribut ini hanya dapat digunakan untuk satu elemen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
</body>
</html>
Di potongan kode ini, terdapat:
-
<!DOCTYPE html>— tipe dokumen. -
<html></html>— Elemen ini membungkus semua konten dalam halaman website. Juga disebut sebagai root element. -
<head></head>— Elemen ini berisi informasi mengenai halaman website, dimana informasi ini bukan merupakan konten yang ingin ditampilkan. Contoh dari informasi ini adalah judul halaman website, kode CSS, kode JS, dsb. -
<meta charset="utf-8">— Elemen ini menetapkan character set (character encoding) pada dokumen HTML, dalam hal ini yaitu UTF-8. -
<title></title>— Elemen ini menetapkan judul pada halaman website. -
<body></body>- Elemen ini membungkus semua konten yang ingin ditampilkan pada halaman website. Konten ini dapat berupa teks, gambar, video, game, musik, dll.
Perhatikan elemen <img> berikut:
<img src="images/firefox-icon.png" alt="My test image">
Elemen ini akan menampilkan gambar dari nilai milik atribut src, yaitu images/firefox-icon.png, di halaman website. Atribut alt (alternative) berisi deskripsi gambar dalam bentuk teks yang akan tampil saat gambar tidak dapat ditampilkan karena alasan tertentu, seperti alamat gambar pada atribut src salah.
Elemen heading berguna untuk menuliskan judul pada konten halaman website. HTML memiliki 6 level heading, yaitu <h1> hingga <h6>. Semakin kecil angka pada tag <hX>, ukuran teks semakin besar.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Tampilan
Seperti yang dijelaskan sebelumnya, tag <p> digunakan untuk membungkus paragraf/teks.
<p>This is a single paragraph</p>
Terdapat dua jenis list yang sering digunakan, yaitu unordered list dan ordered list.
-
Unordered list adalah list yang tidak memiliki urutan. List ini berada di dalam elemen
<ul>. -
Ordered list adalah list yang memiliki urutan. List ini berada di dalam elemen
<ol>. Setiap item di dalam list akan dibungkus dengan tag<li>(list item).
Contoh:
<p>Daftar Belanja</p>
<ul>
<li>Gula</li>
<li>Abon</li>
<li>Daging</li>
</ul>
<p>Daftar Nama</p>
<ol>
<li>Abel</li>
<li>Bima</li>
<li>Cindy</li>
</ol>
Tampilan
Daftar Belanja
- Gula
- Abon
- Daging
Daftar Nama
- Abel
- Bima
- Cindy
Untuk membuat link, kita dapat menggunakan element <a>, dimana "a" merupakan kependekan dari "anchor".
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
Atribut href (hypertext reference) berisi alamat web tujuan. Konten dari elemen <a>, dalam hal ini yaitu Mozilla Manifesto, merupakan konten yang ditampilkan kepada pengguna website. Jika konten tersebut diklik, web tujuan pada atribut href akan dibuka.
Tampilan
Span adalah elemen yang tidak harus dimulai dari baris baru dan hanya menggunakan lebar sesuai kebutuhan saja.
Div adalah elemen yang selalu dimulai dari baris baru dan menggunakan lebar secara penuh yang tersedia.
Dengan kata lain, span merupakan inline element sedangkan div merupakan block level element
<div id="Div1">
<p>Ini adalah <span style="color:red">divisi pertama</span></p>
</div>
Elemen ini digunakan untuk membuat tabel pada halaman website. Elemen ini terdiri dari beberapa elemen <tr> (table row) yang dibungkus dengan tag <table>. Elemen <tr> pertama biasanya terdiri dari dari beberapa elemen <th> (table header). Setelah elemen pertama, elemen <tr> akan berisi dengan beberapa elemen <td> (table data).
<table>
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Ani</td>
</tr>
<tr>
<td>2</td>
<td>Boge</td>
</tr>
</table>
Tampilan
| No | Nama |
|---|---|
| 1 | Ani |
| 2 | Boge |
Elemen <form> digunakan untuk mengambil satu atau lebih input dari pengguna website. Input ini umumnya akan dikirim ke server untuk pemrosesan lebih lanjut. Elemen ini mempunyai dua atribut, yaitu action dan method. Atribut action berisi alamat file pada server yang akan menerima data tersebut. Atribut method berisi metode pengiriman request HTTP, yang biasanya berupa POST. Metode ini tidak akan dibahas pada LBE karena sudah melampaui materi yang akan diajarkan.
Elemen <input> merupakan elemen dimana pengguna website bisa memasukkan input. Elemen <input> memiliki atribut type yang menentukan jenis elemen <input> yang akan ditampilkan.
<form action="./action.php" method="POST">
<input type="text">
<input type="password">
<input type="radio">mahasiswa
<input type="checkbox">
<input type="submit">
<input type="button">
</form>
Info lebih lanjut mengenai form dapat dilihat di web berikut: Link