Gambar Web
Penulisan script CSS:
body {
margin:10px auto;
width:750px;
}
header,nav,section,footer {
display:block;
border:0px solid red;
background-color:#000033;
}
a{
cursor:pointer;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
header {
height:90px;
margin-top:-10px;
border:1px solid:#0000FF;
}
.box-header {
margin-top:10px;
margin-bottom:10px;
background-color:black;
height:70px;
}
.logo-pic {
margin-top:10px;
margin-left:5px;
}
.logo-title {
position: relative;
left:70px;
top: -40px;
font-family: Helvetica;
font-size:20px;
font-weight:bolder;
color:#CCCCCC;
height: auto;
width: 200px;
}
.header-rtext,.box-header a {
color:white;
}
.header-link {
margin-top:7px;
margin-right:10px;
font-family: "Courier New";
font-size:12px;
}
.header-search {
margin-top:20px;
margin-right:10px;
padding-left:50px;
font-family:"Courier New";
font-size:12px;
}
.input-search {
border:0px solid #000000;
width:135px;
}
nav {
float:left;
width:150px;
height:400px;
}
.box-nav {
margin-left:3px;
background-color:#0000FF;
height:inherit;
}
.menu-nav {
margin-left:-3px;
background-color:#000033
height:30px;
border-width:3px;
border-style:solid;
border-color:#666666 #333333 #333333 #666666;/*#atas #kanan #bawah #kiri */
font-weight:lighter;
}
.menu-text {
font-family:"Verdana";
font-size:12px;
font-weight:bold;
color:#CCCCCC;
margin-top:5px;
margin-left:10px;
}
.menu-nav:hover {
cursor:pointer;
margin-left:0px;
background-color:#0000FF;
height:30px;
border-width:3px;
border-style:solid;
border-color:#666666 #333333 #333333 #666666;/*#atas #kanan #bawah #kiri */
}
section {
margin-left:150px;
width:auto;
height:400px;
}
.box-sect {
background-color:#CCCCCC;
height:inherit;
margin-right:3px;
}
.subtitle {
margin-top:5px;
margin-left:10px;
font-family:"Verdana";
font-size:16px;
font-weight:bolder;
color:black;
height: auto;
width:300px;
}
.datepost {
padding-left:10px;
font-family:"Courier New";
font-size:12px;
}
.content {
margin-top:5px;
margin-left:10px;
font-family: Verdana;
font-size:12px;
color:black;
}
.style1 {color: #CCCCCC}
.more {
position:relative;
color:#333333;
font-family:"Courier New";
font-size:12px;
}
.more:hover {
text-decoration:underline;
}
.box-rsect {
width:200px;
height:auto;
margin-top:5px;
margin-right:6px;
padding-bottom:5px;
background-color:#0000FF;
border-width:3px;
border-style:solid;
border-color:#333333 #666666 #999999 #666666;/*#atas #kanan #bawah #kiri */
}
.rsect-list ul, .rsect-list a{
list-style-type:disc;
color:#CCCCCC;
font-family:"Courier New";
font-size:12px;
}
footer {
clear:both;
height:65px;
border:1px solid #333333;
}
.box-footer {
margin-top:5px;
margin-bottom:10px;
background-color:black;
height:50px;
}
.footer-text {
padding-top:20px;
padding-left:275px;
}
.footer-text,.box-footer a {
color:white;
font-family:"Courier New";
font-size:12px;
}
.rightfloat {
float:right;
}
Penulisan script html :
<!DOCTYPE html>
<head>
<title>Tugas modul 4 web</title>
<link rel="shortcut icon" href="logo.jpg">
<link rel="stylesheet" type="text/css" href="index.css" />
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="box-header">
<div class="rightfloat header-rtext">
<div class="header-link">
<a href=#>Home</a>|<a href=#>SiteMap</a>|<a href=#>RSS</a>|<a href=#>Contanct</a>|<a href=#>AboutUs</a></div>
<div class="header-search">Search <input class="input-search" type="text"></div>
</div>
<img class="logo-pic" src="logo.jpg" width="50px" height="50px">
<div class="logo-title">TEKNIK ELEKTRO</div>
</div>
</header>
<nav>
<div class="box-nav">
<a href=#><div class="menu-nav"><div class="menu-text">Home</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">News & Media</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Tutorials</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Tips & Tricks</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Downloads</div></div></a>
</div>
</nav>
<section>
<div class="box-sect">
<img src="photo.jpg" width="600px">
<div class="rightfloat box-rsect">
<div class="subtitle style1">Tutorial</div>
<ul>
<li class="rsect-list"><a href=#>Cara Buat Situs Gratis </a></li>
<li class="rsect-list"><a href=#>Cara Pemakaian CCleaner </a></li>
<li class="rsect-list"><a href=#>Desain web </a></li>
</ul>
</div>
<div class="subtitle">Cara Buat Situs Gratis </div>
<div class="datepost">01 Maret 2011 - 10:01 PM</div>
<div class="content">
Untuk membuat sebuah situs iklan baris gratis sebenarnya membutuhkan serangkaian alur data base yang bisa jadi akan sangat memusingkan bagi para pemula (seperti saya sendiri) karena minimal harus berhubungan dengan bahasa PHP dan pengolah data base MySQL.
<a class="more" href="#">
<div>Read More ...</a></div>
</div>
<div class="subtitle">Cara Pemakaian CCleaner </div>
<div class="datepost">01 Maret 2011 - 10:02 PM</div>
<div class="content">
Dengan menggunakan CCleaner (sebuah software gratis /freeware) anda bisa membersihkan file sampah Windows. Penggunaannya sangat mudah dan hasil kerjanya cukup memuaskan. Yang harus anda lakukan pertama kali adalah menginstalnya ke komputer anda. Jika belum punya file installer (file master) CCleaner, bisa didownload disini
<a class="more" href="#">
<div>Read More ...</a></div>
</div>
</div>
</section>
<footer>
<div class="box-footer">
<div class="footer-text">Fransiska GP - 100533406925</strong> - PTI INPUT 2010 </div>
</div>
</footer>
</body>
</html>
Postingan
Tidak ada komentar:
Posting Komentar