Modul Ajar Pemprograman Web Statis SMK X RPL - 6

HTML Styles

HTML Style adalah bentuk-bentuk tampilan yang ditampilkan dari sebuah elemen HTML, misalkan style background/latar di ubah menjadi warna merah dan sebagainya,
HTML style dapat di munculkan dengan dua cara yaitu



  • Menggunakan Atribut dari element HTML

Contoh :
<h2> Ini teks Judul </h2> ( tidak menggunakan style ) hasilnya akan tercetak huruf besar posisi di pinggir kiri,
<h2 align="center"> Ini teks Judul <h2> (menggunakan style align="center") hasilnya akan berada di posisi tengah layar


  • Menggunakan Style CSS (cascading style sheet)

Contoh :
Jika kita ingin mengubah latar menjadi warna kuning pada metode pertama maka tag HTML yang ditulis adalah :
<body bgcolor:"yellow"></body>
Untuk lebih jelas silakan lihat contoh

Kemudian bandingkan contoh tersebut dengan metode yang kedua berikut ini :

<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>

Coba Sendiri »

Kesimpulannya adalah, jika kita menggunakan attribut kita lebih mudah untuk mengatur style karena tag yang ditulis lebih sedikit, akan tetapi kita menggunakan CSS kita dapat mengatur semua element HTML dengan satu metode, dan variasi yang banyak.
Untuk masa sekarang metode atribut sudah tidak banyak digunakan, sebagian besar web programmer menggunakan yang kedua yaitu CSS.

berikut ini beberapa contoh agar pembaca lebih memahami tutorial ini :

- Mengubah Font dan warna dengan CSS

<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

Coba Sendiri »

- Mengubah aligment dati teks menggunakan CSS

<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Coba Sendiri »

Share this

Related Posts

Previous
Next Post »

Loading...