LP 4

Nama Program : border.
html
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Border Tabel</title>
<style type="text/css">
table, th,td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>Nama Depan</th><th>Nama</th></tr>
<tr><td>Adelin</td><td>Larasati</td></tr>
<tr><td>Novero</td><td>Dayandra</td></tr>
<tr><td>Adika</td><td>Dayandra</td></tr>
</table>
</body>
</html>
Analisa :
Nama Program : border-collapse.html

Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Border Tabel</title>
table{
border-collapse: collapse;
}
table, th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
Analisa :
Nama Program : TinggiLebar.html

Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Tinggi dan Lebar</title>
table, td, th{
}
table{
width: 100%;
}
th{
height: 50px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
Analisa :
Nama Program : textAlign.html

Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Text Align</title>
table, td, th{
}
td{
text-align: right;
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
Analisa :
Nama Program : padding.html
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Padding</title>
table, td, th{
}
td{
text-align: right;
height: 50px;
padding: 15px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
Analisa :
Nama Program : paddingRight.html

Source Code :
<!DOCTYPE html>
<html>
<head>
table, td, th{
}
td{
text-align: right;
height: 50px;
padding-right: 70px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
Analisa :
Nama Program : warna.html

Source Code :
<!DOCTYPE html>
<html>
<head>
table, td, th{
border: 1px solid green;
}
th{
background-color: green;
color: white;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
Analisa :
Nama Program :
Source Code :
Output :
Analisa :
Nama Program :
Source Code :
Output :
Analisa :
Nama Program : cssForm.html

Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Pada Form Text Area</title>
form{
border: 1px solid #666666;
width: 70%;
margin-left: 0;
background-color: #ffff66;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr><td width="50">Nama</td>
<td width="175"><textarea name="textarea"
cols="50"></textarea></td></tr>
<tr><td width="50">Pesan</td>
cols="50" rows="14"></textarea></td></tr>
</table>
</form>
</body>
</html>
Output :
Analisa :
Nama Program : input.html
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan pada form text area</title>
textarea{
color: white;
background-color: #ff9933;
}
</style>
</head>
<body>
<table border="1">
<tr><td width="50">Nama</td>
cols="50"></textarea></td></tr>
<tr><td width="50">Pesan</td>
cols="50" rows="14"></textarea></td></tr>
</table>
</form>
</body>
</html>
Output :
Analisa :
Nama Program : textfield.html
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan pada form</title>
input{
color: #000000;
background: white;
border-color: white;
border-bottom-color: black;
border-top: 0px solid;
border-bottom: 2px dotted;
border-left: 0px solid;
border-right: 0px solid;
font-family: tahoma, Arial;
font-size: 11px;
}
</style>
</head>
<body>
<table>
<tr>
<td width="58">Nama</td>
<td width="230">: <input
type="text" name="input"></td></tr>
<tr>
<td width="50">Pesan</td>
type="text" name="input1"></td></tr>
</table>
</form>
</body>
</html>
Output :
Analisa :
Nama Program : button.html
Source Code :
<!DOCTYPE html>
<html>
<head>
input.button{
color: #000000;
background: lightblue;
border-bottom-color: black;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-left: 1px dotted;
border-right: 1px dotted;
font-family: verdana;
font-size: 12px;
}
</style>
</head>
<body>
<table>
<tr>
<tr>
<tr>
<td></td>
<td>
<input class="button"
type="submit" name="" value="Simpan" />
type="submit" name="" value="Sumbit" />
</td>
</tr>
</table>
</form>
</body>
</html>
Output :
Analisa :
Nama Program : button2.html
Source Code :
<!DOCTYPE html>
<html>
<head>
input.button{
color: #fff;
background: #ffa20f;
border: 2px outset #BBD16D;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
input.button:hover{
color: #fff;
background: #0c62a4;
border: 2px outset #ffa20f;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tr>
<tr>
<tr>
<td></td>
<td>
type="submit" name="" value="Simpan" />
type="submit" name="" value="Sumbit" />
</td>
</tr>
</table>
</form>
</body>
</html>
Output :
Analisa :
Nama Program : radio.html

Source Code :
<!DOCTYPE html>
<html>
<head>
input.rb1{
background: blue;
font-size: 12px;
}
input.rb2{
background: green;
font-size: 12px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="58">Kelamin:</td>
<td width="230"><input type="radio"
class="rb1" name="rad">Pria /Male</td></tr>
<tr>
<td width="58"></td>
<td width="230"><input type="radio"
class="rb2" name="rad">Wanita/Female</td></tr>
</table>
</form>
</body>
</html>
Output :
Analisa :
Nama Program : checkBox.html
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Pengaturan pada form checkbox</title>
input.checbox1{
background: blue;
border-color: green;
border-style: outset double;
}
input.checbox2{
background: yellow;
border-color: red;
border-style: double;
}
input.checbox3{
background: green;
border-color: black;
border-style: dotted;
}
</style>
</head>
<body>
<table>
<tr>
<td width="58">hoby :</td>
<td width="230">
<input type="checkbox"
name="badminton" class="checbox1"/>Badminton
</td>
</tr>
<tr>
<td width="58"> </td>
<td width="230">
name="tenismejad" class="checbox2"/>Tenis Meja
</td>
</tr>
<tr>
<td width="230">
name="sepakbola" class="checbox3"/>Sepakbola
</td>
</tr>
<tr>
<td width="230">
name="golf" class="checbox3"/>Golf
</td>
</tr>
Output :
Analisa :
Praktikum
Nama Program :
Source Code :
<html>
<head>
<title>prak1</title>
table{
}
th{
border: 3px solid red;
background-color: blue;
color: white;
width: 20%;
padding: 5px 8px 5px;
font-size: 12px;
}
td{
height: 25px;
font-family: serif;
size: 12px;
}
</style>
</head>
<body>
<table>
<tr><th>Nama
Komputer</th><th>Prosesor</th><th>RAM</th><th>Sistem
Operasi</th></tr>
<tr><td>Clnt-1</td><td>IP 4 1,8 Ghz</td><td>10
GB</td><td>Redhat Linux</td></tr>
<tr><td>Clnt-2</td><td>IP 2 Ghz</td><td>6 GB</td><td>Madrake
Linux</td></tr>
<tr><td>Clnt-3</td><td>XP 2000+</td><td>20
GB</td><td>windows</td></tr>
</table>
</body>
</html>
Output :
Analisa :
Nama Program :
Source Code :
<html>
<head>
table, tr, td{
border: 2px solid yellow;
background-color: orange;
font-family: arial;
font-size: 12px;
}
th{
border-bottom: 2px solid red;
border-right: 2px solid pink;
padding: 5px;
font-size: 12px;
font-family: arial;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<table>
<tr><th width="200">Kompetensi Keahlian</th><th
width="65">Kode</th><th width="80">Jumlah Diklat</th>
<th width="80">Jml Kaitan</th><th
width="120">Pencapaian(%)</th></tr>
<tr><td>Animasi</td><td>TIKAA073</td><td>8</td><td>0</td><td>0</t
d></tr>
<tr><td>Teknik Komputer dan
jaringan</td><td>TIKKJ071</td><td>21</td><td>21</td><td>100</td><
/tr>
<tr><td>Teknik
Multimedia</td><td>TIKMM072</td><td>10</td><td>0</td><td>0</td></
tr>
<tr><td>Rekayasa Perangkat
Lunak</td><td>TIKPL070</td><td>21</td><td>17</td><td>80</td></tr>
<tr><td>Teknik Jaringan
Akses</td><td>TIKAA073</td><td>0</td><td>0</td><td>0</td></tr>
</table>
</body>
</html>
Output :
Analisa :
Nama Program :
Source Code :
Css
fieldset{
display: block;
border: 2px groove;
background-color: red;
}
legend{
padding: 3px;
color: #fff;
border: 2px groove;
}
td{
padding-bottom: 15px;
width: 100px;
}
input{
border: 2px groove;
}
select{
widht: 100px;
}
input.btn{
background-color: #fba841;
color: white;
}
input.btna:hover{
background-color: #fbcc91;
font-weight: bold;
}
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="prak3.css"/>
</head>
<body>
<form>
<fieldset>
<legend>Pekerjaan</legend>
<table>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" /></td>
</tr>
<tr>
<td>KTP</td>
<td><input type="text" name="ktp" /></td>
</tr>
<tr>
<td>Kelamin</td>
<td><select name="kelamin">
<option>Laki-Laki</option>
<option>Perempuan</option>
</select>
</td>
</tr>
<tr>
<td>TTL</td>
<td><input type="text" name="tanggal"/></td>
<td><input type="text" name="bulan"/></td>
</tr>
<tr>
<td>Agama</td>
<td>
<select name="agama">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
</select>
</td>
</tr>
<tr>
<td>Status</td>
<td>
<select>
<option>Kawin</option>
<option>Belum kawin</option>
</select>
</td>
</tr>
<tr>
Output :
Analisa :

LP 4

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

LP 4

Caricato da

Copyright:

Formati disponibili

Nama Program : border.

Nama Program : border-collapse.html

Nama Program : TinggiLebar.html

Nama Program : textAlign.html

Nama Program : paddingRight.html

Nama Program : warna.html

Nama Program : cssForm.html

Nama Program : radio.html

Potrebbero piacerti anche