Tutorial HTML

petanikode.
com
Belajar HTML dari Nol: Pengenalan Dasar

HTML untuk Pemula
Ahmad Muhardian
10-13 minutes
HTML memang bahasa yang wajib dipelajari, bagi yang mau menjadi web developer.
Karena…
HTML merupakan bahasa dasar untuk membuat web.
Saya yakin, kamu sudah pernah mendengar HTML sebelumnya. Tapi tidak ada salahnya
membaca kebali artikel ini.
Pada tutorial ini, kita akan benar-benar membahas dari nol hingga kamu bisa membuat halaman
HTML sendiri.
Baiklah…
Mari kita mulai!
Apa itu HTML?

Mari kita lihat pengertian HTML menurut wikipedia:
HTML atau HyperText Markup Language merupakan sebuah bahasa markah
untuk membuat halaman web. 1
Paham kan maksudnya?
Kalau belum paham, sini saya jelaskan…
Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk
membuat halaman web.
Penanda atau markup ini, nanti akan kita sebut dengan Tag.
HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web.
Kalau kita ibaratkan nih..
HTML itu seperti batu bata untuk membangun rumah. Batu bata ini dapat disusun, hingga
menjadi fondasi dasar.
Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi
pelengkapnya, yakni CSS dan Javascript.
CSS adalah bahasa khusus yang digunakan untuk memperindah tampilan web.
Lalu Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan Javascript,
kita dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di website.
Oh iya, pada tutorial ini.. Kita akan fokus dulu membahas HTML. Jika kamu ingin belajar CSS
dan Javascript, silahkan buka:
 Tutorial CSS untuk Pemula

 Tutorial Javascript untuk Pemula
Oke, saya anggap kamu sudah paham tentang apa itu HTML serta peranannya dalam pembuatan
web.
Berikutnya, biar lebih paham.. kita akan membahas sejarah dan asal-usul HTML.
Sejarah dan Asal-usul HTML

Cerita awal kemunculan HTML dimulai dari tahun 1980..
Saat itu seorang ilmuan bernama Tim Berners-Lee sedang bekerja di CERN.
Tim Berners-Lee (2009)
CERN sendiri bukanlah perusahaan yang berkaitan tentang teknologi maupun internet. CERN
adalah singkatan dari bahasa prancis: Conseil Européen pour la Recherche Nucléaire.
Yang artinya: Komisi Eropa untuk Penelitian Fisika Nuklir.

Website CERN (2020)
Para peneliti di CERN membutuhkan sebuah cara atau sistem agar bisa saling berbagi dokumen
hasil penelitian.
Tim kemudian mencoba membuat ENQUIRE. Ini adalah software hypertext yang akan
digunakan untuk berbagi dokumen.
Lalu di tahun 1989, Tim memperkenalkan ide tentang hypertext berbasis internet. Ini nantinya
akan menjadi cikal-bakal HTML.
Tim kemudian memulai proyek baru dengan rekannya Robert Cailliau yang merupakan system
engineer di CERN. Akan tetapi proyek ini tidak resmi diadopsi oleh CERN.
Ti
m Berners-Lee (kiri) dan Robert Cailliau (kanan)
Pada akhir tahun 1991, Tim Berners-Lee menerbitkan dokumen yang berjudul: “HTML Tags”
Dokumen ini berisi penjelasan tentang 18 tags awal yang menjadi konsep dasar HTML.
HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal dengan
SGML (Standard Generalized Markup Language).
SGML adalah sebauah standar internasional untuk membuat dokumen dengan tanda (markup)
seperti paragraf, list, heading, dan lain-lain.
Bisa dibilang..
HTML adalah implementasi dari SGML.
Kalau kita lihat, beberapa tag seperti <title>, <p>, <li>, dan <h1> sampai <h6> berasal dari
SGML. Namun, tidak semua yang ada di HTML berasal dari SGML.
Salah satunya adalah Hyperlink, yang murni hasil pemikiran Tim Berners-Lee.
Ide tentang HTML ini kemudian disebarkan ke dalam sebuah mailing list dan segera menjadi
perhatian berbagai ilmuwan komputer di seluruh dunia.
Perkembangan dan Versi HTML
HTML punya beberapa versi, dari versi yang paling tua hingga yang terbaru. Berikut ini
perkembangan versi HTML:
 [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis;
 HTML 2.0 (24 November 1995) adalah versi HTML kedua yang resmi pertamakali
beredar di pasaran dan dirilis oleh IETF;
 [Draft] HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak perubahan
yang memicu perdebatan;
 HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertamakali.
 HTML 4.0 (24 April 1998) versi pengembangan dari yang seblumnya;
 HTML 4.01 (24 Desember 1999) versi perbaikan dari HTML 4.0;
 XHTML 1.0 (26 Januari 2000) pengembangan dari HTML 4.01 dengan mengadopsi
XML;
 XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML;
 HTML 5 (28 Oktober 2014) versi html saat ini.
Versi [draft] adalah versi yang tidak resmi dirilis ke pasaran. Bentuknya cuma masih dalam
draft speksifikasi saja.
Artinya..
Tidak ada yang menggunakan versi [draft] untuk membuat web.
Lalu, versi mana yang akan kita pakai?
Tentunya versi terbaru, yakni HTML 5.
Peralatan untuk Belajar HTML

Nah, sekarang.. Tiba saatnya kita praktik!
Tapi sebelum itu, kamu harus siapkan beberapa alat yang akan digunakan untuk praktik.
Adapun peralatan yang harus kamu persiapkan adalah:
Teks editor akan kita gunakan untuk menulis kode-kode HTML. Kamu bebas menggunakan teks
editor apapun.
Notepad boleh, Notepad++ juga boleh..
Apapun teks editornya, yang penting bisa digunakan untuk membuat dan menulis dokumen
HTML.
Namun, pada tutorial ini.. kita akan menggunakan teks editor Visual Studio Code.
2. Web Browser untuk Membuka HTML
Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebeas menggunakan web
browser apapun.
Saran saya sih.. gunakan web browser yang terbaru, karena kita juga akan menggunakan HTML
versi yang terbaru.
Firefox atau Google Chrome, saya kira sudah cukup.
Membuat Dokumen HTML Pertamamu

Kini tiba saatnya, kamu harus mencoba sendiri membuat dokumen HTML. Caranya sangat
mudah.
Mari kita mulai dengan membuka teks editor, lalu tulislah kode berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Setelah itu, simpan dengan nama hello-world.html.

Tips: buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan
menggunakan tanda petik "hello-world.html" agar ekstensinya .html, bukan .txt.
Atau kamu bisa aktifkan fitur show extension pada Windows Explorer, agar bisa tahu ekstensi
filenya.
Caranya.. masuk ke menu View, lalu centang File name extensions.

Oke.. lanjut!
Sekarang cobalah buka file hello-world.html dengan web browser.. maka hasilnya:
Selamat! 🎉
Kita sudah berhasil membuat halaman web pertama dengan HTML.
Kini giliran saya menjelaskan maksud dari kode di atas, tapi sebelum itu.. saya akan jelaskan
dulu tentang nama file untuk HTML.
Nama File untuk HTML

Ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML:
1. Extensi file HTML
Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja. Jika tidak
menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web browser.
Contohnya seperti ini:
Nama filenya adalah hello-world.txt.
Sedah jelas, ini bukan file HTML, melainkan sebuah file teks biasa. Maka.. browser akan
menampilkan isi file tersebut apa adanya.
2. Nama Khusus untuk Homepage
Jika kamu ingin membuat halaman untuk homepage, maka sebaiknya gunakan nama
index.html. Karena ia akan otomatis dibuka saat website dikunjungi.
Contohnya, saat kamu membuka www.petanikode.com.. maka file HTML yang akan dibuka
adalah index.html yang berada di server petanikode.
3. Hindari Beberapa Hal ini..
Penggunaan Spasi
Nama file HTML biasanya akan tercantum pada URL, maka sebaiknya hindari menggunakan
spasi pada nama file HTML, agar URL yang dibentuk lebih bagus.
Spasi pada URL, biasanya akan otomatis diubah menjadi %20.
Sebagai ganti spasi, kamu bisa gunakan tanda min (-) atau undescore (_).
Jangan Alay!
Berikanlah nama file HTML dengan file yang biasa, hindari menggunakan huruf besar,
campuran dari huruf besar dan kecil, dan juga menggunakan simbol.
Contoh:
 HeLLoWORLD.html
 da*#$.html
Meskipun nama ini bisa valid, tapi kurang bagus untuk dibaca.. baik oleh manusia, maupun
mesin.
Baiklah, berikutnya kita akan pelajari tentang kode-kode HTML.
Struktur Dasar HTML

Berikut ini adalah kode HTML yang baru saja kita buat:
Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag <html>
dan di dalamnya terdapat tag <head> dan <body>.
Kalau kita perhatikan.. struktur dasar kode HTML terdiri dari tiga bagian penting:
1. Bagian Deklarasi
2. Bagian HEAD
3. Bagian BODY
Mari kita bahas satu-per-satu:
1. Bagian Deklarasi
Coba perhatikan kode pada baris pertama: <!DOCTYPE html>.
Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di atas, kita
menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5.
Nah, untuk HTML versi 4.. beda lagi cara deklarasinya.
Contoh untuk HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
Cukup panjang bukan..

Lalu apakah boleh kita tidak menulis kode <!DOCTYPE html> ini?
Boleh-boleh saja.. dokumen HTML-nya akan tetap bisa dibuka di web browser. Tapi, ini
tentunya akan melanggar aturan standar yang dibuat W3C.
O ya, kita bisa mengecek.. apakah HTML yang ditulis sudah benar atau tidak di
https://validator.w3.org/.
Lanjut…
Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka untuk HTML:
Tag <html> wajib ada di setiap dokumen HTML..
Pada tag ini, kita memberikan atribut lang="en" untuk menyatakan kalau konten dokumen
HTML ini akan menggunakan bahasa inggris.
Nah di dalam tag <html> ini, terdapat dua tag penting lagi.. yakni: tag <head> dan tag <body>.
Setelah itu barulah terakhir tag HTML ditutup dengan </html>.
2. Bagian HEAD
Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <head> dan ditutup dengan
</head>.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin.
Seperti:
 Tag meta untuk SEO;

 Tag <title> untuk judul;
 Tempat menulis kode CSS dan Javascript;
 dan lain-lain.
3. Bagian BODY
Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisannya di mulai
dari tag <body> dan ditutup dengan </body>.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Saat ini kita
baru mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf.
Apa Selanjutnya?
Nah, sampai di sini dulu tutorial pertama ini..
Jika ada yang belum jelas, bisa ditanyakan melalui komentar.
Berikutnya silahkan pelajari tentang definisi tag, elemen, dan atribut:
 Belajar HTML #02: Mengenal tag, elemen, dan atribut dalam HTML
Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML
1. https://id.wikipedia.org/wiki/HTML ↩︎
petanikode.com
Belajar HTML #02: Apa itu Tag, Elemen,

dan Atribut dalam HTML?
Ahmad Muhardian
10-13 minutes
Tag, elemen, dan atribut merupakan tiga bagian penting yang ada di dalam HTML. Bagi kamu
yang baru belajar HTML, wajib hukumnya untuk mengetahui ketiga Hal ini.
Apa itu Tag?
Apa itu Elemen?
Apa itu Atribut?
Serta apa perbedaan Tag, Elemen, dan Atribut?
Mari kita bahas…
Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat
dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan
dengan atribut.
Contoh: <p>, <a>, <body>, <head>, dan sebagainya.
Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga
beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan
garis miring (/) di depan nama tag.
Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul, membuat
link, membuat paragraf, heading, dan lain-lain.
Masih ingat sejarah HTML?
Dulu.. awalnya HTML cuma punya 18 tag. Sekarang HTML sudah punya sekitar 250 tag.
Wah! banyak ya.
Apa semua tag ini harus kita hafal?
Jawabannya:
Tidak harus, saja juga tidak bisa menghafal semanya. Cukup ketahui tag-tag dasar saja.
Berikut ini daftar tag-tag dasar, yang menurut saya harus kamu ingat.
Tag Fungsi
<html> untuk memulai dokumen HTML
<head> untuk membuat bagian head
<body> untuk membuat bagian body
<h1> sampai <h6> untuk membuat heading pada artikel

Tag Fungsi
<p> untuk membuat paragraf
 untuk membuat komentar
Beberapa tag ini sudah kita coba pada tutorial pertama dan juga ada yang belum.
Tenang saja.. Nanti juga saya akan perkenalkan tag-tag lain yang umum digunakan dalam
pembuatan web.
Untuk saat ini, cukup pahami: Apa itu tag dan cara menulisnya.
Beberapa orang kadang sering salah dalam menuliskan tag. Ada yang lupa menutup, ada yang
salah mengetik namanya, dan semacamnya.
Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan benar:
1. Tag-tag wajib
Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode
HTML-mu akan error menurut validator W3C.
Berikut ini daftar tag yang wajib ada di HTML:
 <!DOCTYPE html> — untuk deklarasi type dokumen;

 <html> — tag utama dalam HTML;
 <head> — untuk bagian kepala dari dokumen;
 <title> — untuk judul web;
 <body> — untuk bagian body dari dokumen.
2. Gunakan Huruf Kecil
Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf
kecil saja.
Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih bersih dan
rapi.
Contoh: (bagus)
<body>
<p>Belajar tentang tag di HTML</p>
</body>
Contoh: (buruk)
<BODY>
<P>Belajar tentang tag di HTML</P>
</BODY>
Tapi khusus untuk tag <!DOCTYPE html>.. ia ditulis dengan huruf besar. Sebenarnya bisa juga
dengan huruf kecil dan akan valid menurut validator W3C.
Tapi untuk dokumen XHTML, menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan
error.
Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang
kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak
valid.
Tapi tenang saja.. saya punya resep agar kamu mudah mengingatnya:
Jika kamu paham maksud dari jokes di atas, maka bagus.. saya tidak perlu jelaskan lagi.
Tapi kalau belum paham, berikut ini penjelasannya:
Tag yang pertama dibuat, harus ditutup terakhir. Bukan ditutup pertama.
Contoh:
<i><b><u>memasak</u></b></i>
Tag <i> ditutup terakhir, karena ia yang ditulis pertama. Lalu tag </u> ditutup pertama kali
karena ia berada di dalam tag <b> dan <i>.
Apa itu Elemen?

Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen
kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun
dokumen HTML dalam diagram HTML tree.
HTML Tree (sumber: w3schools.com)
Pada diagram tersebut, terdapat tiga macam node.. yakni: Node elemen, Node atribut, dan
Node teks.
Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan
beberapa atribut.
Contoh:
Pada contoh di atas, terdapat satu elemen <p> dengan atribut align="center" dan memiliki isi
berupa teks, yakni Hello World!.
Elemen tidak selalu berisi teks, kadan ia juga akan berisi elemen lain. Ini biasanya kita sebut
dengan nested element atau elemen di dalam elemen.
Bila digambarkan dalam bentuk kotak persegi, maka akan terlihat seperti ini:
Elemen HTML ada banyak jenisnya. Ada elemen khusus untuk teks, ada elemen untuk
multimedia, script, tabel, metadata, dll. Nanti kita akan pelajari ini secara bertahap. Semua jenis
elemen HTML bisa kamu baca di sini: HTML elements reference
Beberapa elemen HTML kadang ditambahkan atribut sebagai pelengkap.
Apa itu Atribut?

Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai
modifier yang akan menentukan perliaku dari elemen.
Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan
menggunakan atribut seperti elemen <a>, <img>, <video>, dll.
Contoh:
<a href="https://petanikode.com">Petanikode.com</a>
Tag <a> adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut href untuk
menyatakan halaman tujuan dari link.
Jumlah atribut pada elemen bisa lebih dari satu.
Contoh:
<img src="gambar.jpg" width="100" height="100" />
Atribut src adalah atribut khusus untuk tag <img> yang fungsinya untuk menentukan gambar
yang akan ditampilkan. Lalu atrubut width dan height adalah atribut yang mengatur ukurannya.
Jenis-jenis Atribut HTML
Tiap-tiap elemen kadang memiliki atribut khurus yang hanya bisa digunakan pada elemen
tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua elemen.
Berikut ini jenis-jenis atribut yang harus diketahui:
1. Atribut Global
Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen HTML.
Berikut ini daftar atribut global dan fungsinya:
Nama Atribut Deskripsi atau fungsi
accesskey Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen
class Menentukan class CSS yang akan digunakan
contenteditable Menentukan isi elemen bisa diedit atau tidak
data-* Digunakan untuk menyimpan data
dir Menentukan arah teks dari elemen (kiri ke kanan atau sebaliknya)
draggable Menentukan apakah elemen bisa di drag atau tidak
hidden untuk menyembunyikan elemen
id Menentukan id unik untuk elemen
lang Menentukan bahasa yang digunakan untuk isi elemen
spellcheck Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak
style Menentukan inline CSS untuk elemen
tabindex Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan)
title Menentukan informasi tambahan tentang elemen
translate Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak
2. Atribut Event
Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat
terjadi sesuatu pada elemen. Atribut ini nanti akan banyak digunakan pada pemrograman
Javascript.
Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela browser:
Nama atribut Nilai Fungsi: Menjalankan script
onafterprint kode javascript setelah dokumen dicetak
onbeforeprint kode javascript sebelum dokumen dicetak
onbeforeunload kode javascript sebelum saat dokumen tidak ter-load
onerror kode javascript saat terjadi error
onhashchange kode javascript saat terjadi perubahan pada bagian anchor di URL
onload kode javascript setelah loading selesai
onmessage kode javascript saat ada pesan
onoffline kode javascript saat tiba-tiba offline
ononline kode javascript saat tiba-tiba online
onpagehide kode javascript saat user tidak sedang membuka halaman web
onpageshow kode javascript saat user membuka kembali halaman web
onpopstate kode javascript saat history browser berubah
onresize kode javascript saat ukuran jendela browser berubah
onstorage kode javascript saat area penyimpanan (Web Storage) di-update
onunload kode javascript saat web browser ditutup
Selain atribut tersebut, masih banyak lagi atribut event yang lainnya. Semuanya bisa kamu lihat
di: HTML Event Attributes
.
3. Atribut Khusus
Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan kadang atribut
ini tidak bisa digunakan pada elemen yang lain.
Contoh:
Nama atribut Bisa dipakai di tag
src <audio>, <embed>, <iframe>, <img>, dll
href <a>, <link>
action <form>
autoplay <audio>, <video>
Penulisan atribut sebenarnya gampang.. kita hanya perlu menambahkannya pada tag pembuka
dengan format seperti ini:
Namun, ada beberapa hal yang perlu diperhatikan agar penilisannya benar dan valid:
1. Gunakan Huruf Kecil
Menulis atribut dengan huruf besar sah-sah saja, dan bahkan valid menurut validator W3C.
Tapi saya sarankan menggunakan huruf kecil saja. Karena lebih umum digunakan dan juga
mudah terbaca.
Contoh: (bagus)
<p align="center">Belajar HTML di Petani Kode</p>
Contoh: (kurang bagus)
<p ALIGN="CENTER">Belajar HTML di Petani Kode</p>
2. Guanakan Tanda Petik
Gunkan tanda petik untuk mengisi nilai atribut yang mengandung teks.
Mengapa?
Karena jika terdapat lebih dari satu kata, ia akan menciptakan spasi dan akan dianggap sebagai
atribut baru.
Contoh: (bagus)
<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>
Contoh: (buruk)
<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>
Tanda petik yang digunakan, boleh petik ganda (") dan juga petik tunggal (').
Nah untuk nilai angka, boleh pakai tanda petik dan juga boleh tidak.
Contoh:
<img src="gambar.jpg" width=120 height=120 />
Lalu, untuk atribut yang bernilai boolean (true dan false).. nilainya boleh ditulis dan boleh
tidak.
Contoh:
<input type="text" required="true" />

<input type="text" required />
3. Penggunaan Spasi
Jika ada atribut yang memiliki lebih dari satu nama, maka ia ditulis dengan tanda min (-), bukan
spasi.
Contoh:
<img data-src="gambar.jpg" />
Lalu, spasis juga digunakan untuk memisahkan dua atau lebih atribut.
Contoh:
<img class="lazyload" data-src="gambar.jpg" src="placeholder.jpg" />
Bisa juga ditulis seperti ini:
<img class="lazyload"
data-src="gambar.jpg"
src="placeholder.jpg" />
Apa Selanjutnya?
Kita baru saja belajar tentang Tag, Atribut, dan Elemen dalam HTML. Saya kira kamu sudah
dapat membedakan ketiga hal ini.
Elemen adalah komponen yang menyusun dokuemn HTML. Sedangkan Tag adalah penanda
untuk memulai dan mengakhiri elemen. Lalu atribut adalah modifier untuk menentukan perilaku
elemen.
Nah, selanjutnya kita akan berkenalan dengan elemen-elemen dasar di HTML seperti paragraf,
heading, list, tabel, link, form, dan lain-lain.
Karena itu, silahkan lanjutkan pelajari tentang:
 Belajar HTML #03: Membuat Paragraf pada HTML

 Belajar HTML #04: Membuat Heading pada HTML
 Belajar HTML #05: Membuat Komentar pada HTML
 Belajar HTML #06: Text Formatting pada HTML
 Belajar HTML #07: Membuat link di HTML
petanikode.com
Belajar HTML #03: Membuat Paragraf pada

HTML
Ahmad Muhardian
10-13 minutes
Setelah belajar tentang apa itu HTML, Tag, Elemen, dan Atribut. Berikutnya, kita akan belajar
tentang elemen-elemen dasar pada HTML yang sering digunakan dalam membuat web.
Mari kita mulai dengan mengenal elemen paragraf.
Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk
menampilkan teks atau artikel.
Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti
<div>, <hr>, <br>, dan <pre>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
Belajar tentang paragraf.</p>
<p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
mendukung. Punya ide pokok sebagai dasar dari paragraf itu
sendiri.</p>
</body>
</html>
Hasilnya:
Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML #2</title>
</head>
<body>
<p align="center">Ini adalah sebuah paragraf yang berisi beberapa
kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini Sedang,
<p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang
saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
</body>
</html>
Hasilnya:
Atribut align merupakan atribut yang digunakan untuk pertaan teks pada paragraf. Namun,
menurut validator W3C.. penggunaan tag ini sebaiknya diganti dengan CSS.
Mengapa demikian?
Karena atribut align dapat merubah tampilan dari web. Ini sebenarnya tigas dari CSS. Tugas
utama dari HTML adalah membuat struktur dasar dari web.
Contoh perataan menggunakan CSS:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="text-align: justify">Ini adalah sebuah paragraf yang berisi
beberapa kalimat. Saya sedang belajar HTML di Petani Kode. Saat ini
Sedang, Belajar tentang paragraf.</p>
<p style="text-align: center">Paragraf adalah kumpulan dari beberapa
kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide
pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat
pendukung.</p>
</body>
</html>
Hasilnya:
Tag <br> untuk Membuat Paragraf

Tag <br> sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya digunakan
untuk membantu tag <p>.
Fungsi utama tag <br> adalah untuk membuat baris baru.
Contoh:
Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag <p>.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Rambut berantakan tak pernah di sisir
Orang melihat tertawa kesenangan
Pengangguran berserakan seperti pasir
Kurang usaha dan keterampilan</p>
</body>
</html>
Hasilnya:
Meskipun pada kode HTML kita sudah menulis tiap bait pantun dalam baris yang baru. Tapi ia
akan tetap ditampilkan seperti baris.
Di sinilah saatnya kita harus menggunakan tag <br>. Maka, kode di atas.. bisa kita perbaiki
menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Rambut berantakan tak pernah di sisir <br />
Orang melihat tertawa kesenangan <br />
Pengangguran berserakan seperti pasir <br />
Kurang usaha dan keterampilan</p>
</body>
</html>
Hasilnya:
Oh iya, tag <br> adalah tag yang tidak memiliki pasangan penutup. Cara menutupnya,
tambahkan saja garis miring seperti ini <br />.
Tag <br> boleh ditutup, boleh juga tidak. Namun, sebaiknya ditutup agar valid menurut validator
W3C.
Tag <hr> untuk Membuat Garis

Sama seperti tag <br>, tag <hr> juga bukanlah tag untuk membuat paragraf.
Tag <hr> merupakan tag yang digunakan untuk membuat garis lurus secara horizontal
(horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau paragraf.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<hr />
sendiri.</p>
</body>
</html>
Hasilnya:
Tag <pre>
Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik.
Contohnya seperti pantun dan puisi yang paragrafnya diulis dengan garis baru dan juga indentasi.
Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi
alternatif, yakni tag <pre>.
Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau
paragraf dalam format yang sudah kita tentukan di HTML.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Hujan Bulan Juni</h1>
<p>oleh Sapardi Djoko Damono</p>
<pre>
tak ada yang lebih tabah
dari hujan bulan Juni
dirahasiakannya rintik rindunya
kepada pohon berbunga itu
tak ada yang lebih bijak

dihapusnya jejak-jejak kakinya
yang ragu-ragu di jalan itu
tak ada yang lebih arif

dibiarkannya yang tak terucapkan
diserap akar pohon bunga itu
</pre>
</body>
</html>
Hasilnya:
Coba perhatikan!
Paragraf yang kita buat di dalam kode HTML akan ditampilkan dengan format yang sama seperti
yang kita tulis di sana.
Biasanya tag <pre> sering digunakan untuk menampilkan source code. Karena, tag ini
menggunakan font Monospace atau Courier New (di Windows).
Tag <p> vs Tag <div>

Tag <p> dan Tag <div>, memiliki perilaku yang hampir sama. Tapi tag <div> sebenarnya
bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.
Kadang tag <div> sering ‘disalahgunakan’ untuk membuat paragraf.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
Belajar tentang paragraf.</div>
<div>Paragraf adalah kumpulan dari beberapa kalimat yang saling
sendiri.</div>
</body>
</html>
Ini boleh-boleh, saja. Tapi hasilnya tidak akan sama seperti tag <p>.
Paragraf yang dibuat dengan tag <div> tidak akan memiliki jarak margin antar paragraf.
Tag <div> biasanya digunakan untuk membungkus teks yang ada di luar artikel. Contoh seperti
teks pada footer, header, sidebar, dll.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
sendiri.</p>
<hr />
<footer>
<div>© 2020 Belajar HTML by Petani Kode</div>
</footer>
</body>
</html>
Hasilnya:
Bonus: Paragraph Style

Sebenarnya ini ranah pembahasan tentang CSS bukan HTML. Karena itu, kamu boleh baca dan
juga boleh tidak.
Paragraph Style adalah style CSS yang kita berikan kepada paragraf agar tampil lebih menarik.
Berikut ini beberapa style yang bisa diberikan pada paragraf:
1. Baris Pertama Masuk ke Dalam
Baris pertama pada paragraf kadang sering ditulis masuk ke dalam atau ini juga disebut dengan
indentasi.
Contoh:
Bagaimanakah cara membuat yang seperti itu di HTML?
Gampang!
Kita bisa memanfaatkan style CSS.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Paragraf Indentasi</h1>
<p style="text-indent: 45px;">Contoh ini baris pertama yang ditulis masuk ke
dalam.
Baris kedua tetap ditulis seperti biasa. Dan juga baris
Ke-3 ditulis seperti biasa.</p>
</body>
</html>
Hasilnya:
Atribut style merupakan atribut untuk menambahkan style CSS. Pada contoh di atas kita
menambahkan text-indent dengan nilai 45px, nilai ini akan menentukan jarak (ke dalam) dari
baris pertama.
2. Warna untuk Paragraf
Warna bisa kita berikan kepada teks dan background. Properti CSS yang digunakan untuk
memberikan warna adalah color (untuk teks) dan background-color (untuk background).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Warna untuk Paragraf</h1>
<p style="color: blue;">Contoh paragraf dengan warna teks biru.

Ini baris kedua dari paragraf. Semua teks yang ada di dalam
paragraf ini akan berwarna biru.</p>
<p style="color: white; background-color:purple">Contoh paragraf dengan

warna teks putih dan warna background-nya adalah ungu.
Ini baris kedua dari paragraf. Semua teks yang ada di dalam
paragraf ini akan berwarna putih.</p>
</body>
</html>
Hasilnya:
3. Mengubah Jenis Font
Tidak suka dengan jenis font yang digunakan, kamu bisa menggantinya dengan style CSS.
Caranya..
Kita bisa gunakan properti font-family lalu diberikan nilai dengan nama font yang akan
digunakan.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Font untuk Paragraf</h1>
<p style="font-family: Arial;">Ini adalah contoh paragraf yang

menggunakan font Arial. Semua teks pada paragraf ini akan menggunakan
font Arial. Arial adalah salah satu font yang umum digunakan pada
Windows.</p>
<p style="font-family: 'Times New Roman'">Ini adalah paragraf yang

menggunakan font Times New Roman. Font ini juga umum digunakan dalam
penulisan teks. Perhatikan penulisan Times New Roman pada style CSS,
ia diapit dengan tanda petik karena mengandung lebih dari satu kata.</p>
</body>
</html>
Hasilnya:
Apa Selanjutnya?
Pada tutorial ini, kita sudah belajar beberapa tag:
 <p> untuk membuat paragraf;

 <hr> untuk membuat garis lurus;
 <br> untuk membuat baris baru;
 <div> untuk membuat paragraf di luar
artikel atau layaout;
 <pre> untuk membuat paragraf dengan format yang sudah ditentukan.
Ini adalah tag-tag dasar yang perlu diingat dalam membuat paragraf di HTML.
Selanjutnya, silahkan pelajari tentang:
 Belajar HTML #04: Membuat Heading di HTML
petanikode.com
Belajar HTML #04: Cara Membuat Heading
di HTML
Ahmad Muhardian
7-9 minutes
Bayangkan jika artikel yang sedang kamu baca ini tidak memiliki judul.
Pasti tidak akan menarik!
Tidak ada judul dan juga sub judul.
Kamu bisa saja akan bingung membacanya.
Karena itu..
Kita membutuhkan judul, atau dalam HTML dikenal dengan Heading.
Apa itu heading?
dan bagaimana cara membuatnya?
Ayo kita bahas!

Apa itu Heading?
Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian dari
artikel.
Jika kamu sering menulis artikel, pasti ini tidak asing buatmu.
Lalu, bagaimana caranya membuat judul di HTML?
Mari kita bahas:
Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>. Tag <h1> digunakan pada judul
level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya.
Masing-masing judul akan ditampilkan dengan ukuran teks yang bebeda. Tag <h1> adalah yang
paling besar, dan tag <h6> paling kecil.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Heading di HTML</title>
</head>
<body>
<h1>Ini Judul Level 1</h1>
</body>
</html>
Hasilnya:
Tag <h1> biasanya dipakai pada judul artikel. Lalu tag <h2>, <h3>, <h4>, <h5>, dan <h6> dipakai
pada sub judul atau sub heading.
Mari kita coba membuat sebuah artikel yang dilengkapi dengan heading. Buatlah file HTML
baru kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Belajar Heading di HTML</h1>
<p>
Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6.
Heading berfungsi untuk membuat judul untuk artikel dan juga
sub judul pada bagian artikel.
</p>
<h2>Membuat Sub Judul</h2>
<p>
Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti
dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1
hanya digunakan untuk judul artikel saja.
</p>
</body>
</html>
Hasilnya:
Berdasarkan pengalaman saya—dalam menulis artikel—tag <h5> dan <h6> jarang sekali dipakai,
karena judul yang dibuat hanya sampai pada level 2, 3, dan 4.
Urutan Penulisan Heading
Apakah boleh menulis judul yang tidak urut?
Maksudnya.. seperti menggunakan <h6> untuk judul awal, lalu berikutnya <h4> untuk sub judul.
Ini boleh-boleh saja, tapi kurang bagus untuk SEO. 1
Penulisan judul yang bagus adalah judul yang mengikuti levelnya.

Judul <h1> pada level pertama, <h2> pada level ke-2, dan seterusnya.
Atribut untuk Heading

Masih ingat tentang atribut?
Ya, dia adalah _______
Sudah lupa ya?
Coba buka lagi pembahasan tentang: Apa itu Tag, Elemen, dan Atribut di HTML?
Heading tidak memiliki atribut khusus. Ia biasanya menggunakan atribut globel.
Contohnya seperti:
 id untuk memberikan nama id unik. Biasanya ini akan digunakan oleh link, CSS, dan
Javascript;
 class untuk memberikan nama class yang akan dipakai oleh CSS;
 style untuk memberikan kode css secara langsung;
 title untuk menambahkan informasi tambahan;
 dll.
Daftar atribut global, bisa kamu lihat di MDN: HTML Global Attributes
Meskipun sama-sama digunakan untuk urusan judul, tapi tiga elemen ini berbeda.
 Heading adalah judul untuk artikel dan bagian artikel yang dibuat dengan tag <h1>
sampai <h6>
 Title adalah judul dari web yang dibuat dengan tag <title>
 Header adalah bagian kepala (kop) pada web yang dibaut dengan tag <header>
Coba perhatikan gambar berikut:

Sudah jelas kan bedanya?
Tag <title> untuk judul yang ditampilkan di web beowser. Tag <header> sama seperti kop
surat. Lalu heading <h1> sampai <h6> menjadi judul untuk artikel.
Bonus: Heading Style

Sebenarnya ini termasuk dalam pembahasa materi tentang CSS. Karena itu, saya menjadikannya
bonus yang boleh kamu baca dan juga boleh tidak.
Jadi..
Heading Style adalah style CSS yang diberikan pada heading agar terlihat menarik.
Berikut ini beberapa style yang sering digunakan pada heading:
Heading dengan Garis Bawah

Heading dengan garis bawa bisa kita buat dengan memanfaatkan tag <hr> dan juga CSS.
Contoh menggunakan tag <hr>:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Tutorial Membuat Heading di HTML</h1>
<hr />
<p>
Heading adalah judul sebuah artikel dan bagian dari artikel.
Ada Enam level heading pada HTML, yakni dimulai dari H1,
H2, H3, sampai H6.
</p>
</body>
</html>
Hasilnya:
Contoh menggunakan CSS:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 style="text-decoration: underline;">Tutorial Membuat Heading di
HTML</h1>
<p>
H2, H3, sampai H6.
</p>
</body>
</html>
Hasilnya:
Text Case untuk Heading
Heading kadang ditulis dengan berbagai style case. Ada yang menggunakan huruf besar semua,
ada juga yang menggunakan huruf besar di awal kata saja.
Contoh:
INI HEADING DENGAN HURUF BESAR SEMUA

Ini Heading Dengan Huruf Beasr Di Depan Saja
Nah, untuk membuat style case heading ini, Kita bisa menggunakan CSS dengan atribut text-
transform.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 style="text-transform: uppercase;">Heading dengan huruf Besar
semua</h1>
<p>
H2, H3, sampai H6.
</p>
<h1 style="text-transform: capitalize;">Heading dengan huruf Besar di
awal kata</h1>
<p>
Properti text-transform berfungsi untuk menentukan style case dari
teks. Properti ini bisa diberikan nilai capitalize, uppercase,
lowercase, initial, none, inherit.
</p>
</body>
</html>
Hasilnya:
Warna untuk Heading
Sama seperti elemen yang lainnya, heading juga dapat kita berikan warna dengan bantuan CSS.
Warna bisa kita berikan pada teks dan latar belakang atau background.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 style="color: red;">Heading dengan warna Merah</h1>
<p>
Atribut color adalah atribut CSS yang berfungsi untuk memberikan
warna pada teks. Pada contoh ini, teks pada heading akan berwarna
merah, karena kita memberikan warna red untuk color.
</p>
<h2 style="background-color: yellow;">Heading dengan Latar Kuning</h2>
<p>
Atribut background-color adalah atribut untuk memberikan warna
latar (background) pada elemen tertentu. Pada contoh ini, kita
memberikan warna latar kuning untuk heading.
</p>
</body>
</html>
Hasilnya:
Nah untuk style lainnya, silahkan berkreasi sendiri.
Apa Selanjutnya?
Kita sudah belajar tentang cara membuat heading di HTML. Hal yang perlu kamu ingat adalah
tag-tag untuk membuat heading, yakni dimulai dari <h1> sampai <h6>.
Berikutnya, silahkan pelajari tentang:
 Belajar HTML #05: Membuat Link pada HTML
1. https://www.seobility.net/en/wiki/H1-H6_headings ↩︎
petanikode.com
Belajar HTML #05: Cara Membuat

Komentar di HTML
Ahmad Muhardian
4-5 minutes
Sampai ditahap ini.. apakah kamu sudah ingat semua tag HTML yang dipelajari?
Sudah lupa?
Tidak apa-apa, itu adalah sifat dari manusia. Otak kita memang tidak seperti komputer yang bisa
mengingat dengan cepat dan permanen.
Karena itu, kita membutuhkan catatan agar bisa mengingat.
Coba perhatikan ini:

Yang saya lingkari merah itu adalah komentar atau catatan yang akan mengingatkan saya tentang
pekerjaan yang harus dilakukan di bagian tersebut.
Karena tulisan saya sangat panjang, jadi komentar ini sangatlah berguna.
Nah, di HTML juga kita akan menemukan hal yang demikian. Nantinya, dokumen HTML kita
akan semakin banyak dan panjang.
Agar bisa mengingat strukturnya, sebaiknya ditambahkan komentar.
Bagaimana cara membuatnya?
Mari kita pelajari..
Apa itu Komentar dalam HTML?

Komentar adalah elemen yang akan diabaikan oleh browser. Ia tidak akan ditampilkan di dalam
web.
Komentar biasanya digunakan untuk memberikan informasi tambahan pada kode HTML dan
kadang juga digunakan untuk menon-aktifkan beberapa kode HTML.
Komentar dapat kita buat dengan tag .
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Membuat Komentar di HTML</title>
</head>
<body>

<p>Hello World!</p>

</body>
</html>
Hasilnya:
Komentar tidak akan ditampilkan oleh browser, tapi kita bisa melihatnya dengan cara view
source.
Klik kanan pada browser, lalu pilih view page source.
Jalan Pintas untuk Membuat Komentar

Jika kamu menggunakan teks editor Visual Studio Code, kamu bisa membuat komentar dengan
menekan Ctrl+/.
Cara ini lebih cepat dibandingkan dengan harus menulis secara manual tag komentarnya.
Atribut untuk Komentar

Komentar tidak bisa ditambahkan atribut. Jika kamu mencoba menambahkannya, itu akan sia-
sia. Soalnya komenter merupakan elemen yang tidak akan diproses oleh browser.
Fungsi Komentar
Komentar memang tidak akan ditampilkan di web, namun bukan berarti ia tidak memiliki fungsi.
Berikut ini beberapa fungsi komenter:
1. Komentar untuk Menjelaskan Arti Tag

Saat belajar HTML, kamu mungkin akan kesulitan mengingat fungsi dan arti dari tag HTML.
Karena itu, kamu harus membuat catatan untuk mengingatnya.
Ini bisa kamu lakukan dengan mencatat di buku, maupun media lain. Tapi, alangkah baiknya
memanfaatkan komentar untuk mencatat.
Contoh:
<!DOCTYPE html> 
<html lang="en">
<head>

</head>
<body>
<p>Ini tag paragraf yang aktif</p>

</body>
</html>
Jika kita lupa, kita bisa membuka kembali kode tersebut. Tapi ingat, jangan buat komentar
seperti pada web yang akan kamu upload ke server atau produksi.
2. Komentar untuk Menyimpan Todo List
Komentar kadang sering digunakan juga untuk menyimpan todo list, ini akan membantu kita
menginta apa yang harus dikerjakan pada bagian HTML tertentu.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>


</head>
<body>
<h1>Komentar di HTML</h1>


</body>
</html>
Jika kita sudah mengerjakan apa yang dituliskan di todo list tersebut, kita bisa hapus
komentarnya.
3. Komentar untuk Menonaktifkan Kode HTML

Komentar kadang seding digunakan untuk menon-aktifkan kode HTML.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Ini tag paragraf yang aktif</p>

<p>ini paragraf yang lainnya</p>
</body>
</html>
Hasilnya:
Apa Selanjutnya?
Itulah cara membuat komentar di HTML, intinya kamu hanya perlu mengingat tag untuk
membuatnya.
Selanjutnya silahkan pelajar tentang:
 Belajar HTML #06: Text Formatting di HTML
petanikode.com
Belajar HTML #06: Text Formatting di

HTML (Bold, Italic, Underline, dll)
Ahmad Muhardian
8-10 minutes
Coba perhatikan kedua paragraf ini:
Kamu lebih tertarik baca yang mana?
..yang terformat, atau yang polos (plain text)?
Teks yang terformat akan lebih mudah dibaca, karena ada penegasan seperti teks tebal, miring,
dan garis bawah.
Saat kita mencari kata atau kalimat penting.. mata kita akan lebih mudah menemukannya pada
teks yang terformat dibandingkan plain text.
Karena itu, dalam membuat web.. ada baiknya menggunakan format teks.
Nah, di HTML terdapat tag-tag yang khusus digunakan untuk text formatting.
Apa saja itu?
Mari kita bahas..
Membuat Teks Tebal

Teks tebal biasanya digunakan untuk memberikan penegasan pada teks tertentu, misalnya seperti
judul, subjudul, huruf penting, dll.
Tag yang digunakan untuk membuat teks tebal di HTML adalah tag <b> (bold) dan tag
<strong>. Kamu bebas mau pakai yang mana saja, hasilnya akan sama-sama tebal.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Tebal di HTML</title>
</head>
<body>
<h1>Text Tebal di HTML</h1>
<p>
<strong>Teks formatting itu penting!</strong> Karena dapat membuat tulisan
terlihat lebih menarik sehingga akan membuat <b>pengunjung senang</b>
membacanya.
</p>
</body>
</html>
Hasilnya:
Membuat Teks Miring

Teks miring biasanya digunakan untuk menegaskan sebuah kata atau istilah baru. Teks miring di
HTML dapat kita buat dengan tag <i> (italic) dan juga tag <em> (emphasis).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Miring di HTML</title>
</head>
<body>
<h1>Text Miring di HTML</h1>
<p>
Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks,
sehingga akan <em>menarik perthatian</em> pembaca. Biasanya
digunakan pada <i>istilah asing</i> atau kata serapan dari
<em>bahasa daerah</em>.
</p>
</body>
</html>
Hasilnya:
Membuat Garis Bawah pada Teks

Garis bawah biasanya digunakan untuk menandai teks yang disisipkan atau teks yang mimiliki
arti penting dibandingkan teks normal lainnya.
Garis bawah di HTML dapat kita buat dengan tag <u> (underlaine) atau juga tag <ins> (insert).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Garis Bawah di HTML</title>
</head>
<body>
<h1>Garis Bawah di HTML</h1>
<p>
<u>Text formatting itu penting</u>, karena dapat membuat teks terlihat
lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>.
</p>
</body>
</html>
Hasilnya:
Pada contoh di atas, kita menggunakan tag <del> untuk membuat teks tercoret. Lalu diikuti
dengan teks yang ditambahkan (insert).
Membuat Teks Tercoret

Teks tercoret memiliki arti teks yang dihapus. Biasanya untuk memberitahu pembaca bahwa teks
tersebut tidak dipakai atau dihapus.
Tag untuk membuat teks tercoret di HTML adalah tag <s> (strikethrough) atau bisa juga dengan
tag <del> (delete).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Tercoret di HTML</title>
</head>
<body>
<h1>Text Tercoret di HTML</h1>
<p>
Coretlah teks yang tidak <s>dibutuhkan</s> terpakai, ini bisa memberitahu
pembaca tentang perbaikan dari teks tersebut. Kadang juga teks
<del>tercoret</del>
<ins>yang dicoret</ins>, diperbaiki dengan menambahkan teks dengan garis
bawah.
</p>
</body>
</html>
Hasilnya:
Membuat Pangkat di HTML

Pangkat biasanya digunakan pada rumus. Ada dua jenis pangkat yang bisa dibuat di HTML,
yakni pangkat yang berada di atas (superscript) dan pangkat di bawah (subscript).
Tag untuk membuat pangkat di HTML adalah tag <sup> dan <sub>.
 <sup> untuk membuat pangkat di atas

 <sub> untuk membuat pangkat di bawah
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Pangkat di HTML</title>
</head>
<body>
<h1>Membuat Pangkat di HTML</h1>
<p>
Rumus luas persegi adalah S<sup>2</sup>, dimana <i>S</i> adalah sisi dari
persegi. Lalu O<sub>2</sub> adalah rumus kimia dari oksigen.
</p>
</body>
</html>
Hasilnya:
Membuat Marker untuk Teks

Marker bisanya digunakan untuk menandai teks yang penting atau kata kunci yang penting.
Marker di HTML dapat kita buat dengan tag <mark>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat marker teks di HTML</title>
</head>
<body>
<h1>Membuat marker teks di HTML</h1>
<p>
Marker biasanya digunakan untuk menandai bagian teks yang penting.
Kalau di dunia nyata, kita <mark>menggunakan stabilo</mark> untuk
membuat marker.
</p>
</body>
</html>
Hasilnya:
Warna default marker adalah kuning. Warna ini bisa kita ubah dengan style CSS.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat marker teks di HTML</title>
</head>
<body>
<h1>Membuat marker teks di HTML</h1>
<p>
Marker biasanya digunakan untuk menandai bagian teks yang penting.
Kalau di dunia nyata, kita <mark style="background-color:
pink">menggunakan stabilo</mark> untuk
membuat marker.
</p>
</body>
</html>
Maka hasilnya, marker akan berwarna pink:
Teks Formatting untuk Komputer

Selain dari teks formatting di atas, ada juga teks formatting yang khusus untuk menandai teks
yang berasal dari komputer. Berikut ini beberapa tag yang digunakan untuk memformat teks dari
komputer:
 <code> untuk menandai bagian dari kode program;

 <samp> untuk menandai output dari program komputer;
 <kbd> untuk menandai tombol keyboard;
 <var> untuk menandai sebuah variabel;
 <pre> untuk preformatting teks.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Formatting untuk Teks dari komputer</title>
</head>
<body>
<h1>Text Formatting untuk Teks dari komputer</h1>
<p>
Perintah javascript untuk menampilkan teks ke console adalah
<code>console.log()</code>. Kita juga bisa menampilkan isi variabel
dengan fungsi ini. Misalkan kita punya variabel <var>name</var>,
maka kode programnya bisa ditulis seperti ini:
<pre>
var name = "Petani Kode";
console.log(name);
</pre>
Maka hasil outputnya: <samp>Petani Kode</samp>

</p>
<p>
Untuk menjalankan ulang program, lakukan refresh dengan menekan tombol
<kbd>F5</kbd>
</p>
</body>
</html>
Hasilnya:
Menggabungkan Format
Apakah format teks dapat digabungkan?
Misalkan kiga ingin membuat teks tebal dan garis bawah, apakah bisa?
Tentu saja bisa.
Caranya:
Ya tinggal dipakai saja tag-tagnya, misal mau menggabungkan bold dengan underline.. maka
kita tinggal pakai tag <b> dan <u>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Penggabungan Format Teks di HTML</title>
</head>
<body>
<h1>Penggabungan Format Teks di HTML</h1>
<p>
Penggabungan format teks bisa dilakukan dengan menuliskan tag-tag yang
akan dipakai. Misalkan <b><u>tebal dan garis bawah</u></b>, maka kita
tinggal pakai tag <b>b</b> dan tag <b>u</b>.
</p>
</body>
</html>
Hasilnya:
Dalam menggabungkan format, kamu perlu memperhatikan tag mana yang ditulis duluan dan
yang terakhir.
Jangan sampai salah menutup..

Yang dibuka duluan, harus ditutup terakhir.
Ingatlah konsep “ibu memasak ubi”:
Apa Selanjutnya?
Teks formatting akan sering kita pakai dalam membuat konten di web, pastikan kamu mengingat
tag-tag yang digunakan untuk teks formatting.
Selanjutnya silahkan pelajari tentang:
 Belajar HTML #07: Membuat Link pada HTML
petanikode.com
Belajar HTML #07: Cara Membuat Link

untuk Menghubungkan Halaman Web
Ahmad Muhardian
16-20 minutes
Apa jadinya web tanpa ada link?
Kamu bisa bayangkan gak?
Pengunjung harus mengetik sendiri alamat URL dari web yang ingin dia buka.
Misalkan:
Ia ingin membuka halaman about, maka harus mengetik:
https://www.petanikode.com/about.html
Lalu ia ingin beralih ke halaman Contact, maka harus mengetik lagi:
https://www.petanikode.com/contact.html
Ribet! 😫
Karena itu, kita membutuhkan link.
Nah, pada tutorial ini..
..kita akan belajar cara membuat link di HTML.
Mari kita mulai!

Apa itu Link di HTML?
Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web
ke halaman web yang lain.
Elemen ini bisa diklik.. dan nanti akan membuka halaman lain sesui alamat URL yang diberikan.
Tidak hanya untuk menghubungkan halaman, link juga punya fungsi lain seperti scroll top,
download file, menjalankan fungsi javascript, dll.
Nanti kita akan bahas ini lebih dalam..
Nah! sekarang, bagaimana cara membuat link di HTML?
Silahkan lanjutkan membaca:
Link pada HTML dapa dibuat dengan tag <a>, kemudian tag ini harus memiliki atribut href
untuk menentukan alamat URL tujuan dari link.
Bentuk sederhananya seperti ini:

Contoh: link.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Link di HTML</title>
</head>
<body>
<p>Untuk lebih lengkapnya, silahkan buka:
<a href="about.html">About us</a>
</p>
</body>
</html>
Hasilnya:
Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap
browser.
Tentu saja ini bisa kita ubah-ubah sesusi selera.
Nanti kita akan bahas caranya ya..
Nah sekarang coba klik link tersbut!

Lha! Kok erorr?
Link yang kita buat ini akan membuka halaman about.html, tapi file ini belum kita buat atau
belum ada. Karena itu, pasti error.
Untuk mengatasi ini, kita harus membuat file about.html dan disimpan dalam satu folder
dengan file link.html.
Isi file about.html seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>About us</h1>
<p>
Ini adalah website yang dibuat dengan link.
Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja!
</p>
<p>
<a href="link.html">Kembali ke halaman link</a>
</p>
</body>
</html>
Nah, sekarng mari kita coba lagi:
Yap!
Halaman link.html dan about.html berhasil terhubung.
Tapi tunggu dulu..
Mengapa alamat URL pada atribut href ditulis dengan nama file?
<a href="about.html">About us</a>
Bukannya harus alamat URL lengkap yang pakai http bla bla?
Ini karena link yang kita buat adalah internal link dan juga file about.html masih dalam satu
folder dengan file link.html. Jadi boleh menuliskan langsung nama filenya, tanpa harus
lengkap dengan http.
Untuk lebih jelasnya, mari kita pelajari jenis-jenis link dalam HTML.
Jenis-jenis Link pada HTML

Berdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi dua kelompok:
1. Internal Link: adalah link yang menuju ke domain atau halaman web itu sendiri;
2. External Link: adalah link yang menuju domain lain.
Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan yang lainnya
dalam satu website atau domain.
Sementara untuk eksternal link, digunakan untuk membuka web atau domain lain. Misalnya
seperti: membuka halaman facebook, membuka chat whatsapp, membuka youtube, dan
sebagainya.
Intinya:
Selama link itu membuka web lain, maka ia adalah external. Tapi kalau tetap membuka web itu
sendiri maka itu internal.
Biar lebih jelas, mari kita coba membuatnya di HTML:
1. Contoh Internal Link
Buatlah file baru bernama index.html kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Selamat Datang</h1>
<p>
<a href="index.html" >Home</a> |
<a href="contact.html" >Contact</a> |
<a href="about.html" >About</a>
</p>
<hr>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda. Semua
link di atas adalah internal link.
</p>
<hr>
<div>Copyright © 2020 by Petani Kode</div>
</body>
</html>
Kemudian buat lagi file baru bernama contact.html dengan isi sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Contact</h1>
<p>
</p>
<hr>
<p>
Kamu bisa menghubungi saya melalui nomer WA: 0871111111
atau juga alamat email: mail@contoh.com.
</p>
<hr>
</body>
</html>
Terakhir, buat file about.html dengan isi sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>About</h1>
<p>
</p>
<hr>
<p>
Ini adalah halaman about dari website saya.
Jadi ini adalah contoh cara membuat link internal di HTML.
</p>
<hr>
</body>
</html>
Pastikan semua file ini disimpan dalam satu folder.

Setelah itu, coba buka index.html dengan browser.
Maka hasilnya:
2. Contoh Eksternal Link
Cara membuat eksternal link sebenarnya sama saja seperti internal link. Perbedaanya terletak
pada alamt URL yang diberikan.
Sebagai contoh.. ini adalah eksternal link yang menuju halaman facebook:
<a href="https://www.facebook.com/petanikode">Facebook Patani Kode</a>

Hasilnya:
Facebook Patani Kode
Maka saat link tersebut diklik, kita akan membuka halaman

https://www.facebook.com/petanikode.
Contoh lain lagi:
Link CTA (call to action) untuk whatsapp.
<a href="https://api.whatsapp.com/send?phone=6287111&text=Hi">Chat dengan

Saya</a>
Hasilnya:
Chat dengan Saya
Pada link tersebut, kita memberikan alamat URL whatsapp dan nantinya akan membuka halaman
tersebut. Ini juga bisa disebut eksternal link, karena ia akan membuka halaman whatsapp.
Oh iya, di sana kita berikan parameter berupa nomer hp dan juga teks.
Nah, biar lengkap.. kita akan coba tambahkan eksternal link pada file contact.html.
Silahkan buka file contact.html kemudian ubah kodenya menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Contact</h1>
<p>
</p>
<hr>
<p>
Kamu bisa menghubungi saya melalui nomer WA:
<a href="https://api.whatsapp.com/send?
phone=6287111&text=Hi">+6287111</a>
atau juga alamat email: mail@contoh.com.
</p>
<p>
Jangan lupa follow juga fan page saya ya:
<a href="https://www.facebook.com/petanikode">Petani Kode</a>
</p>
<hr>
</body>
</html>
Hasilnya:
Tes buka link Facebook:
Tes buka link whatsapp:
Sudah paham tentang eksternal link?
Oke, sekarang lanjut belajar atribut:
Atribut-atribut untuk Link

Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti:
target, title, rel, style, dan lain-lain.
Menggunakan Atribut target
Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang
biasanya digunakan:
 _blank akan membuka link pada jendela atau tab baru;

 _self akan membuka link pada halaman itu sendiri (default target);
 _top menuju bagian paling atas pada halaman;
 _parent membuka link pada frame induk;
 nama-frame akan membuka link pada <iframe> dengan nama tertentu;
Contoh:
<a href='https://www.facebook.com/petanikode' target='_blank'>Facebook</a>
Hasilnya:
Saat link tersebut diklik, browser akan membuka tab baru. Ini karena kita memberikan atribut
target dengan nilai _blank.
Berikutnya, kita akan mencoba menampilkan link ke dalam sebuah frame.
Buatlah file baru bernama link-frame.html, kemudian isi kodenya seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
<a href="https://www.petanikode.com" target="myframe">Sebuah Link</a>
</p>
<p>

<iframe name="myframe" width="600" height="400"></iframe>
</p>
</body>
</html>
Hasilnya:
Menggunakan Atribut title
Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan
tampil saat link disentuh pointer atau saat kita menahan tap di hp.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Untuk lebih lengkapnya, silahkan buka:
<a href="about.html" title="Menuju ke halaman about">About us</a>
</p>
</body>
</html>
Hasilnya:
Live Demo:
Untuk lebih lengkapnya, silahkan buka: About us
Cara Mengubah Warna Link di HTML

Warna default link adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita berikan
untuk teks dan latar belakang (background).
Caranya:
Tambahkan atribut style kemudian isi dengan style css untuk mengubah warna, yakni color
(untuk teks) dan background-color (untuk latar).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Selamat Datang</h1>
<p>
<a href="index.html" style="color:red">Home</a> |
<a href="contact.html" style="color:green">Contact</a> |
<a href="about.html" style="color:deeppink;">About</a> |
<a href="download.html" style="color:white;background-color:
orange;">Download</a>
</p>
<hr>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda. Semua
link di atas adalah internal link.
</p>
<hr>
</body>
</html>
Hasilnya:
Fungsi Menarik Lainnya dari Link
Seperti yang saya bilang sebelumnya.. link tidak hanya digunakan untuk menghubungkan
halaman web saja.
Ia juga bisa digunakan untuk beberapa fungsi tertentu seperti:
Membuat Link Buntu
Link buntu adalah link yang tidak akan membuka apa-pun. Ia biasanya digunakan sebagai
placeholder atau sampel saja.
Cara membuatnya:
Tambahkan tanda pagar atau tanda pagar dan tanda seru pada atribut href.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
<a href="#">Link Buntu</a>
<a href="#!">Link Buntu 2</a>
</p>
</body>
</html>
Hasilnya:
Perhatikan!
Pada contoh tersebut kita mengisi URL-nya dengan tanda pagar. Arti tanda pagar pada URL
sebenarnya adalah anchor (jangkar).
Jangkar ini nantinya akan membawa kita ke lokasi tertentu di dalam dokumen HTML. Jika
hanya diisi pagar saja, maka ia tidak akan kemana-mana.
Membuat Link Anchor
Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita
mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinama anchor.
Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#), lalu diisi
dengan nama id dari elemen yang akan dituju.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Contoh Link Anchor</h1>
<p>Ini adalah contoh link anchor. Coba klik link ini:
<a href="#penutup">Meluncur ke Penutup</a> maka kamu
akan dibawa ke bagian penutup dari dokumen ini.
</p>
<h2>Apa itu Jangkar?</h2>
<p>
Anchor dalam bahasa indonesia artinya jangkar. Saya yakin
kamu pasti pernah melihat jangkar. Fungsi jangkar untuk
menahan kapal agar tidak hanyut. Tapi dalam HTML, fungsinya
untuk membuat link yang bisa membawa kita meluncur ke tujuan
jangkar itu.
</p>
<p>
Jangkar atau anchor di HTML tidak hanya bisa digunakan pada
satu dokumen saja. Ia juga bisa digunakan untuk membuka dokumen
lain, lalu mengaitkan jangkarnya.
</p>
<p>
Jangkar biasanya dibuat dengan tanda pagar (#) lalu diikuti
dengan nama id dari elemen yang ingin dituju. Contohnya #penutup,
maka link yang menggunakan anchor tersebut akan mencari elemen
HTML yang memiliki id `penutup` dan membawa kita ke sana.
Kira-kira begitulah cara kerjanya.
</p>
<h2 id="penutup">Akhir Kata..</h2>
<p>
Ini adalah penutup dari artikel ini, dan coba perhatikan
headingnya.
Di sana kita menggunakan id="penutup". Maka elemen ini akan
menjadi
tujuan dari anchor link.
</p>
<p>
<a href="#top">Kembali ke Atas!</a>
</p>
</body>
</html>
Hasilnya:
Kalau kita perhatikan, di sana kita menggunakan #top sebagai URL.
<a href="#top">Kembali ke Atas!</a>

Sedangkan elemen yang memiliki id="top", tidak ada di dalam HTML yang kita tulis.
Mengapa link anchor ini bisa menuju ke atas?
Ini karena browser sudah paham, jika ada link anchor yang menuju ke #top maka ia akan dibawa
ke bagian teratas dari dokumen.
Membuat Link untuk Memanggil Fungsi Javascript
Link dapat juga digunakan untuk memanggil fungsi Javascript.
Pemanggilan fungsi Javascript biasanya dilakukan dengan atribut even seperti onclick,
onmouseover, onmouseout, dan sebagainya.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
<a href="#" onclick="alert('Hello World!')">Jalankan JS</a>
<br>
<a href="#!" onmouseover="alert('link sudah kamu sentuh!')">Coba
Sentuh Link ini</a>
</p>
</body>
</html>
Hasilnya:
Sebenarnya hampir semua elemen bisa menjalankan fungsi Javascript dengan atribut event.
Nah, khusus untuk link. Dia bisa juga menjalankan fungsi Javascript melalui atribut href atau
URL.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
<a href="javascript:alert('Hello World!')">Jalankan JS</a>
</p>
</body>
</html>
Hasilnya akan sama seperti contoh sebelemnya.
Membuat Link dengan Gambar
Membuat gambar sebagai link kadang sering dilakukan dalam web. Cara membuatnya sangat
mudah, kita hanya pelu membungkus tag <img> dengan tag <a>.
Contoh:
<a href="#"><img src="https://www.petanikode.com/img/logo.svg" /></a>
Hasilnya:
Semua area gambar akan menjadi link dan jika kita klik, maka akan dibawa ke halaman yang
akan dituju oleh link tersebut.
Membuat Link untuk Download File
Link kadang juga digunakan sebagai link untuk download file.
Cara membuatnya sangat mudah, kita hanya perlu memasukan alamat URL dari file yang akan
didownload.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Silahkan Download File:
<a href="contoh-file.zip">contoh-file.zip</a>
</p>
</body>
</html>
Hasilnya:
Pada contoh di atas, kita menuliskan langsung nama filenya. Ini karena HTML link-
download.html berada dalam satu folder dengan contoh-file.zip.
Lalu, bagaimana kalau filenya berada di tempat lain?
Gampang.. tinggal ganti saja URL-nya.
Contoh:
<a href="https://releases.ubuntu.com/20.04/ubuntu-20.04-desktop-
amd64.iso">Download Ubuntu</a>
Membuat Link untuk Mengirim Email
Link kadang juga digunakan untuk mengirim email.

Cara membuatnya:
Ubah URL tujuan dari link dengan mailto, lalu diikuti dengan alamat email yang akan
menerima email.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
Info lebih lanjut:
<a href="mailto:tes@contoh.com"
title="kirim email ke Admin">Hubungi Saya</a>
</p>
</body>
</html>
Hasilnya:
Jika kamu membukanya di Google Chrome, maka ia akan membuka Gmail. Tapi jika dibuka di
Firefox, ia akan memilih aplikasi email yang tersedia di komputer.
Apa Selanjutnya?
Waah.. selain menghubungkan halaman, ternyata ada begitu banyak fungsi lain dari link.
Intinya:
Kamu hanya perlu mengingat cara membuat link dan jenis-jenisnya. Karena ini adalah basic
yang akan terus terpakai dalam membuat web.
Oke, Selanjutnya.. silahkan pelajari tentang:
 Belajar HTML #06: Membuat List pada HTML
petanikode.com
Belajar HTML #08: Cara Menampilkan
Gambar di HTML
Ahmad Muhardian
10-12 minutes
Website tanpa gambar = membosankan.
Setuju?
Ya saya juga setuju.
Gambar akan membuat website kita terlihat lebih menarik. Karena otak kita lebih mudah
menyerap informasi dengan visual dibandingkan hanya teks saja.
Karena itu, gambar sangatlah penting.
Pada tutorial ini, kita akan belajar cara menambahkan gambar di HTML.
Mari kita mulai..
Menambahkan Gambar di HTML

Gambar dapat kita tambakan di HTML dengan menggunakan tag <img>. Tag ini memiliki atribut
wajib, yakni src.
Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan.
Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img>
harus ditutup dengan menambahkan garis miring.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="sawah.jpg" />
</p>
</body>
</html>
Hasilnya:
Perhatikan!
Pada contoh di atas, kita menuliskan langsung nama file dari gambar. Ini karena kita menaruh
gambar di dalam folder yang sama dengan file HTML.
Apabila file gambarnya tersimpan di folder yang berbeda, maka kita hanya perlu menuliskan
alamat path-nya.
Misalkan, kita akan menyimpan gambar di dalam folder images.
Maka di HTML, kita bisa tulis seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
<img src="images/sawah.jpg" />
</p>
</body>
</html>
Hasilnya akan sama seperti contoh di atas.
Lalu bagaimana kalau gambarnya berada di internet atau website lain?
Nah, jika kita menggunakan gambar dari website lain..
..kita harus menuliskan alamat URL lengkap dari gambar tersebut.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Berikut ini adalah gambar Candi Borobudur:</p>
<p>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Borobudur_Templ
e.jpg/320px-Borobudur_Temple.jpg" />
</p>
</body>
</html>
Hasilnya:
Gampang kan?
Nah, berikutnya kita akan pelajar format gambar apa saja yang bisa digunakan di HTML dan
juga atribut lainnya untuk <img>.
Silahkan lanjutkan..
Format File Gambar untuk HTML
Tidak semua format file gambar dapat ditampilkan di HTML. Karena tiap file gambar memiliki
tujuan masing-masing.
Misalnya file gambar dengan format PSD, ia adalah file gambar untuk Photoshop. Jelas ini tidak
akan bisa ditampilkan di HTML.
Lalu, format apa saja yang didunkung oleh HTML?
Berikut ini daftar beberapa format gambar yang sering digunakan dalam web:
Nama Format Nama Panjang Ekstensi

APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
WebP Web Picture .webp
Format file ini juga akan bergantung pada versi browser yang digunakan.
Kita ambil contoh format WebP, ini adalah format file gambar baru yang dikembangkan oleh
Google. Jika kita menggunakan browser versi lama, gambar ini tidak akan bisa ditampilkan.
Atribut untuk Tag <img>

Ada beberapa atribut yang sering digunakan pada tag <img>:
 alt untuk teks alternatif untuk gambar;

 width untuk menentukan lebar gambar;
 height untuk menentukan tinggi gambar;
 style untuk menentukan style CSS untuk gambar.
Mari kita coba satu per satu..
Atribut alt
Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar gagal
ditampilkan.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Berikut ini adalah gambar Candi Borobudur:</p>
<p>
<img src="" alt="Candi Borobudur" />
</p>
</body>
</html>
Hasilnya:
Pada contoh tersebut, kita sengaja mengosongkan nilai atribut src. Akibatnya gambar gagal
ditampilkan dan yang akan digampilkan adalah teks alternatif.
Apakah kita wajib menggunakan atribut alt?
Sebenarnya tidak wajib, tapi sebaiknya tetap menggunakan atribut ini. Karena, nantinya teks
alternatif akan dibaca oleh screen reader.
Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar bisa mengetahui
informasi yang ada di komputer.
Selain itu, atribut alt juga sering digunakan untuk meletakan kata kunci untuk SEO.
Atribut width dan height
Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari
gambar.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
<img src="images/sawah.jpg" width="200" height="150" alt="Sawah"/>
</p>
</body>
</html>
Hasilnya:
Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita memberikan
nilai 200, artinya.. kita memberikan nilai 200px.
Atribut width dan height juga tidak wajib. Tapi baiknya ditambahkan agar ukuran gambar
konsisten.
Atribut style
Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini
sering digunakan pada gambar untuk memberikan style atau efek tertentu.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Style Gambar di HTML</h1>
<p>
<img src="images/sawah.jpg" style="width: 160px;border: 3px solid red;" />
<img src="images/sawah.jpg" style="width: 160px;border-radius: 10px;" />
<img src="images/sawah.jpg" style="width: 100px;height: 100px;border-
radius: 100%;" />
</p>
</body>
</html>
Hasilnya:
Perhatikan gambar di atas ☝️..

Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid, dan warnanya
adalah merah.
Lalu gambar kedua, kita berikan style border-radius untuk menciptkan lengkungan pada pojok
gambar.
Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan menciptkan
lingkaran.
Membuat Gambar Background

Sebenarnya ini sudah masuk ke dalam pembahasan tentang CSS, tapi tidak apa-apa kita bahas di
sini.
Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS dengan
atribut background-image lalu diisi dengan URL dari gambar.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="background-image: url(images/sawah.jpg);">
<h1>Background dengan Gmabar</h1>
<p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>
Hasilnya:
Membuat Link dengan Gambar

Membuat gambar sebagai link pernah kita bahas di Tutorial membuat link di HTML, tapi tidak
apa-apa.. kita akan bahas lagi biar semakin paham.
Baiklah…
Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan tag <img>. Tag
<a> harus mengapit tag <img>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Gambar Sebagai Link</h1>
<p>Coba klik gambar ini:</p>
<p>
<a href="https://www.petanikode.com">
<img src="images/sawah.jpg" width="160"/>
</a>
</p>
</body>
</html>
Hasilnya:
Membuat Link pada Bagian Gambar

Link dapat kita buat pada bagian tertentu pada gambar dengan menggunakan tag <map> dan
<area>.
Contoh: 1
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Gambar Sebagai Link</h1>
<p>Coba sentuh dan klik gambar ini:</p>
<p>
<img src="https://www.w3schools.com/html/workplace.jpg"
usemap="#workmap"/>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" title="Computer" href="#!">
<area shape="rect" coords="290,172,333,250" title="Phone" href="#!">
<area shape="circle" coords="337,300,44" title="Coffee" href="#!">
</map>
</p>
</body>
</html>
Hasilnya:
Tag Tambahan untuk Gambar di HTML

Pada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu tag
<img>.
Diantaranya:
 <figure> untuk membungkus gambar dan teks caption-nya;

 <picture> untuk menentukan jenis gambar pada ukuran layar yang berbeda.
Mari kita coba:
Tag <figure>
Tag figure berfungsi untuk membungkus tag <img> atau gambar dengan teks caption. Teks
caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat dengan tag
<figcaption>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
<figure>
<img src="images/sawah.jpg" width="300" alt="Sawah"/>
<figcaption>Landscape sawah dan langit</figcaption>
</figure>
</p>
</body>
</html>
Hasilnya:
Tag <picture>
Di era mobile seperti saat ini, website tidak hanya dibuka melalui komputer saja, tapi juga
smartphone.
Ukuran layar komputer dengan smartphone tentunya berbeda. Karena itu, website harus bersifat
responsif agar bisa menyesuaikan diri dengan media yang digunakan.
Nah, tag <picture> hadir untuk mengatasi masalah ini. Tag ini berfungsi untuk menentukan
gambar mana yang akan ditampilkan pada ukuran layar tertentu.
Mari kita coba contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>
<picture>
<source media="(min-width: 650px)" srcset="images/sawah.jpg">
<source media="(min-width: 450px)" srcset="images/sawah-sm.jpg">
<img src="images/sawah.jpg">
</picture>
</p>
</body>
</html>
Hasilnya:
Apa Selanjutnya?
Sejauh ini kita sudah belajar cara menampilkan gambar di HTML. Intinya, kamu hanya perlu
mengingat cara menggunakan tag <img>.
Berikutnya, silahkan pelajari:
 Belajar HTML #09: Membuat List pada HTML
1. https://www.w3schools.com/html/html_images_imagemap.asp ↩︎
petanikode.com
Belajar HTML #09: Cara Membuat List di

HTML
Ahmad Muhardian
6-8 minutes
Jika kamu diminta menuliskan daftar barang yang harus dibeli pada dengan HTML..
..apa yang akan kamu lakukan?
Mungkin kamu bisa membuatnya seperti ini:
<h1>Daftar Barang untuk diblie:</h1>

<p>- Flashdisk 64GB</p>
<p>- Kabel Data USB 3.0</p>
<p>- Kertas A4</p>
Hasilnya memang akan terlihat seperti sebuah list.

Tapi, ini bukanlah cara membuat list yang benar di HTML.
Elemen List di HTML

HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa
dibuat di HTML:
1. Ordered List adalah list yang terurut;

2. Unordered List adalah list yang tak terurut;
3. dan Descriptiona List adalah list yang berisi definisi.
Mari kita bahas satu-per-satu…
1. Ordered List di HTML
Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi dengan item-item yang akan
dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Ordered List</title>
</head>
<body>
<h1>Buah Favoritku:</h1>
<ol>
<li>Jeruk</li>
<li>Durian</li>
<li>Pisang</li>
<li>Pepaya</li>
<li>Mangga</li>
</ol>
</body>
</html>
Hasilnya:
List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I,
II, III?
Gampang..
Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini
nilai yang bisa diberikan:
 a untuk alfabet a, b, c, dan seterusnya;

 A untuk alfabet A, B, C, dan seterusnya;
 i untuk angka romwari i, ii, iii, dan seterusnya;
 I untuk angka romwari I, II, III, dan seterusnya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'>
</ol>
<h3>List dengan type romawi</h3>
<ol type='i'>
</ol>
<h3>List dengan type romawi kapital</h3>
<ol type='I'>
</ol>
</body>
</html>
Hasilnya:
2.Unordered List di HTML
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya.
Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Unordered List</title>
</head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:</h1>
<ul>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
</body>
</html>
Hasilnya:
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga
bisa menggantinya dengan atribut type.
Berikut ini nilai yang bisa diberikan untuk atribut type:
 square untuk simbol persegi;

 disc (default) untuk simbol lingkaran disc;
 none tidak memakai simbol;
 circle untuk simbol lingkaran;
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul type="square">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
<h1>Framework untuk dipelajari:</h1>
<ul type="circle">
<li>Vuejs</li>
<li>Svelte</li>
<li>Reactjs</li>
</ul>
<h1>Tools untuk dipelajari:</h1>
<ul type="none">
<li>Gulp</li>
<li>NPM</li>
<li>Js Lint</li>
</ul>
<h1>Pelajari juga:</h1>
<ul type="disc">
<li>JSON</li>
<li>XML</li>
<li>Markdown</li>
</ul>
</body>
</html>
Hasilnya:
Selain menggunakan type, kita juga bisa menggunakan gambar.
Ini dilakukan dengan style CSS.
Contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul style="list-style-image:
url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
</body>
</html>
Hasilnya:
3. Description List di HTML
Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
Ada tiga tag yang digunakan untuk membuat description list:
 <dl> (description list) tag untuk memulai description list;

 <dt> (description term) tag untuk membuat kata yang akan dideskripsikan;
 <dd> (description description) tag untuk membuat penjelasan dari kata.
Format penulisannya seperti ini:
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Description List</title>
</head>
<body>
<h1>Daftar istilah:</h1>
<dl>
<dt>Kopi</dt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah
air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-
mantra.</dd>
<dt>White Coffee</dt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>
Hasilnya:
List di dalam List (Nested List)

List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan
unordered list.
Caranya, list yang di dalam ditulis di dalam tag <li>.
Contoh:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>List di dalam List</title>
</head>
<body>
<h1>Distro Linux dan Keluarganya</h1>
<ol>
<li>Debian
<ul>
<li>Ubuntu</li>
<li>Mint</li>
<li>elementaryOS</li>
</ul>
</li>
<li>RedHat
<ul>
<li>Fedora</li>
</ul>
</li>
<li>Slackware</li>
</ol>
</body>
</html>
Hasilnya:
Apa Selanjutnya?
Materi tentang list sampai di sini ya..
Intinya:
Kamu harus tahu cara membuat list, baik itu ordered list, unordered list, dan juga description list.
Jika masih bingung, silahkan tanyakan di komentar.
Selanjutnya silahkan pelajari:
 Belajar HTML #10: Membuat Tabel pada HTML

petanikode.com
Belajar HTML #10: Cara Membuat Tabel di

HTML
Ahmad Muhardian
5-7 minutes
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
Lalu, bagaimana cara membuat tabel di HTML?
Kita bisa membuatnya dengan beberapa tag yang sudah disediakan di HTML.
Tag untuk Membuat Tabel di HTML

Ada beberapa tag yang harus diingat 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
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang
lain adalah tambahan (opsional), boleh digunakan boleh tidak.
Mari kita lihat contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>
<table>
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasilnya:
Kok tidak ada garisnya?
Iya, karena kita tidak menambahkan atribut border pada tabelnya.
Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag <table>.
Sehingga akan menjadi seperti ini:
<table boder="1">
<tr>
</tr>
<tr>
</tr>
</table>
Nilai "1" pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan
semakin besar pula ukuran garisnya.
Nilai "1" adalah ukuran garis yang palng kecil.
Hasilnya akan sepert ini:
Mengatur Jarak Sel dengan Cellpadding

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.
Atribut ini dapat kita berikan kepada tag <table>.
Contoh:
<table border="1" cellpadding="10">

<tr>
</tr>
<tr>
</tr>
</table>
Nilai "10" pada atribut cellpadding adalah ukuran jarak antara teks sel dengan garis.
Maka hasilnya:
Menambahkan Warna pada Sel dan Baris
Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam
tag <td> (untuk sel) atau <tr> (untuk baris).
Contoh:
<table border="1" cellpadding="10">

<tr>
<td bgcolor="yellow">Baris 1 kolom 1</td>
</tr>
<tr bgcolor="#00ff80">
</tr>
</table>
Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna
dalam bahasa inggris.
Maka hasilnya akan seperti ini:

Menggabungkan Sel Tabel
Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:
 rowspan untuk menggbungkan baris;

 colspan untuk mebggabungkan kolom.
Atribut ini bisa kita berikan kepada tag <td> atau <th>.
Mari kita lihat contohnya:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2" bgcolor="yellow">Bulan</th>
<th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
</tr>
<tr>
<th>Padi</th>
<th>Kacang</th>
</tr>
<tr>
<td>Januari</td>
<td>500 Kg</td>
<td>231 Kg</td>
</tr>
<tr>
<td>Februari</td>
<td>342 Kg</td>
<td>423 Kg</td>
</tr>
<tr>
<td>Maret</td>
<td>432 Kg</td>
<td>124 Kg</td>
</tr>
<tr>
<td>April</td>
<td>453 Kg</td>
<td>523 Kg</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Menyisipkan Elemen yang Lain ke dalam Sel

Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti gambar,
link, video, list, dsb.
Contoh:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th colspan="3" bgcolor="yellow">Produk Unggulan</th>
</tr>
<tr>
<td rowspan="4">
<img src="https://www.petanikode.com/img/bibit.png"
width="200" />
</td>
</tr>
<tr>
<td>Nama</td>
<td>Benih Kode</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp 192.000</td>
</tr>
<tr>
<td>Fitur</td>
<td>
<ul>
<li>Dilengkapi Dokumentasi</li>
<li>Ukuran: 31MB</li>
<li>Masa Tanam: 6 Bulan</li>
<li>Lisensi: MIT</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Apa Selanjutnya?
Menurut saya, bagian tersulit saat membuat tabel di HTML adalah saat menggabungkan sel.
Karena kita harus teliti, berapa ukuran sel yang akan digabungkan dengan rowspan dan
colspan.
Saran saya:
Sering-sering latihan dengan contoh kasus tertentu. Coba lihat tabel-tabel yang ada di skeliling
kita, lalu coba buat tabel tersebut dalam HTML.
Berikutnya, silahakn pelajari:
 Belajar HTML #11: Membuat Form pada HTML
petanikode.com
Belajar HTML #11: Cara Membuat Form

pada HTML
Ahmad Muhardian
8-9 minutes
Web tidak hanya digunakan untuk menampilkan informasi saja…
…Web juga digunakan untuk mengambil informasi atau data dari pengunjung.
Salah satu cara untuk mengambil informasi dari pengunjung ialah menggunakan form.
Form dalam web bisa disamakan dengan formuliar di dunia nyata.
Form dapat diisi, kemudian diproses dengan program tertentu.
Pada tutorial ini, kita akan belajar cara membuat form di HTML.
Hanya membuat saja ya…
Tidak sampai memproses datanya.
Karena itu masuk ke dalam topik pembahasan yang lain.
Baiklah…
Mari kita mulai.
Form di HTML dapat kita buat dengan tag <form>.

Tag ini memiliki beberapa atribut yang harus diberikan, seperti:
 action untuk menentukan akasi yang akan dilakukan saat data dikirim;
 method metode pengiriman data.
Contoh:
<form action="prosess.php" method="GET">


</form>
Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang akan
memproses form.
Secara sederhana,—pada contoh di atas— kita akan menyuruh file prosess.php untuk
memproses data form.
Ini nanti akan kita pelajari pada PHP.
Kode HTML di atas, tidak akan menghasilkan apa-apa.
Karena kita belum membuat field-nya.
Apa itu Field?

Field adalah ruas yang dapat diisi dengan data.
Contoh field:
<input type="text" name="info" />
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.
Latihan: Membuat Form Login

Sebagai latihan, mari kita buat form login.
Pada form login, terdapat beberapa field dan elemen:
1. Field untuk input username atau email;

2. Field untuk input password;
3. Checkbok untuk remember me;
4. Tombol untuk login.
Berikut ini kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form action="login.php" method="POST">
<fieldset>
<legend>Login</legend>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="username..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password"
placeholder="password..." />
</p>
<p>
<label><input type="checkbox" name="remember" value="remember" />
Remember me</label>
</p>
<p>
<input type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
Sekarang perhatikan!
Pada kode di atas, kita membuat empat buah filed:
1. input username dengan tipe text;

2. input password dengan tipe password;
3. input remember dengan tipe checkbox;
4. input submit dengan tipe submit;
Lalu ketiga filed ini dibungkus ke dalam tag <fieldset>.
Nanti tag <fieldset> ini akan membuat sebuah garis.
Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks pada fieldset.
Lalu, perhatikan juga atirbut yang digunakan pada setiap field.
 Atribut placeholder untuk menampilkan teks sementara (placeholder);

 Atribut value untuk membreikan nilai default pada field.
Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan sebuah label
dengan tag <label>.
Latihan Selanjutnya, kita akan membuat form contact. Form ini berfungsi untuk menghubungi
atau kontak admin.
Silahakan ikuti kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Contact</legend>
<p>
<label>Name:</label>
<input type="text" name="name" placeholder="your name..." />
</p>
<p>
<label>Subject:</label>
<input type="text" name="subject" placeholder="subject..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="your email..." />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
Pada contoh di atas, kita memberikan type="email" untuk field email, agar filed ini harus diisi
dengan email saja.
Coba saja isi dengan yang lain, lalu klik Send…maka akan muncul pesan peringatan.
Latihan: Membuat Form Register
Semakin banyak latihan, semakin bagus.
Berikutnya kita akan coba membuat form registrasi.
Form ini berisi field untuk:
 Input nama lengkap;

 Input username;
 Input email;
 Input password;
 Input jenis kelamin;
 Input Agama;
 Input Biografi.
 dsb.
Mari kita buat…
<!DOCTYPE html>
<html>
<head>
<title>Registrasi</title>
</head>
<body>
<fieldset>
<legend>Registrasi</legend>
<p>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Nama lengkap..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="Username..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Your email..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password"
placeholder="Passowrd..." />
</p>
<p>
<label>Jenis kelamin:</label>
<label><input type="radio" name="jenis_kelamin" value="laki-
laki" /> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin"
value="perempuan" /> Perempuan</label>
</p>
<p>
<label>Agama:</label>
<select name="agama">
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
</select>
</p>
<p>
<label>Biografi:</label>
<textarea name="biografi"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Daftar" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
Apa saja field baru yang ada di form tersebut?
1. Field radio;
2. Field <select><option>;
3. Field <textearea>.
Apa bedanya radio dengan checkbox?
Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio.
Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita gunakan checkbox.
Lalu untuk <select></option>, sifatnya sama seperti radio. Cuma dia bentuknya berbeda.
Lalu untuk menginputkan teks yang panjang, kita gunakan tag <textarea>.
Latihan: Membuat Form Tingkat Lanjut

Field-field di atas merupakan jenis field yang sering digunakan dalam pembuatan form.
Masih ada jenis field lagi yang belum kita coba, seperti meter, color, url, number, date,
datetime, dsb.
Mari kita coba beberapa:
<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<fieldset>
<legend>Form</legend>
<p>
<label>Alamat Web:</label>
<input type="url" name="name" placeholder="Masukan URL Web..." />
</p>
<p>
<label>Tanggal Lahir:</label>
<input type="date" name="tanggal" />
</p>
<p>
<label>Umur:</label>
<input type="number" min="10" max="90" name="umur" />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
Apabila di browser anda tidak tampil kalender seperti di atas, coba gunakan browser versi
terbaru.
Apa Selanjutnya?
Apa yang kita pelajari pada tutorial ini adalah tag dan field dasar—dan sering digunakan—dalam
pembuatan form.
Masih terdapat banyak tipe field lagi yang belum kita coba. Seperti: meter, color, time, dsb.
Karena itu, silahkan berlatih terus…
petanikode.com
Belajar HTML #12: Mengenal Elemen
Semantik pada HTML
Ahmad Muhardian
7-9 minutes
Sejauh ini kita sudah mengenal beberapa tag dasar di HTML, seperti elemen paragraf, heading,
list, tabel, link, dan form.
Lalu pertanyaanya:
Bagaimana cara menata elemen-elemen ini agar telihat bagus?
Jawabannya:
Kita butuh sebuah layout.
Nah, di HTML terdapat beberapa elemen yang khusus untuk melakukan ini. Yakni elemen
semantik seperti <header>, <aside>, <footer>, <article>, dll.
Elemen semantik sebenarnya tidak hanya digunakan untuk membuat layout saja. Ia juga
digunakan untuk membuat elemen lain.
Untuk lebih jelasnya, mari kita pelajari lebih detail.

Apa itu Elemen Semantik?
Jadi gini..
Di awal-awal hadirnya HTML dulu, elemen semantik belum ada.
Orang-orang membuat layout dengan menggunakan tag yang salah.
Ada yang membuatnya dengan tag <tabel> dan ada juga dengan tag <div>.
Ini sebenarnya tidak sepenuhnya salah, karena membuat layout dengan kedua tag itu benar-benar
bisa.
Tapi..
Ini bukanlah cara yang baik dan akan membuat kode HTML kita sulit terbaca.
Karena itu.. hadirlah elemen semantik sebagai solusi.
Elemen semantik mulai ditambahkan pada HTML 5.
Elemen semantik adalah elemen-elemen yang menyatakan makna atau tujuan dari elemen itu
sendiri. 1
Misalnya tag <footer>, tag ini digunakan untuk membuat elemen footer atau bagian kaki dari
web.
Jangan gunakan tag ini di bagian paling atas, karena maknanya sudah jelas untuk footer.
Jadi tidak akan ada lagi yang namanya penyalahgunaan tag. Karena setiap tag sudah punya
tujuan masing-masing.
Berikut ini daftar elemen-elemen semantik:
 <article> — untuk membuat elemen artikel;

 <aside> — untuk membuat elemen bagian samping;
 <details> — untuk membuat elemen datail atau spoiler;
 <figcaption> — untuk membuat teks caption pada figure;
 <figure> — untuk membuat figur atau gambar pada artikel;
 <footer> — untuk membuat elemen bagian kaki dari web;
 <header> — untuk mebuat kepala kop dari web;
 <main> — untuk membuat elemen utama;
 <mark> — untuk menandai teks;
 <nav> — untuk membuat navigasi;
 <section> — untuk membuat bagian artikel;
 <summary> — untuk membuat ringkasan artikel atau isi spoiler;
 <time> — untuk membuat elemen yang menyatakan waktu;
 dan masih banyak lagi.
Mengapa Harus Pakai Elemen Semantik?

Salah satu keuntungan menggunakan elemen semantik adalah dokumen HTML kita akan mudah
dibaca, baik itu oleh manusia maupun mesin.
Coba perhatikan kode berikut:
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
Ini adalah contoh layout yang dibuat dengan tag <div>. Tag ini memang bagus untuk
membungkus elemen HTML.
Kamu mungkin akan mudah paham dengan membaca nama-nama class yang diberikan pada
elemen <div>.
Ada <div> yang bertugas untuk membuat elemen header, article, footer, dan sebagainya.
Sekilas, tidak ada masalah dengan ini..
Tapi nanti kalau elemen <div> nya sudah banyak, kita akan kesulitan membacanya.
Sekarang coba bandingkan dengan kode ini:
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Ini tentunya akan lebih muda dibaca.
Oh iya, elemen semantik juga bagus untuk SEO. Jadi kalau mau websitemu disukai mesin
pencari, sebaiknya gunakanlah elemen ini.
Membuat Layout dengan Elemen Semantik

Nah, sekarang mari kita belajar membuat layout dengan ellemen semantik.
Biatlah file baru dengan nama layout.html, kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Layout dengan Elemen Semantik</title>
</head>
<body>
<header>
<h1>Belajar Elemen Semantik di HTML</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<article>
<h1>Tutorial Semantik Elemen untuk Pemula</h1>
<p>Semantik elemen adalah elemen yang memiliki makna dan tujuan.
Tujuannya agar kode HTML mudah dibaca dan tidak ada penyalahgunaan tag.
Elemen semantik bagus untuk SEO dan juga dapat meningkatkan
accessibility.
</p>
</article>
<footer>
Copyright © 2020 by Petani Kode
</footer>
</body>
</html>
Setelah itu, buka dengan web browser.
Maka hasilnya:
Hasilnya akan terlihat biasa saja dan sama seperti contoh-contoh sebelumnya. Ini karena kita
belum memberikan style CSS.
Karena itu, mari kita coba memberikan style CSS untuk elemen semantik.
Style untuk Elemen Semantik

Cara memberikan style untuk elemen semantuk sama saja seperti memberikan style pada elemen
lainnya. Tinggal membuat atribut style, lalu mengisinya dengna kode style CSS.
Oke, sekarang coba ubah contoh yang tadi menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Layout dengan Elemen Semantik</title>
</head>
<body style="background-color: silver;">
<header style="background-color: white;">

<h1>Belajar Elemen Semantik di HTML</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<article style="background-color: white;">

<h1>Tutorial Semantik Elemen untuk Pemula</h1>
<p>Semantik elemen adalah elemen yang memiliki makna dan tujuan.
Tujuannya agar kode HTML mudah dibaca dan tidak ada penyalahgunaan tag.
Elemen semantik bagus untuk SEO dan juga dapat meningkatkan
accessibility.
</p>
</article>
<footer style="background-color: white;">

Copyright © 2020 by Petani Kode
</footer>
</body>
</html>
Kita memberikan warna latar untuk elemen body dan juga beberapa elemen semantik.
Maka hasilnya:
Mencoba Elemen Semantik Lainnya

Tidak semua elemen semantik bertujuan untuk membuat layout, ada juga beberapa elemen
semantik lainnya yang bertujuan untuk membuat elemen tertentu.
Mari kita pelajari elemen semantik lainnya..
Elemen <detail> dan <summary>

Tag <detail> dan <summary> merupakan tag untuk membuat elemen spoiler.
Tag <detail> akan berisi semua detail konten, lalu tag <summary> akan menjadi tombol yang
bisa diklik untuk menampikan detail isinya.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Elemen Semantik</title>
</head>
<body>
<article>
<h1>Laptop Terbaik untuk Programmer</h1>
<details>
<summary>Lihat Spesifikasi</summary>
Prosesor: Intel Core i9, RAM 32GB, SSD 1TB, HDD 4TB
</details>
</article>
</body>
</html>
Hasilnya:
Elemen <time>
Tag <time> merupakan tag untuk membuat elemen waktu. Elemen waktu biasanya dibutuhkan
untuk menampilkan waktu.
Misalnya:
Waktu saat sebuah postingan dibut, waktu saat sebuah pesan dibaca, waktu keberangkatan, dan
lain sebagainya.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Elemen Semantik</title>
</head>
<body>
<article>
<h1>Waktu di HTML</h1>
<p>
Ditulis pada <time datetime="2020-20-07">20 July 2020</time>
</p>
<p>
Hari ini saya ada acara dari pukul <time>08:00</time> sampai pukul
<time>10:00</time>.
</p>
</article>
</body>
</html>
Hasilnya:
Elemen <time> akan ditampikan apa adanya. Atribut datetime berfungsi untuk memberikan
nilai tanggal dan waktu yang nantinya akan dibaca oleh program.
Apa Selanjutnya?
Kita baru saja belajar tentang elemen semantik.
Intinya, kamu harus menggunakan elemen semantik agar kode HTML-nya mudah dibaca.
Nggak pakai elemen semantik, websitemu bisa dibilang masih kuno 😄.
Jadi pakailah elemen semantik.
 Belajar HTML #13: Menambahkan Video pada HTML
📖 lihat juga tutorial lainnya di List Tutorial HTML
1. https://developer.mozilla.org/en-US/docs/Glossary/Semantics ↩︎
petanikode.com
Belajar HTML #13: Cara Menambahkan

Video pada Web
Ahmad Muhardian
7-9 minutes
Pada tutorial sebelumnya, kita sudah belajar cara menambahkan gambar di HTML. Namun, ini
belumlah cukup.. karena sekarang konten di web tidak hanya dalam bentuk teks dan gambar saja.
Konten lainnya yang bisa ditambahkan di HTML adalah audio dan juga video.
Nah, pada tutorial ini.. kita akan belajar cara menambahkan video di HTML.
Mari kita mulai…
Kita membutuhkan sebuah media player untuk menampilkan video di HTML.
Dulu..
Sebelum ada HTML 5, media player di HTML dibuat dengan program eksternal seperti adobe
flash.
Namum, kini sudah tidak dipakai lagi.

HTML sekarang punya tag baru untuk membuat media player, yakni tag <video>.
Jika tag video di buka pada browser yang tidak mendukungnya, maka teks browser tidak
mendukung tag video akan ditampilkan.
Tapi, kalau mendukung.. videonya yang akan ditampilkan.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Video di HTML</title>
</head>
<body>
<h1>Contoh Video di HTML</h1>
<video controls>
<source src="cat-herd.webm" type="video/webm" />
Browsermu tidak mendukung tag ini, upgrade donk!
</video>
</body>
</html>
File videonya kamu bisa download di: 🎞 cat-herd.webm
Hasilnya:
Live Demo
Pada contoh di atas, kita menuliskan secara langsung nama video yang akan ditampilkan. Ini
karena videonya berada dalam satu folder dengan file HTML.
Jika video tersebut tersimpan di folder yang berbeda, maka perlu ditulis alamat folder atau path-
nya.
Misalkan, saya meneruh videonya di dalam folder video. Maka, alamat path yang digunakan
adalah:
<video>
<source src="video/nama-video.mp4">
</video>
..dan jika videonya berada di website yang berbeda, maka kita harus mengisi atribut src dengan
URL lengkap dari video.
<video>
<source src="https://www.petanikode.com/img/html-video/cat-herd.webm">
</video>
Format Video yang Didukung
Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format video yang
didukung: 1
Format FILE Media Type

MP4 video/mp4
WebM video/webm
Ogg video/ogg
Jika kamu punya video dengan format yang berbeda dari ketiga format tersebut, maka kamu
harus mengubahnya agar bisa ditambahkan ke HTML.
Atribut untuk Video

Tag <video> punya beberapa atribut yang bisa diberikan:
Nama Atribut Nilai Fungsi

autoplay true/false
Agar video diputar otomatis
controls true/false Untuk mengaktifkan control video player
loop true/false Untuk memutar video terus menerus
muted true/false Untuk menonaktifkan audio
poster Image Path Untuk menentukan gambar cover dari video
width & height angka Untuk menentukan tinggi dan lebar video
playsinline true/false Untuk memutar video secara ‘inline’
Jika atribut bernilai true, maka ia boleh ditulis namanya saja.
Contoh:
<video loop="true">
<source src="video.mp4" />
</video>
Bisa disingkat menjadi:
<video loop>
</video>
Jika nilai atribut bernilai false, maka atribut tersebut boleh tidak ditulis atau juga boleh ditulis.
Contoh:
<video loop="false">
</video>


<video>
</video>
Nah, untuk atribut lainnya, kamu bisa cek di MDN: The Video Embed element
Video Sebagai Gambar Animasi Gif

Banyak website modern saat ini menggunakan video sebagai ganti dari animasi gif. Bahkan juga
Google menyarankan untuk menggunakan video daripada gif.2
Mengapa?
Karena ukuran file dari video jauh lebih kecil dibandingkan dengan gif dan juga tentunya akan
mempengaruhi kecepatan download.
Nggak percaya?
Mari kita bandingkan:
File cat-herd.gif
punya ukuran 3,6 MB setelah saya covert formatnya menjadi MP4 dan Webm, ukurannya
menjadi sangat kecil.
Terbukti kan, file video lebih kecil daripada gif.
Lalu, bagaimana cara membuat video menjadi gambar gif di HTML.
Caranya sama seperti menambahkan video biasa, tapi kita harus mengaktifkan beberapa atribut
seperti autoplay, muted, playsinline dan loop.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Contoh Video sebagai gif</h1>
<video autoplay loop muted playsinline>
<source src="cat-herd.webm" type="video/webm" />
<source src="cat-herd.mp4" type="video/mp4" />
</video>
</body>
</html>
Hasilnya:
Live Demo
Subtitle untuk Video

Subtitle adalah teks yang akan ditampilkan dalam video. Biasanya digunakan untuk terjemahan
atau alih bahasa dari video dan juga untuk membantu tuna rungu (orang tuli) untuk menyerap
informasi pada video.
Subtitle pada HTML dapat kita tambahkan dengan tag <track>. Tag ini memiliki atribut src
yang akan digunakan untuk menambahkan file subtitle.
Format file subtitle untuk video di dalam HTML adalah WebVTT (.vtt) atau Web Video Text
Track. File .vtt ini bisa dibuat dengan teks editor.
Jika kamu punya subtitle dengan format SubRip Text (.srt), kamu bisa mengubahnya menjadi
.vtt di srt2vtt
Sekarang mari kita coba contohnya: video-subtitle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Video Subtitle</h1>
<video controls>
<source src="cat-herd.webm" type="video/webm"/>
<source src="cat-herd.mp4" type="video/mp4"/>
<track src="cat-herd-id.vtt" kind="subtitles" srclang="id"
label="Indonesia"/>
</video>
</body>
</html>
Dan berikut ini isi file: cat-herd-id.vtt

WEBVTT
0
00:00:00.000 --> 00:00:03.000
Para penunggang kuda.
1
00:00:04.000 --> 00:00:08.000
Kucing berlari.
Hasilnya:
Catatan penting:
Subtitle tidak akan ditampilkan jika kita membuka file HTML secara langsung dari browser.
Coba perhatikan di bagian address bar, jika di sana ada tulisan File.. berarti kita membuka file
HTML secara langsung.
Namun, jika di address bar ada HTTP atau HTTPS.. itu artinya kita membuka file HTML
melalui web server.
..dan juga jika format file .vtt tidak benar, subtile tidak akan ditampilkan.
Pastikan formatnya valid, silahkan gunakan Live WebVTT Validator
untuk pengecekan.
Menmabahkan Video dari Youtube

Saat tidak ingin repot-repot mengubah format video, kita bisa manfaatkan Youtube.
Tinggal upload saja videonya ke Youtube. Nanti kita akan dapat id unik dari video. Id unik ini
bisa kita dapatkan dari URL video.
Contoh: N7iY-jNWeFc
Youtube sendiri sudah punya media player, jadi kita tidak pelu membuatnya dengan tag
<video>.
Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah <iframe>. Tag ini
sebenarnya berfungsi untuk menambahkan halaman lain dalam sebuah frame.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Video dari Youtube</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/N7iY-
jNWeFc"></iframe>
</body>
</html>
Perhatikan URL yang digunakan pada atribut src, di sana kita menggunakan /embed/. Ini
adalah halaman yang digunakan khusus untuk embed video dari Youtube.
Hasilnya:
Sebenarnya ada cara gampangnya..
Pada video Youtube yang ingin kita embed, klik saja tombol share.
Maka akan muncul opsi untuk share video, pilih saja embed..
..dan kita akan mendapatkan kode HTML untuk embed videonya.
Kode ini bisa kita copy ke file HTML.
Apa Selanjutnya?
Kita sudah belajar cara menampilkan video. Baik itu video dari file lokal dan juga video dari
Youtube.
Nah, berikutnya silahkan pelajari tentang:
 Belajar HTML #14: Menambahkan Audio pada HTML
1. HTML Video
 ↩︎
 Replace animated GIFs with video for faster page loads
2. ↩︎
petanikode.com
Belajar HTML #14: Cara Menambahkan

Audio pada HTML
Ahmad Muhardian
6-8 minutes
Sekali lagi..
Konten dalam web, tidak hanya dalam bentuk teks dan gambar saja. Tapi juga bisa dalam bentuk
multimedia seperti audio dan video.
Pada tutorial ini, kita akan fokus membahas tentang audio di HTML.
Konten audio biasanya berbentuk podcast, audiobook, dan musik.
Lalu pertanyaanya:
Bagaimana cara menambahkan audio di HTML?
Mari kita bahas…
Sebelum adanya HTML 5, audio di HTML ditambahkan dengan program eksternal seperti flash
player.
Namun, kini HTML sudah punya tag sendiri yakni <audio>.
Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang
akan diputar dengan tag <source>.
Contoh: 📄 contoh-audio.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Audio di HTML</title>
</head>
<body>
<h1>Contoh Audio di Web</h1>
<audio controls>
<source src="Ngoni.mp3" type="audio/mpeg">
Browsermu tidak mendukung tag audio, upgrade donk!
</audio>
</body>
</html>
File audionya bisa kamu download di: 🎵 Ngoni.mp3
(6.2 MB)
Hasilnya:
Perhatikan!
Pada atribut src, kita menulis langsung nama file audio yang akan diputar. Ini karena kita
menaruh file tersebut dalam satu folder yang sama dengan file HTML.
Jika file audio tersimpan di folder yang berbeda, maka harus ditulis alamat path menuju folder
tersebut.
Misalkan, saya menaruhnya di dalam folder 📁 audio,

maka atribut src bisa diisi seperti ini:
<audio controls>
<source src="audio/Ngoni.mp3" type="audio/mpeg">
</audio>
…dan jiga file audionya tersimpan di website yang berbeda, maka kita harus mengisinya dengan
alamat URL.
<audio controls>
<source src="https://github.com/petanikode/belajar-
html/raw/master/audio/Ngoni.mp3" type="audio/mpeg">
</audio>
Format File Audio yang didukung

Audio player di HTML tidak mendukung semua jenis format file audio. Berikut ini daftar format
file audio yang bisa diputar di HTML. 1
Format Container MIME type

PCM WAV audio/wav
Format Container MIME type
MP3 MP3 audio/mpeg
AAC MP4 audio/mp4
AAC AAC audio/aac
AAC AAC audio/aacp
Vorbis Ogg audio/ogg
Vorbis WebM audio/webm
Opus Ogg audio/ogg
Opus WebM audio/webm
FLAC FLAC audio/flac
FLAC Ogg audio/ogg
Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A), karena ukuran filenya relatif
kecil. Sementara format FLAC adalah format file audio dengan kualitas tinggi dan ukuran
filenya relatif lebih besar.
Atribut untuk Audio

Tag <audio> punya beberapa atribut yang sering digunakan:
1. controls
Atribut ini berfungsi untuk mengaktifkan tombol kontrol seperti tombol play, pause, stop, scroll,
dan volume).
Contoh penggunaan:
<audio controls="true">
</audio>

<audio controls>
</audio>
Jika bernilai true, maka nilainya boleh tidak diisi. Nilai true artinya, kita akan mengaktifkan
tombol kontrol dan jika nilainya false maka artinya tombol kontrol tidak diaktifkan.
3. autoplay
Atribut ini berfungsi untuk memutar audio secara otomatis. Nilai yang bisa diberikan pada
atribut ini adalah true dan false.
Nilai true artinya kita akan memutar audio secara otomatis, dan false artinya audio tidak akan
diputar secara otomatis.
Contoh:
<audio autoplay="true">
</audio>

<audio autoplay>
</audio>
✍️Catatan: Atribut ini mungkin saja tidak akan bekerja pada Google Chrome, karena ada
perubahan policy
(kebijakan) dalam memutar audio secara otomatis.
4. loop
Atribut loop berfungsi untuk mengulang-ulang pemutaran audio. Ini seperti repeat one. Nilai
yang bisa diberikan adalah true dan false.
Contoh:
<audio loop="true">
</audio>

<audio loop>
</audio>
5. muted
Atribut ini berfungsi untuk mensenyapkan audio. Nilai yang bisa diberikan adalah true dan
false.
Contoh:
<audio muted="true">
</audio>

<audio muted>
</audio>
Audio Sebagai Background

Audio kadang sering digunakan sebagai background. Biasanya menggunakan musik.
Tujuan menambahkan background agar menambah kesan tertentu pada web. Misalkan, ingin
membuat pengunjung merasa santai.. maka kita bisa memutar audio musik yang santai.
Cara membuat musk sebagai background adalah dengan menambahkan atribut autoplay, loop,
dan menghilangkan kontrol (hidden).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh audio sebagai background</title>
</head>
<body>
<h1>Contoh audio sebagai background</h1>
<audio hidden autoplay loop>
<source src="Ngoni.mp3" type="audio/mpeg">
Browsermu tidak mendukung tag audio
</audio>
</body>
</html>
Hasilnya:
Nggak ada suaranya?
Sekali lagi, atribut autoplay mungkin tidak bekerja di Google Chrome karena ada pembaharuan
kebijakan dalam memutar audio.
Sekarang kita coba buka dengan Mozilla Firefox.

Hasilnya sama saja, tidak ada suaranya.
Ini karena autoplay diblokir otomatis.
Sekarang kita coba ubah izin untuk memutar audio secara otomatis. Klik ikon autoplay pada
address bar di dekat ikon (i), sehingga muncul seperti ini:
Pada bagian Autoplay, ubah Block Audio menjadi Allow Audio and Video.
Setelah itu, coba refresh atau reload.
Maka suaranya akan terdengar.

Apa Selanjutnya?
Sejauh ini kita sudah belajar banyak tag. Sudah saatnya untuk belajar membuat web kecil-kecilan
dengan ilmu HTML yang kita pelajari.
Karena itu, selanjutnya kita akan belajar:
 Belajar HTML #15: Membuat Project Web Pribadi dengan HTML
1. HTML5 audio
1. ↩︎
petanikode.com
Belajar HTML #15: Membuat Project Web

Pribadi dengan HTML
Ahmad Muhardian
8-10 minutes
Kini tiba saatnya kamu melatih ilmu HTML yang sudah dipelajari.
Pada tutorial ini, kita akan mencoba membuat project web kecil-kecilan. Tujuannya untuk
berlatih dan memahami bagaimana cara membuat web.
Baiklah..
Langsung saja kita mulai.
Step 1 – Membuat Desain Web

Pembuatan web dimulai dengan desain. Kalau tidak ada desain, nanti kita akan kesulitan dan
tidak akan tahu mau buat apa.
Biasanya desain web dikerjakan oleh desainer, setelah itu diserahkan ke programmer untuk
diubah menjadi HTML.
Pada project ini, kita akan membuat tiga halaman web, yakni home, contact, dan about. Desain
yang digunakan adalah desain dalam bentuk wireframe atau sketsa.
Berikut ini desain untuk tiap-tiap halaman:
1. Desain Halaman Home

Halaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka
website. Halaman ini berisi menu, foto, teks, dan tabel.
2. Desain Halaman Contact

Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik website.
3. Desain Halaman About

Halaman about adalah halaman yang berisi informasi lengkap tentang website.
Step 2 – Memulai Project Web

Silahkan buat folder baru dengan nama websiteku.
Setelah itu buat folder image dan video di dalam folder websiteku. Folder image akan kita
gunakan untuk menyimpan gambar dan video untuk menyimpan video.
Sehingga nanti stuktur folder kita akan menjadi seperti ini:
 📁 image
o ️foto-profile.jpg
 📁 video
o 🎞 video-about.webm
 📄 cv-name.pdf
 📜 index.html
 📜 contact.html
 📜 about.html
 ️favicon.ico
File yang perlu kamu persiapkan di tahapan ini adalah foto-profile.jpg dan video-
about.webm.
Berikutnya, kita akan mulai menulis kode. Silahakn buka folder websiteku dengan Visual
Studio Code.
Caranya:
Klik menu File, lalu pilih Open Folder dan carilah folder websiteku.
Degan begini, kita sudah siap untuk menulis kode.
Step 3 – Membuat Halaman Home

Silahkan buat file baru bernama index.html di dalam folder websiteku.
Setelah itu, isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ahmad Muhardian Personal Website</title>
</head>
<body>
<nav>
<a href="index.html">Home</a> |
<a href="cv-dian.pdf">Download CV</a> |
<a href="contact.html">Contact</a> |
<a href="about.html">About me</a>
</nav>
<hr />
<header style="text-align: center;">

<img src="image/foto-profile.jpg" width="200" height="200"
style="border-radius: 50%;"/>
<h1>Ahmad Muhardian</h1>
<p>(Web Developer)</p>
</header>
<hr />
<article style="text-align: center;">

<h2>Overview</h2>
<p>
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode
</p>
</article>
<div style="max-width: 600px; margin: 3em auto">

<table border="1" width="100%">
<thead>
<tr>
<th>Skill</th>
<th>Pengalaman</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>HTML (Expert)</li>
<li>CSS (Beginner)</li>
<li>Javascript (Beginner)</li>
</ul>
</td>
<td>
<ul>
<li>Freelancer di Internet</li>
<li>Leaeder Local Linux Community</li>
<li>Leaeder Local Linux Community</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr>
<footer style="text-align: center;">
<p>Copyright © 2020 Ahmad Muhardian.</p>
</footer>
</body>
</html>
Jangan lupa untuk mengubah nama Ahmad Muardian dengan nama kamu.
Jika kita coba membuka file index.html, maka hasilnya akan seperti ini:
Gambarnya tidak bisa tampil karena kita belum menambahkan file gambar di dalam folder
image.
Silahkan tambahkan file gambar dengan nama foto-profile.jpg. Pastikan gambar yang
ditambahkan memiliki ukuran persegi atau rasio 1:1. Pada proyek ini, saya menggunakan gambar
dengan ukuran 200x200 piksel.
Download file gambar: ⬇️foto-profile.jpg
Setelah itu, coba refresh halaman home atau index.html.
Maka haslinya:
Step 4 – Membuat Halaman About Me

Buatlah file HTML baru dengan nama about.html.
Kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav>
</nav>
<hr />
<article>
<h1>About Me</h1>
<p>
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
</p>
<p>
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
</p>
<p>
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
</p>
<p>
<video controls>
<source src="video/video-about.webm" type="video/webm"/>
</video>
</p>
</article>
<hr>
</footer>
</body>
</html>
Sama seperti halaman home, halaman ini juga memiliki konten berupa video untuk ditampilkan.
Tapi file videonya belum ada.
Sudah pasti videonya tidak akan bisa ditampilkan:

Karena itu, silahkan tambahkan file video-nya ke dalam folder video dengan nama video-
about.webm.
Jika kamu belum punya filenya, silahkan download di link ini:
⬇️video-about.webm
Setelah itu, coba buka dan refresh halaman about.
Maka hasilnya:
Buatlah file baru dengan nama contact.html.
Kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav>
</nav>
<hr />
<div>
<h1>Contact Me</h1>
<form>
<label for="email">Email</label><br />
<input type="email" name="email" placeholder="alamat email"/>
<br />
<label for="message">Pesan</label><br />
<textarea name="message" placeholder="Tulis pesan anda..."
rows="4" cols="80"></textarea>
<br />
<br />
<input type="submit" value="Kirim" />
</form>
</div>
<hr>
</footer>
</body>
</html>
Hasilnya:
Form contact ini belum bisa berfungsi, karena kita belum membuat kode untuk mengirim data.
Step 6 – Membuat Fitur Download CV

Fitur ini sebenarnya paling gampang dibuat. Kita hanya perlu menambahkan file cv-dian.pdf
ke dalam folder websiteku.
Download file: ⬇️cv-dian.pdf

Setelah itu, coba klik menu Download CV. Jika PDF-nya terbuka, maka link ini sudah benar.
Step 7 – Membuat Ikon untuk Web

Agar websitenya terlihat menarik, kita akan membuat ikon atau favicon. Silahkan buka favicon-
generator.org
kemudian pilih gambar yang akan dijadikan ikon.

Setelah itu, kita akan mendapatkan link download dan juga kode HTML yang harus ditambahkan
ke dalam tag <head> agar ikon bisa ditampilkan.
Setelah kita mendapatkan ikon, simpan ikonnya ke dalam folder websiteku.

Terakhir, tugas kita tinggal membuat kode HTML untuk menampilkan ikon. Silahkan copy kode
berikut:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<link rel="icon" href="favicon.ico" type="image/x-icon">
Kemudian paste di dalam tag <head> pada setiap halaman.

Maka hasilnya:
Apa Selanjutnya?
Akhirnya selesai juga..
Sebenarnya kamu bisa berkreasi sebebas mungking, tanpa harus mengikuti desain di tutorial ini.
➡️Belajar HTML #16: Cara Hosting HTML di Netlify
Agar websitemu bisa dibuka oleh banyak orang.
petanikode.com
Belajar HTML #16: Cara Hosting Website di

Netlify (Kurang dari 30 detik, langsung go
online)
Ahmad Muhardian
7-9 minutes
Sebenarnya banyak penyedia layanan hosting untuk web statis.

Ada yang berbayar, ada juga yang gratis.
Lalu..
Mengapa memilih Netlify?
Netlify, sangat cepat dan mudah.
Mereka mengklaim:
“Hosting web di netlify tidak sampai 30 detik”
Apakah benar demikian?
Mari kita sama-sama buktikan..
Apa itu Netlify?

Netlify adalah penyedia layanan hosting untuk static site dengan berbagai fitur menarik.
Netlify menyediakan semua kebutuhan untuk workflow web development zaman now.
Mengapa saya bilang zaman now?
Karena di Netlify tidak menggunakan FTP seperti yang biasa kita temukan pada shared hosting.
Netlify menggunakan Git dan CI/CD untuk melakukan deployment. Kedua alat ini sangat
membantu dalam melakukan deployment.
Selain itu, Netlify juga menyediakan fitur untuk mengelola DNS, SSL atau HTTPS diberikan
gratis, form, function, dan lain-lain.
Soal Harga bagaimana?
Tenang saja, kabar baiknya Netlify sangat bersahabat dengan kantong mahasiswa. Cek saja di
halaman pricing
untuk melihat paket hosting yang tersedia.

Ada paket Starter, yang ini gratis. Tapi jika ingin berlangganan yang Pro juga bisa.
Saran saya, mulai dulu pakai paket Starter. Kalau ingin fitur yang lebih, baru upgrade ke Pro.
Oh iya, web petanikode juga pernah pakai yang starter dan sudah berjalan hampir selama 2
tahun. 😊
Tapi karena ramainya pengunjung membuat bandwidth-nya cepat habis. Netlify memberikan
jatah 100GB bandwidth per bulan untuk paket starter.
Jika melewati baatasan bandwidth tersebut, websitemu tidak akan bisa dibuka.
Cara Mendaftar Akun Netlify

Silahkan buka halaman pendaftaran akun Netlify
Kemudian, kita bisa daftar dengan akun Github, Gitlab, Bitbucket, dan Email. Silahkan pilih
salah satu metode pendaftaran yang akan kamu gunakan.
Jika kita menggunakan email, maka kita akan diminta alamat email dan password.
Setelah sukses mendaftar, kita akan memiliki halaman dashboard seperti berikut.
Upload Website ke Netlify
Netlify tidak seperti shared hosting yang harus pakai FTP untuk upload website.
Di sini kita bisa gunakan dua cara:
1. Menggunakan Git
2. Drag/Drop
Yang paling gampang adalah drag/drop, jika kamu ingin menggunakan Git.. pastikan sudah
paham dulu tentang git.
O ya, kamu bisa belajar Git di:
 📖 Tutorial Git untuk Pemula
Tapi, karena kondisi kita di sini belum tau Git.. maka kita akan gunakan teknik drag/drop.
Baiklah, siapkan terlebih dahulu website yang akan di-upload. Kita akan menggunakan 📁
websiteku yang sudah buat pada project web di tutorial sebelumnya.
Silahkan drag/drop folder 📁 websiteku ke dashboard Netlify dan tunggulah sampai proses
upload selesai.
Tunggulah sampai status production-nya menjadi published.

Ini artinya, website kita sudah berhasil di-upload dan dipublikasi di Netlify.
Wow, benar kan..
Tidak sampai 30 detik, website kita sudah go online 🤩.
Keren ya.
Jika kita perhatikan, website yang diupload akan mendapatkan alamat domain acak seperti
silly-blackwell-3e7430.netlify.app.
Domain ini gratis diberikan oleh Netlify..

..dan kita juga bisa mengubahnya sesuai selera.
Sekarang coba klik alamat domain tersebut, maka kita akan bisa melihat hasil website yang baru
saja kita upload.
Gampang banget kaan…
Nah, sekarang kita akan coba mengubah nama domainnya agar mudah diingat.
Mengubah Nama Domain

Silahkan masuk ke Domain Settings.
Pada bagian sebelah kanan, klik option kemudian pilih Edit site name.
Pada jendela pop-up yang muncul, ubahlah nama domainnya dengan nama yang kamu inginkan.
Sebagai contoh, saya akan mengubah namanya dengan belajarhtml.

Jika nama domain tersebut, belum diambil orang atau belum ada yang pakai.. maka saya akan
bisa menggunakannya.
Jadi nanti websitenya akan bisa dibuka melalui https://belajarhtml.netlify.app.
Oh iya, kita juga bisa menambahkan custom domain dengan mengklik add custom domain.
Jika kamu sudah punya alamat domain, kamu bisa pointing alamat Name Server-nya ke server
Netlify.
Website sudah berhasil kita upload.
Tapi, bagaimana cara update jika ada perubahan?
Caranya sangat gampang..
Kita hanya perlu mengupload ulang folder websitenya.
Silahkan masuk ke menu Deploys.

Setelah halaman deploys terbuka, di sana kita bisa upload ulang websitenya.
Website akan di-deploy ulang dengan yang baru.
Konfigurasi Netlify Form

Netlify form adalah fitur yang diberikan netlify untuk mengelola form. Fitur ini memungkinkan
pengunjung web untuk mengisi form dan mengirimnya ke pemilik website.
Cara mengaktifkan netlify form sangat gampang, kita hanya perlu menambahkan atribut
netlify pada tag <form>.
<form method="POST" netlify>

</form>

<form method="POST" netlify="true>

</form>
Oke sekarang mari kita ubah lagi website yang sudah kita buat. Buka file contact.html,
kemudian ubah kode di bagian tag <form> menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<nav>
</nav>
<hr />
<div>
<h1>Contact Me</h1>
<form method="POST" netlify>
<label for="email">Email</label><br />
<input type="email" name="email" placeholder="alamat email" />
<br />
<label for="message">Pesan</label><br />
<textarea name="message" placeholder="Tulis pesan anda..."
rows="4" cols="80"></textarea>
<br />
<br />
<input type="submit" value="Kirim" />
</form>
</div>
<hr>
</footer>
</body>
</html>
Setelah itu, upload ulang websitenya di halaman deploys. Tunggulah sampai status deploy-nya
menjadi published.
Nah, sekarang coba buka websitenya
dan isilah form kontak.
Jika berhasil tampil halaman Thank you! berarti data yang kita inputkan berhasil terkirim ke
pemilik website.
Untuk memastikan sudah terkirim atau tidak, kita bisa cek di menu form atau inbox dari email
yang digunakan untuk mendaftar netlify.
Berikut ini contoh isi pesan yang kita terima dari form.
Sejauh ini website kita sudah berjalan dengan baik.
Lalu.. apa Selanjutnya?

Selamat! 🎉 🎉 🎉
Kamu baru saja menyelesaikan seri tutorial HTML untuk pemula. Tutorial basic ini, kita akhiri
sampai di sini ya..
Berikutnya, kamu bisa lanjutkan dengan belajar CSS ataupun belajar Javascript:
 📖 Tutorial CSS untuk Pemula

 📖 Tutorial Javascript untuk Pemula
Saran saya:
Sebaiknya belajar CSS dulu.. baru setelah itu belajar Javascript.
Nah, untuk meningkatkan pemahamanmu tentang HTML, cobalah untuk berlatih lagi membuat
website sederhana dan pelajari tag-tag yang belum dibahas di seri tutorial ini.
Seperti:
 Tag canvas untuk pemrograman grafis di HTML

 Cara Menampilkan Gambar dari Webcam di HTML
 Membuat Getaran di Website dengan Vibration di HTML
 dll.
Akhir kata..
Semoga bermanfaat.
Tutorial HTML: Cara Membatasi Nilai Input

Maksimum dan Minimum pada Form
#HTML5 #HTML
Atribut min dan max merupakan atribut untuk membatasi nilai maksimum dan minimum yang
boleh diinputkan pada form. Atribut ini biasanya digunakan pada inputan yang berkaitan dengan
angka.
Misalnya tidak boleh menginput angka negatif, angka lebih dari 10, tanggal kurang dari tahun
2000, dsb.
Sedangkan untuk inputan berupa teks, atribut ini tidak bisa bekerja.
Mari kita coba langsung dengan contoh:

Tidak Boleh input Angka Negatif pada Form
Agar tidak bisa menginputkan anka negatfi, maka kita perlu batasi nilai minimanya menjadi nol
(0).
<input type="number" min="0" />
Kode di atas akan menghasilkan:
Coba masukkan angka negatif dengan mengklik ikon arah bawah ⬇️, maka hasilnya akan mentok
di nilai 0.
Tapi…
Kita masih bisa memberikan nilai negatif dengan mengetik langsung. Bagaimana donk?
Yap, itu memang bisa dilakukan. Namun saat kita melakukan submit HTML 5 akan memberi
tahu, bahwa nilai inputan salah.
Mari kita coba contoh yang lain.
Hanya Terima Angka dari 1 sampai 5

Nilai yang boleh diinputkan dari 1 sampai 5, maka kita hanya perlu menentukan nilai terkecilnya
1 dan terbesar 5.
<input type="number" min="1" max="5" />
Hanya Boleh Input Tanggal diatas Tahun 2000

Agar tanggal yang dinputkan diatas tahun 2000, maka kita perlu mengatur batas bawahnya (min)
menjadi 2000-12-30.
<input type="date" min="2000-12-30" />
Demo:
Akhir Kata…
Dari beberapa contoh di atas, kita sudah dapat memahami fungsi dari atribut min dan max.
Selanjutnya terserah anda mau diaplikasikan seperti apa.
Referensi: w3schools
petanikode.com
15 Tag HTML yang tidak Memiliki Pasangan

Penutup
Ahmad Muhardian
7-9 minutes
Sebuah elemen dalam HTML terdiri dari tag pembuka dan tag penutup. Namun, ada juga yang
tidak memiliki tag penutup.
Kasihan juga ya, hehe 😄
Meskipun demikian, elemen ini tetap valid dan dapat dibaca browser. Elemen yang tidak
memiliki tag penutup ini juga disebut void element, karena tidak memiliki isi.
Apa saja tag-tag yang tidak memiliki penutup itu?
mari kita simak…
1. Tag <area>
Tag <area> fungsinya untuk mendefinisikan area pada image map. Image map merupakan
sebuah gambar yang memiliki area yang bisa diklik. Tag <area> selalu berada di dalam tag
<map>.
Contoh:
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126"

alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Demo dapat dilihat di: w3schools.com
2. Tag <base>
Tag <base> fungsinya untuk membuat base URL dan target untuk sebuah link relatif. Contoh
penggunaanya:
<!DOCTYPE html>
<html>
<head>
<base href="https://www.w3schools.com/img/" target="_blank">
</head>
<body>
<p><img src="stickman.gif" width="24" height="39" alt="Stickman"> - Notice

that we have only specified a relative address for the image. Since we have
specified a base URL in the head section, the browser will look for the image
at "https://www.w3schools.com/img/stickman.gif".</p>
<p><a href="https://www.w3schools.com">W3Schools</a> - Notice that the link

opens in a new window, even if it has no target="_blank" attribute. This is
because the target attribute of the base element is set to "_blank".</p>
</body>
</html>
Perhatikanlah contoh di atas, gambar stickman.gif akan dicari pada alamat base URL yang
diberikan pada tag <base>. Kemudian, link W3Schools akan dibuka pada jendela baru, karena
pada tag <base> sudah ditentukan targetnya.
Demo: http://jsbin.com/muhawoqifi/edit?html,output
3. Tag <br>
Tag ini fungsinya untuk membuat baris baru. Contoh penggunaanya:
<p>
Langit seolah-olah menangis.<br>
Hujan waktu itu sangat berkesan.
</p>
hasilnya:
Langit seolah-olah menangis.

Hujan waktu itu sangat berkesan.
4. Tag <col>
Tag <col> fungsinya untuk memberikan atribut untuk kolom pada tabel. Tag ini ditulis dalam
tag <colgroup>. Dengan tag <col> ini, kita tidak harus membuat attribut untuk setiap sel tabel
(<td>), karena sudah terwakili olehnya.
Contoh penggunaan:
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
Demo hasilnya: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_col_test
5. Tag <embed>
Tag <embed> fungsinya untuk membuat container untuk aplikasi eksternal atau konten interaktif
seperti animasi flash.
Contoh penggunaan:
<!DOCTYPE html>
<html>
<body>
<embed src="helloworld.swf">
</body>
</html>
Demo: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_embed
6. Tag <hr>
Tag <hr> fungsinya untuk membuat garis horizontal (horizontal row). Contoh penggunaanya:
<h4>Waktu itu...</h4>
<hr>
<p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu</p>
Hasilnya:
Waktu itu...
Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu
7. Tag <img>
Tag yang satu ini pasti sudah banyak yang tahu fungsinya. Yap… benar sekali. fungsinya untuk
menampilkan gambar.
Contoh penggunaan:
<img src="foto-si-doi.jpg">
8. Tag <input>
Tag <input> fungsinya untuk membuat elemen input pada form. Tag ini memiliki atribut type
yang akan menentukan jenis inputannya.
Contoh:
<form action="proses.php" method="POST">

<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="Masuk">
</form>
9. Tag <keygen>
Tag <keygen> fungsinya untuk membuat kunci rahasia pada form. Tag ini digunakan untuk
keamanan.
Contoh penggunaan:
<form action="/action_page.php" method="get">

Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
10. Tag <link>

Tag <link> digunakan untuk mendefinisikan hubungan antara dokumen HTML dengan
resource eksternal seperti CSS. Tag ini juga bisa digunakan untuk membuat favicon.
Contoh penggunaan:
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="favicon.png">
</head>
Tag <meta> digunakan untuk mendefinisikan Metadata sebuah halaman web. Metadata tidak
akan ditampilkan pada halaman web, melainkan akan dibaca oleh mesin atau Bot (robot).
Contohnya, data yang akan tampil pada mesin pencari.
Tag <meta> ini penting untuk SEO (search engine optimization). Jadi, kalau membuat web tanpa
menggunakan tag <meta>, kemungkinan akan sulit terindeks oleh mesin pencari.
Contoh penggunaan tag <meta>:
<head>
<meta name="description" content="Web Programmer pengguna Linux">
<meta name="keywords" content="Programmer,Linux,Petanikode,Petani Kode">
<meta name="author" content="Petani Kode">
</head>
12. Tag <param>

Tag <param> digunakan untuk memberikan parameter kepada plug-in yang di-embed
menggunakan elemen <object>.
Contoh:
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
Hasilnya: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_param
13. Tag <source>

Tag <source> digunakan untuk mendefinisikan sumber file media untuk <audio> dan <video>.
Contoh:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Browser anda tidak mendukung elemen audio.
</audio>
Demo: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_source_src
14. Tag <track>

Tag <track> digunakan untuk mendefinisikan taks untuk elemen media (<audio> dan <video>).
Bisa dalam bentuk subtitle, caption, dan teks lainnya.
Contoh penggunaan:
<video width="320" height="240" controls>

<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
15. Tag <wbr>

WBR merupakan singkatan dari Word Break Opportunity. Tag ini hampir mirip dengan tag
<br>. Bedanya, tag ini tidak langsung membuat baris baru seperti <br>.
Tag ini akan membuat baris baru saat tidak ada lagi ruang di samping.
Contoh penggunaan:
<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>
Maka nanti, kalau ukuran layarnya dipersempit, teks akan ditampilkan sperti ini:
To learn AJAX, you must be familiar with the XML

Http
Request Object.
Itulah 15 tag HTML yang tidak memiliki pasangan penutup. Lalu bagaimana cara menutup tag-
tag ini, sedangkan mereka tidak memiliki pasangan penutup?
Pada XHTML, semua elemen memang harus ditutup. Nah! untuk menutup tag-tag ini, kita bisa
gunakan garis miring (/) di akhir.
Contohnya:
Referensi:
 w3.org
 w3schools.com
 petanikode.com
 Belajar HTML: Cara Validasi Form di

HTML agar Websitemu Lebih Aman
 Ahmad Muhardian
 7-8 minutes


 Validasi data itu penting!
 Mengapa?
 Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan
akibatnya website kita menjadi error.
 Dampak terburuknya:
 Website kita bisa diambil alih atau di-hack.
 Ngeri kan.
 Karena itu..
 Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat.
 Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu
dikirim ke server.
 Dulu.. validasi data di sisi client dilakukan dengan Javascript. Namun, kini kita sudah
dimudahkan dengan fitur terbaru di HTML 5.
 HTML sendiri sudah menyediakan fitur untuk validasi data pada Form. Fitur ini mulai
ditambahkan pada HTML 5.
 Bagaimana cara menggunakannya?
 Mari kita bahas..
 Validasi Type Inputan

 Form memiliki banyak type inputan. Kita akan fokus membahas type inputan teks..
karena ini cukup banyak jenisnya.
 Sebelum HTML5, input teks dan angka dibuat dalam type teks saja.
 Contoh:
 <input type="text" name="tinggi-badan" />
 Padahal nilai yang akan diinputkan nantinya dalam bentuk angka, namun di sana kita
memberikan type text.
 Akibanya user bisa saja menginputkan teks misalnya:
 Kita tidak inigin seperti ini.. data ini tidak valid, seharusnya yang diinputkan adalah
angka 170.
 Nah, untuk mengatasi ini, kita harus menggunakan type inputan number agar nilai yang
diinputkan hanya berupa angka saja.
 <input type="number" name="tinggi-badan" />
 Selain type number, terdapat juga type input yang lainnya.
Type Fungsi
color untuk input kode warna
date Input berupa tanggal
datetime-local Input berupa tanggal dan waktu
email input berupa alamat email

Type Fungsi
file Untuk inputan berupa file
hidden Untuk inputan yang tersembunyi
image Untuk inputan berupa gambar
month Untuk menginputkan bulan
password untuk menginputkan password
range untuk inputan rentang angka
search input teks untuk mengisi kata kunci pencarian
tel untuk menginputkan nomer telepon
time Untuk menginputkan waktu atau jam
url untuk input alamat URL
week Untuk input tanggal dalam seminggu
 Silahkan dicoba-coba sendiri.
 Oh iya, beda jenis input.. nantinya kalau dibuka di HP, akan beda juga jenis keyboard
yang ditampilkan.
 Contoh:
 Type input telepon.


 Lihat keyboard-nya.. di sana yang ditampilkan adalah keypad untuk menginputkan nomer
telepon. Ini karena kita memberikan type inputan tel.
 Contoh yang lainnya:
 Input type search, akan ada tombol search di keyboard.


 Input type date, akan menampilkan form penginputan tanggal.


 Silahkan coba sendiri.
 Validasi: Data tidak Boleh Kosong

 Beberapa field input bersifat penting, misalnya pada form pendaftaran. Nama dan alamat
email itu penting dan harus diisi.
 Nah, untuk memaksa user agar tidak menginputkan data kosong.. kita bisa gunakan
atribut required.
 Contoh:
 <form action="">
 <input type="text" name="name" required/>
 <input type="email" name="email" required />
 <input type="submit" value="daftar" />
 </form>
 Dengan bengini, jika user tidak mengisi data.. ia akan dipaksa untuk mengisinya.

 Validasi: Minimal dan Maksimal

 Masih ingat dengan type input number?
 Pada type inputan ini, semua jenis angka akan valid. Namun, kadang user menginputkan
angka yang salah.
 Misalnya untuk inputan tinggi badan, mereka memberikan nilai -29 atau 9999.
 Tentu ini bukanlah nilai tinggi badan yang valid.
 Karena itu, kita harus menentukan batas minimal dan maksimalnya.
 Caranya:
 Gunakan atribut min dan max.
 Contoh:
 <input type="number" name="tinggi" min="100" max="400"/>
 <input type="submit" value="daftar" />
 </form>
 Maka nilai minimal yang boleh dinputkan adalah 100 dan maksimalnya 400.

 Nah membatasi nilai minimal dan maksimal pada inputan teks, kita bisa pakai atribut
minlength dan maxlength.
 Contoh:
 <label for="name">Name (4 to 8 characters):</label><br>
 <input type="text" id="name" name="name" required
 minlength="4" maxlength="8">
 </form>
 Hasilnya:
 Data Tidak Boleh Diisi

 Ada beberapa jenis inputan yang tidak boleh diisi user. Biasanya nilainya dibuat otomatis
dari sistem.
 Contoh:
 Misalnya kita ingin membatasi agar user tidak mengubah username. Maka kita bisa
disable field pengisian username dengan atribut disabled.
 <input type="text" name="username" value="petanikode" disabled/>
 <input type="text" name="email"/>
 </form>
 Hasilnya:

 Validasi Jenis File

 Validasi jenis file penting dilakukan saat membuat form upload.
 Misalnya, kita ingin user mengupload file gambar saja. Tapi karena kita tidak validasi..
bisa saja mereka mengirimkan file script jahat.
 Akibatnya, website kita jadi error dan diambil alih.
 Nah, untuk melakukan validasi jenis file, kita bisa gunakan atribut accept pada input
type file.
 Contoh:
 <input type="file" accept="image/*" name="file"><br>
 <input type="submit" value="upload" />
 </form>
 Hasilnya:
 Saat kita klik tombol Browse file maka hanya akan ditampilkan file dengan jenis image
saja.

 Nilai dari attribut accept dapat berupa mime type dan juga ekstensi dari file.
 Pada contoh di atas, kita memberikan nilai mime type image/* yang artinya file yang
valid adalah file yang bertipe gambar apapun ekstensinya.
 Silahkan cek daftar mime type untuk file web di: Common MIME types
 .
 Menggunakan Pola (Pattern)
 Nah, untuk validasi data yang lebih kompleks.. kita bisa gunakan pola atau regex
(Regular Expression).
 Contohnya:
 Kita ingin validasi data grade dari mahasiswa. Karena validasi untuk nilai grade belum
ada di HTML, maka kita bisa menggunakan pattern.
 Misalkan data yang valid adalah A sampai F dan ada A+, B+, dan C+.
 Maka kita bisa gunakan pola regex seperti ini:
 Pola ini bisa kita taruh pada attribut pattern.
 Contoh:
 <label>Input Grade</label>
 <input type="text" pattern="[A-F][+-]?|D">
 <input type="submit" value="Simpan" />
 </form>
 Maka hasilnya:
 Karena data yang diinputkan tidak sesuai dengan pola regex, maka ia dianggap tidak
valid.
 Oh iya, untuk mempelajari pola regex di atas silahkan cek di regex101
 .
 Mengubah Pesan Validator

 Kadang kita ingin mengubah pesan yang ditampilkan saat data invalid.
 Caranya:
 Kita bisa gunakan Javascript.
 Contoh:
 <label>Input Grade</label>
 <input type="text" name="grade" pattern="[A-F][+-]?|D">
 <input type="submit" value="Simpan" />
 </form>
 Kemudian kode javascript-nya:

 var gradeField = document.querySelector("input[name=grade]");

 gradeField.addEventListener("invalid", function(){
 this.setCustomValidity('');
 if (!this.validity.valid) {
 this.setCustomValidity('Nilai grade salah');
 }
 });
 Pada kode tersebut, kita akan mendengarkan evnet invalid. Ketika field gradeField
berstatus invalid maka fungsi yang di dalamnya akan terpanggil.
 Pada fungsi tersebut, kita menulis ulang isi pesan validasinya.
 Maka hasilnya:
 Live demo: Jsbin
 .
 Apa Selanjutnya?
 Selamat 🎉
 Kamu sudah belajar dasar-dasar validasi data form di HTML. Validasi di sisi client saja
belumlah cukup. Karena itu, silahkan pelajari juga cara validasi data di sisi server.
 Akhir kata..
 Semoga bermanfaat.
petanikode.com
Mengenal HTML5 Canvas untuk

Pemrograman Grafis dan Game
Ahmad Muhardian
11-14 minutes
Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser
menggunakan Flash.
Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga
digunakan untuk memutar video.
Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube.
Namun semuanya berubah setelah kedatangan HTML5… 1

HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah
satunya adalah canvas.
Apa itu Canvas?

Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis. Biasanya
menggunakan pensil dan cat.
Dalam pemrograman, canvas adalah elemen yang bisa digambar dengan kode. 2
Canvas adalah elemen baru di HTML5 untuk menggambar (render) grafik, image, dan teks.
Cara Membuat Canvas di HTML

Canvas dapat dibuat dengan tag <canvas>, jangan lupa juga untuk memberikan ukuran tinggi
dan lebarnya.
<canvas id="myCanvas" width="640" height="480" style="border:1px solid

#000000;">
</canvas>
Kita berikan sedikit style style="border:1px solid #000000;" untuk membuat garis tepi.
Selanjutnya kita harus menggunakan DOM API untuk memanipulasi canvas, biasanya dilakukan
seperti ini:
var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");
Fungsi document.getElementById("myCanvas") untuk memilih elemen HTML dengan id

myCanvas.
Selanjutnya variabel ctx (konteks) adalah objek dari canvas yang bisa kita manfaatkan untuk
menggambar.
Contoh kode lengkapnya:
<!DOCTYPE html>
<html>
<head>
<meta charsetgoyang dombret="utf-8">
<title>Tutorial HTML 5 Canvas</title>
</head>
<body>

#000000;">
</canvas>
<script type="text/javascript">
</script>
</body>
</html>
Sekarang kita punya canvas kosong yang siap untuk digambar…
Siapkan imajinasimu dan mulailah menggamabar dengan kode 😄.
Menggambar di Canvas
Jika pada dunia nyata kita menggunakan pensil untuk menggambar, maka di canvas HTML5
menggunakan objek ctx.
Objek ctx bisa kita anggap sebagai pensil. Objek ini memiliki beberapa method untuk
menggambar di canvas seperti fillRect(), arc(), fillText(), dsb.
Nah untuk menggambar dengan method-method tersebut, kita harus menentukan koordinat titik
x dan y-nya.
Karena canvas terdiri dari kumpulan piksel yang membentuk diagram kartesius terbalik.
Cara Menggambar Titik pada Canvas
Pertama kita akan coba menggambar sebuah titik.
Dalam seni rupa, titik adalah bagian terkecil dari sebuah objek yang menempati suatu ruang.
Sedangkan dalam ilmu matematika geometri, titik adalah objek 0-dimensi yang tidak memiliki
panjang, lebar, dan tinggi. 3
Tapi dalam komputer titik adalah ukuran 1 piksel dari layar.
Untuk menggambar titik pada canvas, kita dapat menggunakan method fillRect() dengan
ukuran 1x1 piksel.
Variabel x dan y kita ganti dengan nilai koordinatnya, misalkan kita ingin menggambar titik pada
koordinat (10,10).
Mari kita coba dalam kode:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

#000000;">
</canvas>
// gambar titik pada koordinat (10,10) dengan ukuran 1x1 px

ctx.fillRect(10,10,1,1);
</script>
</body>
</html>
Hasilnya:
(Lakukan pembesaran sampai 500% untuk melihatnya)
Cara Menggambar Garis pada Canvas
Garis adalah kumpulan dari titik-titik yang saling terhubung. Ada empat fungsi yang kita
butuhkan untuk membuat garis.
1. ctx.beginPath() untuk membuat garis baru.

2. ctx.moveTo(x,y) untuk menentukan titik awal.
3. ctx.lineTo(x,y) untuk menentukan titik akhir.
4. ctx.stroke() untuk menggambar garisnya.
Mari kita coba…
Misalkan kita ingin menggambar garis dari titik (10,10) sampai titik (50,50).
<!DOCTYPE html>
<html>
<head>
</head>
<body>

#000000;">
</canvas>
ctx.beginPath(); // mulai menggmabar

ctx.moveTo(10,10);
ctx.lineTo(50,50);
ctx.stroke();
</script>
</body>
</html>
Hasilnya:
Cara Menggambar Persegi pada Canvas
Ada tiga fungsi yang digunakan untuk menggambar persegi pada canvas:
1. ctx.strokeRect(x,y,w,h) persegi dengan garis (outline) saja.

2. ctx.fillRect(x,y,w,h) persegi dengan polesan warna (default-nya hitam).
3. ctx.clearRect(x,y,w,h) persegi transparan untuk menghapus.
Seperti biasa, kita harus memberikan titik koordinat x dan y. Sementara nilai w dan h untuk lebar
dan tingginya.
Mari kita coba:
<!DOCTYPE html>
<html>
<head>
</head>
<body>

#000000;">
</canvas>
ctx.strokeRect(10,10,100,100);
ctx.fillRect(120,10,100,100);
</script>
</body>
</html>
Hasilnya:
Lalu bagaimana contoh yang clearRect()?
Method clearRect() digunakan untuk menghapus gambar.
Contohnya: Kita ingin menhapus pada titik (5,5) sampai (20,20).

ctx.clearRect(5,5,20,20);
ctx.fillRect(120,10,100,100);
Maka hasilnya:
Cara Menggambar Segitiga pada Canvas
Segitiga tidak memiliki method tesendiri seperti persegi (rectangle). Namun, bukan berarti kita
tidak bisa menggambarnya.
Segitiga dapat digambar menggunakan fungsi/method dari garis.
Contohnya:

ctx.beginPath(); // mulai menggmabar

ctx.moveTo(100, 100); // titik awal
ctx.lineTo(100, 300); // titik ke-2
ctx.lineTo(300, 300); // titik ke-3
ctx.closePath(); // titik ke-3 ke titik awal
// buat garis
ctx.stroke();
Maka hasilnya:
Perhatikan: di sana ada fungsi ctx.closePath(), tugasnya untuk menggambar garis dari titik
terakhir ke titik awal.
Pertama gambar garis dari titik awal ke titik ke-2:
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);
Lalu buat garis dari titik ke-2 menuju ke titik 3:
Terakhir, buat garis dari titik ke-3 menuju ke titik awal:

Maka jadilah segitiga… 😄
Cara Menggambar Lingkaran pada Canvas
Lingkaran digambar dengan method arc(). Method ini memiliki 5 parameter yang wajib
diberikan.
ctx.arc(x, y, r, sudutAwal, sudutAkhir, arah);
Paramter:
 x untuk menentukan koordinat x;

 y untuk menentukan koordinat y;
 r untuk menentukan jari-jari lingkaran;
 sudutAwal sudut awal dengan satuan radian (0 radian dimulai dari arah jam 3);
 sudutAkhir sudut akhir dengan satuan radian;
 arah (opsional) untuk menentukan arah menggambar lingkaran:
o jika diberikan nilai true maka akan menggambar berlawanan dengan arah jarum
jam.
o jika false maka akan menggambar searah dengan jarum jam.
o Nilai default-nya adalah false.
Paham…?
Mari kita coba:

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI);
ctx.stroke();
Hasilnya:
Penjelasan:
Pertama kita mulai menggmabar dengan beginPath(), gunakan selalu fungsi ini untuk mulai
menggmabar.
Kedua menggmabar lingkaran dengan fungsi arc() dengan parameter yang ditentukan.
Lingkaran digambar pada titik (95, 50) dengan ukuran jari-jari 40 piksel.
Mulai digambar dari arah jam 3 (0 radian) menuju kembali ke arah jam 3 (2*π radian). 4
Gampang kan?
Cara Meyisipkan Teks pada Canvas
Ada dua fungsi untuk membuat teks:
1. strokeText() untuk teks dengan garis luar (outline) saja.

2. fillText() untuk teks dengan warna (default hitam).
Fungsi tersebut memiliki tiga parameter yang wajib diberikan:
ctx.fillText("Teks yang akan dibuat", x, y);
Mari kita coba:

ctx.font = "30px arial";

ctx.fillText("Terima kasih sudah berkunjung ke:",10,50);
ctx.font = "64px Arial";

ctx.strokeText("PETANIKODE.com",10,120);
Hasilnya:
Ada pengisian atribut font pada kode di atas.
Fungsinya untuk menentukan jenis font serta ukurannya. Nilainya seperti nilai atribut font pada
CSS.
Cara Me-render Gambar pada Canvas
Terakhir, kita akan coba me-render gambar ke canvas. Untuk melakukannya, kita membutuhkan
sebuah gambar dan menggunakan fungsi drawImage() untuk merender-nya ke canvas.
Kita akan menggunakan gambar dari W3Schools: img_the_scream.jpg
.
Pertama silahkan buat elemen <img>:
<p>Gambar yang akan di-render:</p>

<img id="scream" src="https://www.w3schools.com/html/img_the_scream.jpg"
alt="The Scream" width="220" height="277">
Kemudian buat tombol render:
<p><button onclick="renderImage()">Render Image</button></p>
Terakhir membuat fungsi renderImage():
function renderImage() {
// ambil gambar dari elemen <img>

var img = document.getElementById("scream");
// render ke Canvas
ctx.drawImage(img,10,10);
}
Kode lengkapnya:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Gambar yang akan di-render:</p>

<img id="scream"
src="https://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream"
width="220" height="277">
<p><button onclick="renderImage()">Render Image</button></p>

#000000;">
</canvas>
function renderImage() {
// ambil gambar dari elemen <img>

var img = document.getElementById("scream");
// render ke Canvas
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
Hasilnya:
Mudah bukan…?
Pemrograman Game Berbasis HTML5

Ilmu di atas belumlah cukup untuk membuat game berbasis HTML5 dari nol, karena hanya
pengenalan saja. Kita harus pelajari ilmu yang lainnya, seperti:
 Membuat objek secara acak di Canvas

 Cara Membuat Animasi di Canvas;
 Cara Membuat Gravitasi dan Menerapkan Elemen Fisika Lainnya;
 Cara Memutar Audio untuk Game;
 Logika Game dan sistem Poin;
 Logika Kode untuk Benturan (Collision);
 dan sebagainya.
Bila kamu tidak ingin membuat semua itu dari nol, gunakanlah Game Engine. Karena sudah
dibuatkan di sana dan kita tinggal pakai saja.
Daftar Game Engine berbasis HTML5 dapat dilihat di: html5gameengine.com
Pemrograman Grafis atau Grafika Komputer

Nah, buat kamu yang tertarik ke pemrograman grafis, bisa coba-coba ide eksperimen berikut:
 Membuat Aplikasi Painting Berbasis HTML5;

 Membuat Photoshop sendiri;
 Menerapkan algoritma grafika komputer seperti algoritma membuat garis;
 Pengolahan Citra dan Computer Vision;
 Membuat Diagram Interaktif;
 Me-render Gambar dari Webcam ke Canvas
 dan sebagainya.
Akhir Kata…
Terima kasih sudah menyimak artikel ini sampai akhir. Selamat belajar dan berimajinasi dengan
kode.
Selanjutnya silahkan pelajari tentang “ Cara Menggambar Menggunakan Perulangan dan Fungsi
Random pada Canvas”.
1. CommitStrip. “A Brief History of Flash”

 ↩︎
 W3Schools. “HTML 5 Canvas”
 ↩︎
 Wikipedia. “Titik (geometri)"
 ↩︎
 Wikipedia. “Radian”
4. ↩︎
petanikode.com
Menggambar Objek dengan Perulangan dan

Fungsi Random di HTML5 Canvas
Ahmad Muhardian
9-12 minutes
Pada artikel pengenalan HTML5 Canvas sebelumnya, kita sudah belajar cara menggamabar
objek-objek dasar seperti titik, garis, persegi, lingkaran, dan segitiga.
Obejek digambar hanya sekali saja.
Bagaiaman kalau kita ingin menggambar banyak objek dan digambar secara acak?
Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi random().
Lebih jelasnya, mari kita bahas…
Pada contoh di artikel sebelumnya, kita sudah pernah menggamabar persegi dua kali.
ctx.fillRect(120,10,100,100);
</script>
Dengan hasil seperti ini:
Lalu bagaimana kalau kita ingin menggambar 10 persegi?
Kita bisa saja mengetik ulang fungsi untuk menggambarnya sebanyak 10x.
Terus kalau mau gambar sebanyak 1000x?
Apa mampu mengetik kode sebanyaka 1000 baris?
Pasti capek ngetik 1000 baris dengan nilai x dan y yang berbeda-beda.
karena itu, kita harus menggunakan perulangan.
Contoh:
Kita akan menggmabar 5 persegi dengan nilai x bertambah 10 di setiap kali perulangan dan y
tetap.
for(x = 10; x <= 50; x+=10){

ctx.strokeRect(x, 10, 10, 10);
}
</script>
Kita akan menggmbar persegi dengan ukuran 10x10 pada titik y=10 dan x berubah-ubah.
Setiap perulangan nilai x akan bertambah 10.
perulangan ke 1, nilai x = 10 dan y = 10

Kalau kita nyatakan dalam persamaan garis lurus matematika:
y = 10 (nilai y tetap 10)
*ingat-ingat kembali pelajaran matematika (persamaan garis lurus, fungsi, dan aljabar
linier) 😄
Hasilnya:
Sekarang coba gambar sebanyak 50x:
for(x = 10; x <= 500; x+=10){

ctx.strokeRect(x, 10, 10, 10);
}
</script>
Hasilnya:
Sudah paham sekarang…?
Lalu bagaimana kalau nilai y-nya sekarang yang berubah-ubah.
Gampang, kita tinggal ubah menjadi seperti ini:
for(y = 10; y <= 500; y+=10){

ctx.strokeRect(10, y, 10, 10);
}
</script>
Maka hasilnya:
Masih mau lagi?
Mari kita coba kedua-duanya berubah (nilai x dan y berubah).
for(i = 10; i <= 500; i+=10){
ctx.strokeRect(i, i, 10, 10);
}
</script>
Nilai x dan y kita ambil dari variabel i.
Hasilnya:
Gambar garis seperti di atas dapat dinyatakan dengan persamaan matematika:

Menggunakan Perulangan Bersarang
Perulangan bersarang (nested loop) artinya perulangan dalam perulangan.
Sekarang mari kita coba menggambar persegi sebanyak 40 ke arah x (horizontal) dan 40 ka arah
y (vertikal) dengan perulangan bersarang.
for(x = 10; x <= 400; x+=10){

for(y = 10; y <= 400; y+=10){
ctx.strokeRect(x, y, 10, 10);
}
}
</script>
Maka banyak persegi yang akan digambar adalah 1600 buah persegi.
Sekarang bagaimana kalau nilai y pada perulangan ke-2 kita set nilai awalnya adalah x.
for(x = 10; x <= 400; x+=10){

for(y = x; y <= 400; y+=10){
}
}
</script>
Hasilnya:
Selanjutnya saya akan memperlihatkan hasil kreasi saya yang bisa kamu ikuti dan silahkan
pikirkan bagaimana gambarnya bisa terbentuk 😄.
Kode:
for(x = 10; x <= 400; x+=10){

for(y = 10; y <= 400; y+=10){
if((y*x) % 200 != 0){

} else {
ctx.fillRect(x, y, 10, 10);
}
}
}
</script>
* operator % fungsinya untuk menghitung sisa bagi.
Hasilnya:
Kode:
for(x = 10; x <= 400; x+=10){

for(y = 10; y <= 400; y+=10){
if((y*x) % 21 == 0){
} else {
ctx.fillRect(x, y, 10, 10);
}
}
}
</script>
Hasil:
Itu saja ya…agar tutorial ini tidak kepanjangan.
Silahkan lanjutkan berkresi sendiri!
Menggambar Objek dengan Fungsi Math.random()

Fungsi random() adalah fungsi yang menghasilkan nilai acak dari 0,0 sampai 1,0. Fungsi ini
akan kita manfaatkan untuk menentukan nilai x dan y agar objek yang kita gambar diletakkan
secara acak di canvas.
Berikut ini contoh nilai yang dihasilkan oleh fungsi random().

Karena fungsi random() menghasilkan nilai 0,xxx maka kita harus mengubahnya menjadi
bilangan desimal (integer).
Caranya kita bisa memanfaatkan fungsi floor() untuk melakukan pembulatan nilai.
Misalnya seperti ini:
Math.floor(Math.random() * 5)
Maka nilai acak yang akan kita dapatkan adalah dari 0 sampai 5.
Sekarang mari kita coba menggambar titik pada canvas dengan nilai x dan y acak dari 0 sampai
panjang canvas-nya.
for(i = 0; i < canvas.width; i++){

for(j = 0; j < canvas.height; j++){
// isi nilai titik dengan bilangan acak

var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
// gambar titknya
ctx.fillRect(x, y, 1,1);
}
}
</script>
Hasilnya:
Mantap! Sepertinya titiknya terlalu banyak.
Coba kita gambar titik sebanyak 10000 atau 100x100.

for(i = 0; i < 100; i++){

for(j = 0; j < 100; j++){

// gambar titknya
}
}
</script>
Hasilnya:
Selanjutnya kita modifikasi kodenya.
Silahkan perbesar ukuran perseginya menjadi 10x10 dan gambar sebanyak 200 kali. Kita pakai
dua persegi, yaitu strokeRect() sebanyak 100 dan fillRect() sebanyak 100.
for(i = 0; i < 10; i++){

for(j = 0; j < 10; j++){

// gambar perseginya
}
}
for(i = 0; i < 10; i++){

for(j = 0; j < 10; j++){

// gambar perseginya
ctx.strokeRect(x, y, 10,10);
}
}
</script>
Hasilnya:
Coba juga untuk berkreasi dengan lingkaran.
for(i = 0; i < 10; i++){

for(j = 0; j < 10; j++){

// gambar lingkaran
ctx.beginPath();
ctx.arc(x, y, 20, 0, 2*Math.PI);
ctx.stroke();
}
}
</script>
Hasilnya:
Coba juga jari-jarinya kita kasih acak, misal dari 5 sampai 30.
for(i = 0; i < 10; i++){

for(j = 0; j < 10; j++){

// jari-jari random dari 5 sampai 30

var r = Math.floor( Math.random() * (30 - 5) + 5 );
// gambar lingkaran
ctx.beginPath();
ctx.arc(x, y, r, 0, 2*Math.PI);
ctx.stroke();
}
}
</script>
Hasilnya:
Akhir Kata…
Begitulah cara menggambar objek dengan perulangan dan fungsi random. Fungsi random kadang
digunakan dalam Game untuk menggambar objek dalam posisi acak.
Misal pada Game Flappy Bird, pipa penghalangnya diletakkan secara acak dengan fungsi
random.
Pada kesempatan selanjutnya mungkin kita akan bahas tentang warna dan animasi.
Terima kasih sudah mengikuti tutorial ini. Kalau ada pertanyaan atau tambahan silahkan
sampaikan di komentar.
Selamat berkerasi dan berimajinasi dengan kode.
Referensi:
 Mozilla Developer Network — Math.random()
 Wikipedia — Persamaan garis
petanikode.com
Tutorial Codeigniter 4: Cara Membuat

CRUD dan Validasi Data
Ahmad Muhardian
5-6 minutes
Biasanya pada web-web tertentu kita membutuhkan Webcam untuk mengambil gambar,
misalnya pada web yang mimiliki fitur Video Call seperti Facebook.
Kalau dulu, hal ini mungkin dilakukan dengan bantuan Plug-in seperti Flash dan Silverlight.
Namun, sekarang HTML5 sudah menyediakan API yang bisa kita gunakan untuk mengakses
Webcam secara native.
Pada kesempatan ini, kita akan belajar cara mengakses Webcam untuk ditampilkan di dalam
halaman web dan mengambil gambar.
Contoh Webcam di HTML

Berikut ini contoh hasil akhir yang akan kita buat.
Browsermu tidak mendukung bro, upgrade donk!
Jika tidak tampil, pastikan kamu mengizinkan halaman ini mengakses Webcam.
Izin Webcam di Google Chrome:
Izin Webcam di Google Chrome Android:

Izin Webcam di Opera:
Bagaimana Cara Kerjanya?

Pertama kita membutuhkan izin user, apakah dia mau memberikan akses webcam atau tidak.
Metode atau method yang digunakan untuk meminta izin user adalah getUserMedia. Method ini
tidak hanya untuk mengakses webcam saja, kita juga bisa mengakses media lain seperti
mikrofon.
Setelah user memberikan izin, selanjutnya kita tinggal render gambar dari webcam ke elemen
<video>.
Elemen <video> merupakan elemen baru yang ditambahkan pada HTML 5 untuk menampilkan
video.
Untuk lebih jelasnya, mari kita coba dalam kode…
Menampilkan Video Webcam di HTML

Pertama silahkan buat sebuah file HTML.
<div>
<video autoplay="true" id="video-webcam">
Browsermu tidak mendukung bro, upgrade donk!
</video>
</div>
Pada file HTML di atas, kita memberikan atribut autoplay="true" agar videonya diputar
secara otomatis dan id="video-webcam" untuk memudahkan pemilihan elemen di Javascript.
Setelah itu, silahkan buat kode Javascript-nya:
// seleksi elemen video
var video = document.querySelector("#video-webcam");
// minta izin user

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia || navigator.oGetUserMedia;
// jika user memberikan izin

if (navigator.getUserMedia) {
// jalankan fungsi handleVideo, dan videoError jika izin ditolak
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
// fungsi ini akan dieksekusi jika izin telah diberikan

function handleVideo(stream) {
video.srcObject = stream;
}
// fungsi ini akan dieksekusi kalau user menolak izin

function videoError(e) {
// do something
alert("Izinkan menggunakan webcam untuk demo!")
}
</script>
(Kode lengkapnya silahkan cek di Gist
Silahkan simpan di dalam direktori htdocs atau /var/www/html, lalu buka melalui alamat
http://localhost/namafile.html.
Kenapa harus disimpan di sana?
Karena jika tidak disimpan di server web, videonya tidak akan mau di-render.
Mengambil Gambar dari Webcam

Kita baru saja membuat kode HTML dan Javascript untuk menampilkan video dari webcam.
Lalu…
Bagaimana kalau kita ingin mengambil gambar?
Gampang.
Kita tinggal buat sebuah tombol dan saat tombol tersebut diklik, kita eksekusi fungsi untuk
mengambil gambar.
Berikut ini kode fungsi untuk mengambil gambar:
function takeSnapshot() {
// buat elemen img
var img = document.createElement('img');
var context;
// ambil ukuran video

var width = video.offsetWidth
, height = video.offsetHeight;
// buat elemen canvas

canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
// ambil gambar dari video dan masukan

// ke dalam canvas
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
// render hasil dari canvas ke elemen img

img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
Fungsi di atas akan membuat sebuah elemen <img> untuk menampung gambar Snapshot dari
elemen Video.
Kita memanfaatkan Canvas untuk mengambil gambarnya.
Setelah itu tinggal ditampilkan ke dalam elemen <img>.

Selanjutnya silahkan buat sebuah tombol untuk mengeksekusi fungsi tersebut.
<button onclick="takeSnapshot()">Ambil Gambar</button>
Selesai, silahkan dicoba.
Untuk menyimpan gambarnya, tinggal klik kanan kemudian pilih save image as…
Gampang kan?
Akhir Kata…
Begitulah cara mengakses Webcam dari HTML atau halaman web.
Selanjutnya kamu bisa melakukan eksperimen yang lebih menarik, seperti:
 Menerapkan Algoritma Computer Vision atau Pengolahan Citra.

 Membuat Aplikasi Video Call.
 Membuat Sistem Login dengan Mendeteksi Wajah.
 Menebak Umur berdasarkan Wajah.
 _______ (dll. tambahkan sendiri)
Referensi:
 Kirupa, Accessing Your Webcam in HTML
 .

Tutorial HTML

Diunggah oleh

Informasi Dokumen

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

Tutorial HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

petanikode.

Belajar HTML dari Nol: Pengenalan Dasar

HTML merupakan bahasa dasar untuk membuat web.

Mari kita mulai!

Apa itu HTML?

HTML atau HyperText Markup Language merupakan sebuah bahasa markah

untuk membuat halaman web. 1

Paham kan maksudnya?

Kalau belum paham, sini saya jelaskan…

 Tutorial CSS untuk Pemula

Sejarah dan Asal-usul HTML

Tim Berners-Lee (2009)

Yang artinya: Komisi Eropa untuk Penelitian Fisika Nuklir.

HTML adalah implementasi dari SGML.

Perkembangan dan Versi HTML

Tidak ada yang menggunakan versi [draft] untuk membuat web.

Lalu, versi mana yang akan kita pakai?

Tentunya versi terbaru, yakni HTML 5.

Peralatan untuk Belajar HTML

Adapun peralatan yang harus kamu persiapkan adalah:

Notepad boleh, Notepad++ juga boleh..

2. Web Browser untuk Membuka HTML

Firefox atau Google Chrome, saya kira sudah cukup.

Membuat Dokumen HTML Pertamamu

Setelah itu, simpan dengan nama hello-world.html.

Caranya.. masuk ke menu View, lalu centang File name extensions.

Nama File untuk HTML

1. Extensi file HTML

Contohnya seperti ini:

Nama filenya adalah hello-world.txt.

2. Nama Khusus untuk Homepage

3. Hindari Beberapa Hal ini..

Spasi pada URL, biasanya akan otomatis diubah menjadi %20.

Baiklah, berikutnya kita akan pelajari tentang kode-kode HTML.

Struktur Dasar HTML

Mari kita bahas satu-per-satu:

Coba perhatikan kode pada baris pertama: <!DOCTYPE html>.

Nah, untuk HTML versi 4.. beda lagi cara deklarasinya.

Contoh untuk HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Cukup panjang bukan..

Tag <html> wajib ada di setiap dokumen HTML..

Setelah itu barulah terakhir tag HTML ditutup dengan </html>.

 Tag meta untuk SEO;

Jika ada yang belum jelas, bisa ditanyakan melalui komentar.

Berikutnya silahkan pelajari tentang definisi tag, elemen, dan atribut:

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Belajar HTML #02: Apa itu Tag, Elemen,

Apa itu Tag?

Apa itu Elemen?

Apa itu Atribut?

Serta apa perbedaan Tag, Elemen, dan Atribut?

Mari kita bahas…

Contoh: <p>, <a>, <body>, <head>, dan sebagainya.

Masih ingat sejarah HTML?

Wah! banyak ya.

Apa semua tag ini harus kita hafal?

<html> untuk memulai dokumen HTML

<head> untuk membuat bagian head

<body> untuk membuat bagian body

<h1> sampai <h6> untuk membuat heading pada artikel

<p> untuk membuat paragraf

untuk membuat komentar

Berikut ini daftar tag yang wajib ada di HTML: