Desain web merupakan bagian terpenting dalam pembangunan sebuah halaman website. Dalam desain web yang baik, unsur estetika yang harus diperhatikan adalah: warna, tata letak, dan bentuk. Ketiga unsur tersebut dapat diatur dengan menggunakan CSS, seperti mengatur warna background, warna huruf, bentuk menu, dan lain sebagainya.
CSS
body {margin: 10px auto;
width: 1000px;
}
header {
height: 80px;
display: block;
border: 5px solid blue;
background-color: royalblue;
}
logo {
float: left;
margin-top: 7px;
margin-left: 10px;
width: 65px;
height: 65px;
border: 0px;
}
judul {
float: left;
margin-top: 20px;
margin-left: 15px;
width: 500px;
height: 40px;
border: 0px;
}
nav {
float: top;
width: 2000;
height: 30px;
display: block;
border: 0px solid blue;
background-color: skyblue;
}
search1 {
float: left;
margin-top: 7px;
margin-left: 10px;
width: 50px;
height: 15px;
border: 0px;
}
search2 {
float: left;
margin-top: 7px;
margin-left: 1px;
width: 100px;
height: 15px;
border: 1px solid black;
background-color: white;
}
a1 {
float: left;
margin-top: 3px;
margin-left: 400px;
width: 50px;
height: 20px;
border: 0px;
background-color: blue;
}
a2 {
float: left;
margin-top: 3px;
margin-left: 2px;
width: 100px;
height: 20px;
border: 0px;
background-color: blue;
}
a3 {
float: left;
margin-top: 3px;
margin-left: 2px;
width: 75px;
height: 20px;
border: 0px;
background-color: blue;
}
a4 {
float: left;
margin-top: 3px;
margin-left: 2px;
width: 100px;
height: 20px;
border: 0px;
background-color: blue;
}
a5 {
float: left;
margin-top: 3px;
margin-left: 2px;
width: 75px;
height: 20px;
border: 0px;
background-color: blue;
}
section {
width: 2000;
height: 500px;
display: block;
border: 2px solid skyblue;
}
foto {
float: left;
margin-top: 0px;
margin-left: 0px;
width: 300px;
height: 480px;
border: 10px solid black;
}
text1 {
float: right;
margin-top: 0px;
margin-right: 0px;
width: 660px;
height: 300px;
border: 0px;
}
text2 {
float: right;
margin-top: 0px;
margin-right: 0px;
width: 673px;
height: 200px;
border: 0px;
background-color: skyblue;
}
footer {
height: 50px;
display: block;
border: 0px;
background-color: royalblue;
}
atas {
float: left;
margin-top: 0px;
margin-right: 0px;
width: 1000px;
height: 20px;
border: 0px;
}
b1 {
float: left;
margin-top: 0px;
margin-left: 300px;
width: 50px;
height: 15px;
border: 0px;
}
b2 {
float: left;
margin-top: 0px;
margin-left: 3px;
width: 100px;
height: 15px;
border: 0px;
}
b3 {
float: left;
margin-top: 0px;
margin-left: 3px;
width: 75px;
height: 15px;
border: 0px;
}
b4 {
float: left;
margin-top: 0px;
margin-left: 3px;
width: 100px;
height: 15px;
border: 0px;
}
b5 {
float: left;
margin-top: 0px;
margin-left: 3px;
width: 75px;
height: 15px;
border: 0px;
}
bawah {
float: left;
margin-top: 5px;
margin-right: 0px;
width: 1000px;
height: 20px;
border: 0px;
}
by {
float: right;
margin-top: 0px;
margin-left: 3px;
width: 150px;
height: 15px;
border: 0px;
}
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Praktikum</title>
<link rel="stylesheet" href="praktikum.css" type="text/css" />
</head>
<body>
<header>
<logo><img src="UM.png" width="65" height="65"/></logo>
<judul><font face="Tahoma" size="7" color="white"><b>TEKNIK ELEKTRO</b></font></judul>
</header>
<nav>
<search1>Search</search1>
<search2></search2>
<a1><b align="center">Home</a1>
<a2><b align="center">News&Media</a2>
<a3><b align="center">Tutorials</a3>
<a4><b align="center">Tips&Tricks</a4>
<a5><b align="center">Downloads</a5>
</nav>
<section>
<foto><img src="conan.jpg" width="300" height="480"/></foto>
<text1><br>Detektif Conan (?????? Meitantei Konan?) adalah sebuah serial manga detektif yang ditulis dan digambar oleh Gosho Aoyama. Sejak tahun 1994 cerita ini dipublikasikan pada majalah Mingguan Shonen Sunday yang terbit di Jepang. Serial ini menceritakan tentang Shinichi Kudo, seorang detektif sekolah menengah atas, yang tubuhnya mengecil akibat sebuah racun.
<br><br>Detektif Conan telah diterbitkan secara terus menerus di majalah antologi manga Mingguan Shonen Sunday sejak tahun 1994 dan telah dikumpulkan dalam 70 volume tankobon sampai dengan November 2010. Dalam versi bahasa Indonesia, Detektif Conan diterbitkan oleh Elex Media Komputindo yang telah menerbitkan hingga volume 59 sampai dengan Januari 2011.</text1>
<text2><br><dd>Events:</dd>
<br><dd><dd><li><a href="">Lomba Ngengek</a></li></dd></dd>
<dd><dd><li><a href="">Lomba Ngupil</a></li></dd></dd>
<dd><dd><li><a href="">Wisuda PTI'09</a></li></dd></dd>
<dd><dd><li><a href="">Audisi Asdos Abadi</a></li></dd></dd></text2>
</section>
<footer>
<atas>
<b1><font color="white">Home</font></b1>
<b2><font color="white">News&Media</font></b2>
<b3><font color="white">Tutorials</font></b3>
<b4><font color="white">Tips&Tricks</font></b4>
<b5><font color="white">Downloads</font></b5>
</atas>
<bawah><by><dd><font color="white">Tia's Web</font></dd></by></bawah>
</footer>
</body>
</html>
0 komentar:
Posting Komentar