HTML - Tagar Tak Digunakan

Hai, para pengembang web yang bersemangat! Hari ini, kita akan melihat aspek menarik dari HTML: tagar dan atribut yang tak digunakan. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jadi, ambil secangkir kopi (atau minuman kesukaan Anda), dan mari kita jelajahi dunia elemen HTML yang sudah ketinggalan zaman.

HTML - Deprecated Tags

Apa Itu Tagar Tak Digunakan?

Sebelum kita masuk ke detail, mari kita pahami apa arti "tidak digunakan" dalam konteks HTML. Pahami seperti halnya web mengatakan, "Terima kasih atas pelayananmu, tapi sekarang adalah waktunya pensiun." Tagar tak digunakan adalah elemen HTML yang dulunya umum digunakan tapi sekarang dianjurkan untuk tidak digunakan atau tidak lagi didukung di versi HTML yang lebih baru.

Mengapa ini terjadi, Anda bertanya? Well, seiring dengan evolusi web, kita menemukan cara yang lebih baik dan efisien untuk mengatur dan menyesuaikan konten kita. Itu seperti upgrading dari handphone flip ke smartphone – ya, yang lama masih bisa berfungsi, tapi yang baru melakukan banyak hal lebih!

Tagar Tak Digunakan HTML

Mari kita lihat beberapa tagar tak digunakan yang umum. Saya akan menunjukkan contoh penggunaannya dan apa yang kita gunakan sekarang.

Tagar `<center>`

Kala dahulu, jika Anda ingin mencenterkan teks Anda, Anda akan menggunakan tagar <center>. Itu tampak seperti ini:

<center>Teks ini diletakkan di tengah</center>

Tapi sekarang, kita mencapai hasil yang sama menggunakan CSS:

<p style="text-align: center;">Teks ini diletakkan di tengah</p>

Atau yang lebih baik lagi, di file CSS terpisah:

.center-text {
text-align: center;
}

<p class="center-text">Teks ini diletakkan di tengah</p>

Tagar `<font>`

Ingat saat kita pernah mengubah gaya font secara langsung di HTML? Tagar <font> adalah pilihan utama kita:

<font face="Arial" color="blue" size="3">Ini adalah teks biru Arial</font>

Sekarang, kita menggunakan CSS untuk semua kebutuhan styling kita:

<p style="font-family: Arial; color: blue; font-size: 16px;">Ini adalah teks biru Arial</p>

Tagar `<big>` dan `<small>`

Ini digunakan untuk mengubah ukuran teks:

<big>Teks ini lebih besar</big>
<small>Teks ini lebih kecil</small>

Di HTML modern dan CSS:

<span style="font-size: 1.2em;">Teks ini lebih besar</span>
<span style="font-size: 0.8em;">Teks ini lebih kecil</span>

Atribut Tak Digunakan HTML

Tidak hanya tagar saja yang tak digunakan; atribut juga bisa! Mari kita lihat beberapa contoh.

Atribut `align`

Kita pernah menempatkan gambar seperti ini:

<img src="cat.jpg" align="right" alt="Anak kucing yang lucu">

Sekarang, kita menggunakan CSS:

<img src="cat.jpg" style="float: right;" alt="Anak kucing yang lucu">

Atribut `bgcolor`

Ingat menyetel warna latar belakang seperti ini?

<body bgcolor="lightblue">
Selamat datang di website saya!
</body>

Sekarang, itu semua tentang CSS:

<body style="background-color: lightblue;">
Selamat datang di website saya!
</body>

Mengapa Kita Harus Menghindari Tagar dan Atribut Tak Digunakan?

Dukungan Browser: Browser yang lebih baru mungkin tidak mendukung tagar dan atribut ini.
Pemisahan Kewenangan: Lebih baik mempertahankan struktur (HTML) terpisah dari gaya (CSS).
Aksesibilitas: Banyak elemen tak digunakan yang tidak ramah bagi pembaca layar.
Pemeliharaan: Menggunakan standar saat ini membuat kode Anda mudah diperbarui dan dipelihara.

Perjalanan Kembali ke Masa Lalu: Halaman Web HTML Tak Digunakan

Mari kita buat perjalanan nostalgia dan buat halaman web menggunakan tagar dan atribut tak digunakan. Kemudian, kita akan melihat bagaimana memodernisasikannya.

Cara Lama

<html>
<head>
<title>Website Menarik 90-an Saya</title>
</head>
<body bgcolor="cyan">
<center>
<font face="Comic Sans MS" size="6" color="purple">
Selamat datang di Website Menakjubkan Saya!
</font>
</center>
<hr width="50%" color="red">
<p><b>Ini adalah hal-hal kesukaanku:</b></p>
<ul>
<li><font color="green">Main game video</font></li>
<li><font color="blue">Makan pizza</font></li>
<li><font color="red">Menonton film</font></li>
</ul>
<p align="right"><i>Terima kasih telah mengunjungi!</i></p>
</body>
</html>

Cara Modern

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Menarik Modern Saya</title>
<style>
body {
background-color: cyan;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
color: purple;
}
hr {
width: 50%;
background-color: red;
height: 2px;
border: none;
}
.green { color: green; }
.blue { color: blue; }
.red { color: red; }
.right-align { text-align: right; }
</style>
</head>
<body>
<h1>Selamat datang di Website Menakjubkan Saya!</h1>
<hr>
<p><strong>Ini adalah hal-hal kesukaanku:</strong></p>
<ul>
<li class="green">Main game video</li>
<li class="blue">Makan pizza</li>
<li class="red">Menonton film</li>
</ul>
<p class="right-align"><em>Terima kasih telah mengunjungi!</em></p>
</body>
</html>

Kesimpulan

Dan begitu punya, teman-teman! Kita telah melakukan perjalanan melalui waktu, dari zaman HTML yang liar ke web modern yang ramping dan modern. Ingat, meskipun itu menyenangkan untuk melihat tagar dan atribut lama ini, sangat penting untuk tetap up-to-date dengan standar saat ini.

Sementara kita menutup, ini adalah tabel praktis yang menggabungkan tagar dan atribut tak digunakan yang kita diskusikan:

Tagar/Atribut Tak Digunakan	Alternatif Modern
`<center>`	`text-align: center;` (CSS)
`<font>`	Properti CSS (`font-family`, `color`, `font-size`)
`<big>`, `<small>`	`font-size` (CSS)
`align` atribut	Penempatan CSS (`text-align`, `float`)
`bgcolor` atribut	`background-color` (CSS)

Ingat, belajar HTML seperti belajar bahasa baru. Itu memerlukan waktu, latihan, dan kesabaran. Jangan takut untuk mencoba dan membuat kesalahan – itu adalah bagaimana kita semua belajar! Tetap mengoding, tetap menciptakan, dan terutama, bersenang-senang dengannya!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Pengenkodan Aksara