Style di HTML

Kali ini kita akan mempelajari tentang style di html. Fungsi style di html ini untuk memperindah tampilan. Biasanya para web designer sering menggunakan CSS (Cascading Style Sheet) untuk mempermudah. Karena ketika kita membuat sebuah website tentunya akan ada banyak code yang harus kita klasifikasikan sehingga akan lebih mudah bagi kita untuk mengeditnya di file yang berbeda (Style Sheet External).

Tetapi kita tidak akan lebih jauh mengenal tentang style sheet, sebagai dasar mari kita belajar terlebih dahulu tentang tag style di html.

perhatikan code dibawah.

<html>
 <body style="background-color:PowderBlue;">
  <h1>Lihatlah bagaimana kita merubah warna dan jenis hurufnya!</h1>
  <p style="font-family:verdana; color:red;">
  Teks ini adalah verdana dan mempunyai warna merah</p>
  <p style="font-family:times; color:green;">
  Teks ini adalah times new roman dan warnanya hijau</p>
  <p style="font-size:30px;">
  Sedangkan teks yang satu ini memiliki 30px</p>
 </body>
</html>

Copy kode di atas ke notepad atau editor selera Anda. Save dengan nama “style.html” atau apa saja yang anda suka kemudian lihat hasilnya.

Nah jika sudah, saya menganjurkan Anda untuk mengutak – atik jenis huruf dan warna di code tersebut agar kalian lebih mengerti tentang style berikut. Mari kita telah lebih lanjut tentang code di atas.

<body style="background-color:PowderBlue;">

Kode di atas untuk merubah warna background badan website (“<body>”) menjadi PowderBlue (biru tepung atau apalah yang pasti bisa Anda liat warnanya diatas)

<p style="font-family:verdana; color:red;">

Mendefinisikan teks di paragraf berikut dengan jenis teks verdana dan berwarna merah.

<p style="font-family:times; color:green;">

Sama seperti code diatas cuma berbeda jenis teks dan warna, yaitu mendefinisikan teks di paragraf berikut dengan jenis teks times new roman dan berwarna hijau. Terus apakah kita bisa mendefinisikan background paragraf, jawabannya tentu saja kita tinggal menuliskan ‘<p sytle=”background-color:yellow”>’. Supaya lebih jelas lihat contoh dibawah.

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

Hasilnya bisa Anda lihat dibawah.

Sebagaimana contoh diatas kita bisa memdefinisikan background untuk heading maupun paragraf. Kemudian jika kita ingin mendefinisikan align teks, apakah teks mau Anda simpan di tengah, sisi kiri ataupun sisi kanan kita tinggal mendefinisikannya dengan “teks-align:<option>”. Perhatikan contoh dibawah ini.

<html>
 <body>
  <h1 style="text-align: center;">Heading 1 yang disimpan ditengah</h1>
  <p>Dan ini paragrafnya tanpa saya setting di tengah</p>
 </body>
</html>

Hasilnya dapat dilihat dibawah.

Pada contoh diatas kita dapat disimpulkan bahwa kita tidak lagi perlu menggunakan tag <center> untuk mengetengahkan teks, kita tidak perlu menggunakan <font> untuk mewarnai dan mengganti jenis teks. Jadi intinya pada html versi terbaru kita dituntut untuk menggunakan style. Dimana pada tingkat selanjutnya CSS (cascade style sheet) sangat diperlukan, untuk menkonfigurasi setiap style pada web tentunya dalam file yang berbeda.

Maka dari itu saya tekankan untuk anda yang mau belajar CSS harus memahami konsep html dan style tag terlebih dahulu. Tapi disini saya tidak akan dulu jauh – jauh membahas CSS, disini saya fokus HTML dulu. Anda bisa membaca referensi lain mengenai CSS, cari saja di Google😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s