MR.FREEMAN: Creating Attractive Web using CSS and HTML

After we have made a web with CSS and HTML tags , now we will create an attractive web page using css file, such as the following example:

First, create the css file and save as my_style.css

#wrapper { 	margin: auto; 	width: 914px; } #header { 	height: 80px; 	background-image: url(header30.jpg); 	border: 1px solid blue; } #inner { 	float: left; 	clear: none; 	border: 1px solid green; 	background-color: #F0EE91; } #sidebar { 	float: left; 	margin-right: 0px; 	width: 180px; 	height: 490px; 	border: 1px solid #CC6600; 	background-color #CC600; 	background-color: #F0B762; 	 } #inner2 { 	float: left; } #top { 	width: 728px; 	height: 150px; 	margin: 0px; 	border: 1px solid RED; } #content { 	width: 470px; 	height: 253px; 	float: left; 	padding: 20px; 	border: 1px solid #00FFFF; 	background-color: #FEEDA9; } #right { 	float: right; 	width: 196px; 	height: 150px; 	border: 1px solid #CC9900; 	padding: 10px; 	background-color: #F4B42D; 	 } #footer { 	clear: both; 	height: 50px; 	border: 1px solid blue; 	background-color: #B78900; 	 }

Then create the html code and save as web_design.html

<!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" lang="en" lang="en"> <head> <title>Desain Layout Sederhana</title> <link rel="stylesheet" href="my_style.css" type="text/css"> <style type="text/css">  </style> </head> <body> <div id="wrapper"> 	<div id="header"></div> 	<div id="inner"> 		<div id="sidebar"> 		 <div id="leftmenu"> 				<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> 	 <div id="inner2"> 	<div id="top"><img src="foto.jpg" width="732" height="150" /></div> 			<div id="content"> Lomba Desain Web 23 Februari 2010 			[07.43] 			Universitas Negeri Malang (UM) menyelenggarakan Lomba Perancangan Brand Name Logo dan Desain Sticker ‘UM: The Learning University’. Kegiatan yang sasaran utama audiens ialah komunitas bisnis, masyarakat umum peminat pendidikan, para pelajar SMA, dan civitas akademika UM ini berhadiah total 50 juta. 			Read more...			</div> 			<div id="right">Event 			 <ul> 			 <li>Gerak Jalan</li> 		 <li>Lomba Tarik Kabel</li> 		 <li>Lomba Panjat Gardu</li> 		 <li>Lomba Makan Kabel</li> 		 <li>Lomba Desain Logo</li> 			 </ul> 		 </div> </div> 	</div> <div id="footer"> <div align="center"> © Teknik Elektro UM, Malang, Indonesia </div> </div> </div> </body> </html>

MR.FREEMAN

Creating Attractive Web using CSS and HTML

My Twitter

Chat

Blog Archive

Labels

Widgeo