Kali ini saya akan posting tentang cara membuat halaman web dengan menggunakan HTML + CSS
1. Buat skrip HTML seperti dibawah ini :
<html>
<head>
<link rel="stylesheet" type="text/css" href="uts-hendriana.css">
<title>UTS HENDRIANA</title>
</head>
<body>
<div
</body>
<div id="template">
<div id="header">
<img src="gambar/1a.jpg" >
</div>
<div id="navigasi">
<table align="center" width="800px">
<tr align="center">
<td width="200px"><a href="z.html">Beranda </a></td>
<td width="200px"><a href="z.html">Biodata </a></td>
<td width="200px"><a href="z.html">Keluarga </a></td>
<td width="200px"><a href="z.html">Jadwal Mata Kuliah </td>
</tr>
</table></div>
<div id="kiri">
<div class="b">
<p align="center">Menu Utama
<ul>
<i><li><a href="z.html">Beranda</a></li>
<li><a href="z.html">Biodata</a></li>
<li><a href="z.html">Keluarga</a></li>
<li><a href="z.html">Jadwal Mata Kuliah</a>
</ul>
</p> <br>
<p align="center">
Menu Lainnya
<ul>
<li><a href="z.html">Sejarah Kampus</a></li>
<li><a href="z.html">Visi dan Misi</a></li>
<li><a href="z.html">Pengurus Yayasan</a></li>
<li><a href="z.html">Pengurus Rektorat</a></li></i>
</ul>
</p>
</div>
</div>
<div id="isi">
<div id="container">
<h2>Wilujeung Sumping</h2>
<a href="z.html"><img src="gambar/12.jpg" height="50%" class="image_float"></a>
<p> Perkenalkan Nama Saya Hendriana, anda dapat memanggil saya Hendri.</p>
<p> Hobby Saya Adalah : </p>
<ol>
<li>Main Game</li>
<li>Makan-makan</li>
<li>Tour</a></li>
</ol>
<p> Hobby Saya Yang Lain : </p>
<ol type="a" start="1">
<li>Ngulik Sesuatu yang Bikin Penasaran</li>
<li>Dengerin Music</li>
<li>Nonton Film Barat</a></li>
</ol>
<p> Anda Bisa menghubungi saya melalui:
<br>Hand Phone = 087879988194
<br>E-mail = hendri.ferary@gmail.com
<br>Kegiatan saya sehari-hari diantaranya adalah Kuliah dan Bekerja wiraswasta</p>
</div>
</div>
<div id="kanan">
<div class="zoom">
<p align="center"><br><br><br>
<a href="z.html"><img src="gambar/1c.jpg"height="25%"></a><br><br><br>
<a href="z.html"><img src="gambar/1b.jpg"height="25%"></a>
</p>
</div>
</div>
<div id="clear"></div>
<div id="footer">
<p align="center"><blink><b>Copyright@2013 - 12044411019 - Hendriana</b></blink></p>
</div>
<div id="clear"></div>
</div>
</html>
*catatan* = simpan skrip tersebut dengan nama hendriana.html
2.Buat skrip CSS seperti dibawah ini :
body{
background: #FFFFFF;
margin: 20px 20px 20px 20px;
}
#template {
width: 950px;
border: 1px dashed #FFAA99;
padding: 10px;
border-radius: 5px;
}
#header {
width: 950px;
height: 150px;
border: 1px solid #000000;
}
#navigasi {
width: 950px;
height: 30px;
border: 1px solid #000000;
margin-top: 5px;
}
#kiri {
width: 180px;
height: 500px;
border: 1px solid #000000;
margin-top: 10px;
float: left;
}
#isi {
width: 605px;
height: 590px;
border: 1px solid #000000;
margin-top: 10px;
margin-left: 5px;
float: left;
padding: 5px 5px 5px 5px;
}
#kanan {
width: 140px;
height: 500px;
border: 1px solid #000000;
margin-top: 10px;
float: right;
}
#clear { clear: both; }
#footer {
width: 950px;
height: 30px;
border: 1px solid #000000;
margin-top: 5px;
padding: 0px 2px 5px 0px;
}
h1 {text-align: center;}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: white;
background: black;
text-decoration: underline;
}
a:active {
color: red;
font-size: 20px;
text-decoration: bold;
background: gray;
}
.b a:link{
color: green;
text-decoration: none;
}
.b a:visited {
color: green;
}
.b a:hover {
color: red;
background: ;
text-decoration: italic;
}
.b a:active {
color:blue;
font-size: 20px;
text-decoration: bold;
background: red;
}
#teks {
padding: 10px;
border: 1px solid #555599;
}
h2{ font-size: 24px;
text-align: center}
h3{ font-size: 18px;
text-align: center}
p {line height: 150%; }
.image_float {
float: right;
margin: 0 5px 5px 5px;
border: 1px dashed #555599;
padding: 10px 5px 10px 5px;
border-radius: 10px;
}
.zoom img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity:1
}
.image_float:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity:1
}
*catatan* = simpan skrip CSS dengan nama hendriana.css
contoh: apabila nama cssnya adalah "aku.css" maka pada htmlnya "<link rel="stylesheet" type="text/css" href="aku.css">
Tidak ada komentar:
Posting Komentar