Академический Документы
Профессиональный Документы
Культура Документы
HTML Basic
Segala template HTML di dunia memiliki bentuk dasar, yaitu HTML Basic.
Apa saja yang pasti ada dalam coding HTML Basic? Kami akan membedahnya
satu per satu.
1
2<!DOCTYPE html>
<html>
3
<head>
4 <title>Title of the document</title>
5</head>
6<body>
7 <h1>Heading</h1>
8 <p>Paragraf.</p>
9</body>
10</html>
Berikutnya, ada tag <html>. Tag ini akan menampung seluruh tag HTML dari
awal hingga penutupan, yaitu </html>.
Setelah <html>, masuk ke tag <head>. Seperti namanya, tag ini berisi coding
HTML untuk membuat kepala dokumen. Hasilnya akan terlihat sebagai judul
pada tab browser Anda.
Lalu, tibalah Anda ke tag <body>. Coding HTML ini memuat inti dokumen
HTML Anda, yaitu isian website.
2. Heading
Heading adalah judul hingga sub-judul yang ada di dalam website. Fungsinya,
untuk memetakan info dari umum ke khusus.
Makin spesifik info dan pemilihan sub-judulnya, makin kecil juga ukuran
heading. Tentunya dengan coding HTML tag heading, Anda tak perlu repot-
repot format ukuran heading secara manual. Praktis, bukan?
3. Paragraf
Paragraf itu penting. Sekarang, bayangkan Anda membaca artikel website yang
tidak punya paragraf. Setiap ide pokok terlihat samar dan melelahkan mata gara-
gara tak punya jeda.
Karena itu, setiap paragraf perlu dipisah. Nah untuk membuat paragraf dengan
coding HTML, gunakan saja tag P.
<p>text</p>
Setelah itu, paragraf baru akan muncul menjadi baris baru. Alhasil, tulisan jadi
lebih enak dibaca dan rapi, bukan?
4. Bold/Strong
Pasti, Anda sudah tahu tag HTML ini akan memberi efek tebal pada tulisan.
Tapi, apa sih beda antara bold dan strong?
Pertama, coding HTML bold dan strong memiliki tag yang berbeda:
<b>Afiliasi adalah kerja sama promosi dan penjualan produk</b>
<strong>Afiliasi adalah kerja sama promosi dan penjualan produk</strong>
Jadi, manakah yang Anda butuhkan? Tag bold atau tag strong?
5. Italic/Emphasize
Mirip seperti tag bold/strong, ada dua coding HTML yang bisa Anda pakai
untuk memiringkan kata-kata.
Kembali lagi ke kebutuhan Anda. Jika hanya ingin memiringkan kata-kata saja,
gunakanlah coding HTML italic. Sedangkan jika mau menekankan kata tertentu
agar Google lebih mudah mengindeks konten, pakailah tag <em>.
6. Line Break
Sekilas, coding HTML Line Break mirip dengan coding HTML paragraf.
Seperti namanya, Line Break berfungsi membuat baris baru. Namun, baris
tersebut masih dalam paragraf yang sama. Ini dia contoh HTML Line Break.
<p> <br>Text
<br> Text </p>
Hasilnya akan terlihat seperti ini.
Lalu, apa sih yang membedakan coding HTML Line Break dengan Paragraf?
Untuk outputnya sendiri memang sepintas sama. Namun, tag <p> lebih berisiko
error pada beberapa browser. Sedangkan tag <br> digadang-gadang akan lebih
di-support oleh HTML5 daripada tag <p>.
7. Images
Siapa yang suka website tanpa gambar? Mungkin, hampir tidak ada orang yang
menyukainya!
Alt text adalah kata yang diselipkan ke dalam gambar. Fungsinya sebagai
antisipasi jika gambar invalid. Artinya, saat gambar tidak muncul, alt text akan
menggantikannya sehingga visitor web tetap memahami deskripsi image.
8. Horizontal line
Contoh coding HTML-nya juga simple. Cukup masukkan tag <hr> pada bagian
yang Anda inginkan.
Beda dari tag lainnya, tag <br>, <img>, dan <hr> memang tidak memiliki tag
penutup (/br>, </img>, </hr>).
9. Cross-through text
Cross-through text atau teks yang dicoret mampu menekankan makna tertentu
pada tulisan/informasi.
Biasanya, para penulis menggunakan strategi ini untuk menunjukkan versi benar
atau lebih baik dari suatu hal.
Membuat cross-through text mudah, kok. Langsung saja gunakan contoh HTML
ini.
<del>text.</del>
10. Quote
Banyak orang, termasuk Anda, menyukai quote. Selain indah, quote mampu
memotivasi seseorang melakukan action tertentu pada website. Entah itu lanjut
membaca artikel, membeli produk, dan hal lainnya.
Lalu, gimana sih cara membuat quote pada website dengan coding HTML?