Pada bag 7 pembuatan layout, responsive, dan pembuatan iframe.
Dalam website tentu pembagian layout sangat diperlukan untuk mengetahui mana letak header, letak konten, dan letak footer.
1. layout
contoh dibawah merupakan contoh layout yang dibuat dalam html.
1. layout
contoh dibawah merupakan contoh layout yang dibuat dalam html.
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
Elaiscom
Pekanbaru
Test Kota pekanbaru
pekanbaru kota bertuah
</body>
</html>
Hasilnya:
2. Responsive
Saat ini orang lebih suka tampilan wesite yang responsive. kenapa, karena banyaknya orang memakai smartphone membuat mereka lebih sering dengan mobile daripada harus membuka laptop. sehingga tampilan yang responsive akan membuat website terlihat lebih menarik dan lebih tepat pada tempatnya.
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
<body>
Elais demo
Responsive page
Pekanbaru
Pekanbaru kota bertuah.
Pekanbaru kota melayu nan elok dan berseri.
Paris
Paris is the capital and most populous city of France.
Jakarta
Jakarta ibukota indonesia,
Kota metropolitan.
</body>
</html>
3. I-frame
Untuk membuka halaman yang ditujukan pada frame tertentu.
<!DOCTYPE html> <html> <body> <iframe width="100%" height="300px" src="" name="iframe_a"> elaiscom klik link untuk membuka pada iframe. </body> </html>
Hasilnya :
klik elaiscom untuk membuka pada iframe.
Sekian semoga bermanfaat
