PROGRAM LAYOUT WEB SEDERHANA
PROGRAM HTML:
<html>
<head>
<title>
layout
</title>
<style type="text/css">
body{
width: 960px;
}
header,nav ,aside ,section ,footer
{
border : 1px solid white;
font-family:arial;
}
header, nav{
width :100%;
border-radius: 20px;
}
header {
text-align: center;
font-size: 32px;
background: #99ccff;
height: 100px;
line-height: 100px;
}
nav{
background: #ffffcc;
height: 50px;
line-height: 50px;
}
nav ul a{
text-decoration: none;
color: black;
float: left;
margin-right: 20px;
padding-right: 20px;
border-right: solid 1px black;
}
aside {
margin-top: 5px;
float: left;
height: 250px;
width: 29.5%;
}
ul
{
list-style: none;
margin:0;
padding:0;
}
ul#nav li{
background-color:whitesmoke;
float: left;
margin-left: 5px;
}
ul #sidecont li a{
padding: 5px;
width:250px;
display: block;
border: solid 1px #999;
text-decoration:none;
color: black;
border-radius: 3px;
}
ul#sidecont li a:hover
{
background-color: skyblue;
}
ul#sidecont li ul li
{
float: none;
}
ul#sidecont li ul{
position: absolute;
display: none;
}
ul#sidecont li:hover ul
{
display: block;
}
section#content {
margin-top: 5px;
margin-bottom: 5px;
background: #eeeeee;
float: right;
padding: 10px;
height: auto;
width: 68%;
border-radius: 5px;
}
footer {
clear : both;
color: white;
background: #666666;
height: 30px;
border-radius: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
fontaine
</header>
<nav>
<ul>
<li>
<a href="#">Beranda</a>
</li>
<li>
<a href="#">Teori</a>
</li>
<li>
<a href="#">Praktikum</a>
</li>
</ul>
</nav>
<aside>
<ul id="sidecount">
<li>
<a href="#">pemrograman web</a>
</li>
<li>
<a href="#">Algoritma pemrograman</a>
</li>
<li>
<a href="#">jaringan</a>
</li>
<li>
<a href="#">sistem digital</a>
</li>
<li>
<a href="#">pemrograman java</a>
</li>
</ul>
</aside>
<section id="content">
<h1>menyisipkan media</h1>
<img src="visualstudio.jpg" height="100" />
<h3>meyisipkan file gambar</h3>
Tag ini di gunakan untuk menampilkan atau menenmpelkan file audio di halaman website.
<audio controls="">
<source src="musik.mp3" type="audio/mp3"/>
</audio>
<h3>myisipkan file video</h3>
tag ini digunakan untuk meysipkan file video di halaman website.
<video controls="">
<source src="video.mp4" type="vide0/mp4"/>
</video>
</section>
<footer>Copyright STITKE © 2018</footer>
</body>
</html>
OUTPUT PROGRAM :
