Belajar Koding HTML Bagian 21: Membuat Persegi Panjang Sederhana
.png)
Untuk
membuat persegi panjang dalam HTML, Anda dapat menggunakan elemen <div>
yang distilasi dengan CSS untuk menentukan ukuran, warna, dan properti lainnya.
Berikut adalah langkah-langkah lengkap untuk membuat dan menyesuaikan persegi
panjang:
- Buat Struktur Dasar HTML: Mulailah dengan membuat
dokumen HTML dasar yang mencakup elemen <head> dan <body>.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Persegi
Panjang dengan HTML dan CSS</title>
<style>
/* CSS akan
ditambahkan di sini */
</style>
</head>
<body>
<!-- Elemen div
akan ditambahkan di sini -->
</body>
</html>
- Tambahkan Elemen <div> untuk Persegi Panjang: Di dalam elemen <body>, tambahkan elemen <div> yang akan berfungsi sebagai
persegi panjang.
<div class="persegi-panjang"></div>
- Gaya Elemen <div> Menggunakan CSS: Di dalam elemen <style> di bagian <head>, tambahkan aturan CSS untuk
menentukan tampilan persegi panjang.
.persegi-panjang {
width: 300px; /*
Lebar persegi panjang */
height: 150px; /*
Tinggi persegi panjang */
background-color: #4CAF50;
/* Warna latar belakang */
border: 2px solid #000;
/* Garis tepi */
border-radius: 10px;
/* Sudut melengkung */
margin: 20px auto;
/* Pusatkan elemen di halaman */
}
Penjelasan
properti CSS yang digunakan:
- width dan height: Menentukan ukuran lebar dan
tinggi dari persegi panjang.
- background-color: Menetapkan warna latar
belakang elemen.
- border: Menambahkan garis tepi
dengan ketebalan 2 piksel dan warna hitam.
- border-radius: Memberikan efek sudut
melengkung dengan radius 10 piksel.
- margin: Memberikan jarak luar
sebesar 20 piksel di atas dan bawah, serta secara otomatis memusatkan
elemen secara horizontal.
- Hasil Akhir: Setelah menambahkan elemen <div> dan gaya CSS, struktur lengkap
dokumen HTML Anda akan terlihat seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Persegi
Panjang dengan HTML dan CSS</title>
<style>
.persegi-panjang
{
width: 300px;
height: 150px;
background-color: ##1b5ad1;
border: 2px
solid #000;
border-radius:
10px;
margin: 20px
auto;
}
</style>
</head>
<body>
<div class="persegi-panjang"></div>
</body>
</html>
Dengan
kode di atas, Anda akan mendapatkan sebuah persegi panjang berwarna hijau
dengan ukuran 300x150 piksel, garis tepi hitam, sudut melengkung, dan terpusat
di halaman.
 |
| Tampilan Hasil (Output) Membuat Persegi Panjang |
Untuk
informasi lebih lanjut tentang pembuatan kotak di HTML dan penyesuaiannya menggunakan
CSS, Anda dapat merujuk pada artikel berikut:
Semoga
penjelasan ini membantu Anda dalam memahami cara membuat dan menyesuaikan
persegi panjang menggunakan HTML dan CSS.
REFERENSI
0 Response to "Belajar Koding HTML Bagian 21: Membuat Persegi Panjang Sederhana"
Post a Comment