TV ONLINE

Jumat, 22 April 2011

CSS code: My Web

Pertama-tama, buat kode berikut pada notepad, dan simpan dengan nama "mystyle.css"



/* body*/
body {
background: #d4d0c8;
margin:0px;
}


/*heading*/
h4.as_external {
color:#00ff00;
font-family:tahoma,firewalk36,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size: 14px;font-weight:bold;
}


/*links*/
a:link, a:visited {
font-size:32px;
color: #FF0000;
text-decoration:none;
font-family: tahoma,firewalk36,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
}
a:hover {
color:#ff0000; text-decoration:underline;
}


/*horizontal*/
hr {
background: #0000ff; height:13px; border:1px solid #FF0000;
}


/*button*/
.button {
font-family:firewalk36,arial,helvetica,sans-serif;
font-style: normal;
font-size: 10px;
border-style: solid;
padding:0;
height:16px;
border:1px solid #999;
color: #30348D;
cursor:hand;
}


/*text*/
.inputbox {
font-family:tahoma,firewalk36,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size: x-small;
color: #333333;
background: #ffffff;
border: 1 px solid;
height:18px;
line-height:13px
}
td.as_external {
background-color: #edf5fe;
}

Kemudian buat pada notepad baru kode dibawah ini dengan nama penyimpanan "Myweb.htm"



<html>
<head>
<title>praktikum penggunaan style sheet</title>
<style type ="text/css">
h4.as_internal {
color:#ooFFoo;font-family:tahoma,firewalk36,geneva,lucida,'lucida grande',arial,helvetica,
sans-serif; font-size: 14px;font-weight:bold;
}
td.as_internal {
background-color:#ffffff;
}
</style>
<link rel="stylesheet" type="text/css"href="mystyle.css">
</head>
<body>
<table width=780 borde1 align=center>
<tr>
<td align="center" class="as_external" colspan=3><h4 class="as_external">penggunaan style sheet
external</h4></td>
</tr>
<tr>
<td align="center" class="as_internal"colspan=3><h4 class="as_internal">penggunaan style sheet
internal</h4></td>
</tr>
<tr>
<td align="center" style="background-color: lightskyblue;" colspan=3><h4 style="color:#0000ff;
font family: tahoma,firewalk36,geneva,lucida
'lucida grande',arial,helvetica,
sans-serif; font-size: 14px;font-weight:bold;">penggunaan style sheet inline</h4></td>
</tr>
<tr>
<td align="center" colspan=3><h4>tanpa penggunaan style sheet</h4></td>
</tr>
<tr align=center>
<td class="as_internal"colspan="3" align="center"><a href="album.htm">album.htm</a></td>


</tr>
<tr><td colspan=3><hr></td></tr>
<tr>
<td>nama</td>
<td colspan=2><input type='text' name='text' class='inputbox' value=' '></td>
</tr>
<tr>
<td> alamat</td>
<td colspan=2><input type='text name='text2' class='inputbox' value= ''
size='100'></td>
</tr>
<tr><td colspan=3><hr></td></tr>
<tr>
<td colspan=3>
<input type='submit' class='button' value='submit'>&nbsp;
<input type='reset' class='button' value='reset'>
</td>
</tr>
</table>
</body>
</html>


maka akan tampil dengan tampilan berikut:

2 komentar:

Andro Bhaskara mengatakan...

Wuih.. gudang bahasa HTML nih.. salam kenal yak..!!! :) Folback is done #11.. :)

Unknown mengatakan...

waa nice share..bermanfaat :)

Posting Komentar