Bagian ini akan membahas pengaturan teks dan penyisipan gambar dalam HTML. Memahami cara mengelola teks dan menampilkan gambar secara efektif sangat penting dalam membangun halaman web yang menarik dan informatif.
Pengaturan Teks
Pengaturan teks dalam HTML melibatkan berbagai elemen dan tag yang memungkinkan Anda memformat teks sesuai kebutuhan. Berikut adalah contoh penerapannya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengaturan Teks dalam HTML</title>
<style>
p {
font-size: 16px;
line-height: 1.5;
}
strong {
color: #0066cc;
}
em {
font-style: italic;
}
</style>
</head>
<body>
<h1>Panduan Pengaturan Teks</h1>
<p>Ini adalah <strong>paragraf</strong> contoh dengan <em>teks dicetak miring</em> dan beberapa pengaturan lainnya.</p>
</body>
</html>
- Pengaturan ukuran teks menggunakan properti
font-size. - Pengaturan jarak antar baris menggunakan properti
line-height. - Penggunaan tag
<strong>untuk teks tebal dan<em>untuk teks miring.
Penyisipan Gambar
Penyisipan gambar dalam HTML dapat dilakukan dengan tag <img>. Atribut src digunakan untuk menentukan lokasi gambar, sementara atribut alt memberikan deskripsi alternatif. Contoh kasusnya sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penyisipan Gambar dalam HTML</title>
<style>
img {
max-width: 100%;
height: auto;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Galeri Gambar</h1>
<img src="gambar1.jpg" alt="Deskripsi Gambar 1">
<img src="gambar2.jpg" alt="Deskripsi Gambar 2">
<img src="gambar3.jpg" alt="Deskripsi Gambar 3">
</body>
</html>
- Atribut
max-width: 100%memastikan gambar tidak melebihi lebar area kontennya. - Penggunaan atribut
borderuntuk memberikan efek border pada gambar. - Atribut
border-radiusmemberikan efek sudut melengkung pada gambar. - Atribut
margin-bottommemberikan jarak antara gambar.
Contoh Kasus: Membuat Galeri Profil
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeri Profil</title>
<style>
.profile-img {
max-width: 100%;
height: auto;
border-radius: 50%;
border: 3px solid #0066cc;
}
</style>
</head>
<body>
<h1>Galeri Profil</h1>
<img class="profile-img" src="profil1.jpg" alt="Profil Pengguna 1">
<img class="profile-img" src="profil2.jpg" alt="Profil Pengguna 2">
<img class="profile-img" src="profil3.jpg" alt="Profil Pengguna 3">
</body>
</html>
- Penggunaan class
.profile-imguntuk mengaplikasikan gaya tertentu pada gambar profil. - Efek border dan sudut melengkung memberikan tampilan galeri yang menarik.
Kesimpulan
Pengaturan teks dan penyisipan gambar dalam HTML merupakan langkah penting dalam merancang halaman web yang estetis dan informatif. Dengan pemahaman yang baik tentang tag dan atribut HTML, serta penggunaan properti CSS yang tepat, Anda dapat menciptakan konten yang menarik dan responsif. Teruslah berlatih dan eksplorasi untuk mengasah keterampilan Anda dalam mengelola teks dan gambar pada halaman web.
