HTML

Sebelum Belajar
● Mampu mengoperasikan Komputer (Windows, Mac / Linux)
● Mampu menginstall aplikasi di Komputer (Windows, Mac / Linux)
● Mampu mengakses Web
Agenda

● Pengenalan Web
● Pengenalan HTML
● Membuat kode HTML
● Dan lain-lain
Pengenalan Web
Kenapa Web?

● Saat ini web digunakan oleh jutaan, bahkan mungkin milyaran orang setiap hari
● Dengan web, kita bisa melakukan belajar online, mendengarkan musik online,
nonton video online, belanja online, sampai memesan makanan secara online
● Namun perlu diperhatikan, Web bukanlah Internet
Internet

● Internet adalah mekanisme komunikasi antar komputer

● Awal internet ada, untuk komunikasi antar komputer, kita membutuhkan jaringan
kabel telepon
● Namun sekarang, semenjak berjamurnya jaringan wifi dan sejenisnya, komunikasi
antar komputer menjadi lebih cepat dan mudah
Web

● Web merupakan kumpulan informasi yang tersedia dalam sebuah komputer yang
terkoneksi secara terus menerus melalui internet
● Web bisa berisi informasi dalam bentuk apapun, seperti teks, gambar, audio, video
dan lain-lain
● Web berjalan di aplikasi yang bernama Web Server, yaitu aplikasi yang digunakan
untuk menyimpan dan menyampaikan isi informasi Web
Diagram Web
Domain

● Saat komputer Web terhubung ke internet, biasanya dia memiliki alamat

● Alamat ini bernama ip address, formatnya misal nya [Link]
● Karena alamat ip address sangat menyulitkan untuk diingat
● Untung saja ada yang namanya nama domain
● Nama domain adalah alamat yang bisa digunakan sebagai alias ke ip address
● Misal seperti [Link], [Link] dan lain-lain
● Dengan nama domain, sebagai manusia kita akan mudah mengingat dibandingkan ip
address
● Namun, saat kita menggunakan nama domain, sebenarnya komputer tetap akan
mengakses web menggunakan alamat ip address
Web Browser

● Jika Web Server adalah aplikasi yang digunakan untuk menyimpan informasi Web
● Web Browser adalah aplikasi yang digunakan untuk mengakses Web melalui internet
● Kita bisa saja mengakses Web secara langsung tanpa bantuan Web Browser, namun
Web Server hanya akan memberikan informasi bahasa mesin seperti HTML,
JavaScript, CSS, Gambar, Video dan lain-lain
● Dengan menggunakan Web Browser, semua bahasa mesin tersebut bisa ditampilkan
secara visual sehingga kita bisa menyerap informasinya dengan lebih mudah
Diagram Web Browser
Pengenalan HTML
Pengenalan HTML

● HTML singkatan dari HyperText Markup Language, ini adalah adalah struktur dasar dari
halaman web
● HTML mendeskripsikan struktur dari isi konten halaman Web
● Selain HTML, terdapat hal lain untuk mendeskripsikan sebuah halaman web, seperti untuk
gaya tampilan halaman web menggunakan CSS atau interaksi halaman web menggunakan
JavaScript
● Di materi ini, kita hanya akan fokus membahas HTML, tidak akan membahas tentang CSS
atau JavaScript
● HTML sendiri sebenarnya hanyalah kumpulan kode yang berisikan informasi halaman web
● Kode HTML akan dibaca oleh Web Browser untuk ditampilkan secara visual
Kode HTML

● Untuk melihat kode html, kita bisa buka website yang kita mau menggunakan Web
Browser
● Lalu gunakan menu View Source di aplikasi Web Browser nya
Tag

● Kode HTML, berisikan kumpulan tag-tag yang kita buat

● Tag adalah perintah dalam html yang memiliki aturan pembuka dan penutup
● Ada banyak sekali tag di HTML, nanti kita akan pelajari satu per satu
● Contoh untuk membuat sebuah tulisan paragraf di HTML, kita bisa gunakan tag p,
dimana penulisannya :
<p> Ini Kontennya </p>
● <p> diawal adalah tag pembuka, </p> di akhir adalah tag penutup. Dan “Ini
Kontennya” adalah isi konten dari tag p
● Tag berisi kontennya bisa kita sebut dengan nama Element
Void Element

● Pada beberapa kasus, ada tag di HTML yang tidak perlu memiliki isi konten
● Hal ini bisa kita sebut dengan Void Element
● Contoh, di HTML terdapat Tag untuk membuat Break Line / Enter, dengan
menggunakan tag br
● Karena tag br tidak memiliki konten, maka kita bisa gunakan perintah :
<br> atau <br/>
● Tanpa harus menggunakan tag pembuka dan tag penutup
Attribute

● Element memiliki atribut. Atribut adalah informasi tambahan untuk tag yang kita
gunakan
● Kita bisa tambahkan atribut di Element pada tag pembuka
● Contoh untuk menampilkan gambar di HTML, kita bisa menggunakan tag <img>
dengan atribut src yang berisikan lokasi gambar yang ingin kita tampilkan :
<img src=”lokasi/gambar/[Link]”/>
● Attribute bisa digunakan di Element biasa atau di Void Element
HTML Tidak Case Sensitive

● Penulisan tag di HTML tidak case sensitive, artinya huruf besar atau kecil tidak
masalah
● Namun sangat disarankan menggunakan huruf kecil semua, misal <p>, jangan <P>
Persiapan
Persiapan

● Sebelum kita mulai belajar HTML, kita perlu mempersiapkan peralatan yang kita
butuhkan untuk membuat kode HTML
Instalasi Perangkat Lunak

● Untuk belajar HTML, kita membutuhkan dua buah perangkat lunak, Code Editor
(kode editor) dan Web Browser (Perambah)
● Pada kelas ini, kita akan menggunakan aplikasi yang populer untuk pengembang
Web, yaitu Visual Studio Code sebagai kode editor dan Google Chrome sebagai web
browser
● Visual Studio Code : [Link]
● Google Chrome : [Link]
Membuat Project
Membuat Project

● Saat membuat Web, alangkah baiknya kita buat dalam satu Project (Proyek) yang
berisikan kode-kode Web tersebut
● Tidak usah bingung dengan istilah Project, karena sebenarnya hanyalah sebuah
Folder / Directory
Hello World
Hello World

● Salah satu kebiasaan pengembang Web ketika pertama kali belajar, adalah
membuat halaman Hello World (Halo Dunia)
● Halamannya sederhana, hanya berisikan tulisan Hello World saja
● Sekarang kita akan coba membuat halaman Web Hello World dengan menggunakan
HTML
Tag Body

● Struktur HTML, dimulai dengan menggunakan tag html

● Di dalam tag html, terdapat tag body
● Di dalam tag body, kita bisa memasukkan tag apapun termasuk tulisan, yang nanti
secara otomatis akan ditampilkan di halaman web oleh aplikasi Web Browser
Kode : Hello World
Membuat Halaman Hello World

● Untuk membuat halaman HTML yang sudah kita buat, kita bisa langsung
membukanya menggunakan aplikasi Web Browser Google Chrome
Tampilan : Hello World
Penamaan File HTML
Penamaan File HTML

● Sebenarnya tidak ada aturan dalam pembuatan nama file untuk HTML
● Kita bisa menggunakan nama file apapun, dan huruf besar dan kecil apapun
● Namun karena file HTML akan diakses sebagai URL pada web browser, misal :
[Link]/[Link]
● Maka sangat disarankan mengikuti praktek yang baik penamaan URL
Praktek Baik Penamaan File HTML

● Jangan menggunakan huruf besar, selalu gunakan huruf kecil semua, misal :
[Link], [Link], [Link], [Link], dan lain-lain
● Jangan menggunakan spasi pada nama file, jika butuh pemisah, gunakan - atau _,
misal :
[Link], [Link], belajar_html.html
● Jika butuh membuat folder di, gunakan aturan yang sama
Heading
Heading

● Saat kita membuat dokumen atau buku, biasanya terdapat Heading

● Heading adalah kata-kata yang mendeskripsikan isi dari tulisan yang kita buat.
● Seperti judul, tapi untuk bagian tulisan nya
● Contoh ketika kita melihat buku, Heading sering digunakan untuk tulisan Bab
● Di HTML, kita bisa membuat Heading dengan tag h
Tingkatan Heading

● Heading memiliki tingkatan, paling tinggi adalah tingkatan 1, selanjutnya tingkatan

2, 3, dan seterusnya
● Yang membedakan biasanya ukuran huruf nya akan semakin kecil
● Di HTML, kita bisa menggunakan tag h1, h2, h3 dan seterusnya untuk menentukan
tingkatan Heading
● HTML mendukung sampai heading tingkatan ke 6
Heading di Microsoft Word
Kode : Heading
Paragraph
Paragraph

● Saat membuat tulisan, biasanya selain Heading (judul), kita juga biasanya membuat
paragraf
● Di HTML, kita bisa menggunakan tag p untuk membuat paragraf
● Paragraf selalu mulai dengan baris baru
Kode : Paragraph
Browser Menampilkan HTML

● Kita tidak bisa mengontrol cara Web Browser menampilkan tulisan, seperti di
Paragraph atau Heading misalnya
● Menambahkan enter atau spasi di tulisan, tidak akan menjadikan tampilannya
seperti itu di Web Browser
Entities
Reserved Characters

● Beberapa karakter sudah dipesan oleh HTML, sehingga kita tidak bisa gunakan pada
tulisan teks biasa, contoh karakter <, / atau >
● Oleh karena itu, jika kita memaksakan menuliskan hal tersebut di teks paragraf
misal, secara otomatis halaman HTML akan error / rusak / tidak sesuai dengan yang
kita mau
Kode : HTML Reserved Characters
Entities

● Karakter yang sudah dipesan di HTML, dinamakan HTML Entity

● Ada banyak sekali HTML Entity, dan direkomendasikan untuk menggunakan simbol
Entity nya, ketika kita ingin menggunakan karakter tersebut
● Tapi sebenarnya tidak wajib, kita tetap bisa menggunakan karakter asli, namun lebih
aman jika menggunakan simbol Entity nya
● Kita bisa lihat seluruh daftar HTML Entity di :
● [Link]
● [Link]
Kode : HTML Entities
Break Line
Break Line

● Seperti yang dibahas di materi Paragraph, enter di dalam tulisan tidak akan
dianggap enter oleh HTML, jika kita ingin membuat enter, disarankan membuat
paragraf terpisah
● Namun jika kita benar-benar ingin membuat enter di dalam paragraf, kita bisa
menggunakan tag br
● Tag br adalah void element, jadi tidak memiliki konten
Kode : Break Line
Horizontal Rule

● Di HTML, kita juga bisa membuat enter dengan garis horizontal (dari kiri ke kanan)
sebagai pemisah
● Untuk melakukannya, kita bisa menggunakan tag hr
● Tag hr juga merupakan void element, jadi tidak memiliki konten
Kode : Horizontal Rule
Style
CSS

● Sekarang kita sudah bisa membuat tulisan, pertanyaannya, bagaimana jika kita ingin
mengubah font, ukurannya, dan warnanya
● Untuk melakukan itu, sebenarnya kita perlu belajar CSS terlebih dahulu
● Namun pada kelas ini, kita akan bahas sekilas cara menggunakan CSS yang
sederhana, walaupun pada kenyataanya nanti ketika kita membuat web, lebih
disarankan tidak mempraktekan materi ini
Style Attribute

● Setiap tag di HTML memiliki atribut style, dimana kita bisa menambahkan informasi
CSS, yaitu untuk mengubah gaya isi element-nya
● Style attribute berisikan key:value CSS, jika lebih dari satu, maka gunakan ; (titik
koma) sebagai pemisah, misal :
<namatag style=”property:value”>
<namatag style=”property:value; property2:value2”>
Contoh CSS

● Berikut adalah contoh css atribut yang bisa kita gunakan, lebih lanjutnya akan kita
bahas di kelas CSS
● background-color : untuk mengubah warna latar belakang
● color : untuk mengubah warna font
● font-family : untuk mengubah jenis font
● font-size : untuk mengubah ukuran text
● text-align : untuk mengubah rata tulisan secara horizontal, bisa left (kiri), right
(kanan), center (tengah), justify (kiri dan kanan)
Kode : Style
Formatting
Formatting

● Dalam aplikasi pengolahan text seperti Microsoft Word, kita bisa mengubah format
tulisan menjadi tebal atau miring misal
● Begitu juga di HTML, kita bisa menambah formating di text yang ingin kita tampilkan
menggunakan tag sesuai dengan format yang kita mau
Formatting Tag

● <b>, <strong> untuk bold / tebal

● <i>, <em> untuk italic / miring
● <small> untuk text kecil
● <del> untuk text dicoret
● <ins> untuk text dengan garis bawah
● <sub> untuk subscript text
● <sup> untuk superscript text
Comment
Comment

● Comment / komentar adalah informasi tambahan di HTML, yang tidak akan

ditampilkan di halaman Web
● Komentar biasanya digunakan untuk menambahkan informasi tambahan untuk
pengembang Web, jadi bukan tujuan untuk ditampilkan di halaman Web
● Untuk membuat komentar, kita bisa menggunakan
<!-- isi komentar -->
● Semua yang ada di isi komentar tidak akan ditampilkan, termasuk tag HTML
Kode : Comment
Color
Color

● HTML mendukung format penulisan warna tidak hanya dengan nama warna nya (red,
blue, green), namun juga dengan format penulisan seperti HEX, RGB, HSL dan lain-
lain
● Dengan begitu, penulisan warna jadi lebih akurat dibandingkan hanya dengan nama
warna nya
Color Picker

● Salah satu website yang bisa kita gunakan untuk memilih warna adalah :
[Link]
● Disana kita bisa mencari warna yang kita mau, dan menyalin kode Hex untuk warna
tersebut
Code : Color
List
Unordered List

● Untuk membuat daftar tulisan, kita bisa menggunakan tag ul di HTML

● Tiap daftar isi nya, kita bisa menggunakan tag li
Kode : Unordered List
Ordered List

● Jika kita ingin membuat daftar yang berurut (memiliki angka), kita bisa mengganti
tag ul menjadi ol
● Untuk daftar isi nya tetap sama menggunakan tag li
Kode : Ordered List
Ordered List Type

● Pada kasus ketika kita menggunakan daftar yang berurut (ol), kita bisa mengubah
format daftar nya, defaultnya menggunakan angka (dimulai dari 1).
● Kita bisa menambahkan attribute type di ol dengan nilai :
● type=”1”, artinya daftar isi akan menggunakan angka (ini adalah defaultnya)
● type=”A”, artinya daftar isi akan menggunakan huruf kapital
● type=”a”, artinya daftar isi akan menggunakan huruf kecil
● type=”I”, artinya daftar isi akan menggunakan angka romawi kapital
● type=”i”, artinya daftar isi akan menggunakan angka romawi kecil
Kode : Ordered List Type
Link
Link

● Saat membuat Web, biasanya kita akan membuat banyak sekali halaman HTML
● Untuk berpindah dari satu halaman ke halaman lain, kita biasanya jarang
melakukannya secara manual dengan cara mengetikkannya di search bar Web
Browser
● HTML memiliki fitur Link (Tautan), dimana kita bisa meng-klik Link tersebut, dan
berpindah ke halaman HTML lain
● Link tidak harus dalam bentuk Text, Link juga bisa dalam bentuk Gambar misalnya
(yang akan kita bahas di materi Image)
Tag a

● Untuk membuat Link di HTML, kita bisa menggunakan tag a

● Isi konten tag a adalah isi dari tampilan Link, bisa Text atau yang lainnya
● Tag a memiliki attribute href, yang berisi lokasi tujuan Link tersebut
● Tag a juga memiliki attribute target, yang digunakan sebagai target jendela Web Browser,
kita bisa gunakan nilai :
target=”_self”, artinya halaman akan ditampilkan di halaman yang sama, ini adalah
bawaan default
target=”_blank”, artinya halaman akan ditampilkan di jendela baru di Browser
● Tag a juga memiliki attribute title, untuk menuliskan judul yang keluar ketika mouse
berada di atas Link tersebut
Kode : Link
Absolute URL

● Saat kita menulis halaman tujuan dari href di Link, kita bisa menggunakan absolute
URL
● Absolute URL merupakan alamat lengkap sebuah tujuan Link
● Dalam absolute URL, kita wajib menuliskan seluruh detail domain dan halaman yang
dituju misalnya [Link]
● Kelebihan menggunakan Absolute URL adalah, kita bisa membuat Link menuju
domain yang berbeda dengan website yang kita buat
Relative URL

● Relative URL adalah lokasi href dimana tetap menggunakan domain website saat ini
● Relative URL memiliki dua format, bisa diawali dengan /, atau tidak diawali dengan /
● Misal sekarang kita berada di halaman [Link] , lalu
kita memiliki link sebagai berikut :
● [Link], artinya akan menuju ke [Link]
● /[Link], artinya akan menuju ke [Link]
● pzn/[Link], artinya akan menuju ke [Link]
Kode : Relative URL
Bookmark

● Pada kasus halaman web yang sangat panjang, ada bagusnya kita menggunakan
Bookmark
● Bookmark adalah link yang bisa digunakan untuk menampilkan HTML element
dengan id tertentu
● Bookmark menggunakan # pada href, misal jika kita menggunakan [Link]#eko,
artinya ketika membuka halaman [Link], maka Web Browser akan otomatis
menampilkan pada posisi HTML Element dengan id eko
● Jika kita ingin membuat link di halaman HTML itu sendiri, kita bisa langsung buat
Link dengan href langsung berisi #bookmark nya
Kode : Bookmark di Halaman Sendiri
Kode : Bookmark ke Halaman Lain
Image
Image

● Image / gambar bisa digunakan untuk memperindah tampilan website yang kita buat
● HTML mendukung untuk menampilkan gambar dengan tag img
● Hampir semua format gambar yang didukung oleh Web Browser, bisa ditampilkan di
halaman web HTML
Image Attribute

● Tag img adalah void element, jadi tidak memiliki konten

● Terdapat beberapa atribut yang bisa kita gunakan dalam tag img
● Attribute src yang digunakan untuk menentukan lokasi gambar yang mau
ditampilkan, bisa menggunakan Absolute URL atau Relative URL
● Attribute alt yang digunakan sebagai representasi text atau tulisan untuk gambar
Image Size

● Secara bawaan default, ukuran gambar akan selalu ditampilkan sesuai aslinya
● Kadang-kadang, kita ingin mengubah ukuran gambarnya
● Untuk melakukan itu, kita perlu batuan CSS
● Kita bisa gunakan attribute CSS :
● width untuk mengubah ukuran lebar
● height untuk mengubah ukuran tinggi
● Kita bisa gunakan satuan px (pixel), atau % untuk persentase dari ukuran asli
Computer Code
Computer Code

● Sebagai programmer, kadang kita sering membuat web artikel tentang kode
program
● Pada kasus seperti ini, ketika kita membuat kode program di HTML menggunakan
paragraph, maka akan menyulitkan, karena semua enter dan spasi akan dinormalkan
oleh HTML
● Kadang kita ingin menampilkan kodenya apa adanya
Tag Pre

● Untuk menampilkan tulisan di dalam HTML apa adanya, kita bisa menggunakan tag
pre
● Namun perlu diingat, kode HTML tetap tidak akan ditampilkan, jadi kita harus
menggunakan HTML Entities
Kode : Pre
Emoji
Emoji

● Dalam website, kita sering sekali melihat emoji pada tulisan

● Bagaimana cara membuat emoji di HTML?
● HTML sudah memiliki standar untuk membuat emoji, mirip dengan HTML Entities,
kita juga bisa menggunakan kode untuk membuat Emoji
● Kita bisa melihat daftar emoji yang dapat kita gunakan, dan kodenya disini :
[Link]
cters_all.cfm
Kode : Emoji
Head
Head

● Selain tag body, di HTML juga terdapat tag head

● Tag head digunakan untuk menambah informasi yang tidak dimunculkan di halaman
web
● Head biasanya digunakan untuk menambah informasi seperti CSS atau JavaScript
● Head juga biasa digunakan untuk menambahkan metadata (informasi tambahan)
untuk halaman HTML, biasanya digunakan oleh Search Engine misalnya
Title

● Di dalam Head, kita juga bisa menambahkan tag title, yang digunakan untuk
mengubah judul halaman di Web Browser
Kode : Title
Favicon
Favicon

● Saat kita membuka website seperti Google, Facebook atau yang lainnya, biasanya
pada bagian tab Web Browser, terdapat logo perusahaannya
● Bagaimana cara membuatnya? Itu adalah fitur Favicon di HTML
Tag Link

● Untuk membuat favicon, kita bisa menggunakan tag link pada bagian head
● dimana dalam link kita perlu menggunakan atribut rel=”icon” dan href menuju lokasi
gambar icon
● Gambar icon bisa file berupa ico, png, jpg, svg atau gif
Kode : Favicon
Block dan Inline
Block dan Inline

● Di dalam HTML, semua element memiliki nilai display, tergantung dari jenis element
yang digunakan
● Secara garis besar, ada dua nilai untuk display, block dan inline
Block

● Element yang memiliki nilai display block, selalu dimulai dengan baris baru.
● Web browser secara otomatis menambahkan jarak / margin sebelum dan setelah
element
● Dan element dengan nilai display block, selalu mengambil ukuran penuh yang
tersedia, yag artinya dia akan meregang dari kiri dan kanan
● Contoh tag yang menggunakan nilai display block adalah :
h1-h6, p, header, body, ul, li, ol, table, form, dan lain-lain
Inline

● Sedangkan dalam display inline, element tidak dimulai dengan baris baru
● Selain itu dalam display inline, element hanya menggunakan ukuran seperlunya saja
● Contoh tag yang menggunakan nilai display inline :
a, b, i, em, button, strong, input, dan lain-lain
Div

● Div adalah salah satu tag di HTML yang memiliki nilai display block
● Div biasanya digunakan sebagai container (wadah) untuk beberapa element HTML
● Div banyak digunakan ketika kita ingin membedakan bagian-bagian dalam element
HTML, misal ada bagian menu, content, footer, header dan lain-lain
● Biasanya semua itu dibungkus dalam Div
Kode : Div
Span

● Jika Div menggunakan nilai display block, ada lagi tag span, yang menggunakan nilai
display inline
● Span biasa digunakan pada kasus kita ingin menggunakan display inline, misal kita
mau membuat tulisan Belajar HTML, namun tiap kata berbeda warna
● Hal itu tidak bisa dilakukan jika menggunakan p, karena p akan mengubah seluruh
warna tulisan
● Kita bisa gunakan span di tiap kata, agar bisa menambah style di tiap span
Kode : Span
Video
Video

● Selain gambar, HTML juga mendukung untuk menampilkan video di halaman web
yang kita buat
● Namun perlu diperhatikan, tidak semua jenis video bisa dijalankan oleh Web Browser
● Biasanya format video yang banyak digunakan adalah mp4, webm atau ogg
● Untuk menampilkan video, kita bisa menggunakan tag video
Video Attribute

● Tag video memiliki banyak atribut, seperti

● width untuk ukuran lebar video
● height untuk ukuran tinggi video
● controls untuk menampilkan kontrol video
● autoplay agar video otomatis berjalan
● Untuk menampilkan video, kita bisa gunakan tag source
● Sama seperti di picture, kisa bisa menambahkan beberapa source
Kode : Video
Audio
Audio

● Selain gambar, video, HTML juga mendukung untuk audio

● Untuk audio, kita bisa menggunakan tag audio
● Cara penggunaannya mirip dengan tag video, di dalamnya bisa kita tambahkan tag
source
Kode : Audio
HTML 5
HTML 5

● Tahun 2008, HTML sudah rilis versi 5

● Banyak perubahan yang terjadi di HTML 5 dari versi sebelumnya HTML 4, terutama
dari interaksi yang lebih kaya (perlu menggunakan JavaScript)
● Dahulu, ketika ingin membuat web yang interaktif, kebanyakan orang menggunakan
Adobe Flash, namun sekarang cukup menggunakan HTML 5, CSS dan JavaScript
sudah bisa dilakukan
● HTML 5 membawa struktur baru pada kerangka pembuatan halaman HTML
Kode : Struktur HTML 5
Inline Frame
Inline Frame

● Pada saat membuat halaman web, kadang kita ingin menampilkan halaman web lain
pada halaman tersebut
● Pada kasus seperti itu, kita bisa menggunakan Inline Frame
● Inline Frame di HTML bisa menggunakan tag iframe
● Inline Frame sangat banyak digunakan oleh banyak orang, contoh nya di Youtube
menggunakan Inline Frame ketika kita mau menampilkan video Youtube di website
kita
Kode : Inline Frame
Table
Table

● Saat membuat halaman Web, kita sering membuat tabel

● Di HTML, kita kita juga bisa membuat tabel
● Ada banyak sekali tag yang digunakan untuk membuat table
Table Tag

● Tag table, digunakan untuk membuat tabel

● Tag tr untuk membuat row / baris
● Tag th untuk membuat kolom header table
● Tag td untuk membuat kolom isi table
● Tag caption untuk keterangan table
● Tag thead, untuk grup header table
● Tag tbody, untuk grup isi table
● Tag tfoot, untuk grup footer table
Kode : Table
Colgroup

● Kadang kita ingin memberi style untuk kolom, jika dilakukan satu-satu, maka akan
menyulitkan
● Kita bisa menggunakan tag colgroup untuk membuat group kolom, dan tag col untuk
tiap kolom nya
● Jika kita ingin menambahkan style ke lebih dari satu kolom dengan style yang sama,
kita bisa gunakan atribut span=jumlah pada tag col
Kode : Colgroup
Colspan dan Rowspan

● Saat kita membuat tabel, kadang kita ingin menggabungkan beberapa kolom atau
beberapa baris, sehingga terlihat menjadi satu kolom
● Pada kasus itu, kita bisa menggunakan atribut colspan untuk menggabungkan
beberapa kolom dalam satu baris yang sama
● Atau menggunakan atribut rowspan untuk menggabungkan beberapa kolom di baris
yang berbeda
Kode : Colspan
Kode : Rowspan
ID
ID

● Di semua tag HTML, terdapat atribut bernama id

● id merupakan atribut yang digunakan untuk menambahkan id ke element HTML
yang kita buat
● id itu harus unik di satu halaman HTML, artinya tidak boleh ada yang sama
● id itu mungkin tidak terlalu berguna ketika kita hanya belajar HTML, namun ketika
kita belajar CSS dan JavaScript, maka id sangat berguna
Keuntungan Menggunakan ID

● Dengan menggunakan ID, kita bisa mengambil element menggunakan JavaScript

lebih mudah
● Dengan menggunakan ID, kita bisa mengubah gaya dengan CSS lebih mudah,
apalagi jika terdapat tag yang sama. Misal terdapat 5 tag div, kita hanya ingin
mengubah gaya untuk 1 div, kita bisa tambahkan id di div tersebut, dan
menggunakan id untuk mengubah gaya pada div tersebut menggunakan CSS
Kode : ID
Tag Lainnya
Tag Lainnya

● Tag lainnya
● [Link]
Pengenalan HTML Form
Pengenalan HTML Form
● Jika kita perhatikan halaman web yang populer seperti Google, Facebook dan
Youtube
● Semua web tersebut memiliki bagian untuk menerima data, yang datanya
dimasukkan oleh pengguna web tersebut
● Di HTML, untuk menerima input data dari pengguna, kita bisa menggunakan HTML
Form
● Terdapat banyak sekali jenis input data yang bisa kita buat dalam Form, seperti teks,
checkbox, selection, password, dan masih banyak yang lainnya
Contoh Form di Web Google
Contoh Form di Web Facebook
Form Tag
Form Tag
● Form Tag adalah tag dengan kata kunci form, yang digunakan sebagai bagian dari
input informasi yang diberikan oleh pengguna
● Setiap kita ingin membuat input informasi dari pengguna, maka kita harus buat
dalam Form Tag
Kode : Form
Form Attribute
● Form Tag memiliki banyak atribut, berikut adalah atribut yang penting untuk kita
ketahui
● name, berisi informasi nama form, nama form harus unik dalam satu file html, tidak
boleh ada nama form yang sama
● action, berisi URL (bisa absolute atau relative) kemana informasi di form ini akan
dikirim
● enctype, berisi tipe data form, defaultnya “application/x-www-form-urlencoded”,
atau “multipart/form-data” jika input data berisi file
● method, berisi aksi HTTP Method yang akan digunakan, jika “get” maka informasi
akan dikirim sebagai query parameter di URL, jika “post” maka informasi akan
dikirim di request body HTTP
● target, berisikan informasi dimana hasil form ini akan ditampilkan, defaultnya adalah
“_self” (dihalaman yang sama), atau “_blank” (di halaman berbeda)
Kode : Form Attribute
Input Tag
Input Tag
● Form Tag hanya deklarasi bahwa kita akan membuat form berisi input data
● Sedangkan untuk detail input data apa yang diperlukan, kita perlu menggunakan
Input Tag
● Input tag menggunakan kata kunci “input”
Input Attribute
● HTML Form mendukung banyak sekali jenis input, dan untuk mengatur jenis input,
kita harus mengubahnya menggunakan attribute. Ada beberapa attribute yang perlu
kita ketahui di input
● name, digunakan untuk memberi nama input, nama input harus unik dalam form
yang sama, tidak boleh ada yang sama
● type, digunakan untuk memilih jenis input, kita akan bahas lebih detail untuk jenis-
jenis tipe input yang tersedia di HTML
● value, digunakan untuk mengubah nilai default dari input
● disabled, digunakan untuk menjadikan input tidak aktif
● readonly, digunakan untuk menjadikan input tidak bisa diubah
● required, digunakan untuk menandai bahwa input wajib diisi
Kode : Input
Input Text
Input Text
● Input type dengan nilai text, digunakan untuk membuat input data text / tulisan /
string
● Input Text ditampilkan dalam bentuk input satu baris, oleh karena itu kita tidak bisa
menambahkan karakter ENTER pada Input Text
● Input Text cocok untuk jenis input data text yang memang tidak lebih dari baris,
artinya tidak membutuhkan karakter ENTER
Kode : Input Text
Label Tag
Label Tag
● Saat kita membuat caption untuk input, direkomendasikan menggunakan Label,
dibanding menggunakan teks polos atau tag seperti span / p / div
● Label Tag bisa dikaitkan dengan input, sehingga ketika kita mengklik tulisan pada
Label, secara otomatis fokus akan berpindah ke Input
● Selain itu, saat mengaktifkan Screen Reader, ketika kita mengklik Input, secara
otomatis Label yang terasosiasi dengan Input tersebut akan dibaca oleh Screen
Reader
● Label memiliki attribute “for” yang digunakan untuk menentukan Input Id yang
dipilih untuk diasosiasikan
Kode : Label Tag
Input Submit
Input Submit
● Saat membuat Form, kita bisa menambahkan tombol yang bisa digunakan untuk
mengirim data yang diinputkan di dalam form, atau disebut Submit
● Tombol Submit, bisa kita buat menggunakan Input dengan type Submit
Kode : Input Submit
Memproses Input
Form Action
● Seperti yang di materi sebelumnya dibahas, untuk mengirim data di form, kita harus
tentukan kemana semua input data akan dikirim menggunakan attribute “action”
pada form
● Kita juga bisa menentukan jenis method, baik itu “get” atau “post” ketika mengirim
input data
Kode : Form Action
Memproses Input
● Untuk memproses Input, kita harus menggunakan teknologi berbasis server di Web
Server
● HTML adalah halaman web yang di tampilkan di client (Web Browser), sehingga
HTML tidak bisa digunakan untuk memproses input data dari form
● Untuk memproses data, kita harus menggunakan teknologi berbasis server, misal
contohnya adalah PHP, NodeJS, Java, dan masih banyak yang lainnya
Input Reset
Input Reset
● Input dengan type reset, adalah input yang akan ditampilkan dalam bentuk tombol
● Jika tombol reset tersebut di klik, maka seluruh input di form tersebut, nilainya akan
berubah menjadi nilai default seperti yang terdapat di attribute value nya
Kode : Input Reset
Input Button
Input Button
● Membuat tombol tidak hanya bisa menggunakan input type submit atau reset, kita
juga bisa menggunakan input type button
● Namun, menggunakan input type button tidak terlalu berguna jika hanya
menggunakan HTML
● Biasanya, pembuat web akan menambahkan interaksi terhadap tombol tersebut
menggunakan kode JavaScript (yang bisa dipelajari setelah belajar HTML dan CSS)
Kode : Input Button
Input Checkbox
Input Checkbox
● Checkbox adalah input dengan tipe ceklis, dimana kita bisa menceklis atau tidak
menceklis input tersebut
● Biasanya, Checkbox digunakan untuk menerima input lebih dari satu, namun
inputnya sudah disesuaikan
Kode : Input Checkbox
Input Color
Input Color
● Input type color adalah type untuk menerima input warna
● Warna di HTML akan ditulis dalam bentuk hex code
● Contohnya kita bisa lihat daftar hex code warna disini : [Link]
Kode : Input Color
Input Date
Input Date
● Input type date, adalah jenis input untuk menerima informasi berupa tanggal (tahun,
bulan dan tanggal)
● Jika kita ingin mengubah nilai value di input type date, kita bisa menggunakan
format yyyy-mm-dd
● yyyy adalah tahun dalam 4 digit
● mm adalah bulan dalam 2 digit
● dd adalah tanggal dalam 2 digit
● Untuk membatasi minimal dan maksimal tanggal yang dipilih, kita bisa gunakan
atribut min dan max
Kode : Input Date
Input Date Time
Input Date Time
● Jika untuk input tanggal bisa menggunakan type date, jika kita butuh sampai ke
menit, kita bisa menggunakan Input Date Time, yaitu menggunakan type datetime-
local
● Format value untuk Date Time adalah yyyy-mm-ddThh:mm
● Dimana tanggal dan waktu dipisah oleh karakter T
● hh adalah jam dalam format 2 digit
● mm adalah menit dalam format 2 digit
● Untuk membatasi minimal dan maksimal waktu yang dipilih, kita bisa gunakan
atribut min dan max
Kode : Input Date Time
Input Month
Input Month
● Input type month digunakan untuk input informasi berupa tahun dan bulan
● Format value untuk input type month adalah yyyy-mm
● yyyy adalah 4 digit tahun
● mm adalah 2 digit bulan
● Untuk membatasi minimal dan maksimal bulan yang dipilih, kita bisa gunakan
atribut min dan max
Kode : Input Month
Input Time
Input Time
● Jika kita hanya membutuhkan informasi jam dan menit, kita bisa menggunakan input
type time
● Input type time menggunakan format hh:mm
● hh adalah jam dalam 2 digit
● mm adalah menit dalam 2 digit
● Untuk membatasi minimal dan maksimal waktu yang dipilih, kita bisa gunakan
atribut min dan max
Kode : Input Time
Input Week
Input Week
● Input type week digunakan untuk menerima input minggu dalam satu tahun
● Total minggu dalam satu tahun berkisar antara 52-53, artinya itu adalah maksimal
nilai untuk week
● Format penulisan week bisa menggunakan pola yyyy-Www
● yyyy adalah tahun dalam 4 digit
● ww adalah minggu dalam 2 digit
● Untuk membatasi minimal dan maksimal minggu yang dipilih, kita bisa gunakan
atribut min dan max
Kode : Input Week
Input Email
Input Email
● Input email adalah input text, namun informasi yang dimasukkan haruslah dalam
format email
● Jika format email tidak benar, secara otomatis form tidak akan bisa di submit
Kode : Input Email
Input File
Input File
● Input dengan type file, digunakan untuk meng-upload / mengunggah berkas file dari
komputer kita
● Saat kita membuat input dengan type file, maka agar form mengirim berkas file-nya,
kita harus gunakan method post, dan juga enctype multipart/form-data
Kode : Input File
Input Hidden
Input Hidden
● Di HTML, terdapat fitur input type hidden
● Input type hidden artinya input datanya tidak terlihat oleh pengguna Web
● Biasanya input data hidden memang tidak dimaksudkan untuk diinputkan oleh
pengguna, biasanya pada kasus-kasus tertentu input data hidden digunakan untuk
informasi yang dibuat secara otomatis oleh web kita, dan tidak butuh diubah atau
dilihat oleh pengguna
● Misal saat saya mengubah nama pengguna, kita juga mungkin harus tahu user_id
dari pengguna, namun kita tidak mau user_id bisa diubah oleh pengguna, kita bisa
menggunakan input type hidden untuk user_id nya
Kode : Input Hidden
Input Image
Input Image
● Input type image bukan digunakan untuk input berupa berkas gambar, melainkan
digunakan untuk membuat tombol submit namun berupa gambar
● Input type button, submit atau reset menggunakan text untuk tombolnya,
sedangkan image menggunakan gambar yang bisa kita ubah menggunakan atribut
src
● Misal :
[Link]
Kode : Input Image
Input Number
Input Number
● Input type number adalah input untuk informasi number atau angka
● Jika kita menginputkan bukan number atau angka, secara otomatis HTML
menganggap nilainya tidak valid
● Untuk input type number, kita bisa gunakan atribut tambahkan yaitu min dan max
● min digunakan untuk mengatur nilai minimal
● max digunakan untuk mengatur nilai maksimal
Kode : Input Number
Input Password
Input Password
● Input type password adalah input untuk informasi teks sama seperti input type text,
namun pada input type password, karakter akan di masking (tidak ditampilkan)
● Input type password sangat cocok untuk input teks yang rahasia, sehingga tidak bisa
diintip oleh orang lain
Kode : Input Password
Input Radio
Input Radio
● Input type radio merupakan input untuk informasi pilihan
● Pada checkbox, kita bisa memilih lebih dari satu checkbox walaupun menggunakan
name yang sama
● Sedangkan pada radio, kita hanya bisa memilih salah satu saja radio pada input
name yang sama
● Input ini cocok untuk input data pilihan ganda misalnya
Kode : Input Radio
Input Range
Input Range
● Input type range adalah input untuk number / angka namun ditentukan jangkauan
minimal dan minimal nya
● Ini mirip seperti input number, yang membedakan adalah, bentuk komponen
inputnya tidak seperti input text, melainkan dalam bentuk slider, yang bisa di slide
ke kiri untuk menurunkan nilai dan ke kanan untuk menaikkan nilai
● Secara default, nilai range naik bertahap sebanyak +1 atau berkurang sebanyak -1,
namun jika kita ingin mengubah nilai naik dan turun nya, kita bisa tambahkan
atribute step
Kode : Input Range
Input Telephone
Input Telephone
● Input type tel bisa digunakan untuk input informasi telepon
● Namun berbeda dengan input email atau number, aturan di input tel harus kita
tentukan sendiri, hal ini karena format telepon di tiap negara berbeda-beda
● Kita bisa mengubah aturan format nomor telepon menggunakan atribut pattern,
dimana isinya harus berisi Regular Expression
● Materi Regular Expression akan dipelajari di kelas JavaScript, namun disini kita bisa
mencoba-coba menggunakan website berikut :
[Link]
Kode : Input Telepon
Input URL
Input URL
● Input type url digunakan untuk menerima input data dalam bentuk URL, seperti
alamat website pribadi, website social media, dan lain-lain
● Jika format url tidak valid, maka HTML tidak akan menerima input data url tersebut
Kode : Input URL
Text Area Tag
Text Area Tag
● HTML juga menyediakan tag textarea, yang bisa digunakan untuk input text yang
multi baris
● Untuk menentukan panjang input, kita bisa gunakan atribut cols, dan untuk
menentukan tinggi input, kita bisa gunakan rows
Kode : Text Area Tag
Button Tag
Button Tag
● Button tag adalah tag yang bisa kita gunakan untuk membuat tombol
● Apa bedanya dengan input type button?
● Karena button tag memiliki content di dalam tag nya, jadi kita bisa dengan bebas
menambahkan isi dari button, misal text atau gambar
● Jadi menggunakan button tag akan lebih flexible dibanding menggunakan input type
button
● Button juga memiliki atribut type, yang bisa kita gunakan untuk mengubah jenis tipe
button, dari mulai button (biasa), reset dan submit
Kode : Button Tag
Select Tag
Select Tag
● Select tag adalah alternatif lain seperti input type radio
● Saat menggunakan input type radio, jika opsi pilihan terlalu banyak, maka tampilan
input akan sangat panjang
● Select tag menawarkan solusi yang sederhana, dimana input akan seperti type text,
namun kita bisa memilih opsi pilihan seperti radio type
Option Tag
● Untuk menambah opsi pilihan dalam select tag, kita bisa menggunakan option tag
● Option tag memiliki atribut value sebagai nilainya, namun untuk ditampilkan dalam
Web Browser, kita bisa isi option tag dengan content misal text
● Selain itu, jika kita ingin memilih secara default salah satu option, kita bisa
menggunakan atribut selected
Kode : Select Tag
Multiple
● Salah satu kelebihan dibandingkan radio type, di dalam select tag, jika misal kita
bisa memilih beberapa opsi pilihan seperti checkbox, kita bisa gunakan atribut
multiple
● Untuk menentukan seberapa besar tampilan ketika menggunakan mode multiple,
kita bisa gunakan atribut size
Kode : Multiple Select
Option Group Tag
● Saat pilihan option sangat banyak, kadang ada baiknya kita buat option dalam grup
● Hal ini akan membuat pengguna lebih mudah ketika melakukan pemilihan
● Kita bisa bungkus option dalam grup menggunakan optgroup tag
● Dan untuk menambahkan deskripsi grup, kita bisa gunakan atribut label
Kode : Option Group
Data List Tag
Data List Tag
● Saat melakukan pencarian di Google misalnya, kita sering melihat rekomendasi
berupa autocomplete kata-kata yang ingin kita cari
● Saat kita membuat input type text, kita bisa menambahkan sumber data yang bisa
dijadikan sebagai rekomendasi input value, juga autocomplete
● Kita bisa menggunakan datalist tag
● Di dalam datalist tag, kita bisa gunakan option tag
● Untuk menghubungkan dari input type text ke datalist, kita bisa menggunakan
atribut list yang mengacu ke id datalist
Kode : Data List Tag
Field Set Tag
Field Set Tag
● Tag fieldset digunakan untuk membungkus / grouping beberapa input sehingga lebih
mudah untuk dimengerti ketika dilihat oleh pengguna
● Menggunakan fieldset tag sangat baik ketika misal input data sangat banyak, dan
kita ingin melakukan grouping input data yang sesuai
● Contoh ketika registrasi, dibutuhkan identitas, alamat, dan lain-lain, kita bisa
grouping berdasarkan input data yang sesuai
Legend Tag
● Saat menggunakan fieldset tag, biasanya kita akan menambahkan informasi berupa
deskripsi group
● Untuk menambahkan informasi itu, kita bisa menggunakan legend tag
Kode : Field Set Tag
Materi Selanjutnya
Materi Selanjutnya
● CSS
● JavaScript