Pengenalan HTML
Melalui kelas ini, kamu diajak untuk:
- Memahami struktur file HTML.
- Mengidentifikasikan elemen-elemen wajib di struktur HTML.
- Membuat halaman web sederhana lewat HTML.
Tentang HTML
HTML adalah bahasa markup untuk membuat halaman web. Setiap halaman web yang kamu temui menggunakan struktur HTML, misal artikel online, media sosial, dan website lainnya.
HTML secara garis besar memiliki beberapa karakteristik, yaitu:
- mengatur struktur halaman web.
- terdiri dari serangkaian elemen.
- memiliki berbagai tag yang dimulai dengan tag awal dan diakhiri oleh tag akhir.
- berfungsi untuk memberi tahu browser cara menampilkan konten.
Sekilas Soal Bahasa
Bahasa pemrograman umumnya menggunakan simbol khusus sebagai penanda atau yang dikenal sebagai syntax. Masing-masing bahasa pemrograman punya syntax masing-masing. Namun jangan keburu khawatir, HTML adalah pemrograman tanpa logika. Artinya, dia memiliki syntax hanya untuk perintah deskriptif, bukan sebagai perintah pengoperasian.
<nama-tag nama atribut="nilai-atribut">...</nama-tag>Dari susunan di atas, HTML akan memiliki tag, atribut, nilai, dan data. Bentuknya akan dikurung oleh simbol semacam <>,, dan "". Mari lihat rincian penjelasan di bawah.
Ketuk untuk mengetahui tiap syntax.<>
Simbol <> adalah pengurung khusus untuk tag.
TAG
TAG adalah penamaan untuk penanda awal dan akhir elemen. Misalnya <head>, <page>, <button>, atau <p>.
Atribut
Perintah yang menententukan perilaku elemen yang bakal dimanipulasi dan tampil di laman HTML. Misalnya style untuk mengatur visual.
""
Di antara "" adalah ruang untuk mengisi data nilai atribut. Maksud data di HTML adalah sebuah perintah
Isian di antara <> dan </>
Biasanya digunakan dalam data teks. Misal ketika hendak menulis kalimat "Halo Semua", maka penulisan kode HTMLnya adalah <p>Halo Semua</p>.
</TAG>
Penutup sebuah tag. Setiap perintah berlangsung di dalam kurungan tag.
Struktur Elemen Sederhana di HTML
<!DOCTYPE html>
<html>
<head>
<title>Artikel Saya</title>
</head>
<body>
<h1>Judul Artikel Saya</h1>
<p>Paragraf artikel saya.</p>
</body>
</html>!DOCTYPE html
Bagian ini adalah deklarasi awal bahwa jenis file ini adalah file HTML.
<html>
<html> adalah elemen dasar dari file HTML5. Tag awal <html> diisi oleh elemen-elemen lainnya sebelum diakhiri oleh tag akhir </html>.
<head>
Bagian kepala berisi informasi meta tentang seperti judul halaman (yang akan ditampilkan di tab browser) dan deskripsi (yang akan muncul ketika tautan dibagikan).
<body>
Bagian badan adalah wadah/kontainer yang menampung konten-konten terlihat. Konten-konten ini direpresentasikan oleh rangkaian tag.
<h1>, <p>
Semua tag yang ada di dalam elemen <body> adalah konten yang ditampilkan browser. <h1> berarti Heading 1 (ukuran font besar), sementara <p> berarti Paragraph (ukuran font lebih kecil).
Jika diperhatikan, hampir semua elemen di dalam file HTML5 dibuka dengan tag awal dan diakhiri oleh tag akhir. Elemen berfungsi sebagai kontainer. Maka penting untuk menutup elemen dengan tambahan / seperti <p></p> di tag akhir.
Membuat Tag Sederhana
HTML5 sejatinya memiliki ratusan tag yang bisa diakses di sini. Tapi mula-mula, mari kita coba untuk membuat tag-tag sederhana.
Di bagian sebelumnya, kita telah mengenal Headings dan Paragraph. HTML5 secara default menyediakan Headings dari 1-6. Maka, kamu bisa menggunakan <h1>, <h2>, <h3>, dst, sesuai dengan kebutuhanmu.
Untuk paragraf, penting untuk diketahui bahwa satu tag <p> hanya mewadahi satu paragraf. Jika kamu ingin menambah paragraf baru, kamu harus menggunakan tag <p> kembali.
<body>
<!-- Salah -->
<h2>Judul Artikel Pertama</h2>
<p>Paragraf pertama artikel saya. Paragraf kedua artikel saya.</p>
<!-- Benar -->
<h2>Judul Artikel Pertama</h2>
<p>Paragraf pertama artikel saya.</p>
<p>Paragraf kedua artikel saya.</p>
</body>Poin Penting
- HTML merupakan wadah dari konten yang akan ditampilkan dalam website.
- Untuk mempercantik tampilan, HTML5 masih harus memerlukan proses styling dibantu bahasa pemrograman lainnya.
Knowledge Check
Manakah simbol untuk menutup nilai atribut?