HTML - Elemen Blok dan Inline

Hai teman-teman, pengembang web masa depan! Hari ini, kita akan melihat dunia menarik HTML elemen blok dan inline. Sebagai guru komputer tetangga yang ramah, saya disini untuk menghidahkan Anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari mulai mengoding!

Elemen Blok

Bayangkan Anda membangun rumah dari batu LEGO. Beberapa batu ini besar dan menempati keseluruhan baris sendiri. Itu seperti elemen blok di HTML. Mereka mulai di baris baru dan menempati keseluruhan lebar yang tersedia.

mari lihat beberapa elemen blok umum:

<div>Saya adalah elemen blok</div>
<p>Saya juga adalah elemen blok</p>
<h1>Saya adalah judul dan elemen blok juga!</h1>

Ketika Anda menjalankan kode ini, setiap elemen akan muncul di baris baru. Seperti mereka mengatakan, "Saya butuh ruang sendiri, terima kasih banyak!"

Berikut adalah tabel dari beberapa elemen blok umum:

Elemen	Deskripsi
<div>	Sebuah wadah umum
<p>	Sebuah paragraf
<h1> hingga <h6>	Judul
<ul>	Daftar tak terurut
<ol>	Daftar terurut
<li>	Item daftar

Elemen Inline

Sekarang, pikirkan tentang batu LEGO kecil yang bisa dipasangkan bersamaan di baris yang sama. Itu seperti elemen inline di HTML. Mereka hanya mengambil seberapa luas yang diperlukan dan tidak mulai di baris baru.

Berikut adalah contoh:

<span>Saya adalah elemen inline</span>
<a href="#">Saya adalah tautan dan juga inline</a>
<strong>Saya tebal dan inline juga!</strong>

Elemen ini akan semuanya muncul di baris yang sama (jika ada cukup ruang).

Berikut adalah tabel dari beberapa elemen inline umum:

Elemen	Deskripsi
<span>	Sebuah wadah inline umum
<a>	Sebuah tautan
<strong>	Teks tebal
<em>	Teks miring
<img>	Sebuah gambar
<br>	Sebuah pemutus baris

Pengelompokan Elemen HTML Blok dan Inline

Sekarang kita mengerti elemen blok dan inline, mari lihat bagaimana kita bisa mengelompokkan mereka bersamaan. Itu seperti mengatur piece LEGO ke dalam berbagai kotak alat.

Pengelompokan menggunakan Tag <div>

Tag <div> seperti sebuah kotak besar tempat Anda bisa memasukkan beberapa elemen bersamaan. Itu adalah elemen tingkat blok sendiri, jadi itu mulai di baris baru.

mari lihat contoh:

<div style="background-color: lightblue; padding: 20px;">
<h2>Selamat Datang di Website Saya</h2>
<p Ini adalah paragraf didalam div.</p>
<p>Ini adalah paragraf lain dengan <span style="color: red;">teks merah</span>.</p>
</div>

Dalam contoh ini, kita mengelompokkan judul dan dua paragraf dalam <div>. Kita juga menambahkan gaya untuk membuatnya secara visual berbeda. <span> didalam paragraf kedua adalah elemen inline yang kita gunakan untuk mengubah warna sebagian teks.

Pengelompokan menggunakan Tag <span>

Tag <span> seperti sebuah wadah kecil, jernih yang Anda bisa gunakan untuk mengelompokkan elemen inline atau bahkan bagian teks didalam elemen blok.

Berikut adalah contoh:

<p>
Saya mencintai <span style="color: blue;">biru</span> dan
<span style="color: green;">hijau</span> warna.
</p>

Dalam kasus ini, kita menggunakan <span> untuk menerapkan warna yang berbeda ke kata-kata tertentu didalam paragraf.

Ingat, <div> digunakan untuk mengelompokkan elemen tingkat blok (atau membuat kelompok tingkat blok), sedangkan <span> digunakan untuk mengelompokkan elemen inline atau bagian teks.

Menggabungkan Semua

Sekarang, mari gabungkan apa yang kita pelajari ke dalam contoh yang lebih kompleks:

<div style="background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc;">
<h1>Blog Pribadi Saya</h1>
<div style="margin-bottom: 20px;">
<h2>Pos Terbaru: Kebahagiaan Mengoding</h2>
<p>
Mengoding seperti menyelesaikan teka-teki. Itu menantang, tapi
<span style="font-weight: bold; color: #ff6600;">sangat menggembirakan</span>
ketika Anda akhirnya membuat program Anda bekerja!
</p>
</div>
<div>
<h3>Tautan Cepat</h3>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</div>

Dalam contoh ini, kita menciptakan tata letak blog sederhana menggunakan berbagai elemen blok dan inline. Kita menggunakan tag <div> untuk mengelompokkan konten yang berkaitan, <span> untuk gayakan bagian teks tertentu, dan campuran elemen blok dan inline lainnya untuk mengatur konten.

Ingat, HTML seperti membangun dengan LEGO. Mulai dengan blok dasar, dan sebelum Anda tahu, Anda akan menciptakan struktur yang menakjubkan! Terus latihan, dan jangan takut untuk mencoba. Itu adalah cara kita semua belajar!

Selamat mengoding, para ahli web masa depan! ?‍♂️?

Credits: Image by storyset