Materi
Perkenalan
HTML adalah bahasa komputer yang digunakan untuk
membuat kerangka atau struktur untuk Web pages (halaman
website) di internet.
HTML adalah singkatan dari Hyper Text Markup Language.
Fungsi HTML adalah sebagai 'kerangka' dari sebuah website.
Bagaimana HTML Bekerja di Web
Browser?
Web browser seperti Chrome, Firefox, Edge, Safari,
atau Opera akan membaca dokumen HTML. Dokumen HTML yang
berisi tag-tag HTML akan memberitahu browser bagaimana cara
menampilkan sebuah konten.
Selain HTML, ada juga bahasa CSS (Cascading Style Sheet) dan
JavaScript yang akan kita pelajari untuk membuat sebuah
tampilan website yang interaktif. Secara fungsi, ketiga bahasa
tersebut bisa dianalogikan seperti ini:
Fungsi HTML adalah sebagai 'kerangka', yang memberi struktur
pada website.
Fungsi CSS sebagai 'baju' , yang memberi warna dan layout pada
website.
Fungsi JavaScript, sebagai element yang membuat website
menjadi interaktif.
HTML Tag :
Materi
HTML Tag
HTML terdiri dari komponen yang disebut HTML Tag.
Pada umumnya, ada 2 tipe HTML Tag:
Opening Tag (tag pembuka) - contohnya adalah <p>.
Closing Tag (tag penutup) - contohnya adalah </p>.
📝 Catatan:
Tag <p> digunakan untuk menampilkan paragraf. Topik ini akan
kita pelajari di bagian selanjutnya.
Berikut adalah format penulisan Opening Tag dan Closing Tag:
Struktur Dokumen HTML
Secara garis besar, struktur dokumen HTML dapat digambarkan
sebagai berikut:
Dokumen HTML memiliki 3 tag utama, yaitu <html>,<head>,
dan <body>. Ketiga tag tersebut harus diketik persis seperti
contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Penjelasan dari contoh di atas:
<!DOCTYPE> syntax mendefinisikan versi dari HTML yang
digunakan dan harus dideklarasi sebelum tag <html>. <!
DOCTYPE html> mendefinisikan bahwa dokumen ini adalah
HTML5.
<html></html> adalah root element dari halaman HTML. Semua
HTML tag lainnya harus dibungkus dengan tag ini.
<head> pada umumnya berisi <meta>, <title>, konten css/js
internal maupun link ke file css/js eksternal.
<body> berisi konten website yang ingin ditampilkan pada
browser.
📝 Catatan:
Tag <meta> digunakan untuk menulis info tentang suatu dokumen
HTML seperti deskripsi, nama pengarang, keywords, dan tanggal
terakhir dokumen diperbaharui. Tag <meta> tidak akan tampil di
halaman HTML.
Nah, di bawah ini adalah contoh sederhana file HTML yang sudah
memiliki title dan konten:
<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
💡 Cobalah kode di atas di Code Editor.
Klik tombol Mulai Latihan di halaman paling bawah untuk
menggunakan Code Editor.
Contoh di atas apabila dibuka pada browser akan terlihat seperti
ini:
Perhatikan gambar di atas:
Element <title>Website Pertamaku</title> akan menghasilkan
tulisan "Website Pertamaku" pada judul
tab halaman browser
Element <h1>Hello World!</h1> menghasilkan tulisan "Hello
World!" sebagai konten pada file HTML kita.
📝 Catatan:
Tag <h1> adalah salah satu tag dari tag HTML heading yang
berfungsi untuk menampilkan teks. Topik ini akan kita pelajari di
bagian selanjutnya.
HTML Element :
Materi
HTML Element
HTML Element merupakan sebuah komponen dalam halaman
web, bisa berupa paragraf, judul, atau gambar.
Struktur dari sebuah HTML element dapat digambarkan seperti
ini:
Pada umumnya, HTML Element terdiri dari:
Opening Tag (tag pembuka) - contohnya adalah <p>.
Closing Tag (tag penutup) - contohnya adalah </p>.
Attribute - contohnya adalah style yang
memiliki Value "color=red". HTML Attribute akan kita pelajari
di topik selanjutnya.
Content (konten) yang ingin ditampilkan di browser -
contohnya adalah My first paragraph.
Ada dua jenis HTML Element, yaitu:
1. HTML Element yang memiliki Opening Tag (tag pembuka)
dan Closing Tag (tag penutup) - contohnya
adalah <p> dan </p>.
2. Empty HTML Element: memiliki Self-closing Tag, yang
hanya memiliki Opening Tag (tag pembuka) dengan garis
miring sebelum kurung tutup - contohnya
adalah <br /> atau <img />.
📝 Catatan:
Tag <br /> digunakan untuk berganti baris (spasi).
Tag <img /> digunakan untuk menampilkan element gambar.
Topik ini akan kita pelajari di bagian selanjutnya.
Agar lebih jelas, berikut adalah contoh penggunaan HTML dan
Empty HTML Element:
<!-- HTML Element yang memiliki tag pembuka dan tag penutup -->
<p style="color:red">This is a paragraph.</p>
<!-- Empty HTML Element yang memiliki self-closing tag -->
<img src="[Link] alt="kucing" />
💡 Cobalah kode di atas di Code Editor.
Klik tombol Mulai Latihan di halaman paling bawah untuk
menggunakan Code Editor.
Kalau kalian perhatikan, tag <img> tidak memiliki tag
penutup </img> di belakangnya. Bedanya, tag tersebut hanya
memiliki / (tanda garis miring) di bagian belakang tag
pembukanya.
Materi
HTML Attribute
Masih ingat dengan konsep HTML element dan HTML tag?
Opening Tag (tag pembuka) menandakan awal dari sebuah
element. Di dalam Opening Tag dapat berisi attribute, yang
berfungsi untuk memberikan informasi tambahan kepada
sebuah element.
Contoh penggunaan attribute:
<!-- <img> adalah tag untuk memasukkan element gambar -->
<img width="80%" src="[Link] />
💡 Cobalah kode di atas di Code Editor.
Klik tombol Mulai Latihan di halaman paling bawah untuk
menggunakan Code Editor.
Pada kode di atas, tag <img> memiliki dua attribute:
width yang berfungsi untuk menentukan lebar dari element
gambar, dan diberikan value (nilai) lebar sebesar 80%
src yang berfungsi untuk menentukan sumber gambar, dan
diberikan value (nilai) untuk diarahkan ke
tautan [Link]
Contoh lainnya:
<!-- Pada contoh di bawah, href adalah attribute dari tag <a> -->
<a href="[Link] di sini untuk ke halaman
Google</a>
💡 Cobalah kode di atas di Code Editor.
Klik tombol Mulai Latihan di halaman paling bawah untuk
menggunakan Code Editor.
Tag <a> menandakan sebuah element tautan (hyperlink).
Tautan tersebut bisa diarahkan ke halaman web lain atau
bahkan ke suatu bagian pada halaman web yang sama.
Attribute href kita gunakan untuk memberi tahu tujuan dari
tautan ini.
Dalam kode di atas, attribute href kita isi dengan alamat web
milik Google [Link] sehingga ketika kita klik
element tautan tersebut, kita akan diarahkan ke halaman
web Google.
Materi
HTML Comment
Comment Dalam Pemrograman
Tidak hanya dalam HTML, dalam dunia
pemrograman, comment adalah catatan kecil yang bisa kita
tambahkan ke dalam kode sumber (source code) tanpa
mengubah fungsi dari program yang kita buat.
Maksudnya, keberadaan comment dalam source code akan
diabaikan dan tidak dibaca oleh komputer saat programnya
dijalankan. Dalam kasus HTML, browser akan mengabaikan
semua comment yang kita tulis.
"Lalu, apa gunanya comment kalau begitu?"
Bayangkan kalian diberi tugas untuk memperbaiki sebuah kode
HTML. Namun, kode tersebut rumit dan sulit bagi kalian untuk
tahu fungsi dari masing-masing bagian dalam kode.
Pasti kalian akan berpikir:
"Aduh, andaikan programmer yang bikin kodenya bisa kasih
penjelasan kodenya sedikit aja"
Nah itulah gunanya comment. Kita bisa menambahkan comment
pada source code kita untuk memberi catatan kecil yang
menjelaskan kode yang kita tulis.
Comment tidak hanya berguna bagi programmer lain, tetapi juga
akan berguna bagi kita sebagai pembuatnya. Misalnya, bisa saja
kalian lupa tentang fungsi kode yang kalian tulis di 3 bulan yang
lalu.
HTML comment diawali dengan <!-- dan diakhiri dengan -->.
Contohnya seperti ini:
<html>
<head>
<title>Website Pribadiku</title>
</head>
<body>
<header>
....
</header>
<!-- Paragraf di bawah ini dalam bahasa Latin -->
<main>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Reiciendis porro deserunt voluptatum, itaque dolore alias, optio harum
pariatur eveniet, quibusdam nostrum reprehenderit odio eius autem
aperiam nobis quod maxime. Ipsam.
</p>
</main>
</body>
</html>
Maka, pada browser akan terlihat seperti ini:
Kalau kalian perhatikan, comment kita Paragraf di bawah ini dalam bahasa
Latin tidak ditampilkan dalam halaman web. Namun orang lain
yang membaca source code kita akan tetap dapat membaca
comment kita.
Dengan cara yang sama, kita juga bisa membuat beberapa kode
yang kita ketik tidak dijalankan oleh browser. Misalnya ketika
ada situasi di mana kalian ingin menghilangkan sebuah element
dalam halaman web untuk sementara. Daripada kalian hapus
kodenya, kalian bisa membungkus potongan kode yang ingin
kalian hilangkan sementara dalam tanda <!-- dan -->.
<!DOCTYPE html>
<html>
<head>
<title>Website Pribadiku</title>
</head>
<body>
<!-- <h1>Hello World!<h1> -->
<p> Halo semua! Namaku Sarah!</p>
</body>
</html>
Pada browser, kode di atas akan menampilkan hasil seperti ini:
Untuk menampilkan lagi element <h1>Hello World!</h1>, cukup
hilangkan tanda <!-- dan --> yang membungkus potongan
kodenya.
Materi
Heading
Coba perhatikan buku pelajaran di sekolah kita, terdapat daftar isi
bukan? Daftar isi tersebut berisi daftar beberapa bab dan sub-bab
yang terdapat pada buku tersebut. Secara langsung, daftar isi
akan memperlihatkan ke kita bagaimana struktur isi buku
tersebut.
Begitupun heading, tag ini akan menampilkan struktur website
kita. Bisa diumpamakan seperti tag <h1> sebagai judul bab pada
sebuah buku, kemudian <h2> sebagai judul sub-bab.
Tag heading hanya memiliki 6 tingkatan. Penulisannya seperti di
bawah ini:
<h1>Heading Satu</h1>
<h2>Heading Dua</h2>
<h3>Heading Tiga</h3>
<h4>Heading Empat</h4>
<h5>Heading Lima</h5>
<h6>Heading Enam</h6>
Hasilnya di browser akan seperti ini:
Penggunaan tag heading sebaiknya berurutan. Hindari
penggunaan seperti contoh di bawah ini:
<h1>Heading Satu</h1>
<h5>Heading Dua</h5>
<h3>Heading Tiga</h3>
Materi
Paragraf
Untuk membuat paragraf pada halaman website, maka
dibutuhkan tag <p>.
Penulisannya seperti ini:
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate
tempora
provident quaerat officia maxime totam, repudiandae libero ducimus
hic esse
ipsam quam cum voluptates enim laudantium fugit quis eum suscipit.
</p>
Di browser, kode di atas akan terlihat seperti ini: