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
You should see how my buddy Wesley Virgin's autobiography launches in this SHOCKING and controversial video.
As a matter of fact, Wesley was in the military-and soon after leaving-he discovered hidden, "SELF MIND CONTROL" tactics that the government and others used to get whatever they want.
These are the exact same secrets tons of celebrities (notably those who "became famous out of nothing") and top business people used to become wealthy and famous.
You probably know how you use less than 10% of your brain.
That's because most of your BRAINPOWER is UNCONSCIOUS.
Maybe that conversation has even occurred INSIDE OF YOUR very own head... as it did in my good friend Wesley Virgin's head seven years ago, while driving an unregistered, beat-up garbage bucket of a car without a license and $3.20 on his bank card.
"I'm so frustrated with going through life paycheck to paycheck! When will I finally succeed?"
You've taken part in those types of questions, isn't it so?
Your very own success story is waiting to happen. You just have to take a leap of faith in YOURSELF.
Learn How To Become A MILLIONAIRE Fast