HTML Tag
HTML Tag, Element,
Attribute & Comment
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>
Klik tombol Lihat Instruksi
Pemakaian Playground di halaman paling bawah untuk melihat cara
pemakaian kode 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.
Selamat, kamu sudah berhasil membuat
halaman website yang sederhana. Mudah bukan?
Soal Latihan
Buatlah Dokumen HTML
Dokumen
HTML harus memiliki tag <html>
(10 SkilPoin)
Tag <html> harus memiliki tag <head>
(10 SkilPoin)
Tag <html> harus memiliki tag <body>
(10 SkilPoin)
Tambahkan
tag <title> di
dalam tag <head> dengan tulisan Perkenalan
HTML
(20 SkilPoin)
Tambahkan
tag <h1> di
dalam tag <body> dengan tulisan Membuat
HTML itu gampang
(20 SkilPoin)
📝 Catatan:
1. Kalian Bisa menggunakan Text Editor yang disediakan oleh w3schools >> Text Editor HTML <<
2. Kalian Bisa menggunakan Text Editor Notepad++ dari yang terinstal di Android kalian
3. Setelah Kalian Selesai Menulis Kode Html sesuai Soal Latihan di atas.. Silahkan kalian Copy / Salin Kode HTML Kalian melalui BLOG yang sudah kalian buat dengan Judul :
Tugas Latihan 1 HTML
4. Screen Shoot Hasil dari Kode HTML yang sudah kalian Jalankan.
TOTAL POIN MAKSIMAL : 60 POINT
Selamat Bekerja
Tidak ada komentar:
Posting Komentar