Post on 14-Jul-2015
HTML StylingAMIROH, S.KOM
HTML Styling
Setiap Tag/Elemen HTML memiliki nilai default, seperti Warna
background adalah putih, warna teks adalah hitam dan seterusnya.
Untuk mengubah nilai default Tag/Elemen HTML, selain dengan cara
menentukan atributnya, bisa juga dilakukan dengan menggunakan
Style Attribute.
Penulisan Style attribute berada pada sebelah kanan Tag/Elemen
HTML yang bersangkutan
Syntax:
Style=“Property:value”
Contoh:
<body style="background-color:lightgray">
Sama hasilnya dengan:
<body bgcolor=“lightgray”>
The bgcolor attribute, supported in older versions of HTML, is not valid in
HTML5.
Contoh:
Hasilnya:
HTML Style [Color]
Digunakan untuk mengubah warna teks tertentu atau
keseluruhan, baik pada judul maupun paragraf
Syntax:
Style=“color:value”
Contoh:
<body style=“color:red”> // warna teks keseluruhan
<font style=“color:blue”> //warna teks tertentu
<h1 style=“color:yellow”> //warna teks judul
<p style=“color:pink”> //warna teks paragraf
HTML Style [Font-Family]
Digunakan untuk menentukan jenis font yang akan digunakan
pada sebuah teks judul/paragraph
Syntax:
Style=“font-family:value”
Contoh:
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
Contoh:
Hasilnya:
HTML Style [Size]
Digunakan untuk mengubah ukuran teks tertentu atau
keseluruhan, baik pada judul maupun paragraf
Syntax:
Style=“font-size:value”
Contoh:
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph</p>
Contoh:
Hasilnya:
HTML Style [Alignment]
Digunakan untuk menentukan perataan teks, baik pada judul
maupun paragraf
Syntax:
Style=“text-align:value”
Contoh:
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
Contoh:
Hasilnya:
HTML STYLING [BORDER]
Digunakan untuk memberikan batas/border pada teks judul /
paragraph
Syntax:
Style=“border:value”
Contoh:
<h1 style=“border:2px solid yellow">Centered Heading</h1>
<p style=“border:2px solid blue">This is a paragraph.</p>
Contoh:
Hasilnya:
LATIHAN
Open your previous html files.
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
Use border for a visible border
Then save file as “HTML-Style.html”
REFERENSI
http://www.w3schools.com/html