Contoh Program Sederhana dengan HTML dan CSS
Script Hal-1:<html>
<head>
<title>Biodata Diri</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div id="header2">
</div>
<div id="mainbody">
<div id="navigasion">
<p align="center"><font size="5"><b><i>Biodata Diri</i></b></font></p>
</div>
<div id="headline">
<p align="center"><i><b><font size="5"><font color="#FF0000">Nama : Mudji</font></font></b></i></p>
<p align="center"><i><b><font size ="5"><font color="lime">Tempat Tanggal Lahir : Tuban, 16 Juli 1991</font></font></b></i></p>
<p align="center"><i><b><font size ="5"><font color="#FF00FF">Alamat Rumah : Jalan Swadaya 1 rt 06/09 no.25 Pejaten Timur</font></font></b></i></p>
<p align="center"><i><b><font size="5"><font color="#000080">No.HP / Telp : 0213456789</font></font></b></i></p>
<p align="center"><i><b><font size="5" color="yellow">Pendidikan : S1 Sistem Informasi</font></b></i></p>
<p align="center"><i><b><font size="5" color="#800000">Kegiatan : Menjalani perkuliahan, bla bla bla...</font></b></i></p>
<p align="center">Cek Jadwal Perkuliahan ATA <a href="Hal-2.html">Masuk</a></p>
</div>
<div id="rightside">
<h3><p align="center"><img src="images/x.jpg" width="250" height="340"></img></p></h3>
</div>
</div>
</body>
</html>
Tampilan sebagai berikut :
Script Hal-2
<html>
<head><title>Perkuliahan ATA</title>
</head>
<body bgcolor="aqua">
<p align="center"><b><font size="8">Jadwal Perkuliahan ATA</font></b></p>
<table align="center" width="50%" border="10" style="background:white">
<tr>
<td>Kelas</td>
<td>Ruang</td>
<td>Mata Kuliah</td>
<td>Dosen</td>
<td>Waktu</td>
<td>Ruang</td>
</tr>
<tr>
<td>4KA09</td>
<td>Rabu</td>
<td>Pemrograman Berbasis WEB **</td>
<td>Aviariani</td>
<td>1/2/3</td>
<td>D337</td>
</tr>
<tr>
<td>4KA09</td>
<td>Rabu</td>
<td>Sistem Informasi SDM</td>
<td>Reza Chandra</td>
<td>4/5</td>
<td>D337</td>
</tr>
<tr>
<td>4KA09</td>
<td>Rabu</td>
<td>Pengelolaan Proyek Sistem Informasi</td>
<td>Farida</td>
<td>7/8</td>
<td>D023</td>
</tr>
<tr>
<td>4KA09</td>
<td>Kamis</td>
<td>Sistem Informasi Perbankan</td>
<td>Veranita</td>
<td>1/2</td>
<td>D003</td>
</tr>
<tr>
<td>4KA09</td>
<td>Kamis</td>
<td>Testing dan Implementasi Sistem *</td>
<td>Harjanto Sutejo</td>
<td>3/4/5</td>
<td>D003</td>
</tr>
<tr>
<td>4KA09</td>
<td>Kamis</td>
<td>Etika dan Profesionalisme TSI #</td>
<td>Robby Chandra</td>
<td>78</td>
<td>D005</td>
</tr>
<tr>
<td>4KA09</td>
<td>Kamis</td>
<td>Sistem Informasi Geografis</td>
<td>Avinanta Tarigan</td>
<td>9/10</td>
<td>D005</td>
</tr>
<tr>
<td>4KA09</td>
<td>Sabtu</td>
<td>Aplikasi Bisnis Teknologi Informasi</td>
<td>Dewi Anggraini Puspa Hapsari</td>
<td>2/3/4</td>
<td>D031</td>
</tr>
<tr>
<td>4KA09</td>
<td>Sabtu</td>
<td>Bahasa Inggris Bisnis 2</td>
<td>Sastri Lindawati</td>
<td>6/7</td>
<td>D037</td>
</tr>
</table>
<p align="center"><font size="5"><b>Kembali ke Biodata klik <a href="Hal-1.html">disini</a></b></font></p>
</body>
</html>
Tampilan:
Script CSS
body{
padding:0; margin:0; background:#ffffff; color:#111406;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif ;
}
.spacer{
clear:both; line-height:0; font-size:0;
}
/*header session start from here*/
#header{
width:1287px;
height:33px;
margin:0 auto;
position:relative;
background:#da0e0e;
}
#header2{
width:1287px;
height:190px;
margin:0 auto;
position:relative;
background:url(images/header.png) repeat-x;
}
#mainbody{
width:1000px;
height:500px;
margin:0 auto;
margin-top:-100px;
position:relative;
background:#ffffff;
border:1px solid #000000;
}
#navigasion{
width:990px;
height:40px;
margin:0 auto;
margin-top:5px;
position:relative;
background:#81def9;
border:1px solid #3c18f4;
}
#headline{
width:650px;
height:380px;
margin:0 auto;
margin-top:10px;
margin-left:10px;
float:left;
position:relative;
background:#ffffff;
border:5px solid #8cadde;
}
#rightside{
width:290px;
height:380px;
margin:0 auto;
margin-top:10px;
margin-right:10px;
float:right;
position:relative;
background:#ffffff;
border:5px solid #8cadde;
}
Tidak ada komentar:
Posting Komentar