Kalau sebelumnya kita sudah membahas halaman html sederhana, kali ini saya akan menjelaskan halaman web html sederhana dengan layout yang tentunya masih sederhana juga.
Pertama Copykan Script berikut di notepad++ atau Sublimetext kamu
<!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>
<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>
Lanjut kemudian save file tadi di "C:\AppServ\belajarhtml\", dengan nama index.html kemudian buka browser kamu ketik di address bar "localhost/belajarhtml", jika code benar maka hasilnya akan seperti ini :
Script yang ada pada tanda <style>dan ditutup dengan</style> merupakan code css yang bisa di panggil untuk membentuk font, warna ataupun gambar di halaman html kamu, dengan ketentuan
#header {
background-color:black;
color:white;
text-align:center;
padding:5px; }
adalah ketentuan layout untukbackground-color:black;
color:white;
text-align:center;
padding:5px; }
<div id="header">
<h1>City Gallery</h1>
</div>
<h1>City Gallery</h1>
</div>
Dengan Layout CSS kamu bisa berkreasi untuk menciptakan halaman web yang sesuai dengan selera kamu. Pastikan kamu benar-benar mengerti letak dan fungsi dari setiap script yang kamu jalankan, karena jika kamu ingin belajar pemrograman Web penting sekali untuk memahami dasarnya sebelum lanjut ke tahap berikutnya. Jika sudah, selanjutnya pasti akan mudah. Selamat Mencoba ...
Comments
Post a Comment