Mengenal Atribut Style Di HTML

Pada kesempatan kali ini Blog Pintasku masih tetap membahas seputar Tutorial Dasar HTML, tetapi untuk kali ini saya akan memberikan Tutorial Cara Membuat Style Di HTML, sebelumnya saya pernah membuat tutorial Cara Membuat Paragraf di HTML.

Mengenal Atribut Style Di HTML

Sepertinya tidak akan pernah terbayang jika sebuah halaman web tidak memiliki style nantinya akan terlihat polos dan sangat tidak relevan. Mungkin sobat akan bertanya - tanya bagaimana sih membuat sebuah dokumen html dengan tampilan bergaya seperti membuat warna background yang di inginkan atau bahkan membuat tulisan berwarna ? Oke jika ingin sobat ingin mengetahuinya silahkan sobat baca penjelasan saya dibawah ini.

Mengenal Atribut Style Di HTML

Apa itu Atribut Style ?

Style jika di artikan ke dalam Bahasa Indonesia berarti "Gaya" nah jika mendengar istilah Gaya di Desain Web atau Web Development itu berhubungan dengan CSS, CSS di dalam Desain Web berfungsi untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. 

Untuk lebih jelasnya silahkan sobat baca di Mengenal Apa Itu CSS ?

Atribut Style ini termasuk kedalam Metode Penulisan CSS dan dikenal dengan istilah inline, dimana penulisan ini dilakukan di dalam Tag HTML. Supaya bisa lebih mengerti silahkan perhatikan struktur atribut style berikut ini.
style="property:value"
Keterangan : Property adalah Property CSS dan Value adalah Nilai dari Propery CSS.
Untuk lebih jelasnya saya akan jelaskan nanti untuk bagian CSS

Nahh di atas adalah struktur dari atribut style, sekarang silahkan perhatikan contoh penggunaan atribut style di dalam HTML dibawah ini.

1. Untuk background dan warna.

<!DOCTYPE html>
  <html>
  <head>
    <title>Cara Membuat Paragraf HTML</title>
  </head>
<body style="background-color:lightgrey">
   <h1 style="color:red">Penggunaan Atribut Style</h1>
   <p style="color:blue">Belajar Atribut Style dari Blog Pintasku</p>
</body>
</html>
Hasilnya :
Penggunaan Atribut Style-1

2. Untuk Fonts.

<!DOCTYPE html>
  <html>
  <head>
    <title>Penggunaan Atribut Style</title>
  </head>
<body style="background-color:lightgrey">
   <h1 style="font-family:verdana">Penggunaan Atribut Style</h1>
   <p style="font-family:courier">Belajar Atribut Style dari Blog Pintasku</p>
</body>
</html>
Hasilnya :

3. Untuk ukuran tulisan.

<!DOCTYPE html>
  <html>
  <head>
    <title>Penggunaan Atribut Style</title>
  </head>
<body style="background-color:lightgrey">
   <h1 style="font-size:300%">Penggunaan Atribut Style</h1>
   <p style="font-size:160%"">Belajar Atribut Style dari Blog Pintasku</p>
</body>
</html>
Hasilnya :

3. Untuk Jajaran Tulisan atau Perataan Tulisan.

<!DOCTYPE html>
  <html>
  <head>
    <title>Penggunaan Atribut Style</title>
  </head>
<body style="background-color:lightgrey">
   <h1 style="text-align:center">Penggunaan Atribut Style</h1>
   <p style="text-align:Left">Belajar Atribut Style dari Blog Pintasku</p>
      <p style="text-align:Right">Tulisan Rata Kanan ini</p>
</body>
</html>
Hasilnya :

Catatan : Penggunaan Tag <center> itu tidak valid HTML5, tetapi masih bekerja di versi HTML sebelumnya.

Diposkan oleh Tanggal

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)