Selamat sore dan balik lagi bersama H admin kece Belajar PHP Indonesia, kali ini ane akan berbagi turotial membuat tampilan atau layout website sederhana dengan HTML dan CSS. oke langsung aja yu ke pembahasan artikel.
pertama yang paling penting untuk layout adalah membuat CSS, sebelum belajar artikel ini kalian harus membaca artikel pembahasan CSS dulu gan, setelah kalian sudah faham dengan pembahasan CSS langsung saja baca artikel ini,
metode yang di gunakan adalah metode <DIV>, seperti halnya website lainnya kita menggunakan class head,body, dan footer
berikut kode css nya simpan dengan nama "style.css" :
dan berikut kode HTML nya dan simpan dengan nama "index.html" :
berikut file yang sudah saya buat beserta tampilan hasil coding tadi
agan bisa edit sesuai keinginan agan dengan menambahkan javascript,css,html dan lain-lain.
artikel ini hanya artikel html dan css dasar dari ane untuk pembelajaran pemula, semoga bermanfaat.
pertama yang paling penting untuk layout adalah membuat CSS, sebelum belajar artikel ini kalian harus membaca artikel pembahasan CSS dulu gan, setelah kalian sudah faham dengan pembahasan CSS langsung saja baca artikel ini,
metode yang di gunakan adalah metode <DIV>, seperti halnya website lainnya kita menggunakan class head,body, dan footer
berikut kode css nya simpan dengan nama "style.css" :
body{
background:black;
text-align:center;
}
#box{
width:50%;
height:50%px;
margin:0px auto;
}
#header{
width:750px;
height:100px;
background:#00D0D0;
}
#body{
width:750px;
height:450px;
background:#FFFFFF;
float:left;
}
#left{
width:200px;
height:450px;
background:#FCA400;
float:left;
}
#right{
width:200px;
height:450px;
background:#FCA400;
float:right;
}
#footer{
width:750px;
height:100px;
background:#F66C6C;
float:left;
}
dan berikut kode HTML nya dan simpan dengan nama "index.html" :
<html>pada kode di atas saya menggunakan 6 class DIV yang saya beri nama header,box,body,left,right dan footer yang kalian bisa ganti-ganti sesuka selera bila kurang mengerti silahkan baca di artikel CSS.
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box">
<div id="header">
<h1>TITLE</h1>
</div>
<div id="body">
<div id="left">
<h3>SIDEBAR KIRI</h3>
</div>
<div id="right">
<h3>SIDEBAR KANAN</h3>
</div>
<h1>BODY</h1><br>
contoh artikel
</div>
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
berikut file yang sudah saya buat beserta tampilan hasil coding tadi
 |
| Screenshoot Coding |
artikel ini hanya artikel html dan css dasar dari ane untuk pembelajaran pemula, semoga bermanfaat.
Post a Comment
thanks ilmunya gan