- SOURCE CODE TP.CSS
body {
margin: 10px auto;
width: 750px;
}
header,nav,section,article,aside,footer {
display:block;
}
header{
border: 1px solid pink;
height:80px;
text-align:center;
background: #DB7093;
}
#logo{
clear: both;
margin-left: 100px;
}
nav{
height:40px;
background:#FFB6C1;
}
button{
float:right;
margin-left:5px;
background: #FF69B4;
}
input{
height:20px;
width:157px;
}
section{
height:400px;
}
article{
float:left;
width:37%;
height:100%;
text-align:center;
}
aside{
height:48%;
text-align:justify;
}
event{
float:left;
height:108%;
width:62.8%;
text-align:justify;
background: #FFC0CB;
}
footer{
clear:both;
height:20px;
background: #DB7093;
text-align:right;
}
- SOURCE CODE TP.HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="tp.css" type="text/css" />
</head>
<body>
<header>
<div id="logo">
<img src="um.jpg" height="80" width="80" align = "left">
</div>
<h1>Teknik Elektro</h1>
</header>
<nav>
Search:<input> </input>
<button> Downloads </button>
<button> Tips & Tricks </button>
<button> Tutorials </button>
<button> News & Media </button>
<button> Home </button>
</nav>
<section>
<article>
<img src="GG.jpg" height="390" width="265" border=5>
</article>
<aside>
<aside2>
Sebuah situs berita Cina baru-baru ini mengeluarkan sebuah artikel berjudul “Hangeng telah diremehkan oleh SNSD” dan menyebabkan kegemparan di antara para penggemar.
<p>
Situs media Cina yaitu sohu.com pada tanggal 25 mengatakan bahwa “Alasan mengapa Hangeng telah meninggalkan SM Ent tidak hanya karena ketidaksetujuaan dari kontrak yang telah membatasi aktivitasnya, tetapi ia juga merasa sakit hati karena ada perasaan bahwa ada artis lain yang tidak menyukainnya”
</p>
</aside2>
<event>
<h2>Event:</h2>
<ul><li><a href> profile</a>
<br><li><a href> galeri</a>
<br><li><a href> music</a>
</ul>
</event>
</aside>
</section>
<footer>
<b>© 2011 - Ariend Production</b>
</footer>
</body>
</html>
- SCREEN SHOT
body {
margin: 10px auto;
width: 750px;
}
header,nav,section,article,aside,footer {
display:block;
}
header{
border: 1px solid pink;
height:80px;
text-align:center;
background: #DB7093;
}
#logo{
clear: both;
margin-left: 100px;
}
nav{
height:40px;
background:#FFB6C1;
}
button{
float:right;
margin-left:5px;
background: #FF69B4;
}
input{
height:20px;
width:157px;
}
section{
height:400px;
}
article{
float:left;
width:37%;
height:100%;
text-align:center;
}
aside{
height:48%;
text-align:justify;
}
event{
float:left;
height:108%;
width:62.8%;
text-align:justify;
background: #FFC0CB;
}
footer{
clear:both;
height:20px;
background: #DB7093;
text-align:right;
}
- SOURCE CODE TP.HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="tp.css" type="text/css" />
</head>
<body>
<header>
<div id="logo">
<img src="um.jpg" height="80" width="80" align = "left">
</div>
<h1>Teknik Elektro</h1>
</header>
<nav>
Search:<input> </input>
<button> Downloads </button>
<button> Tips & Tricks </button>
<button> Tutorials </button>
<button> News & Media </button>
<button> Home </button>
</nav>
<section>
<article>
<img src="GG.jpg" height="390" width="265" border=5>
</article>
<aside>
<aside2>
Sebuah situs berita Cina baru-baru ini mengeluarkan sebuah artikel berjudul “Hangeng telah diremehkan oleh SNSD” dan menyebabkan kegemparan di antara para penggemar.
<p>
Situs media Cina yaitu sohu.com pada tanggal 25 mengatakan bahwa “Alasan mengapa Hangeng telah meninggalkan SM Ent tidak hanya karena ketidaksetujuaan dari kontrak yang telah membatasi aktivitasnya, tetapi ia juga merasa sakit hati karena ada perasaan bahwa ada artis lain yang tidak menyukainnya”
</p>
</aside2>
<event>
<h2>Event:</h2>
<ul><li><a href> profile</a>
<br><li><a href> galeri</a>
<br><li><a href> music</a>
</ul>
</event>
</aside>
</section>
<footer>
<b>© 2011 - Ariend Production</b>
</footer>
</body>
</html>
- SCREEN SHOT
