Belajar HTML Part 6 : Atribut Style pada HTML
Atribut style pada HTML
Atribut Style pada HTML
Pengaturan styling pada elemen HTML dapat dilakukan dengan atribut style.
Contoh
<!DOCTYPE html>
<html>
<body>
<p>teks normal</p>
<p style="color:red;">teks warna merah</p>
<p style="color:blue;">teks warna biru</p>
<p style="font-size:36px;">teks berukuran besar</p>
</body>
</html>Hasilnya:
HTML Background-color
Properti background-color adalah untuk memberi warna pada latar belakang elemen HTML.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body style="background-color:orange;">
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf</p>
</body>
</html>Hasilnya:
HTML Text Color
Properti color digunakan untuk memberi warna teks pada elemen HTML:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<h1 style="color:blue;">Ini adalah sebuah heading</h1>
<p style="color:red;">Ini adalah sebuah paragraf</p>
</body>
</html>Hasilnya:
HTML Fonts
Properti font-family digunakan untuk mengubah jenis font yang akan digunakan pada elemen HTML:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<h1 style="font-family:verdana;"> Ini adalah heading </h1>
<p style="font-family:courier;"> Ini adalah paragraf.</p>
</body>
</html>Hasilnya:
HTML Ukuran Teks
Properti font-size digunakan untuk memberikan atau mengubah ukuran pada teks di elemen HTML:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<h1 style="font-size:300%;">Ini adalah heading</h1>
<p style="font-size:160%;">Ini adalah sebuah paragraf</p>
</body>
</html>Hasilnya:
HTML Text-Align
Properti text-align digunakan untuk memberikan perataan teks horisontal untuk sebuah elemen HTML. Properti ini memiliki value left, center, right, dan justify.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>
<h1 style="text-align:center;">Posisi Heading di tengah</h1>
<p style="text-align:left;">Posisi paragraf di kiri.</p>
<p style="text-align:center;">Posisi paragraf di tengah.</p>
<p style="text-align:right;">Posisi paragraf di kanan.</p>
<p style="text-align:justify;">Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan.</p>
</body>
</html>Hasilnya:
Rangkuman
- Gunakan atribut style untuk elemen styling pada HTML
- Gunakan background-color untuk warna latar belakang
- Gunakan color untuk warna teks
- Gunakan font-family untuk jenis font pada teks
- Gunakan font-size untuk ukuran teks
- Gunakan text-align untuk perataan teks
Demikian pembahasan tentang Styles pada HTML.
Semoga bemanfaat!
Thanks for reading Belajar HTML Part 6 : Atribut Style pada HTML . Please share...!
Post a Comment for "Belajar HTML Part 6 : Atribut Style pada HTML "