HTML - Element Wajib dan Inline

Hai sana, para pengembang web masa depan! Hari ini, kita akan mandar ke dunia yang menarik dari elemen HTML wajib dan inline. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengajarkan Anda perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari mulai mengoding!

Element Wajib

Bayangkan Anda membangun rumah dari batu LEGO. Beberapa batu ini besar dan mengambil keseluruhan baris sendiri. Ini seperti elemen wajib di HTML. Mereka dimulai di baris baru dan mengambil keseluruhan lebar yang tersedia.

mari lihat beberapa elemen wajib umum:

<div>Saya adalah elemen wajib</div>
<p>Saya juga adalah elemen wajib</p>
<h1>Saya adalah judul dan elemen wajib 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 wajib umum:

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

Element Inline

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

Berikut adalah contoh:

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

Elemen ini semua akan 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

Grouping Elemen HTML Wajib dan Inline

Sekarang kita mengerti elemen wajib dan inline, mari lihat bagaimana kita dapat mengelompokkan mereka bersamaan. Itu seperti mengatur piece LEGO Anda ke dalam berbagai kotak kompartemen dalam sebuah kotak alat.

Grouping menggunakan Tag <div>

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

mari lihat contoh:

<div style="background-color: lightblue; padding: 20px;">
<h2>Selamat Datang di Situs Web 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 telah mengelompokkan judul dan dua paragraf didalam <div>. Kita juga menambahkan gaya untuk membuatnya terlihat berbeda. Elemen <span> didalam paragraf kedua adalah elemen inline yang kita gunakan untuk mengubah warna sebagian teks.

Grouping menggunakan Tag <span>

Tag <span> seperti sebuah kotak kecil, jernih tempat Anda dapat mengelompokkan elemen inline atau bahkan bagian teks didalam elemen tingkat blok.

mari lihat contoh:

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

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

Ingat, <div> untuk mengelompokkan elemen tingkat blok (atau membuat kelompok tingkat blok), sedangkan <span> 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>Post Terbaru: Kenyamanan Mengoding</h2>
<p>
Mengoding seperti menyelesaikan teka-teki. Itu menantang, tapi
<span style="font-weight: bold; color: #ff6600;">sangat menggembirakan</span>
saat 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 telah membuat susunan blog sederhana menggunakan berbagai elemen tingkat blok dan inline. Kita menggunakan tag <div> untuk mengelompokkan konten yang terkait, <span> untuk menggayakan bagian teks tertentu, dan campuran lainnya dari elemen tingkat blok dan inline untuk mengatur konten.

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

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

Credits: Image by storyset