Pertemuan 3-4: Teks & Styling Dasar

Formatting, Quotations, dan Pengenalan Inline CSS

Pengertian

Setelah memahami struktur dasar, langkah selanjutnya adalah memberi makna dan gaya pada teks. HTML Formatting adalah kumpulan tag yang memberikan arti semantik (makna khusus) pada teks, seperti menandakan teks tersebut penting atau miring. Styling Dasar dapat dilakukan langsung pada elemen menggunakan atribut style, yang dikenal sebagai "Inline CSS", untuk mengubah properti visual seperti warna atau ukuran.

Analogi

Analogi: Menandai Buku Catatan
Tag formatting seperti <strong> dan <em> adalah seperti stabilo dan pulpen merah Anda. Anda menggunakannya untuk menandai bagian-bagian terpenting dari catatan Anda. Atribut style adalah seperti Anda menggambar hiasan kecil atau mengubah gaya tulisan pada satu kata spesifik untuk membuatnya benar-benar berbeda dari yang lain.

Contoh Kode & Hasil

1. Tag <strong> dan <b> (Tebal)

Ini adalah teks tebal (visual) dan ini adalah teks penting (semantik).

<p>Ini adalah teks <b>tebal</b> (visual) dan ini adalah teks <strong>penting</strong> (semantik).</p>

2. Tag <em> dan <i> (Miring)

Dia sangat (italic) ingin pergi, ini adalah sebuah penekanan (emphasis).

<p>Dia <i>sangat</i> (italic) ingin pergi, ini adalah sebuah <em>penekanan</em> (emphasis).</p>

3. Tag <blockquote> untuk Kutipan

Ini adalah kutipan dari sumber lain, biasanya ditampilkan menjorok.
<blockquote>Ini adalah kutipan dari sumber lain, biasanya ditampilkan menjorok.</blockquote>

4. Atribut style untuk Warna

Paragraf ini berwarna biru.

Judul ini berwarna hijau.

<p style="color:blue;">Paragraf ini berwarna biru.</p>
<h2 style="color:green;">Judul ini berwarna hijau.</h2>

5. Atribut style untuk Ukuran Font

Teks ini jauh lebih besar.

<p style="font-size:24px;">Teks ini jauh lebih besar.</p>

Latihan Mandiri

Tugas: Membuat Halaman Puisi

  1. Buat file baru puisi.html.
  2. Buat judul puisi menggunakan <h1>.
  3. Tulis beberapa bait puisi menggunakan tag <p>. Gunakan <br> untuk setiap baris baru dalam satu bait.
  4. Gunakan tag <strong> untuk menandai kata-kata yang menurut Anda paling kuat maknanya.
  5. Gunakan tag <em> untuk kata-kata yang perlu penekanan.
  6. Gunakan atribut style untuk membuat judul puisi berwarna biru dan nama pengarang di bawahnya berwarna abu-abu.

Kesimpulan

Memberi format pada teks bukan hanya soal estetika, tetapi juga tentang memberi makna dan struktur yang lebih jelas pada konten. Tag formatting membantu browser dan mesin pencari memahami konteks tulisan. Atribut style memberikan kita kekuatan untuk mengubah tampilan visual elemen secara langsung, sebuah pengantar yang baik sebelum kita menyelam lebih dalam ke dunia CSS.