Style HTML


Styling HTML dengan CSS

CSS di perkenalkan pada HTML 4 dengan tujuan untuk menyederhanakan cara yang lebih baik untuk  elemen gaya HTML.
CSS dapat ditambahkan ke HTML dengan cara berikut:
  • dalam file style sheet yang terpisah (file CSS)
  • dalam elemen style di bagian kepala HTML
  • di atribut style pada elemen HTML tungal

Namun pada latihan ini, kita menggunakan Atribut HTML Style, hal ini memang memakan waktu dan sangat tidak praktis untuk elemen HTML Style. dan cara yang lebih sering di gunakan adalah dengan cara  menggunakan CSS. dan menempatkan sintak CSS pada file terpisah.
Pada tutorial ini menggunakan atribut Style karena untuk menyederhanakan hal ini juga membuat mudah anda untuk terlebih paham pada dasar dan mudah untuk mengedit kode dan mencoba sendiri.


Tags dan Atribut Usang
Dalam HTML 4 ada beberapa Tags dan Atribut yang usang, artinya tags dan atribut tersebut tidak lagi didukung dalam versi masa depan dari HTML.

Pesannya adalah : Hindari menggunakan tag dan atribut usang!


Tag dan atribut harus dihindari:
TagsKeterangan
<center>Usang. Mendefinisikan konten berpusat
<font> dan <basefont>Usang. Mendefinisikan font HTML
<s> dan <strike>Usang. Mendefinisikan teks strikethrough
<u>Usang. Mendefinisikan teks yang digarisbawahi
AtributKeterangan
meluruskanUsang. Mendefinisikan keselarasan teks
bgcolorUsang. Mendefinisikan warna latar belakang
warnaUsang. Mendefinisikan warna teks
Untuk semua di atas: Gunakan gaya sebagai gantinya!

Ok untuk lebih jelasnya kita akan mencobanya langsung.

Background Color

Mendefinisikan Warna Latar Belakang untuk elemen.
langsung kita buka notepad lalu tuliskan sintak berikut :

<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

Simpan dengan nama "Latihan7.html". Setelah disimpan buka latihan tersebut, maka hasilnya adalah :

Dan untuk membedakan antara Tags dan atribut Usang, berikut adalah contoh dari Atribut Bgcolor gaya lama.

<html>
<body bgcolor="yellow">
<h2>look:Colored Background!</h2>
<p>For future proof HTML, use HTML styles instead:</p>
<p> style="bakground-color:yellow"</P>
</body>
</html>

Anda bisa melihat perbedaan antara tags/Atribut yang lama dengan yang baru.

Selamat mencoba....

0 comments:

Post a Comment

.