Kamis, 21 April 2011

LATIHAN CSS


CSS

Myweb.html

<html>
<head>
<title>Penggunaan CSS</title>
<style type="text/css">
h4.as_internal{
color:#00ff00; font-family:tahoma, verdana, geneva, lucida,
'lucida-grande',arial, helvetica, sans-serif; font-size:14px; font-weight:bold;}
td.as_internal{
background-color:green;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<table width="780" border="5" align="center">
<tr>
<td class="as_external" colspan="3" align="center"><h4 class="as_external">Penggunaan Style Sheet Extenal</h4></td>
</tr>
<tr>
<td class="as_internal" colspan="3" align="center"><h4 class="as_external">Penggunaan Style Sheet Internal</h4></td>
</tr>
</tr>
<td style="background-color:lightskyblue;" colspan="3" align="center"><h4 style="color:blue;
font-family:tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,san serif; font-size:
14px; font-weight:bold;">Penggunaan Style Sheet Inline</h4></td>
</tr>
<tr>
<td colspan="3"align="center"><h4>Tanpa Penggunaan Style Sheet</h4></td>
</tr>
<tr align="as_internal">
<td class="as_internal" colspan="3" align="center"><a href="album.html"><b>Album</b></a></td>
</tr>
<tr>
<td colspan="3"<hr></td>
<tr>
<td>Nama</td>
<td colspan="2"><input type="text" name="text1" class="inputbox" value="" size="100"></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>

Mystyle.css

body{
background: white;
margin: 0px;
}
h4.as_external{
color:red;
font-family:tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, san serif:
font-size:14px; font-weigh;bold;
}
a:link,a:visited{
font-size:14px;
color:red;
text-decoration: bold;
font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, san serif;
}
hr{
background:yellow;
height:15px;
border:1px solid #000000;
}
.button{
font-family:verdana, arial, helvetica, san serif;
font-style:normal;
font-size:12px;
border-style:solid;
padding:1;
height:20px;
border:1px solid #999;
color:black;
cursor:hand;
}
.inputbox{
font-family:tahoma,verdana,, geneva, lucida, 'lucida grande',arial, helvetica, san serif;
font-size:x-small;
color:red;
background:yellow;
border:1px solid;
border:18px;
line-height:13px;
}
td.as_external{
background-color:pink;
}

HASIL LATIHAN CSS


Diposting oleh di Tidak ada komentar:

KUIS P.WEB


KUIS

Kuis Satu

<html>
<head>
<title>Tabel 1</title>
</head>
<body>
<table border="3" width="500" height="30%">
<tr>
<td align="center" valign="top" colspan="2"> 1</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center" valign="top">2</td>
<td align="center">3</td>
<td align="center"rowspan="3">7</td>
</tr>
<tr>
<td align="center"colspan="2">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top">5</td>
<td align="center">6</td>
</tr>
</table>
</body>
</html>
Kuis dua

<html>
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td align="center" colspan="4"> 1</td>
</tr>
<tr>
<td align="center" valign="top">2</td>
<td align="center" colspan="2">3</td>
<td align="center" rowspan="3" valign="top">8</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center" colspan="3">7</td>
</tr>
</table>
</body>
</html>
Kuis tiga

<html>
<header>
<title>Tabel 3</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center" colspan="3">7</td>
</tr>
</table>
</body>
</html>
Kuis empat

<html>
<header>
<title>Tabel 4</title>
</header>
<body>
<table border="5" width="500">
<tr>
<td align="center" colspan="2">1</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center" rowspan="2">4</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
<tr>
<td align="center" colspan="2">5</td>
</tr>
</table>
</body>
</html>

Diposting oleh di 1 komentar:

LATIHAN EMPAT

LATIHAN EMPAT

Form Satu

<html>
<body bgcolor="violet">
<form>
<tr>
<td>Nama Depan :</td>
<input type="text" Nama="firstname"><br>
<br>
<td>Nama Belakang :</td>
<input type="text" Nama="lastname">
</tr>
</body>
</html>

Form dua

<html>
<head>
<title>Nama Buah</title>
</head>
<body bgcolor="violet">
Nama Buah Favorit :
<form>
<input type="checkbox"name="Apel">apel
<br>
<input type="checkbox"name="Pisang">pisang
</form>
</body>
</html>
Form tiga

<html>
<head>
<title>Jenis Kelamin</title>
</head>
<body bgcolor="violet">
<form>
<input type="radio" checked name="sex">Laki-Laki
<br>
<input type="radio" checked name="sex">Perempuan
</form>
</body>
</html>
 Form empat

<html>
<head>
<title>Nama Hewan</title>
</head>
<body bgcolor="violet">
Nama Hewan :
<form>
<select name="Animal">
<option values="">
<option values="">Kucing
<option values="Singa">Singa
<option values="Anjing">Anjing
<option values="Kelinci">Kelinci
</select>
</form>
</body>
</html>

Gabungan form

<html>
<body>
<fieldset>
<legend>
Biodata Fisik
</legend>
<form>
Umur <input type="text" size="3">
Berat <input type="text" size="3">
Tinggi <input type="text" size="3">
<body bgcolor="violet">
<form>
<tr>
<td>Nama Depan :</td>
<input type="text" Nama="firstname"><br>
<br>
<td>Nama Belakang :</td>
<input type="text" Nama="lastname">
</tr>
</body>
<body><br><br><br>
Nama Hewan :
<form>
<select name="Animal">
<option values="Kucing">Kucing
<option values="Singa">Singa
<option values="Anjing">Anjing
<option values="Kelinci">Kelinci
</select>
</form>
</body>
<body>
<form>
<input type="radio" checked name="sex">Laki-Laki
<br>
<input type="radio" checked name="sex">Perempuan
</form>
</body>
<body bgcolor="yellow">
Nama Buah Favorit :
<form>
<input type="checkbox"name="Apel">apel
<br>
<input type="checkbox"name="Pisang">pisang
</form>
</body>
</form>
</fieldset>
</body>
</html>
Diposting oleh di Tidak ada komentar:

LATIHAN TIGA


LATIHAN TIGA

Table Satu

<html>
<head>
<title>Table 1</title>
</head>
<body>
<table border="1">
<tr>
<td bgcolor="green">AAAAAA</td>
<td bgcolor="red">BBBBBB</td>
<td bgcolor="blue">CCCCCC</td>
</tr>
<tr>
<td bgcolor="blue">DDDDDD</td>
<td bgcolor="green">EEEEEE</td>
<td bgcolor="red">FFFFFFF</td>
</tr>
</table>
</body>
</html>
  
Table dua

<html>
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td>Header Kiri</td>
<td align="center" width="50%">Header Tengah</td>
<td align="right">Header Kanan</td>
</tr>
<tr>
<td valign="top"rowspan="2">Menu Kiri</td>
<td align="center" colspan="2" height="200">Bagian Isi</td>
</tr>
<tr>
<td align="center">Footer Tengah</td>
<td align="right">Footer Kanan</td>
</tr>
</table>
</body>
</html>


Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)