04 html styling

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

04 html styling

Internet

Transcript of 04 html styling