Tahukah Anda halaman website yang Anda kunjungi saat ini adalah salah satu contoh HTML?
Faktanya, 92.3% website di dunia ini dibuat menggunakan HTML, lho.
HTML (Hyper Text Markup Language) adalah bahasa markup untuk membuat halaman web. Bahasa markup yaitu bahasa komputer untuk memformat teks dan berbagai media di dalamnya.
Biasanya, HTML didukung dengan bahasa lainnya. Seperti CSS, JS, ataupun bahasa pemrograman lain yang lebih rumit.
Kenapa sih Anda harus belajar coding HTML? Berikut beberapa manfaatnya.
HTML memungkinkan Anda mampu membuat website, membangun template, dan berbagai karya lain yang banyak orang bersedia beli.
Bagaimana? Menarik kan mempelajari coding HTML? Kabar gembiranya, di artikel ini Anda akan mendapatkan segudang info tentang contoh HTML yang ramah pemula, lho. Sudah tidak sabar kan? Yuk langsung saja simak daftarnya!
Contoh Coding HTML untuk Pemula
Agar tidak bingung, sebaiknya Anda mengenal dulu beberapa istilah untuk belajar HTML:
- Tag: awalan instruksi atau perintah yang akan dibaca browser. Misalnya: tag <bold>.
- Elemen: keseluruhan kode yang terdiri dari tag pembuka (< >) hingga tag penutup (/< >).
- Atribut/property: informasi atau perintah tambahan yang berada di dalam elemen (Contoh: style)
Nah sekarang, Anda sudah siap belajar contoh HTML untuk pemula. Di bagian akhir, kami juga akan memberikan bonus contoh desain web HTML keren yang layak Anda coba, lho. Penasaran? Yuk lanjut membaca!
1. 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.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraf.</p>
</body>
</html>
Pertama, dokumen HTML harus diawali dengan <!DOCTYPE html>. Fungsinya sebagai deklarasi sehingga browser tahu dokumen ditulis dalam 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.
Di akhir, jangan lupa tutup dokumen HTML dengan tag penutup yang sesuai (</html>, </body>, dll).
2. Heading
Heading adalah judul hingga sub-judul yang ada di dalam website. Fungsinya, untuk memetakan info dari umum ke khusus.
Selain memudahkan visitor menangkap inti informasi, heading juga mendongkrak SEO website.
Alasannya, Google jadi lebih paham struktur dan konteks artikel, deskripsi produk, ataupun media teks lainnya pada website.
Berikut contoh HTML untuk berbagai macam heading.
| <h1> Heading 1 <h1> <h2> Heading 2 <h2> <h3> Heading 3 <h3> <h4> Heading 4 <h4> |
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
Nah, contoh HTML berikutnya yaitu membuat 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
Contoh coding HTML berikutnya, ada 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> |
Dan meskipun outputnya terlihat sama, Google memandangnya lain.
Coding HTML bold sekadar memberi efek tebal, sedangkan tag strong memiliki pengaruh bagi web crawling. Sebab, tag strong mampu memberitahu Google kata atau keyword penting yang memperkuat info dari konten website.
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.
Berikut contoh HTML dengan tag italic/emphasize.
| <i>Bug adalah istilah bahasa Inggris yang artinya serangga.<i> <em>Bug adalah istilah bahasa Inggris yang artinya serangga.<em> |
Lalu, manakah yang sebaiknya Anda pakai?
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>.
Beda dari contoh HTML-lainnya, coding HTML <br> memang tidak memiliki tag penutup </br>. Jadi, Anda cukup menggunakan <br> saja.
7. Images
Siapa yang suka website tanpa gambar? Mungkin, hampir tidak ada orang yang menyukainya!
Selain membosankan, info dalam website jadi kurang jelas. Faktanya, memasukkan ilustrasi meningkatkan views hingga 45%, loh.
Nah untuk memasukkan gambar, gunakan coding HTML images. Ukurannya juga bisa Anda atur sendiri pada atribut Style.
| <img src=”url atau lokasi penyimpanan gambar” alt=”text” style=”width:500px;height:333px;”> |
Berikut hasil contoh HTML images.
Eits, tunggu sebentar. Jika Anda perhatikan, dalam contoh coding HTML images tadi ada atribut ‘alt’. Apakah itu?
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.
No comments:
Post a Comment