Belajar Kode HTML untuk Blogger Pemula

Dalam dunia internet of thing (iot), memiliki blog pribadi adalah cara yang bagus untuk berbagi pengetahuan, pengalaman, atau bahkan hanya untuk mengekspresikan diri. Blogger pemula sering kali menggunakan platform seperti Blogger untuk membuat dan mengelola blog mereka. Meskipun Blogger menyediakan alat yang mudah digunakan untuk membuat dan mengedit posting, pemahaman dasar tentang HTML (HyperText Markup Language) dapat memberi Anda kendali lebih besar atas tampilan dan fungsionalitas blog Anda. Dalam artikel ini, kita akan membahas cara belajar kode HTML untuk pemula yang ingin meningkatkan blog mereka di Blogger.

Apa itu HTML?

HTML adalah bahasa markup yang digunakan untuk membuat halaman web. Ini berfungsi sebagai kerangka dasar untuk semua konten yang Anda lihat di web, termasuk teks, gambar, video, tautan, dan banyak lagi. HTML menggunakan tag (label) untuk mengatur elemen-elemen ini di halaman web Anda.

Mengapa Belajar HTML Penting untuk Blogger Pemula?

Meskipun platform seperti Blogger memiliki antarmuka yang mudah digunakan untuk membuat posting, memahami dasar-dasar HTML dapat memberi Anda keuntungan berikut:

Kontrol Lebih Besar
Dengan HTML, Anda memiliki kendali lebih besar atas tampilan posting Anda. Anda dapat menyesuaikan teks, gambar, tautan, dan lainnya dengan lebih detail.

Kreativitas
Belajar HTML memungkinkan Anda untuk mengekspresikan kreativitas Anda lebih bebas. Anda dapat membuat tampilan unik untuk blog Anda.

Koreksi Masalah
Anda dapat lebih mudah memahami dan memperbaiki masalah tampilan yang mungkin muncul pada blog Anda.

Optimisasi SEO
Memahami HTML dapat membantu Anda mengoptimalkan posting Anda untuk mesin pencari, yang akan meningkatkan visibilitas blog Anda.

Dasar-dasar HTML untuk Blogger Pemula

Tag HTML Dasar
Tag HTML dasar adalah elemen-elemen yang digunakan dalam pembuatan halaman web dengan HTML (Hypertext Markup Language). Ini adalah elemen dasar yang membentuk struktur dan konten dasar dari sebuah halaman web.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

Berikut adalah beberapa tag HTML dasar yang sering digunakan.

Tag Head
Bagian <head> digunakan untuk mendefinisikan bagian kepala dari dokumen HTML. Bagian kepala biasanya berisi informasi meta tentang dokumen, seperti judul dokumen, pengkodean karakter, tautan ke sumber daya eksternal (seperti stylesheet dan script), dan metadata lain yang tidak ditampilkan secara langsung pada halaman web. Berikut adalah gambaran singkat tentang tag <head> dan beberapa elemen umum yang mungkin Anda temukan di dalamnya.

<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Deskripsi halaman web">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="icon" type="image/png" href="favicon.png">
<script>bisa di head bisa juga di body</script>
</head>
<body>

</body>
</html>

Lebih jelas tentang metatag beserta cara penggunaannya pada blog agar bisa SEO friendly bisa di baca pada artikel #Update Optimasi Kode SEO Meta Tag Lengkap Khusus Blogger.

Judul Halaman
Gunakan tag <title> dalam bagian <head> untuk menentukan judul halaman web Anda. Judul ini akan muncul di tab peramban pengunjung beserta logo icon (favicon) jika sudah menerapkan penggunaan metatag untuk favicon.

<head>
<title>Judul Halaman</title>

</head>

Tag Body
Bagian <body> dalam HTML digunakan untuk menentukan area konten utama dari halaman web. Ini adalah bagian dari HTML yang berisi teks, gambar, tautan, dan elemen lain yang akan ditampilkan secara langsung pada halaman web. Berikut adalah contoh penggunaan tag <body>.

<!DOCTYPE html>
<html>
<head>
<title>Contoh Halaman</title>
</head>
<body>
<h1>Selamat datang di halaman web kami</h1>
<p>Ini adalah contoh halaman web dengan beberapa elemen HTML dasar.</p>
<ul>
<li><a href="https://www.contoh.com">Tautan ke contoh.com</a></li>
<li>Gambar: <img src="gambar.jpg" alt="Deskripsi Gambar"/></li>
</ul>
</body>
</html>

Dalam contoh di atas, tag <body> mengelilingi semua elemen yang akan ditampilkan di halaman web, seperti judul, teks, tautan, daftar, dan gambar. Semua elemen ini akan muncul di area konten utama ketika halaman web ditampilkan di browser.

Isi dari tag <body> dapat bervariasi dari halaman web ke halaman web, tergantung pada konten yang ingin Anda tampilkan. Anda dapat menambahkan teks, gambar, video, formulir, dan elemen lain sesuai kebutuhan untuk membuat halaman web yang sesuai dengan tujuan Anda.

Tag Header
Tag HTML <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6> adalah elemen-elemen yang digunakan untuk menentukan tingkat kepentingan dan ukuran teks dalam halaman web. Mereka digunakan untuk membuat judul atau subjudul pada halaman web Anda. Setiap tag memiliki tingkat kepentingan yang berbeda, dengan <h1> memiliki tingkat kepentingan tertinggi dan <h6> memiliki tingkat kepentingan terendah. Berikut penjelasan singkat tentang masing-masing dari tag header.
1. Heading 1 <h1>
  Digunakan untuk judul utama halaman web yang merepresentasikan tingkat kepentingan tertinggi. Biasanya hanya ada satu tag <h1> dalam satu halaman, yang mewakili judul utama halaman artikel blog atau judul utama halaman depan blog.
2. Heading 2 <h2>
  Elemen HTML <h2> digunakan untuk menampilkan judul subbagian yang memiliki tingkat kepentingan yang lebih rendah daripada <h1>, tetapi lebih tinggi daripada <h3>. Ini umumnya digunakan untuk mengelompokkan konten di bawah judul utama <h1> dalam halaman web.
3. Heading 3 <h3>
  Elemen HTML <h3> digunakan untuk menampilkan judul subbagian yang memiliki tingkat kepentingan yang lebih rendah daripada <h2>, sehingga digunakan untuk mengelompokkan konten yang berada di bawah judul tingkat dua <h2> dalam halaman web.
4. Heading 4 <h4>
  Heading 4, atau <h4> dalam HTML, biasanya digunakan untuk menunjukkan judul yang lebih spesifik atau sub-subjudul yang memiliki tingkat kepentingan yang lebih rendah daripada <h3> dalam struktur halaman web.
5. Heading 5 <h5>
  Heading 5, atau <h5> dalam HTML, digunakan untuk menandai judul yang lebih khusus atau sub-subjudul lainnya dalam halaman web, dan ini merepresentasikan tingkat kepentingan yang lebih rendah daripada <h4> dalam hierarki struktur judul.
6. Heading 6 <h6>
  Heading 6, atau <h6> dalam HTML, digunakan untuk menunjukkan judul yang paling khusus atau sub-subjudul terendah dalam hierarki struktur judul. Ini adalah elemen heading dengan tingkat kepentingan terendah dalam daftar heading, cocok untuk menandai informasi yang sangat spesifik dalam halaman web Anda.
Berikut adalah contoh hirarki judul mulai dari <h1> hingga <h6> dalam kode HTML.

<!DOCTYPE html>
<html>
<head>
<title>Contoh Hirarki Judul</title>
</head>
<body>
<h1>Heading 1 (Tingkat kepentingan tertinggi)</h1>
<p>Ini adalah konten di bawah judul utama.</p>

<h2>Heading 2 (Kurang penting daripada h1)</h2>
<p>Ini adalah konten di bawah subjudul 1.</p>

<h3>Heading 3 (Kurang penting daripada h2)</h3>
<p>Ini adalah konten di bawah sub-subjudul 1.</p>

<h4>Heading 4 (Kurang penting daripada h3)</h4>
<p>Ini adalah konten di bawah sub-sub-subjudul 1.</p>

<h5>Heading 5 (Kurang penting daripada h4)</h5>
<p>Ini adalah konten di bawah sub-sub-sub-subjudul 1.</p>

<h6>Heading 6 (Tingkat kepentingan terendah)</h6>
<p>Ini adalah konten di bawah sub-sub-sub-sub-subjudul 1.</p>
</body>
</html>

Dalam kode di atas, setiap elemen heading digunakan dalam hirarki yang menunjukkan tingkat kepentingannya dalam halaman web. Elemen-elemen <h1> hingga <h6> digunakan untuk membuat judul dan subjudul dengan tingkat kepentingan yang berbeda.

Tag Paragraf <p>
Tag HTML <p> digunakan untuk mengelompokkan teks dalam paragraf. Ini adalah salah satu dari banyak elemen HTML yang digunakan untuk memformat dan mengorganisasi konten teks dalam sebuah dokumen web. Ketika Anda menggunakan tag <p>, konten teks yang berada di dalamnya akan dianggap sebagai satu paragraf, dan biasanya akan ditampilkan dengan jarak paragraf (spasi) di atas dan di bawahnya.

Contoh penggunaan tag <p> dalam HTML :

<p>Ini adalah contoh paragraf pertama.</p>
<p>Ini adalah contoh paragraf kedua.</p>

Tag <p> sangat berguna untuk memformat teks dan membuat konten web lebih mudah dibaca dan dimengerti oleh pengguna.

Anchor Tag (Tautan) <a>
Tag HTML <a> digunakan untuk membuat tautan (link) ke halaman web lain atau sumber daya lainnya. Ini adalah salah satu elemen HTML yang paling umum digunakan untuk membuat hyperlink dalam dokumen web. Dengan menggunakan tag <a>, Anda dapat membuat teks atau gambar menjadi tautan yang mengarahkan pengguna ke halaman web lain ketika diklik.

Contoh penggunaan tag <a> dalam HTML :

<a href="https://www.contoh.com">Ini adalah contoh tautan ke situs web</a>

Dalam contoh ini, teks "Ini adalah contoh tautan ke situs web" akan menjadi tautan, dan ketika pengguna mengkliknya, mereka akan diarahkan ke situs web "https://www.contoh.com" yang ditentukan dalam atribut href (Hypertext Reference) tag <a>.

Tag <a> sangat penting untuk membuat navigasi dalam dokumen web dan memberikan pengguna cara untuk menjelajah antara halaman-halaman yang berbeda di internet.

Tag Gambar <img>
tag HTML <img> digunakan untuk menampilkan gambar di halaman web. Ini adalah elemen HTML yang digunakan untuk memasukkan gambar ke dalam dokumen HTML sehingga gambar tersebut dapat ditampilkan kepada pengguna saat mereka menjelajahi halaman web Anda.

Contoh penggunaan tag <img> dalam HTML :

<img src="gambar.jpg" alt="Deskripsi Gambar">

Dalam contoh ini :

Atribut src (source) digunakan untuk menentukan lokasi (URL atau path) dari gambar yang ingin ditampilkan.
Atribut alt (alternative text) digunakan untuk memberikan deskripsi alternatif tentang gambar, yang akan muncul jika gambar tidak dapat dimuat atau untuk membantu pengguna dengan keterbatasan penglihatan.
Tag <img> adalah elemen penting dalam desain web, karena memungkinkan Anda untuk menyisipkan elemen visual seperti gambar, grafik, dan ikon ke dalam halaman web Anda. Dengan tag <img>, Anda dapat meningkatkan daya tarik dan informativitas konten Anda.

Tag Daftar <ul> <ol>
Anda dapat membuat daftar dengan tag <ul> (daftar tak terurut) atau <ol> (daftar terurut), di dalamnya Anda menggunakan <li> untuk setiap elemen daftar.

Daftar Tak Terurut <ul>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Daftar Terurut <ol>

<ol>
<li>Langkah 1</li>
<li>Langkah 2</li>
<li>Langkah 3</li>
</ol>

Penggunaan Atribut Gaya (style) CSS Dalam Tag HTML

CSS adalah singkatan dari "Cascading Style Sheets" (Lembar Gaya Terjatuh). Ini adalah bahasa pemrograman yang digunakan untuk mengendalikan tampilan dan tata letak elemen-elemen HTML pada halaman web. CSS memungkinkan Anda untuk memisahkan tampilan (styling) dari struktur dan konten (HTML) pada sebuah halaman web, sehingga Anda dapat dengan mudah mengubah tampilan situs web secara konsisten.

CSS (Cascading Style Sheets) dapat diterapkan ke elemen HTML dalam tiga cara utama: inline, internal (dalam dokumen), dan eksternal (dari file terpisah). Dalam kaitannya dengan pembahasan artikel ini cara menggunakan CSS dengan menggunakan jenis inline CSS tag.

Inline CSS merujuk pada penerapan gaya CSS langsung pada elemen HTML individual melalui atribut style di dalam tag HTML.

<p style="color: blue; font-size: 16px;">Ini adalah teks dengan gaya inline.</p>

Dalam contoh di atas, atribut style digunakan pada elemen <p> untuk menerapkan gaya langsung ke elemen tersebut. Gaya ini hanya berlaku untuk elemen <p> tersebut dan tidak akan memengaruhi elemen HTML lainnya.

Dengan menggunakan CSS, Anda dapat menciptakan tampilan yang menarik dan konsisten untuk situs web Anda, dan Anda dapat dengan mudah mengubah tampilan situs web tanpa harus mengubah struktur HTML-nya.

Biasanya, penggunaan CSS internal atau eksternal lebih disarankan dalam pengembangan web, karena memisahkan tampilan dari struktur dan konten, memungkinkan untuk gaya yang dapat digunakan ulang, dan lebih mudah untuk dikelola dalam skala yang lebih besar. CSS inline lebih cocok digunakan untuk situasi yang sangat spesifik dan dalam jumlah yang terbatas.

Belajar kode HTML adalah langkah yang berguna bagi pemula yang ingin mengelola blog di platform seperti Blogger. Ini memberi Anda kendali lebih besar atas tampilan dan fungsionalitas blog Anda, dan juga membantu Anda memahami dasar-dasar web. Ingat, praktek adalah kunci, jadi jangan ragu untuk berlatih dan eksperimen dengan kode HTML di posting Anda. Dengan waktu, Anda akan semakin nyaman dalam mengedit dan mempersonalisasi blog Anda. Selamat belajar!