Selanjutnya kita akan mencoba untuk sedikit menghias halaman web seperti dengan menambahkan warna background, warna teks, ukuran fonts. Disini kita akan sedikit menyinggung CSS.
Untuk membuat tampilan web yang lebih menarik seperti memberikan warna, mengganti jenis font, warna font, ukuran font dan lain sebgainya kita harus menggunkan CSS untuk melakukannya. CSS atau singkatan dari Cascading Style Sheets dapat diaplikasikan dengan 3 cara yaitu :
- Inline CSS - dengan menggunakan CSS sebagai attribut
- Internal CSS - dengan menggunakan tag <style> pada elemen head
- Eksternal CSS - dengan membuat file CSS yang nantinya akan dipanggil dengan HTML
Karena kita masih membahas tentang HTML, untuk tutorial kali ini kita akan fokus pada metode pertama yaitu Inline CSS. Salah satu attribut yang biasanya digunakan dalam tag HTML adalah style.
SYNTAX
Untuk mengaplikasikan Inline CSS dalam dokumen HTML kita membutuhkan attribut style. Attribut ini menggunakan syntax seperti ini<nama tag style="property : value">
Attribut style dapat digunakan pada semua tag HTML, untuk property dan valuenya kalian dapat mengikuti property dan value pada CSS. Kita akan membahas beberapa property dalam tutorial kali ini.
WARNA BACKGROUND
Untuk mendefinisikan warna latar sebuah elemen HTML kita menggunakan property background-color. Berikut adalah contoh penggunaan property background-color dengan value green.
<!DOCTYPE html>
<html>
<head>
<title>Warna Background</title>
</head>
<body style="background-color:green;">
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>
WARNA TEKS
Selanjutnya kita akan mencoba merubah warna teks pada contoh diatas. Property yang akan kita gunakan adalah color. Untuk heading kita beri value yellow untuk warna kuning dan paragraf kita beri value white untuk warna putih.
<!DOCTYPE html>
<html>
<head>
<title>Warna Background</title>
</head>
<body style="background-color:green;">
<h1 style="color: yellow;">Ini adalah heading</h1>
<p style="color: white;">Ini adalah paragraf.</p>
</body>
</html>
FONTS
Sekarang kita akan merubah jenis font yang digunakan dengan property font-family dan juga merubah ukuran teksnya dengan property font-size. Untuk heading kita gunakan jenis font Verdana dan untuk paragraf kita gunakan font Times New Roman dengan ukuran 15px.
<!DOCTYPE html>
<html>
<head>
<title>Warna Background</title>
</head>
<body style="background-color:green;">
<h1 style="color: yellow; font-family: verdana;">Ini adalah heading</h1>
<p style="color: white; font-family: times new roman; font-size: 15px;">Ini adalah paragraf.</p>
</body>
</html>
ALIGNMENT TEKS
Untuk mengatur rataan teks sebuah elemen kita bisa menggunakan property text-align.
Sekarang kita akan mencoba menggunakan property text-align dengan value center untuk heading dan right untuk paragraf.
<!DOCTYPE html>
<html>
<head>
<title>Warna Background</title>
</head>
<body style="background-color:green;">
<h1 style="color: yellow; font-family: verdana; text-align: center;">Ini adalah heading</h1>
<p style="color: white; font-family: times new roman; font-size: 15px; text-align: right;">Ini adalah paragraf.</p>
</body>
</html>
- Gunakan attribut style untuk menata elemen HTML
- Gunakan background-color untuk warna latar
- Gunakan color untuk warna teks
- Gunakan font-family untuk jenis font teks
- Gunakan font-size untuk ukuran teks
- Gunakan text-align untuk perataan teks
Sekian untuk tutorial kali ini, masih banyak lagi value yang bisa ditambahkan dalam attribut style untuk lengkapnya kalian bisa cek di bagian HTML Reference pada web w3school.com
Tutorial selanjutnya Mengenal Format Teks Pada HTML.
Tutorial selanjutnya Mengenal Format Teks Pada HTML.
Belum ada tanggapan untuk "Tutorial HTML Part 5 - Mengenal Attribut Style pada HTML"
Post a Comment