Apa kabar semua! Bertemu kembali di forum belajar ladangbelajar.blogspot.com. Pada kali ini saya akan sharing mengenai pemrograman web khususnya html. Perhatikan pada gambar disamping kiri ini. Gambar tersebut merupakan hasil dari penggunaan Tag div dan CSS.
Untuk lebih detailnya, pelajari baik-baik listing program .html dan .css nya.
PROGRAM index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
</title>
</head>
<body>
<div class="header"><img src="/media/luak/PRIME'S/KULIAH/DOCUMENT SEMESTER V/TUGAS KULIAH/PRAKTIKUM P.WEB/Kegiatan Praktikum/modul2/utm.png"><h1>My Web</h1></div>
<div id="konten">
<form>
<fieldset>
<legend>Detail Student</legend>
<ol>
<li><label>NRP :</label>
<input type="text" name="txtnrp"/>
</li>
<li><label>Nama :</label>
<input type="text" name="txtnama"/>
</li>
<li><label>Jurusan :</label>
<input type="text" name="txtjurusan"/>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Contact Address</legend>
<ol>
<li><label>Alamat :</label>
<input type="text" name="txtalamat"/>
</li>
<li><label>Kota :</label>
<input type="text" name="txtkota"/>
</li>
<li><label>Provinsi :</label>
<input type="text" name="txtprovinsi"/>
</li>
<li><label>Negara :</label>
<input type="text" name="txtnegara"/>
</li>
</ol>
</fieldset>
<fieldset>
<input id="simpan" type="submit" value="Simpan"/>
</fieldset>
</form>
</div>
<div class="footer"></div>
</body>
<html>
PROGRAM style.css
/*CSS*/
body{
background-color:#797;
margin:auto;
font-family:arial;
}
.header{
width:70%;
height:150px;
border:1px solid #737183;
margin-left:auto;
margin-right:auto;
border-radius:20px 20px 0px 0px;
}
.header h1{
text-align:center;
}
.header img{
float:right;
height:125px;
padding: 10px 10px 0px 0px;
-webkit-transition:opacity 0.5s ease-out;
-moz-transition:opacity 0.5s ease-out;
-ms-transition:opacity 0.5s ease-out;
-o-transition:opacity 0.5s ease-out;
transition:opacity 0.5s ease-out;
}
.header img:hover{
-webkit-transform:translate(0px, 15px);
-moz-transform:translate(0px, 15px);
-o-transform:translate(0px, 15px);
-transform:translate(0px, 15px);
opacity:0.5;
}
#konten{
width:70%;
height:500px;
margin-left:auto;
margin-right:auto;
border:1px solid #737183;
}
#konten ol li{
list-style:none;
margin:10px;
}
#konten ol li label{
width:100px;
display:block;
float:left;
}
#konten form{
background-color:#878;
margin:20px;
padding:20px;
}
#simpan{
float:right;
}
#simpan:hover{
border:2px solid yellow;
background-color:green;
color:yellow;
}
.footer{
width:70%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #737183;
border-radius:0px 0px 20px 20px;
}
0 komentar:
Post a Comment