Formatasi HTML: Menyusun Halaman Web Anda
Pengenalan
Hai, para pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dunia menarik formatasi HTML. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda dalam perjalanan ini langkah demi langkah. Ingat saat Anda pertama kali belajar menulis? Formatasi HTML seperti belajar membuat tulisan Anda terlihat indah dan teratur. Mari kita mulai!
Mana guna formatasi HTML?
Formatasi HTML 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 meng扫视 dan memahami konten Anda dengan cepat.
- Penekanan: Anda dapat menyorot informasi penting agar menarik perhatian pembaca.
- Struktur: Itu memberikan struktur jelas dan teratur bagi konten Anda.
- Estetika: Itu membuat halaman web Anda tampak menarik secara visual.
Tag Formatasi HTML
Sekarang, mari kita lihat tools yang ada di dalam kotak alat formatasi HTML kami. Ini adalah tag khusus yang membantu kita gayakan teks. Berikut tabel tag formatasi HTML paling umum:
| Tag | Deskripsi |
|---|---|
<b> |
Menjadikan teks tebal |
<strong> |
Menekankan teks ( biasanya tebal) |
<i> |
Menjadikan teks miring |
<em> |
Menekankan teks ( biasanya miring) |
<mark> |
Menyorot teks |
<small> |
Menjadikan teks lebih kecil |
<del> |
Menunjukkan teks yang dihapus |
<ins> |
Menunjukkan teks yang dimasukkan |
<sub> |
Menjadikan teks subscript |
<sup> |
Menjadikan teks superscript |
Tag Formatasi HTML dengan Contoh
Mari kita kerjakan keras dan lihat tag ini dalam aksi!
1. Teks Tegal
<pIni adalah <b>teks tebal</b>.</p>
<pIni juga adalah <strong>teks tebal</strong>.</p>Output: Ini adalah teks tebal. Ini juga adalah teks tebal.
Tag <b> hanya menjadikan teks tebal, sedangkan <strong> menyiratkan bahwa teks itu penting. Mereka terlihat sama, tapi mesin pencari mungkin menangani mereka berbeda.
2. Teks Miring
<pIni adalah <i>teks miring</i>.</p>
<pIni juga adalah <em>teks yang ditekankan</em>.</p>Output: Ini adalah teks miring. Ini juga adalah teks yang ditekankan.
Seperti tebal, <i> hanya menjadikan teks miring, sedangkan <em> menyiratkan penekanan. Mereka terlihat sama tetapi memiliki makna semantik yang berbeda.
3. Teks Terang
<pIni adalah <mark>teks yang disorot</mark>.</p>Output: Ini adalah teks yang disorot.
Tag <mark> mirip dengan 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> cocok untuk hal-hal seperti perhatian hak cipta atau catatan 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. <del> menunjukkan teks yang dihapus (biasanya dengan garis coret), dan <ins> menunjukkan teks yang dimasukkan (biasanya diletakkan).
6. Subscript dan Superscript
<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> cocok untuk rumus matematika atau kimia.
Kombinasi Tag Formatasi
Ini adalah fakta menarik: Anda dapat mengkombinasikan tag ini untuk formatasi yang lebih kompleks. Mari kita mencoba contoh:
<pYang <strong><em>penting</em></strong> untuk diingat adalah untuk <mark>menikmati</mark> saat mengoding!</p>Output: The most important thing to remember is to have fun while coding!
Lihat bagaimana kita mengkombinasikan <strong> dan <em> untuk membuat teks tebal dan miring bersamaan?
Kesimpulan
Dan begitu punya, teman-teman! Anda telah mengambil langkah pertama ke dunia formatasi HTML. Ingat, tag ini seperti rempah-rempah dalam masakan Anda – gunakan mereka bijaksana untuk meningkatkan konten Anda, bukan untuk mendominasi.
Sementara kita selesaikan, ini adalah cerita kecil dari pengalaman mengajar saya: Saya pernah punya siswa yang terlalu berlebihan dengan formatasi. Halaman web mereka terlihat seperti彩虹 yang bertarung dengan mesin tebal! Kita semua tersenyum tentang hal itu, dan itu mengajarkan kita pelajaran penting tentang kesederhanaan dalam desain.
Latih menggunakan tag ini, eksperimen dengan kombinasi yang berbeda, dan yang paling penting, nikmati! Di kelas berikutnya, kita akan masuk ke topik HTML yang lebih lanjut. Sampai jumpa, selamat koding!
Credits: Image by storyset