HTML
( HyperText Markup Language )
Apa saja yang akan kita
pelajari ?
Mengenal
HTML
CODE
EDITOR
TAG
HYPERLINK
IMAGE
TABLE
HyperText = Text yang bisa diklik (link)
untuk pindah ke halaman
lain
H T M L
HyperText Markup Language
Markup = Cara kita “menandai” text.
Misal, “... baris ini jadikan
dulu ya!” atau “... ini jadikan
paraghraf ya!”
Mengenal HTML
HTML adalah kerangka dasar dari semua
halaman web yang ada di internet. Ia
bertugas menyusun teks, gambar, dan
tombol agar komputer tahu bagaimana cara
menampilkannya di layar HP atau laptop
Jadi, .....
HTML adalah rangkanya.
CSS adalah cat dan dekorasi agar mobil itu
cantik.
JavaScript adalah sistem kelistrikan dan
mesin agar mobil itu itu bisa berfungsi.
STRUKTUR DASAR HTML
HTML
Head
Body
CODE EDITOR
Sederhananya, Text Editor adalah aplikasi
"buku tulis" digital yang khusus dibuat
untuk mengetik baris kode. Bedanya
dengan buku tulis biasa, Text Editor punya
fitur-fitur canggih yang bikin koding jadi
lebih cepat.
Visual Studio Code
TAG
Tag adalah kode khusus yang digunakan untuk
memberi tahu browser (seperti Chrome atau
Firefox) bagaimana sebuah teks atau gambar
harus ditampilkan.
TAG Anatomy
< ... > blablabla < ... />
Tag Pembuka Isi Tag Penutup
Tag Pembuka <...>: Tandanya koding dimulai.
Isi: Teks atau konten yang ingin kamu tampilkan.
Tag Penutup </...>: Tandanya koding berakhir
(pakai garis miring).
MACAM-MACAM TAG
Judul (<h1>, <h2>, dst): Untuk membuat judul besar. <h1>
adalah yang paling besar, biasanya untuk judul utama.
Paragraf (<p>): Digunakan untuk membuat paragraf
tulisan biasa.
Tebal (<b> atau <strong>): Untuk membuat tulisan jadi
lebih tebal dan menonjol.
Link (<a>): Tag ini sangat penting untuk
menyambungkan satu halaman ke halaman lain
(Hyperlink).
Gambar (<img>): Tag untuk menampilkan foto.
Catatan unik: Tag gambar adalah tag "jomblo" alias
tidak punya pasangan penutup. Kamu cukup tulis satu
kali saja.
HTML TABLE
Tabel digunakan untuk menampilkan data dalam format
baris dan kolom. Untuk membuat tabel di HTML, kita
menggunakan struktur dasar yang terdiri dari beberapa tag
yang saling bertumpuk (hierarki).
Tag utama dalam tabel :
<table> ... </table>, = Tag pembuka dan penutup
utama. Semua isi tabel harus berada di dalam tag ini.
<tr> ... </tr>, (table row) = Digunakan untuk membuat
baris mendatar. Di dalam satu tabel, kamu bisa memiliki
banyak baris.
<td> ... </td>, (table data) = Digunakan untuk membuat
sel/kolom yang berisi data aktual.
<th> ... </th>, = Sama seperti <td>, tapi digunakan untuk
judul kolom (header). Teks di dalamnya otomatis menjadi
tebal (bold) dan berada di tengah (center).
LIST
List digunakan untuk mengelompokkan item-item yang
saling berkaitan. Ada dua jenis list utama di HTML: Ordered
List (berurutan) dan Unordered List (tidak berurutan).
Keduanya membutuhkan tag <li> (List Item) untuk
menuliskan setiap poinnya.
A. Ordered List <ol>
Digunakan untuk daftar yang urutannya penting, seperti
langkah-langkah resep atau peringkat. Otomatis akan
menampilkan angka (1, 2, 3, dst).
Ex .
1. ...
2. ...
B. Unordered List <ul>
Digunakan untuk daftar yang urutannya tidak penting,
seperti daftar belanjaan atau fitur produk. Otomatis akan
menampilkan simbol bullet (titik hitam).
...
...