Sebuah web harus mempunyai unsur menarik dalam tampilannya, user friendly dan atraktif. di sini akan dipaparkan mengenai bagaimana cara membuat web atraktif sebagai lanjutan dari simple web yang hanya mempunyai layout kosong. dari layout kosong tersebut kita desain sedemikian rupa sehingga bisa menghasilkan web yang atraktif dan menarik. berikut adalah gambar web atraktif dan sintaknya:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tugas Praktikum</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">
<!--
#sidebar ul {
width: 180px;
list-style-type:none;
padding:0; margin:0;
}
#sidebar a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#sidebar a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#sidebar a:hover {
background: #5e9711 no-repeat left center;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"> <img src="UM.bmp" alt="background" height="80" width="80"/></div>
<div id="text"> TEKNIK ELEKTRO<div id="search">Search</div><div id="kotakcari" ><input type="text"/></div></div>
<div id="home">Home</div>
<div id="sitemap">Sitemap</div>
<div id="RSS">RSS</div>
<div id="contact">Contact</div>
<div id="about">About Us</div>
</div>
<div id="inner">
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Photo Galerry</a></li>
</ul>
</div>
<div id="top">
<img src="foto.jpg" width="564" height="80" alt="" />
</div>
<div id="content">
<strong>Sejarah Blog</strong><br/>
Blog adalah kependekan dari Weblog, istilah yang pertama kali digunakan oleh Jorn Barger
pada bulan Desember 1997. Jorn Barger menggunakan istilah Weblog untuk menyebut
kelompok website pribadi yang selalu diupdate secara kontinyu dan berisi link-link ke website
lain yang mereka anggap menarik disertai dengan komentar-komentar mereka sendiri. <br/><br/>
<strong>Read More...</strong>
</div>
<div id="right">
<strong>Event</strong><br/>
<ul>
<li>Lomba Panjat Tiang Listrik</li>
<li>Lomba Tarik Kabel</li>
<li>Balap Karung 10 km</li>
</ul>
</div>
</div>
<div id="footer">
<div align="center"><br/>
©2010 Teknik Elektro UM, Malang, Indonesia
</div>
</div>
</div>
</body>
</html>
selain sintak ini juga dibutuhkan 1 file berbentuk .css untuk mendukung pembuatan kerangka atau layoutnya agar tertata rapi dan tidak tercampur.
#wrapper {
margin: auto;
width: 750px;
border: 2px solid red;
}
#header {
height: 80px;
border: 1px solid red;
background: #000 url(header30.jpg);
}
#logo{
margin : 0px 10px;
height: 60px;
width: 60px;
}
#text{
margin : -30px 100px;
color: red;
font-family: verdana;
font-size: 24px;
font-weight: bold;
}
#home{
margin : -60px 455px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#about{
margin : -60px 685px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#sitemap{
margin : 45px 515px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#contact{
margin : 45px 630px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#RSS{
margin : -60px 580px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#search{
margin : -10px 400px;
color: blue;
font-family: garamond;
font-size: 18px;
width:50px;
height:20px;
}
#kotakcari{
margin: -20px 455px;
}
#inner {
float: left;
margin: 0px;
}
#sidebar {
float: left;
margin-right: 0px;
width: 180px;
height: 332px;
border: 2px solid green;
background-color: yellow;
}
#top {
float: left;
width: 562px;
height: 80px;
border: 2px solid green;
}
#content {
float: left;
width: 340px;
height: 250px;
}
#right {
float: right;
width: 220px;
height: 150px;
border: 2px solid green;
background-color: yellow;
}
#footer {
clear: both;
height: 50px;
border: 2px solid blue;
background-color: yellow;
}
untuk memudahkan dalam pengaksesan, file sintak dengan file css simpan dalam 1 folder. Selamat Mencoba
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tugas Praktikum</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">
<!--
#sidebar ul {
width: 180px;
list-style-type:none;
padding:0; margin:0;
}
#sidebar a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#sidebar a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#sidebar a:hover {
background: #5e9711 no-repeat left center;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"> <img src="UM.bmp" alt="background" height="80" width="80"/></div>
<div id="text"> TEKNIK ELEKTRO<div id="search">Search</div><div id="kotakcari" ><input type="text"/></div></div>
<div id="home">Home</div>
<div id="sitemap">Sitemap</div>
<div id="RSS">RSS</div>
<div id="contact">Contact</div>
<div id="about">About Us</div>
</div>
<div id="inner">
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Photo Galerry</a></li>
</ul>
</div>
<div id="top">
<img src="foto.jpg" width="564" height="80" alt="" />
</div>
<div id="content">
<strong>Sejarah Blog</strong><br/>
Blog adalah kependekan dari Weblog, istilah yang pertama kali digunakan oleh Jorn Barger
pada bulan Desember 1997. Jorn Barger menggunakan istilah Weblog untuk menyebut
kelompok website pribadi yang selalu diupdate secara kontinyu dan berisi link-link ke website
lain yang mereka anggap menarik disertai dengan komentar-komentar mereka sendiri. <br/><br/>
<strong>Read More...</strong>
</div>
<div id="right">
<strong>Event</strong><br/>
<ul>
<li>Lomba Panjat Tiang Listrik</li>
<li>Lomba Tarik Kabel</li>
<li>Balap Karung 10 km</li>
</ul>
</div>
</div>
<div id="footer">
<div align="center"><br/>
©2010 Teknik Elektro UM, Malang, Indonesia
</div>
</div>
</div>
</body>
</html>
selain sintak ini juga dibutuhkan 1 file berbentuk .css untuk mendukung pembuatan kerangka atau layoutnya agar tertata rapi dan tidak tercampur.
#wrapper {
margin: auto;
width: 750px;
border: 2px solid red;
}
#header {
height: 80px;
border: 1px solid red;
background: #000 url(header30.jpg);
}
#logo{
margin : 0px 10px;
height: 60px;
width: 60px;
}
#text{
margin : -30px 100px;
color: red;
font-family: verdana;
font-size: 24px;
font-weight: bold;
}
#home{
margin : -60px 455px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#about{
margin : -60px 685px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#sitemap{
margin : 45px 515px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#contact{
margin : 45px 630px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#RSS{
margin : -60px 580px;
color: blue;
font-family: garamond;
font-size: 14px;
}
#search{
margin : -10px 400px;
color: blue;
font-family: garamond;
font-size: 18px;
width:50px;
height:20px;
}
#kotakcari{
margin: -20px 455px;
}
#inner {
float: left;
margin: 0px;
}
#sidebar {
float: left;
margin-right: 0px;
width: 180px;
height: 332px;
border: 2px solid green;
background-color: yellow;
}
#top {
float: left;
width: 562px;
height: 80px;
border: 2px solid green;
}
#content {
float: left;
width: 340px;
height: 250px;
}
#right {
float: right;
width: 220px;
height: 150px;
border: 2px solid green;
background-color: yellow;
}
#footer {
clear: both;
height: 50px;
border: 2px solid blue;
background-color: yellow;
}
untuk memudahkan dalam pengaksesan, file sintak dengan file css simpan dalam 1 folder. Selamat Mencoba
