Scribd
Unggah
34 tayangan

HTML

HTML digunakan untuk membuat struktur halaman web. HTML terdiri dari tag-tag yang menentukan penampilan konten. Browser membaca dokumen HTML dan menampilkan konten berdasarkan tag-tagnya. HTML memiliki tag utama seperti <html>, <head>, dan <body>.

Diunggah oleh

alfihri221
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
34 tayangan

HTML

HTML digunakan untuk membuat struktur halaman web. HTML terdiri dari tag-tag yang menentukan penampilan konten. Browser membaca dokumen HTML dan menampilkan konten berdasarkan tag-tagnya. HTML memiliki tag utama seperti <html>, <head>, dan <body>.

Diunggah oleh

alfihri221
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 37

Perkenalan

HTML adalah bahasa komputer yang digunakan untuk membuat kerangka atau
struktur untuk Web pages (halaman website) di internet.

HTML adalah singkatan dari Hyper Text Markup Language.

Fungsi HTML adalah sebagai 'kerangka' dari sebuah website.

Bagaimana HTML Bekerja di Web Browser?


Web browser seperti Chrome, Firefox, Edge, Safari, atau Opera akan membaca dokumen
HTML. Dokumen HTML yang berisi tag-tag HTML akan memberitahu browser
bagaimana cara menampilkan sebuah konten.

Selain HTML, ada juga bahasa CSS (Cascading Style Sheet) dan JavaScript yang akan kita
pelajari untuk membuat sebuah tampilan website yang interaktif. Secara fungsi, ketiga
bahasa tersebut bisa dianalogikan seperti ini:
Fungsi HTML adalah sebagai 'kerangka', yang memberi struktur pada website.

Fungsi CSS sebagai 'baju' , yang memberi warna dan layout pada website.

Fungsi JavaScript, sebagai element yang membuat website menjadi interaktif.

HTML Tag
HTML terdiri dari komponen yang disebut HTML Tag.

Pada umumnya, ada 2 tipe HTML Tag:

 Opening Tag (tag pembuka) - contohnya adalah <p>.


 Closing Tag (tag penutup) - contohnya adalah </p>.

📝 Catatan:

Tag <p> digunakan untuk menampilkan paragraf. Topik ini akan kita pelajari di bagian
selanjutnya.
Berikut adalah format penulisan Opening Tag dan Closing Tag:

Struktur Dokumen HTML


Secara garis besar, struktur dokumen HTML dapat digambarkan sebagai berikut:
Dokumen HTML memiliki 3 tag utama, yaitu <html>,<head>, dan <body>. Ketiga tag tersebut
harus diketik persis seperti contoh di bawah ini:

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Penjelasan dari contoh di atas:

 <!DOCTYPE> syntax mendefinisikan versi dari HTML yang digunakan dan harus
dideklarasi sebelum tag <html>. <!DOCTYPE html>mendefinisikan bahwa dokumen ini
adalah HTML5.
 <html></html> adalah root element dari halaman HTML. Semua HTML tag lainnya
harus dibungkus dengan tag ini.
 <head> pada umumnya berisi <meta>, <title> , konten css/js internal maupun link ke file
css/js eksternal.
 <body> berisi konten website yang ingin ditampilkan pada browser.

📝 Catatan:
Tag <meta> digunakan untuk menulis info tentang suatu dokumen HTML seperti
deskripsi, nama pengarang, keywords, dan tanggal terakhir dokumen diperbaharui.
Tag <meta> tidak akan tampil di halaman HTML.
Nah, di bawah ini adalah contoh sederhana file HTML yang sudah memiliki title dan
konten:

<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

💡 Cobalah kode di atas di Code Editor.

Klik tombol Mulai Latihan di halaman paling bawah untuk menggunakan Code Editor.
Contoh di atas apabila dibuka pada browser akan terlihat seperti ini:

Perhatikan gambar di atas:

 Element <title>Website Pertamaku</title> akan menghasilkan tulisan "Website


Pertamaku" pada judul tab halaman browser
 Element <h1>Hello World!</h1> menghasilkan tulisan "Hello
World!" sebagai konten pada file HTML kita.

📝 Catatan:
Tag <h1> adalah salah satu tag dari tag HTML heading yang berfungsi untuk
menampilkan teks. Topik ini akan kita pelajari di bagian selanjutnya.
Selamat, kamu sudah berhasil membuat halaman website yang sederhana. Mudah
bukan?

HTML Element
HTML Element merupakan sebuah komponen dalam halaman web, bisa berupa
paragraf, judul, atau gambar.

Struktur dari sebuah HTML element dapat digambarkan seperti ini:

Pada umumnya, HTML Element terdiri dari:

 Opening Tag (tag pembuka) - contohnya adalah <p>.


 Closing Tag (tag penutup) - contohnya adalah </p>.
 Attribute - contohnya adalah style yang memiliki Value "color=red". HTML Attribute
akan kita pelajari di topik selanjutnya.
 Content (konten) yang ingin ditampilkan di browser - contohnya adalah My first
paragraph .

Ada dua jenis HTML Element, yaitu:

1. HTML Element yang memiliki Opening Tag (tag pembuka) dan Closing Tag (tag
penutup) - contohnya adalah <p> dan </p>.
2. Empty HTML Element: memiliki Self-closing Tag, yang hanya memiliki Opening
Tag (tag pembuka) dengan garis miring sebelum kurung tutup - contohnya
adalah <br /> atau <img />.
📝 Catatan:

Tag <br /> digunakan untuk berganti baris (spasi).


Tag <img /> digunakan untuk menampilkan element gambar.
Topik ini akan kita pelajari di bagian selanjutnya.
Agar lebih jelas, berikut adalah contoh penggunaan HTML dan Empty HTML Element:

<!-- HTML Element yang memiliki tag pembuka dan tag penutup -->
<p style="color:red">This is a paragraph.</p>

<!-- Empty HTML Element yang memiliki self-closing tag -->


<img src="https://bit.ly/3laVBck" alt="kucing" />

💡 Cobalah kode di atas di Code Editor.

Klik tombol Mulai Latihan di halaman paling bawah untuk menggunakan Code Editor.
Kalau kalian perhatikan, tag <img> tidak memiliki tag penutup </img> di belakangnya.
Bedanya, tag tersebut hanya memiliki / (tanda garis miring) di bagian belakang tag
pembukanya.

HTML Attribute
Masih ingat dengan konsep HTML element dan HTML tag? Opening Tag (tag pembuka)
menandakan awal dari sebuah element. Di dalam Opening Tag dapat berisi attribute,
yang berfungsi untuk memberikan informasi tambahan kepada sebuah element.

Contoh penggunaan attribute:

<!-- <img> adalah tag untuk memasukkan element gambar -->


<img width="80%" src="https://bit.ly/3laVBck" />

💡 Cobalah kode di atas di Code Editor.

Klik tombol Mulai Latihan di halaman paling bawah untuk menggunakan Code Editor.
Pada kode di atas, tag <img> memiliki dua attribute:

 width yang berfungsi untuk menentukan lebar dari element gambar, dan
diberikan value (nilai) lebar sebesar 80%
 src yang berfungsi untuk menentukan sumber gambar, dan diberikan value (nilai)
untuk diarahkan ke tautan https://bit.ly/3laVBck

Contoh lainnya:

<!-- Pada contoh di bawah, href adalah attribute dari tag <a> -->

<a href="https://www.google.com/">Klik di sini untuk ke halaman Google</a>

💡 Cobalah kode di atas di Code Editor.

Klik tombol Mulai Latihan di halaman paling bawah untuk menggunakan Code Editor.

 Tag <a> menandakan sebuah element tautan (hyperlink).


 Tautan tersebut bisa diarahkan ke halaman web lain atau bahkan ke suatu bagian
pada halaman web yang sama.
 Attribute href kita gunakan untuk memberi tahu tujuan dari tautan ini.
 Dalam kode di atas, attribute href kita isi dengan alamat web milik
Google https://www.google.com sehingga ketika kita klik element tautan tersebut, kita
akan diarahkan ke halaman web Google.

 HTML Comment
 Comment Dalam Pemrograman
 Tidak hanya dalam HTML, dalam dunia pemrograman, comment adalah catatan
kecil yang bisa kita tambahkan ke dalam kode sumber (source code) tanpa
mengubah fungsi dari program yang kita buat.

 Maksudnya, keberadaan comment dalam source code akan diabaikan dan tidak
dibaca oleh komputer saat programnya dijalankan. Dalam kasus HTML, browser
akan mengabaikan semua comment yang kita tulis.

 "Lalu, apa gunanya comment kalau begitu?"

 Bayangkan kalian diberi tugas untuk memperbaiki sebuah kode HTML. Namun,
kode tersebut rumit dan sulit bagi kalian untuk tahu fungsi dari masing-masing
bagian dalam kode.
 Pasti kalian akan berpikir:
"Aduh, andaikan programmer yang bikin kodenya bisa kasih penjelasan kodenya
sedikit aja"

 Nah itulah gunanya comment. Kita bisa menambahkan comment pada source
code kita untuk memberi catatan kecil yang menjelaskan kode yang kita tulis.

 Comment tidak hanya berguna bagi programmer lain, tetapi juga akan berguna
bagi kita sebagai pembuatnya. Misalnya, bisa saja kalian lupa tentang fungsi kode
yang kalian tulis di 3 bulan yang lalu.

 HTML comment diawali dengan <!-- dan diakhiri dengan -->.

 Contohnya seperti ini:

 <html>
 <head>
 <title>Website Pribadiku</title>
 </head>
 <body>
 <header>
 ....
 </header>
 <!-- Paragraf di bawah ini dalam bahasa Latin -->
 <main>
 <p>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro
deserunt voluptatum, itaque dolore alias, optio harum pariatur eveniet, quibusdam
nostrum reprehenderit odio eius autem aperiam nobis quod maxime. Ipsam.
 </p>
 </main>
 </body>
 </html>
 Maka, pada browser akan terlihat seperti ini:

 Kalau kalian perhatikan, comment kita Paragraf di bawah ini dalam bahasa Latin tidak
ditampilkan dalam halaman web. Namun orang lain yang membaca source
code kita akan tetap dapat membaca comment kita.

 Dengan cara yang sama, kita juga bisa membuat beberapa kode yang kita
ketik tidak dijalankan oleh browser. Misalnya ketika ada situasi di mana kalian
ingin menghilangkan sebuah element dalam halaman web untuk sementara.
Daripada kalian hapus kodenya, kalian bisa membungkus potongan kode yang
ingin kalian hilangkan sementara dalam tanda <!-- dan -->.

 <!DOCTYPE html>
 <html>
 <head>
 <title>Website Pribadiku</title>
 </head>
 <body>
 <!-- <h1>Hello World!<h1> -->
 <p> Halo semua! Namaku Sarah!</p>
 </body>
 </html>
 Pada browser, kode di atas akan menampilkan hasil seperti ini:

 Untuk menampilkan lagi element <h1>Hello World!</h1>, cukup hilangkan


tanda <!-- dan --> yang membungkus potongan kodenya.

Heading
Coba perhatikan buku pelajaran di sekolah kita, terdapat daftar isi bukan? Daftar isi
tersebut berisi daftar beberapa bab dan sub-bab yang terdapat pada buku tersebut.
Secara langsung, daftar isi akan memperlihatkan ke kita bagaimana struktur isi buku
tersebut.

Begitupun heading, tag ini akan menampilkan struktur website kita. Bisa diumpamakan
seperti tag <h1> sebagai judul bab pada sebuah buku, kemudian <h2> sebagai judul
sub-bab.

Tag heading hanya memiliki 6 tingkatan. Penulisannya seperti di bawah ini:

<h1>Heading Satu</h1>
<h2>Heading Dua</h2>
<h3>Heading Tiga</h3>
<h4>Heading Empat</h4>
<h5>Heading Lima</h5>
<h6>Heading Enam</h6>
Hasilnya di browser akan seperti ini:

Penggunaan tag heading sebaiknya berurutan. Hindari penggunaan seperti contoh di


bawah ini:

<h1>Heading Satu</h1>
<h5>Heading Dua</h5>
<h3>Heading Tiga</h3>

Paragraf
Untuk membuat paragraf pada halaman website, maka dibutuhkan tag <p>.

Penulisannya seperti ini:

<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate tempora
provident quaerat officia maxime totam, repudiandae libero ducimus hic esse
ipsam quam cum voluptates enim laudantium fugit quis eum suscipit.
</p>
Di browser, kode di atas akan terlihat seperti ini:

Link/Anchor
Terkadang, kita membutuhkan halaman web yang kita buat bisa mengakses halaman
web lain. Maka dari itu, kita butuh membuat link.

Untuk membuat link pada halaman web, maka diperlukan tag <a>. Tag <a> memiliki
attribute href yang berguna untuk menyimpan link website yang dituju.

Penggunannya seperti ini:

<a href="https://google.com">Google</a>

Span
Tag <span> digunakan untuk mengelompokkan tulisan dalam satu baris. Pada umumnya
sering digunakan untuk menambahkan CSS pada suatu tulisan pada satu baris, tapi
tidak menutup kemungkinan digunakan untuk hal lainnya.

Contoh penggunaan:

<p>Kucingku bermata <span style="color:blue"> biru</span></p>


Contoh di atas akan muncul di browser seperti ini:

Huruf Tebal
Tag <b> atau <strong> digunakan untuk membuat tulisan menjadi tebal.

Contoh penggunaan:

<p>
Nama saya <b>Sarah</b>. Saya berumur <strong>22 tahun.</strong>
</p>
Contoh di atas akan terlihat di browser seperti ini:
Huruf Miring
Untuk membuat huruf bercetak miring, maka dibutuhkan tag <i> atau <em>.

Contoh penggunaan:

<p>
Nama latin dari tanaman padi adalah <i>Oryza</i> <em>sativa L.</em>
</p>
Contoh di atas akan terlihat di browser seperti ini:
List
Ada dua tipe list di HTML, yaitu:

 Unordered list dengan menggunakan tag <ul>


 Ordered list dengan menggunakan tag <ol>

Masing-masing list baik <ul> atau <ol> memiliki element <li> untuk mendefinisikan nilai-
nilai dari list tersebut.

Contoh:

<!-- Unordered List -->


<ul>
<li>Kopi</li>
<li>Teh/li>
<li>Susu</li>
</ul>

<!-- Ordered List -->


<ol>
<li>Kucing</li>
<li>Anjing</li>
<li>Ikan</li>
</ol>
Contoh di atas akan terlihat di browser seperti ini:

Gambar
Untuk menampilkan gambar pada halaman sebuah website, maka kita membutuhkan
tag <img>.

Contoh penggunaannya:

<img src="https://bit.ly/3j6eb3B" alt="Cat" />


Hasil dari kode di atas pada browser akan terlihat seperti ini:
Attribute alt memberikan informasi alternatif atas gambar jika pengguna tidak bisa
melihat gambar di website kita. Gambar yang tidak muncul di browser bisa disebabkan
karena koneksi internet yang buruk atau terdapat error pada attribute src.
Attribute alt juga berguna bagi pengguna screen reader untuk mengetahui informasi
tentang gambar tersebut.

Attribute alt harus mendeskripsikan tentang gambar yang bersangkutan jika gambar
tersebut berisi informasi. Kemudian, alt juga sebaiknya menjelaskan alamat link jika
gambar berada di dalam element <a>. Terakhir, gunakan alt dengan string kosong
(contohnya <img alt="" />) apabila gambar hanya berfungsi sebagai dekorasi pada website.

Video
Video Element
Sejak HTML5, sudah ada cara langsung untuk bisa menambahkan video pada halaman
web kita; yaitu dengan menggunakan tag <video>. Format video yang didukung antara
lain: mp4, ogg, dan webM.

Syntaxnya cukup simpel, seperti di bawah ini:

<video width="320" height="240" src="link-ke-videonya"></video>


atau dengan mengapit element <source> di antara element <video> seperti ini
<video width="320" height="240">
<source src="link-ke-video-nya" type="video/tipe-videonya"/>
</video>
Contoh penggunaannya:

<video width="320" height="240">


<source src="https://bit.ly/3j6rPni" />
</video>
Kita akan melihat hasilnya seperti ini

Lho tapi kok videonya tidak jalan? Dan tidak ada tombol play pula.

Autoplay
Untuk memulai videonya secara otomatis. Kita bisa tambahkan attribute autoplay di dalam
element <video>-nya seperti ini

<video width="320" height="240" autoplay>


Dengan begitu videonya akan langsung dimulai sesaat setelah halaman web kita
ditampilkan di browser.

Controls
Bagaimana dengan tombol play atau pause-nya?

Nah kalau kita ingin menambahkan tombol-tombol media tersebut, kita bisa
tambahkan atribut controls seperti ini
<video width="320" height="240" controls>
Sekarang ada tombol play, pause, dan fullscreen kan?

Poster
Sebenarnya ada satu lagi attribute yang sering dipakai, yaitu poster.

Misalkan ukuran file video yang kita taruh itu besar dan membutuhkan waktu lama
untuk di-load. Daripada hanya menampilkan layar hitam, kita bisa menyuruh
element <video> untuk menampilkan sebuah gambar.

Misalnya kita ingin menampilkan gambar seekor kucing selagi video kita di-load, kita
bisa melakukannya seperti di bawah ini

<video width="320" height="240" poster="https://static-assets.skilvul.com/lesson/intro-to-


html/cat.jpeg" controls>
<source src="https://bit.ly/2FKluzq" />
</video>
Sekarang dari ketika videonya di-load sampai kita memulai, akan ditampilkan gambar
seekor kucing. Seperti thumbnail video.
Fallback Video Format
Oh iya, seperti yang kita bahas di awal, kan ada beberapa format video yang didukung
oleh HTML5. Masalahnya tidak semua browser mendukung format video yang sama:

 ada yang hanya mendukung mp4 seperti Internet Explorer dan Safari,
 ada juga yang mendukung semua format seperti Chrome dan Mozilla.

Bagaimana mengatasi masalah ini?

Kita bisa tambahkan beberapa element <source> di dalam <video> seperti ini

<video width="800" height="600">


<source src="link-ke-videonya" type="video/mp4" />
<source src="link-ke-videonya" type="video/ogg" />
<source src="link-ke-videonya" type="video/webm" />
</video>
Dengan begitu, andaikata browsernya tidak mendukung format mp4, dia akan beralih
mencoba yang ada di bawahnya: yaitu ogg dan webm.
Suara
Mirip dengan video, HTML5 juga mendukung adanya element yang berisi suara/audio.
Untuk menampilkan suara pada halaman sebuah website bisa menggunakan tag <audio>.
Format yang didukung pun meliputi mp3, wav, dan ogg.

Syntax penulisannya juga ada dua seperti dengan tag <video>:

<audio controls src="link-ke-file-audio"></audio>


Atau menggunakan tag <source> yang diapit tag <audio>

<audio controls>
<source src="link-ke-file-audio" type="audio/tipe-audionya" />
</audio>

Fallback Audio Format


Contoh penggunaannya bisa seperti ini:

<audio controls>
<source src="cat_meow.ogg" type="audio/ogg" />
<source src="cat_meow.mp3" type="audio/mp3" />
<source src="cat_meow.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
Lho itu kenapa ada banyak element <source> -nya?

Dengan adanya beberapa <source> dengan type yang berbeda-beda, apabila sebuah
browser tidak mendukung file audio yang kita berikan, dia akan secara otomatis
membaca file yang berikutnya. Jadi jika kita ingin semua fitur website kita bisa diakses
semua orang, sebaiknya kita memberi beberapa jenis file audio; jaga-jaga apabila file
audionya tidak didukung.

Controls
Kalau kalian coba kode yang tadi, kalian bisa lihat ada tombol medianya seperti play,
pause, dan timeline audionya. Itu karena kita memberikan attribute controls ke dalam
element <audio>-nya.

Loop
Jika kita memberikan attribute loop di dalam element <audio> kita, suara yang dimainkan
akan terus mengulang tiap kali selesai. Mungkin ini cocok untuk background music
yang memang terus dimainkan tanpa henti selama pengguna terus berada di halaman
web tersebut.
Autoplay
Dengan attribute autoplay, suara akan langsung dimainkan sesaat setelah halaman web
selesai di-load. Seperti yang barusan kita bahas, mungkin attribute ini cocok untuk
background music pada sebuah website yang tidak perlu dimainkan secara manual oleh
pengguna.

Halaman Website Lainnya


Kita juga bisa menampilkan halaman website lainnya di halaman website yang kita buat
dengan menggunakan tag <iframe>.

Contoh penggunaannya adalah seperti ini:

<iframe></iframe>

Width dan Height


Jadi halaman html yang lain itu akan diperlakukan sebagai sebuah element dalam
struktur file HTML kita: bisa diatur tinggi-lebarnya juga dengan menambahkan
attribute width dan height seperti ini:

<iframe width="lebar iframe" height="tinggi iframe" ></iframe>

Sumber Konten HTML


itu kan isinya konten HTML, kita bisa menambahkan attribute
<iframe> src untuk
memberitahu konten apa yang harus ditampilkan.

Cara menambahkan attribute src ke dalam <iframe> adalah seperti berikut:

<iframe src="link-ke-konten-html"></iframe>
Sekarang halaman web kita akan menampilkan halaman web lain di dalamnya.
Scrolling
Andaikata konten HTML yang kita masukkan ke dalam <iframe> kita itu lebih besar dari
ukuran <iframe>-nya sendiri, secara default akan ada scrollbar untuk scroll halamannya.

Nah kita memiliki opsi untuk menghilangkan scrollbar tersebut dengan menambahkan
attribute scrolling="no" di dalam <iframe> seperti ini:

<iframe scrolling="no"></iframe>

Frameborder
Kalau kalian lihat, di bagian pinggir <iframe> akan ada pinggiran berwarna abu-abu
bukan? Kalau kalian merasa itu jelek atau tidak rapi, kalian bisa menambahkan
attribute frameborder="0" di dalam <iframe>-nya seperti ini

<iframe frameborder="0"></iframe>

Untuk merangkum cara penggunaan semua attribute di <iframe> , kita bisa melihat contoh
berikut:

<iframe src="https://bit.ly/32jR7ro" width="200" height="300" scrolling="no"


frameborder="0"></iframe>
Kode di atas akan menghasilkan <iframe> seperti berikut:
 sumber konten yang mengarah ke halaman https://bit.ly/32jR7ro
 lebar sebesar 200 dan tinggi sebesar 300
 tidak mempunyai scrollbar apabila konten HTML di dalamnya lebih besar dari
ukuran <iframe>
 tidak mempunyai border yang membungkus element <iframe>

Tabel
Sekarang, kita akan belajar cara menampilkan sebuah tabel pada halaman website.

Pada dasarnya, untuk membuat sebuah tabel di HTML cukup membutuhkan tiga tag,
yaitu:

1. sebagai element utama.


<table>
2. <tr> atau dikenal sebagai table row tag, digunakan untuk membuat baris baru di
dalam <table>.
3. <td> atau dikenal sebagai table data tag, digunakan sebagai container
(wadah) dari data yang kita mau isi di dalam <tr>.

📝 Catatan:

Tidak ada pengecualian untuk tipe data yang bisa diisi di dalam tag <td>. Bisa dari tipe
paling dasar yaitu sebuah teks, sampai dengan HTML element lainnya
seperti <img>, <div>, <p> atau bahkan <table>.
Kita juga bisa menggunakan tag <th> sebagai pengganti <td> untuk membuat header
cell (biasanya digunakan untuk menampilkan judul kolom).

Secara standar <th> membuat tulisan di dalamnya menjadi tebal.

Cara penggunaannya seperti ini:

<table>
<tr>
<th>Nama</th>
<th>Nomor Telpon</th>
<th>Negara</th>
</tr>
<tr>
<td>Sarah</td>
<td>0811111111</td>
<td>Indonesia</td>
</tr>
<tr>
<td>Sophia</td>
<td>0822222222</td>
<td>Indonesia</td>
</tr>
</table>
Pada browser, kode di atas akan terlihat seperti ini:

Kita juga bisa mengelompokkan <tr> di dalam suatu tabel dengan menggunakan tag
table head (<thead>), table body ( <tbody>) dan table foot ( <tfoot>). Kita bisa gunakan semua
atau salah satunya, sesuai kebutuhan.

Contoh penggunaan:

<table>
<thead>
<tr>
<th>Nama</th>
<th>Nomor Telpon</th>
<th>Negara</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sarah</td>
<td>0811111111</td>
<td>Indonesia</td>
</tr>
<tr>
<td>Sophia</td>
<td>0822222222</td>
<td>Indonesia</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Nama</th>
<th>Nomor Telpon</th>
<th>Negara</th>
</tr>
</tfoot>
</table>
Pada browser, kode di atas akan terlihat seperti ini:

Formulir
Pernah kah kalian membuka website Facebook?

Pertama kali saat kita ingin membuat akun Facebook, pasti kita akan mengisi data diri
kita pada halaman formulir, seperti di bawah ini:
Jika kita perhatikan baik-baik, bagian formulir terdiri dari beberapa kotak untuk
mengetik nama, nomor handphone, email, dan password. Kemudian juga ada tombol
yang berguna untuk mengirim data yang sudah kita ketik di kotak tersebut.

Nah, pada sesi kali ini, kita akan belajar membuat kotak-kotak tersebut beserta
tombolnya dan html tag/attribute apa saja yang dibutuhkan untuk membuatnya.

Formulir
Tag <form> digunakan untuk mengawali pembuatan form.

Contoh penggunaannya:

<form action="/path">
<!-- Elemen pada formulir -->
</form>

Input
Tag <input> digunakan untuk membuat kotak input dimana user akan mengisi data.
Tag input ada bermacam-macam bentuknya. Ada yang hanya bisa diisi dengan teks,
ada yang hanya bisa diisi dengan angka, ada yang berbentuk checkbox, dan lain
sebagainya. Untuk menentukan input seperti apa yang ingin kita dapatkan dari user,
maka tag <input> harus diberi attribute type.

Di bawah ini adalah contoh-contoh dari tag <input> beserta bermacam-macam


attribute type nya:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Select dan Option


Pernahkah kalian melihat pilihan dropdown pada halaman sebuah website? Nah, pilihan
tersebut menggunakan tag <select> dan <option> dalam membuatnya.

Contoh penggunaannya:

<select>
<option value="Jakarta">Jakarta</option>
<option value="Surabaya">Surabaya</option>
<option value="Bandung">Bandung</option>
</select>
Hasil kode di atas pada browser akan muncul seperti ini:
Fieldset
Tag <fieldset> akan memberikan garis tepi pada element-element HTML yang ingin kita
kelompokkan.

Contoh penggunaan:

<fieldset>
<label for="name">Nama: </label>
<input type="text" name="name" /><br>
<label for="address">Alamat: </label>
<input type="text" name="address" /><br>
<label for="phoneNumber">Nomor Telpon: </label>
<input type="text" name="phoneNumber" /><br>
</fieldset>
Hasil kode di atas pada browser akan terlihat seperti ini:
Legend
Tag <legend> digunakan untuk memberikan keterangan pada element <fieldset> .

Contoh penggunaan:

<fieldset>
<legend>Data Pegawai</legend>
<label for="name">Nama: </label>
<input type="text" name="name" /><br>
<label for="address">Alamat: </label>
<input type="text" name="address" /><br>
<label for="phoneNumber">Nomor Telpon: </label>
<input type="text" name="phoneNumber" /><br>
</fieldset>
Kode di atas pada browser akan terlihat seperti:
Text Area
Pernahkah kalian mencoba menulis komentar di facebook maupun youtube? Nah,
kalian pasti menulis di kolom komentar yang sudah disediakan. Kita juga bisa membuat
kolom komentar tersebut dengan menggunakan tag <textarea>.

Tag <textarea> digunakan untuk menampung input dari user berupa teks yang lebih dari
satu baris, dan mempunyai karakter yang sangat banyak (misalnya seperti input berupa
paragraf).

Contoh penggunaannya:

<textarea rows="4" cols="50" placeholder="Tulis komentar Anda di sini...."></textarea>


Di browser, kode di atas akan terlihat seperti ini:
Tombol
Untuk membuat sebuah tombol yang dapat diklik, maka kita memerlukan tag <button> ,
dan juga bisa menggunakan tag <input> dengan type button atau submit.

Contoh penggunaannya:

<button>Klik di sini</button>
Maka, kode di atas akan terlihat seperti ini:
Contoh Formulir Sederhana
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form pada HTML</title>
</head>

<body>
<form>
<fieldset>
<legend>Formulir Calon Pegawai</legend>

<p>Nama : <input type="text" name="nama"></p>


<p>Alamat : <input type="text" name="alamat"></p>
<p>Password : <input type="password" name="pass"></p>
<p>
Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="jk" value="perempuan" />
Perempuan
</p>
<p>
Bahasa pemograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> MOBILE
<input type="checkbox" name="desk"> DESKTOP
</p>
<p>
Kota asal :
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
</p>
<p>
Apa yang Membuat Kami harus memilih Anda?:<br>
<textarea rows='10' cols='60' placeholder="Tulis jawaban Anda di sini"
></textarea>
</p>
<p><input type="submit" value="proses"></p>
</fieldset>
</form>
</body>
</html>
Maka, kode di atas akan terlihat seperti ini:
Layout Website
Pada sesi kali ini, kita akan membahas layout dari suatu website.

Layout suatu website biasanya terdiri dari:

 Header
 Navigation bar
 Main Content
 Footer

Jika diilustrasikan, layout website kurang lebih akan terlihat seperti ini:

Sebelum adanya HTML5, penentuan layout pada halaman website hanya menggunakan
tag <div> dan <span> dan dibantu dengan attribute id atau class untuk memperjelas element
header, section, main, dan lain-lain. Namun di HTML5, layout pada website
lebih diperjelas dengan element tertentu, sehingga memudahkan programmer untuk
membaca kode. Penjelasan element ini dinamakan semantic element.

Semantic element menjelaskan tujuan dari element tersebut kepada browser dan
pemrogram lain yang membaca kodenya. Semantic element tidak mempengaruhi
tampilan dari halaman web, itu adalah fungsi dari CSS.

Supaya lebih jelas, berikut bandingkan non-semantic element (pada HTML4)


dengan semantic element (pada HTML5):
Berikut adalah beberapa contoh dari semantic element:

 <section> menandakan bagian dalam sebuah halaman web.


 <header> merupakan bagian tajuk dari sebuah halaman web.
 <footer> merupakan bagian halaman web yang terletak di bagian bawah konten
utama.
 <article> menandakan sebuah blok teks yang isinya independen terhadap element
lain dalam halaman web.
 <nav> adalah bagian yang berisi tautan navigasi utama. Kalian mungkin sering
melihat menu navigasi yang berisi tautan ke halaman "Beranda", "Kontak kami",
"Galeri", dan lain-lain.
 <aside> adalah bagian di samping konten utama. Kontennya sebaiknya
berhubungan dengan element di sebelahnya.

Contoh Penggunaan:

<html>
<head>
<title>Welcome to My Page</title>
</head>
<body>
<!-- nav digunakan untuk tautan navigasi utama -->
<nav>
<a href="./home">Home</a>
<a href="./signup">Sign Up</a>
<a href="./login">Log In</a>
</nav>

<!-- header adalah bagian tajuk dari sebuah halaman web -->
<header>
<h1>This is my website</h1>
<h3>Please login to continue</h3>
</header>

<!-- aside adalah bagian samping konten utama -->


<aside>
<div>
Hello, anonymous!
</div>
<a href="./terms">Terms & Policy</a>
</aside>

<!-- article menandakan sebuah blok teks yang isinya independen terhadap element
lain -->
<article>
<!-- section menandakan bagian dalam sebuah halaman web -->
<section>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</section>

<section>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.
</section>
</article>

<!-- footer merupakan bagian halaman web di bawah konten utama -->
<footer>2020 Copyright</footer>
</body>
<html>

Anda mungkin juga menyukai