1.
PENGENALAN HTML
HTML adalah bahasa markup standar untuk membuat halaman
Web.
Apa itu HTML?
HTML adalah singkatan dari Hyper Text Markup Language
HTML adalah bahasa markup standar untuk membuat halaman
Web
HTML menjelaskan struktur halaman Web
HTML terdiri dari serangkaian elemen
Elemen HTML memberi tahu browser cara menampilkan konten
Elemen HTML memberi label pada bagian konten seperti "ini
adalah judul", "ini adalah paragraf", "ini adalah tautan", dll.
Dokumen HTML Sederhana
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
1 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
</body>
</html>
Contoh Dijelaskan
Deklarasi tersebut <!DOCTYPE html>mendefinisikan bahwa
dokumen ini adalah dokumen HTML5
Elemen <html>adalah elemen akar dari halaman HTML
Elemen tersebut <head>berisi informasi meta tentang halaman
HTML
Elemen <title>menentukan judul untuk halaman HTML (yang
ditampilkan di bilah judul browser atau di tab halaman)
Elemen <body>mendefinisikan badan dokumen, dan merupakan
wadah untuk semua konten yang terlihat, seperti judul,
paragraf, gambar, hyperlink, tabel, daftar, dll.
Elemen <h1>mendefinisikan judul besar
Elemen <p>mendefinisikan paragraf
Apa itu Elemen HTML?
Elemen HTML ditentukan oleh tag awal, beberapa konten, dan tag
akhir:
< nama tag > Konten ada di sini... < / nama tag >
Elemen HTML adalah segalanya mulai dari tag awal hingga tag akhir:
<h1> Judul Pertama Saya </h1>
< p > Paragraf pertama saya. < /p >
2 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Catatan: Beberapa elemen HTML tidak memiliki konten (seperti
elemen <br>). Elemen-elemen ini disebut elemen kosong. Elemen
kosong tidak memiliki tag akhir!
Peramban Web
Tujuan browser web (Chrome, Edge, Firefox, Safari) adalah untuk
membaca dokumen HTML dan menampilkannya dengan benar.
Browser tidak menampilkan tag HTML, namun menggunakannya
untuk menentukan cara menampilkan dokumen:
3 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Struktur Halaman HTML
Di bawah ini adalah visualisasi struktur halaman HTML:
<html>
<kepala>
<title>Judul halaman</title>
</kepala>
<tubuh>
<h1>Ini adalah judul</h1>
<p>Ini adalah sebuah paragraf.</p>
<p>Ini paragraf lain.</p>
</tubuh>
</html>
Catatan: Konten di dalam bagian <body> akan ditampilkan di
browser. Konten di dalam elemen <title> akan ditampilkan di bilah
judul browser atau di tab halaman.
4 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Sejarah HTML
Sejak awal World Wide Web, ada banyak versi HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
5 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Tutorial ini mengikuti standar HTML5 terbaru.
6 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Pelajari HTML Menggunakan Notepad
atau TextEdit
Halaman web dapat dibuat dan dimodifikasi dengan menggunakan
editor HTML profesional.
Namun, untuk mempelajari HTML kami merekomendasikan editor teks
sederhana seperti Notepad (PC) atau TextEdit (Mac).
Kami percaya bahwa menggunakan editor teks sederhana adalah cara
yang baik untuk belajar HTML.
Ikuti langkah-langkah di bawah ini untuk membuat halaman web
pertama Anda dengan Notepad atau TextEdit.
Langkah 1: Buka Notepad (PC)
Windows 8 atau lebih baru:
Buka Layar Mulai (simbol jendela di kiri bawah layar Anda).
Ketik Buku Catatan .
Windows 7 atau versi lebih lama:
Buka Mulai > Program > Aksesori > Notepad
7 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Langkah 1: Buka TextEdit (Mac)
Buka Penemu > Aplikasi > TextEdit
Ubah juga beberapa preferensi agar aplikasi menyimpan file dengan
benar. Di Preferensi > Format > pilih "Teks Biasa"
Kemudian di bawah "Buka dan Simpan", centang kotak yang
bertuliskan "Tampilkan file HTML sebagai kode HTML, bukan teks yang
diformat".
Kemudian buka dokumen baru untuk meletakkan kodenya.
Langkah 2: Tulis Beberapa HTML
Tulis atau salin kode HTML berikut ke Notepad:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
8 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Langkah 3: Simpan Halaman HTML
Simpan file di komputer Anda. Pilih File > Simpan sebagai di menu
Notepad.
Beri nama file "[Link]" dan atur pengkodeannya ke UTF-8 (yang
merupakan pengkodean pilihan untuk file HTML).
Tip: Anda dapat menggunakan .htm atau .html sebagai ekstensi file.
Tidak ada perbedaan; ini terserah kamu.
9 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Langkah 4: Lihat Halaman HTML di
Browser Anda
Buka file HTML yang disimpan di browser favorit Anda (klik dua kali
pada file tersebut, atau klik kanan - dan pilih "Buka dengan").
Hasilnya akan terlihat seperti ini:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
10 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
</body>
</html>
Contoh Dasar HTML
Dalam bab ini kami akan menunjukkan beberapa contoh dasar
HTML.
Jangan khawatir jika kami menggunakan tag yang belum Anda
pelajari.
Dokumen HTML
Semua dokumen HTML harus dimulai dengan deklarasi tipe
dokumen: <!DOCTYPE html>.
Dokumen HTML itu sendiri dimulai dengan <html>dan diakhiri
dengan </html>.
Bagian yang terlihat dari dokumen HTML adalah
antara <body>dan </body>.
Contoh
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
11 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Deklarasi <!DOCTYPE>
Deklarasi tersebut <!DOCTYPE>mewakili tipe dokumen, dan membantu
browser menampilkan halaman web dengan benar.
Itu hanya boleh muncul sekali, di bagian atas halaman (sebelum tag
HTML apa pun).
Deklarasi ini <!DOCTYPE>tidak membedakan huruf besar-kecil.
Deklarasi <!DOCTYPE>untuk HTML5 adalah:
<!DOCTYPE html>
Judul HTML
Judul HTML ditentukan dengan tag <h1>to <h6>.
<h1>mendefinisikan judul yang paling penting. <h6>mendefinisikan judul
yang paling tidak penting:
Contoh
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Paragraf HTML
Paragraf HTML didefinisikan dengan <p>tag:
12 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Contoh
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Tautan HTML
Tautan HTML ditentukan dengan <a>tag:
Contoh
<a href="[Link] is a link</a>
Tujuan tautan ditentukan dalam hrefatribut.
Atribut digunakan untuk memberikan informasi tambahan tentang
elemen HTML.
Anda akan mempelajari lebih lanjut tentang atribut di bab
selanjutnya.
Gambar HTML
Gambar HTML ditentukan dengan <img>tag.
File sumber ( src), teks alternatif ( alt), width, dan heightdisediakan
sebagai atribut:
Contoh
<img src="[Link]" alt="[Link]" width="104" height=
"142">
13 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Cara Melihat Sumber HTML
Pernahkah Anda melihat halaman Web dan bertanya-tanya, "Hei!
Bagaimana mereka melakukan itu?"
Lihat Kode Sumber HTML:
Klik CTRL + U di halaman HTML, atau klik kanan pada halaman dan
pilih "Lihat Sumber Halaman". Ini akan membuka tab baru yang berisi
kode sumber HTML halaman tersebut.
Periksa Elemen HTML:
Klik kanan pada sebuah elemen (atau area kosong), dan pilih
"Periksa" untuk melihat terdiri dari elemen apa (Anda akan melihat
HTML dan CSS). Anda juga dapat mengedit HTML atau CSS dengan
cepat di panel Elemen atau Gaya yang terbuka.
Elemen HTML
Elemen HTML ditentukan oleh tag awal, beberapa konten, dan tag
akhir.
Elemen HTML
Elemen HTML adalah segalanya mulai dari tag awal hingga tag akhir:
< nama tag > Konten ada di sini... < / nama tag >
14 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Contoh beberapa elemen HTML:
<h1> Judul Pertama Saya </h1>
< p > Paragraf pertama saya. < /p >
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Catatan: Beberapa elemen HTML tidak memiliki konten (seperti
elemen <br>). Elemen-elemen ini disebut elemen kosong. Elemen
kosong tidak memiliki tag akhir!
Elemen HTML Bersarang
Elemen HTML dapat disarangkan (artinya elemen dapat berisi elemen
lain).
Semua dokumen HTML terdiri dari elemen HTML bersarang.
Contoh berikut berisi empat elemen HTML
( <html>, <body>, <h1> dan <p>):
15 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Contoh
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Contoh Dijelaskan
Elemennya <html>adalah elemen root dan mendefinisikan keseluruhan
dokumen HTML.
Ini memiliki tag awal <html>dan tag akhir </html>.
Lalu, di dalam <html>elemen tersebut terdapat <body> elemen:
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
Elemen <body>mendefinisikan isi dokumen.
Ini memiliki tag awal <body>dan tag akhir </body>.
Kemudian, di dalam <body>elemen tersebut terdapat dua elemen
lainnya: <h1>dan <p>:
16 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Elemen <h1>mendefinisikan judul.
Ini memiliki tag awal <h1>dan tag akhir </h1>:
<h1>My First Heading</h1>
Elemen <p>mendefinisikan paragraf.
Ini memiliki tag awal <p>dan tag akhir </p>:
<p>My first paragraph.</p>
Jangan Pernah Lewati Tag Akhir
Beberapa elemen HTML akan ditampilkan dengan benar, meskipun
Anda lupa tag penutupnya:
Contoh
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
17 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
HTML Tidak Peka Huruf Besar-kecil
Tag HTML tidak membedakan huruf besar dan kecil: <P>artinya sama
dengan <p>.
Standar HTML tidak memerlukan tag huruf kecil, tetapi
W3C merekomendasikan huruf kecil dalam HTML,
dan memerlukan huruf kecil untuk jenis dokumen yang lebih ketat
seperti XHTML.
Referensi Tag HTML
Referensi tag W3Schools berisi informasi tambahan tentang tag ini dan atributnya.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
Untuk daftar lengkap semua tag HTML yang tersedia,
kunjungi Referensi Tag HTML kami .
18 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Atribut HTML memberikan informasi tambahan tentang elemen
HTML.
Atribut HTML
Semua elemen HTML dapat memiliki atribut
Atribut memberikan informasi tambahan tentang elemen
Atribut selalu ditentukan dalam tag awal
Atribut biasanya datang dalam pasangan nama/nilai
seperti: name="value"
Atribut href
Tag <a>mendefinisikan hyperlink. Atribut hrefmenentukan URL
halaman yang dituju linknya:
Contoh
<a href="[Link] W3Schools</a>
Atribut src
Tag <img>digunakan untuk menyematkan gambar di halaman HTML.
Atribut srcmenentukan jalur ke gambar yang akan ditampilkan:
Contoh
<img src="img_girl.jpg">
Cobalah sendiri "
19 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Ada dua cara untuk menentukan URL dalam src atribut:
1. URL Absolut - Tautan ke gambar eksternal yang dihosting di situs
web lain.
Contoh: src="[Link] .
Catatan: Gambar eksternal mungkin dilindungi hak cipta. Jika Anda
tidak mendapatkan izin untuk menggunakannya, Anda mungkin
melanggar undang-undang hak cipta. Selain itu, Anda tidak dapat
mengontrol gambar eksternal; itu bisa tiba-tiba dihapus atau diubah.
2. URL Relatif - Tautan ke gambar yang dihosting di dalam situs
web. Di sini, URL tidak menyertakan nama domain. Jika URL diawali
tanpa garis miring, URL tersebut akan relatif terhadap halaman saat
ini. Contoh: src="img_girl.jpg". Jika URL dimulai dengan garis miring,
itu akan berhubungan dengan domain. Contoh:
src="/images/img_girl.jpg".
Tip: Hampir selalu yang terbaik adalah menggunakan URL relatif.
Mereka tidak akan rusak jika Anda mengubah domain.
Atribut lebar dan tinggi
Tag <img>juga harus berisi atribut widthand height, yang menentukan
lebar dan tinggi gambar (dalam piksel):
Contoh
<img src="img_girl.jpg" width="500" height="600">
Atribut alt
Atribut yang diperlukan altuntuk <img> tag menentukan teks alternatif
untuk suatu gambar, jika gambar karena alasan tertentu tidak dapat
20 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
ditampilkan. Hal ini dapat disebabkan oleh koneksi yang lambat, atau
kesalahan pada srcatribut, atau jika pengguna menggunakan
pembaca layar.
Contoh
<img src="img_girl.jpg" alt="Girl with a jacket">
Contoh
Lihat apa yang terjadi jika kita mencoba menampilkan gambar yang
tidak ada:
<img src="img_typo.jpg" alt="Girl with a jacket">
Anda akan mempelajari lebih lanjut tentang gambar di bab Gambar
HTML kami .
Atribut gaya
Atribut styledigunakan untuk menambahkan gaya ke suatu elemen,
seperti warna, font, ukuran, dan lainnya.
Contoh
<p style="color:red;">This is a red paragraph.</p>
Atribut lang
Anda harus selalu menyertakan langatribut di dalam <html>tag, untuk
menyatakan bahasa halaman Web. Ini dimaksudkan untuk membantu
mesin pencari dan browser.
21 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Contoh berikut menetapkan bahasa Inggris sebagai bahasanya:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Kode negara juga dapat ditambahkan ke kode bahasa di lang atribut.
Jadi, dua karakter pertama menentukan bahasa halaman HTML, dan
dua karakter terakhir menentukan negara.
Contoh berikut menetapkan bahasa Inggris sebagai bahasanya dan
Amerika Serikat sebagai negaranya:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Anda dapat melihat semua kode bahasa di Referensi Kode Bahasa
HTML kami .
Judul Atribut
Atribut titlemendefinisikan beberapa informasi tambahan tentang
suatu elemen.
Nilai atribut title akan ditampilkan sebagai tooltip ketika Anda
mengarahkan mouse ke elemen:
22 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Contoh
<p title="I'm a tooltip">This is a paragraph.</p>
Saran Kami: Selalu Gunakan Atribut
Huruf Kecil
Standar HTML tidak memerlukan nama atribut huruf kecil.
Atribut title (dan semua atribut lainnya) dapat ditulis dengan huruf
besar atau kecil seperti title atau TITLE .
Namun, W3C merekomendasikan atribut huruf kecil dalam HTML,
dan meminta atribut huruf kecil untuk jenis dokumen yang lebih
ketat seperti XHTML.
Di W3Schools kami selalu menggunakan nama atribut huruf kecil.
Saran Kami: Selalu Mengutip Nilai
Atribut
Standar HTML tidak memerlukan tanda kutip di sekitar nilai atribut.
Namun, W3C merekomendasikan kutipan dalam HTML,
dan meminta kutipan untuk jenis dokumen yang lebih ketat seperti
XHTML.
Bagus:
<a href="[Link] our HTML
tutorial</a>
23 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Buruk:
<a href=[Link] our HTML
tutorial</a>
Terkadang Anda harus menggunakan tanda kutip. Contoh ini tidak
akan menampilkan atribut title dengan benar, karena mengandung
spasi:
Contoh
<p title=About W3Schools>
Di W3Schools kami selalu menggunakan tanda kutip di sekitar nilai
atribut.
Kutipan Tunggal atau Ganda?
Tanda kutip ganda di sekitar nilai atribut adalah yang paling umum
dalam HTML, namun tanda kutip tunggal juga dapat digunakan.
Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda
kutip ganda, maka perlu menggunakan tanda kutip tunggal:
<p title='John "ShotGun" Nelson'>
Atau sebaliknya:
<p title="John 'ShotGun' Nelson">
Ringkasan Bab
Semua elemen HTML dapat memiliki atribut
24 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.
Atribut hrefmenentukan <a>URL halaman yang dituju link
tersebut
Atribut srcmenentukan <img>jalur ke gambar yang akan
ditampilkan
Atribut widthdan heightmemberikan <img>informasi ukuran
untuk gambar
Atribut altmenyediakan <img>teks alternatif untuk suatu
gambar
Atribut styledigunakan untuk menambahkan gaya ke suatu
elemen, seperti warna, font, ukuran, dan lainnya
Atribut langtag <html>menyatakan bahasa halaman Web
Atribut titlemendefinisikan beberapa informasi tambahan
tentang suatu elemen
25 |Buku Panduan Kinerja LAFAL Periode 1444-1445 H. / 2023-2024 M.