Penyusunan HTML: Menyembahkan Halaman Web Anda
Pengenalan
Hai, para pengembang web yang sedang belajar! Hari ini, kita akan melompat ke dunia yang menarik dari penyusunan HTML. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengarahkan anda dalam perjalanan ini langkah demi langkah. Ingat saat pertama kali anda belajar menulis? Baiklah, penyusunan HTML seperti belajar membuat tulisan anda terlihat cantik dan teratur. Mari kita mulai!
Mana gunanya penyusunan HTML?
Penyusunan HTML adalah tentang membuat halaman web anda terlihat bagus dan mudah dibaca. Itu seperti memakai pakaian untuk pesta! Berikut mengapa ini penting:
- Kemudahan membaca: Itu membantu pengunjung anda untuk secara cepat mengeskani dan memahami konten anda.
- Penekanan: Anda dapat menyorot informasi penting agar menarik perhatian pembaca.
- Struktur: Itu memberikan konten anda struktur yang jelas dan teratur.
- Estetika: Itu membuat halaman web anda menarik secara visual.
Tag Penyusunan HTML
Sekarang, mari kita lihat alat-alat yang ada di dalam kotak penyusunan HTML kita. Ini adalah tag khusus yang membantu kita gayakan teks. Berikut adalah tabel tag penyusunan HTML paling umum:
| Tag | Deskripsi |
|---|---|
<b> |
Membuat teks tebal |
<strong> |
Menekankan teks (biasanya tebal) |
<i> |
Membuat teks miring |
<em> |
Menekankan teks (biasanya miring) |
<mark> |
Menyorot teks |
<small> |
Membuat teks lebih kecil |
<del> |
Menampilkan teks yang dihapus |
<ins> |
Menampilkan teks yang dimasukkan |
<sub> |
Membuat teks subskrip |
<sup> |
Membuat teks superskrip |
Tag Penyusunan HTML dengan Contoh
Mari kita kerjakan keras dan lihat tag ini dalam aksi!
1. Teks Tegal
<pIni adalah teks <b>tebal</b>.</p>
<pIni juga adalah teks <strong>tebal</strong>.</p>Output: Ini adalah teks tebal. Ini juga adalah teks tebal.
Tag <b> hanya membuat teks tebal, sedangkan <strong> menyiratkan bahwa teks itu penting. Mereka terlihat sama, tapi mesin pencari mungkin memperlakukannya berbeda.
2. Teks Miring
<pIni adalah teks <i>miring</i>.</p>
<pIni juga adalah teks <em>diungkapkan</em>.</p>Output: Ini adalah teks miring. Ini juga adalah teks diungkapkan.
Seperti teks tebal, <i> hanya membuat teks miring, sedangkan <em> menyiratkan penekanan. Mereka terlihat sama tetapi memiliki makna semantik yang berbeda.
3. Teks Terang
<pIni adalah <mark>teks terang</mark>.</p>Output: Ini adalah teks terang.
Tag <mark> seperti menggunakan pensil sorot di layar. Itu bagus untuk menarik perhatian ke bagian tertentu dari teks anda.
4. Teks Kecil
<pIni adalah teks normal. <small Ini adalah teks kecil.</small></p>Output: Ini adalah teks normal. <smallIni adalah teks kecil.
Tag <small> sempurna untuk hal-hal seperti pemberitahuan hak cipta atau cetakan kecil.
5. Teks Dihapus dan Dimasukkan
<pSaya mencintai <del>pizza</del> <ins>salad</ins>.</p>Output:
Saya mencintai pizza salad.
Tag ini bagus untuk menunjukkan perubahan dalam teks anda. <del> menampilkan teks yang dihapus (biasanya dengan garis coret), dan <ins> menampilkan teks yang dimasukkan (biasanya diberi garis bawah).
6. Subskrip dan Superskrip
<p>H<sub>2</sub>O adalah air.</p>
<p>2<sup>3</sup> sama dengan 8.</p>Output: H2O adalah air. 23 sama dengan 8.
<sub> dan <sup> sempurna untuk rumus matematika atau kimia.
Kombinasi Tag Penyusunan
Ada fakta menarik: anda dapat mengkombinasikan tag ini untuk penyusunan yang lebih kompleks. Mari coba contoh:
<pYang <strong><em>paling penting</em></strong> untuk diingat adalah untuk <mark>bermain</mark> saat mengoding!</p>Output: Yang paling penting untuk diingat adalah untuk bermain saat mengoding!
Lihat bagaimana kita mengkombinasikan <strong> dan <em> untuk membuat teks tebal dan miring secara bersamaan?
Kesimpulan
Dan begitulah, teman-teman! Anda telah mengambil langkah pertama ke dunia penyusunan HTML. Ingat, tag ini seperti rempah-rempah dalam memasak – gunakan mereka bijaksana untuk meningkatkan konten anda, bukan untuk mendominasi.
Saat kita selesai, ini cerita kecil dari pengalaman mengajar saya: Saya pernah memiliki murid yang terlalu ekstrim dalam penyusunan. Halaman web mereka terlihat seperti perang antara彩虹 dan mesin tebal! Kita bersuka-suka tentangnya, dan itu mengajarkan kita pelajaran penting tentang kesederhanaan dalam desain.
Latih menggunakan tag ini, eksperimen dengan kombinasi yang berbeda, dan yang paling penting, bersenang-senang! Di lesi berikutnya, kita akan masuk ke topik HTML yang lebih tingkat lanjut. Sampai jumpa, selamat koding!
Credits: Image by storyset