Membuat Tampilan depan Web Sederhana menggunakan CSS ~ ITecnology

Senin, 28 Februari 2011

Membuat Tampilan depan Web Sederhana menggunakan CSS

08.01 MencariJalanKebenaran 8 comments

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>

<head>

<title>Halaman Web-Ku</title>

</head>

<body>

</div>

TEKNIK ELEKTRO

</div>

<b>search</b> <input type="text" size="22">

</div>

<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>

<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>

<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>

&copy Fatra N.P

</div>

</body>