Showing posts with label layout. Show all posts
Showing posts with label layout. Show all posts

Learn HTML, bag 7 layout, iframe dan responsive

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.

<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>



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
[Read more]