Buatlah layout css seperti gambar
jawab :
1. HTML
<html>
<head><title>latihan layout</title>
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<div id="header" class="clearfix">
<ul id="text">
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Home</a></li>
<li><img src="http://pondokinformatika.com/wp-content/uploads/2018/03/Pita_web_logo-1.png" ></li>
</ul>
</div>
<div id="main" class="clearfix">
<div id="sidebar">
<form>
<input type="text" placeholder="Masukkan kata kunci">
<button type="submit">Search</button>
</form>
</div>
<div id="content">
<h1>Judul Halaman</h1>
<p>Pesantren adalah sebuah pendidikan tradisional yang para siswanya tinggal bersama dan belajar di bawah bimbingan guru yang lebih dikenal dengan sebutan kiai dan mempunyai asrama untuk tempat menginap santri. Santri tersebut berada dalam kompleks yang juga menyediakan masjid untuk beribadah, ruang untuk belajar, dan kegiatan keagamaan lainnya. Kompleks ini biasanya dikelilingi oleh tembok untuk dapat mengawasi keluar masuknya para santri sesuai dengan peraturan yang berlaku.</p>
<p>Pesantren merupakan dua istilah yang menunjukkan satu pengertian. Pesantren menurut pengertian dasarnya adalah tempat belajar para santri, sedangkan pondok berarti rumah atau tempat tinggal sederhana terbuat dari bambu. Di samping itu, kata pondok mungkin berasal dari Bahasa Arab Funduq yang berarti asrama atau hotel. Di Jawa termasuk Sunda dan Madura umumnya digunakan istilah pondok dan pesantren, sedang di Aceh dikenal dengan Istilah dayah atau rangkang atau menuasa, sedangkan di Minangkabau disebut surau.</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2017</p>
</div>
</div>
<body>
</html>
2. CSS EXTERNAL (external.css)
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
body{
padding: 20px;
}
#container{
max-width: 1000px;
margin: auto;
}
#header{
padding: 20px;
background-color: #cccccc;
}
#header ul li a{
display: block;
float: right;
margin-top: 15px;
padding: 20px;
color: black;
font-weight: bold;
text-decoration: none;
font-family: calibri;
}
#text li img{
margin-top: auto;
}
#main{
padding-top:20px;
padding-bottom: 20px;
}
#sidebar{
background: #cccccc;
height: auto;
width: 25%;
position: absolute;
float: left;
min-height: 400px;
}
#sidebar input{
width: 50%;
text-align: center;
margin: 20px 10px 20px 35px;
}
#content{
background: #EEEEEE;
height: auto;
width: 65%;
position: relative;
float: right;
min-height: 500px;
overflow-y: scroll;
overflow-x: scroll;
}
#content h1{
font-weight: bold;
padding: 20px 0px 0px 20px;
}
#content p{
padding: 10px 20px 20px 20px;
text-align: justify;
}
#footer{
display: block;
background: #AAAAAA;
width: 1000px;
padding: 20px 0px 20px 0px;
}
#footer p{
font-weight: bold;
color: white;
text-align: center;
}
