Style pada HTML

CSS diperkenalkan bersama-sama dengan HTML 4, untuk menyediakan cara yang lebih baik untuk elemen style pada HTML.

Tutorial kali ini akan digunakan attribute HTML style tanpa menggunakan CSS.

A. Style pada HTML mengenai  pewarnaan Background

Langkah :

  1. Tulislah script dibawah ini pada dreamwaver atau notepad  :

<html>

<head><title>Background-color</title></head>

<body style=”background-color:red;”>

<h2 style=”background-color:green;”>This is a heading</h2>

<p style=”background-color:yellow;”>This is a paragraph.</p>

</body>

</html>
[/sourcecode]

2.  Lalu save dengan nama background.html

3.  Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

satu

B.  Style pada HTML mengenai Font, Warna dan Ukuran

Langkah :

1. Tulislah script dibawah ini pada dreamwaver atau notepad  :


&lt;html&gt;

&lt;head&gt;&lt;title&gt;Font,Color and Size&lt;/title&gt;&lt;/head&gt;

&lt;body&gt;

&lt;h1 style="font-family:verdana;"&gt;Ini adalah Heading&lt;/h1&gt;

&lt;p style="font-family:arial;color:blue;font-size:20px;"&gt;Ini adalah paragraf.&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

2.  Lalu save dengan nama fontwarnadanukuran.html

3.  Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

duaa

C.  Style HTML mengenai aligned

Langkah :
1. Tulislah script dibawah ini pada dreamwaver atau notepad  :

<ol>
	<li>Tulislah script dibawah ini pada dreamwaver atau notepad  :</li>
</ol>
&lt;html&gt;

&lt;head&gt;&lt;title&gt;Aligned&lt;/title&gt;&lt;/head&gt;

&lt;body&gt;

&lt;h1 style="text-align:center;"&gt;heading dengan align center&lt;/h1&gt;

&lt;p&gt;This is a paragraph.&lt;/p&gt;

&lt;/body&gt;&lt;/html&gt;

2.  Lalu save dengan nama aligned.html

3.  Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

tigaa

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s