Liphoe : Membuat Web Sederhana Menggunakan CSS dan HTML5

Membuat Web Sederhana Menggunakan CSS dan HTML5

Sabtu, Februari 26, 2011 | 4 Comments

Untuk membuat halaman web sederhana, kita dapat mengkombinasikan CSS dan HTML5. CSS ini digunakan untuk mengurangi penggunaan table pada suatu halaman web. Contoh halaman web sederhana dapat dilihat di bawah ini :

Untuk kode css-nya "teknikelektro.css" dapat dilihat dibawah ini :

body {
margin: 20px auto;
width: 900px;
}

header, nav, section, button, foto, isi1, isi2, footer {
display: block;
}

header {
height: 100px;
background-image: url(HeaderBG.png);
}

logo {
float: left;
height: 50px;
width: 50px;
margin: 10px 10px 10px 50px;
}

teksTE {
float: left;
margin: 35px 10px 10px 40px;
font-size: 35px;
font-weight: bold;
color: white;
}

nav {
float: left;
width: 900px;
height: 40px;
background-color: #a7d5fc;
}

teksSearch {
float: left;
margin: 10px 10px 10px 30px;
color: #0635a1;
}

formSearch {
float: left;
width: 90px;
height: 20px;
margin: 10px 10px 10px 0px;
}

button {
cursor: pointer;
float: right;
height: 25px;
width: 110px;
background-color: #2a8dd9;
text-align: center;
color: white;
}

section {
margin: 0px;
float: left;
width: 900px;
height: 370px;
}

foto {
float: left;
height: 350px;
width: 300px;
border: 10px solid black;
}

isi1 {
height: 200px;
width: 558px;
border: 1px solid black;
margin-left: 320px;
padding: 10px;
}

isi2 {
height: 128px;
width: 560px;
background-color: #a7d5fc;
margin-left: 320px;
color: #0635a1;
padding: 10px;
}

footer {
clear: both;
height: 40px;
width: 900px;
background-image: url(FooterBG.png);
text-align: center;
color: #0635a1;
}

Untuk kode html-nya dapat dilihat dibawah ini :

<!DOCTYPE html>
<html lang="en">

<head>
<title>Teknik Elektro</title>
<link rel="stylesheet" href="teknikelektro.css" type="text/css" />
<link rel="shortcut icon" href="b0OFF.gif" />
</head>

<body>

<header>
<logo><img src="123.png" width=70 height=70></logo>
<teksTE>TEKNIK ELEKTRO</teksTE>
</header>

<nav>
<teksSearch>Search</teksSearch>
<formSearch><input type="text" size=20"></formSearch>
<button>Download</button>
<button>Tips & Tricks</button>
<button>Tutorials</button>
<button>News & Media</button>
<button>Home</button>
</nav>

<section>
<foto><img src="frank.jpg" width=300 height=350></foto>
<isi1>Frank James Lampard Jr., (lahir di Romford, Inggris, 20 Juni 1978; umur 32 tahun) adalah seorang pemain sepak bola Inggris yang bermain bersama Chelsea setelah sebelumnya bergabung dengan West Ham United dan Swansea City. Lampard adalah gelandang serang yang dikenal karena tendangan jauhnya yang keras dan keterampilannya menghasilkan gol dari daerah tengah lapangan. Lampard lahir di Romford, Havering, Inggris. Ia adalah putra dari Frank Lampard Sr. yang juga mantan pemain sepak bola Inggris dan pernah memenangkan Piala FA sebanyak dua kali selama bergabung dengan West Ham United. Silsilah keluarganya juga tersambung dengan keluarga pemain sepak bola terkenal lainnya, yaitu keluarga Redknapp.</isi>
<isi2>
Penghargaan :
<ul>
<li><a href="http://id.wikipedia.org/wiki/Frank_Lampard">Peringkat dua dalam Pemain Dunia FIFA Tahun 2005 (2005)</a></li>
<li><a href="http://id.wikipedia.org/wiki/Frank_Lampard">Pemain sepak bola FWA 2005 (2005)</a></li>
<li><a href="http://id.wikipedia.org/wiki/Frank_Lampard">Peringkat dua dalam Pemain sepak bola Eropa Tahun Ini (2005)</a></li>
<li><a href="http://id.wikipedia.org/wiki/Frank_Lampard">Tim FIFPro World XI (2005)</a></li>
</ul></isi2>
</section>

<footer>Home | News & Media | Tutorials | Tips & Tricks | Download
<br /> &copy; Alivi Nur Rosida
</footer>


</body>
</html>

Selamat mencoba !!!! Baca Selengkapnya...