Tampilan Halaman Web
Membuat layout halaman website dengan memanfaatkan elemen pada HTML5 (header, nav, section, article, aside, danfooter).
Tampilan pada webbrowser akan menghasilkan 6 errors/12 warnings. Hal ini disebabkan versi validator yang dipakai pada Mozilla Firefox belum mengenal elemen-elemen baru dalam HTML5 (6 error tersebut bersumber dari elemen: header, nav, section, article, aside dan footer).
Berikut source code dalam pembuatan web diatas:
<!--
Design By Rastra Feryd Permana
109533423226
S1 Pendidikan Teknik Informatika 2009
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mario Teguh Profile</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<style type="text/css">
<!--
body, header, footer, nav, section{
width : 1000px;
float : left;
}
header, footer, nav, section{
padding : 5px;
}
header{
font-size : 30px;
font-weight : bold;
height : 90px;
background-image: url(bgheader.jpg);
}
header div.logo, header div.title{
float : left;
margin-left: 60px;
}
header div.title{
width : 400px;
margin-top : 20px;
color : rgb(0, 0, 255);
margin-left: 30px;
text-align : center;
background-color : rgba(255, 255, 255, 0.5);
padding : 10px;
border-top-left-radius : 20px;
border-bottom-right-radius : 20px;
}
nav{
background-color : rgb(3, 157, 255);
}
nav div.search{
float : left;
color : white;
}
nav div.menu{
float : right;
}
nav div.menu div#submenu, nav div.menu div#submenu-kiri{
float : left;
padding : 3px;
background-color : #ADFF2F;
border : 1px solid brown;
width: 100px;
text-align : center;
}
nav div.menu div#submenu:hover, nav div.menu div#submenu-kiri:hover{
color : blue;
background-color : white;
text-align : center;
}
nav div.menu div#submenu-kiri{
border-top-left-radius : 30px;
padding-left : 15px;
}
section{
background : url(bground.jpg);
}
article, aside{
float : left;
}
article{
width : 700px;
}
article div.profil, article div.info{
padding : 5px;
}
article div.profil{
background-color : rgba(255, 255, 255, 0.8);
height : 200px;
}
article div.info{
background-color : rgba(0, 255 ,0, 255);
height : 150px;
}
aside{
margin-right : 10px;
width : 275px;
}
footer{
text-align : center;
font-size : small;
font-weight : bold;
color : black;
height : 30px;
background-image : url(bgfooter.jpg);
background-position : bottom center;
}
-->
</style>
</head>
<body>
<header>
<div class="logo">
<img width = "100" height= "100" src="um.png">
</div>
<div class="title">
Universitas_Negeri_Malang
</div>
</header>
<nav>
<div class="search">
<label>Search</label>
<input type="text" maxlength="20">
</div>
<div class="menu">
<div id="submenu-kiri">Home</div>
<div id="submenu">About Me</div>
<div id="submenu">Document</div>
<div id="submenu">Movies</div>
<div id="submenu">Music</div>
</div>
</nav>
<section>
<aside>
<img width="280" height="370" src="mario.jpg">
</aside>
<article>
<div class="profil">
<strong>Mario Teguh</strong> <i>(lahir di Makassar, 5 Maret 1956)</i> adalah seorang motivator dan konsultan asal Indonesia. Nama aslinya adalah Sis Maryono Teguh, namun saat tampil di depan publik, ia menggunakan nama Mario Teguh. Ia meraih gelar Sarjana Pendidikan dari <b>Institut Keguruan dan Ilmu Pendidikan (IKIP) Malang</b>. Mario Teguh sempat bekerja di Citibank, kemudian mendirikan Bussiness Effectiveness Consultant, Exnal Corp. menjabat sebagai CEO (Chief Executive Officer) dan Senior Consultan. Beliau juga membentuk komunnitas Mario Teguh Super Club (MTSC).
<br>
<br>
<i>Source:
<br>http://id.wikipedia.org/wiki/Mario_Teguh</i>
</div>
<div class="info">
<font size="5" color="red"><b>Pengalaman Karir :</b></font>
<ul>
<li>Citibank Indonesia (1983 – 1986) as Head of Sales</li>
<li>BSB Bank (1986 – 1989) as Manager Business Development</li>
<li>Aspac Bank (1990 – 1994) as Vice President Marketing & Organization Development</li>
<li>Exnal Corp Jakarta (1994 – present) as CEO, Senior Consultant, Spesialisasi : Business Effectiveness Consultant</li>
</ul>
</div>
</article>
</section>
<footer>
Home | About Me | Documents | Movie | Music<br>
Copyright © 2011 By Rastra Feryd Permana
</footer>
</body>
</html>
Apabila ingin melihat tampilannya klik
disini !
