- Membuat City Gallery
Dalama Tugas kedua ini
kita akan membuat sebuah program dengan menggunakan ekstensi html dan css yang
mana antara kedua ini saling berhubungan. sebelum melanjutkan kita membuat
dengan html dahulu, berikut contoh nya :
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:grey;
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:grey;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div
id="header">
<h1>City
Gallery</h1>
</div>
<div
id="nav">
London<br>
Paris<br>
Inggris<br>
</div>
<div
id="section">
<h1>London</h1>
<p>
Merupakan wilayah
metropolitan terbesar di Britania Raya dan juga zona
perkotaan terbesar di
Uni Eropa menurut luas wilayah. London telah
menjadi permukiman utama
selama dua milenium sejak didirikan oleh
Romawi pada abad ke-1
dengan nama Londinium. Inti dari London kuno,
yaitu City of London,
<p>
Sejak abad ke-19, nama
London juga digunakan untuk menyebut
kota metropolitan yang
berkembang di sekitar inti ini Konurbasi
dari wilayah-wilayah
urban ini pada akhirnya membentuk Region
London dan wilayah
administratif London Raya.
Wilayah ini diatur dan
dibawahi oleh wali kota
London dan Majelis
London yang dipilih melalui pemilihan umum.
</p>
</div>
<div
id="footer">
Copyright ©
ramdanidani.com
</div>
</body>
</html>
Lalu Berikut nya kita
menulikan koding yang berekstensi .css, berikut caranya :
<!DOCTYPE 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>
<div
id="header">
<h1>City
Gallery</h1>
</div>
<div
id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div
id="section">
<h1>London</h1>
<p>
London is the capital
city of England. It is the most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.
</p>
<p>
Standing on the River
Thames, London has been a major settlement for two millennia,
its history going back
to its founding by the Romans, who named it Londinium.
</p>
</div>
<div
id="footer">
Copyright ©
W3Schools.com
</div>
</body>
</html>
Dan ini adalah hasil
dari koding di atas, silahkan mencoba :
Good :v
ReplyDelete