CARA MEMBUAT KODE HTML
kode untuk index.html :
<!DOCTYPE html>
<html>
<head>
<title> Template Website </title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="box">
<div id="header">
<div id="judul">JUDUL WEBSITE ANDA</div>
</div>
<div id="container">
<div id="kiri">
<h1>AREA KIRI</h1>
<p>Contoh Content yang diletakan pada posisi kiri website, teks teks teks teks teks teks teks teks teks teks
teks teks teks teks teks teks teks teks teks teksteks teks teks teks teks teks teks teks teks teks
teks teks teks teks teks teks teks teks teks teksteks teks teks teks teks teks teks teks teks teks.<p>
<p>Contoh Content yang diletakan pada posisi kanan website, teks teks teks teks teks teks teks teks teks teks
teks teks teks teks teks teks teks teks teks teksteks teks teks teks teks teks teks teks teks teks
teks teks teks teks teks teks teks teks teks teksteks teks teks teks teks teks teks teks teks teks.<p>
</div>
<div id="kanan">
AREA KANAN
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="copyright">Copyright@2016 by auradesignweb</div>
</div>
</div>
</body>
</html>
Simpan dengan index.htmlini untuk kode style.css
#box{
width: 960px;
margin: auto;
padding:30px;
}
#header{
margin: 0 auto;
width: 960px;
height: 150px;
background-color: #600666;
}
#judul{
font-size: 40px;
text-align: center;
top:50px;
position : relative;
color: #f4fd05;
}
#container{
margin: 5px auto;
width: 960px;
background-color: #5e045b;
}
#kiri{
float: left;
width: 670px;
margin :10px;
padding:0 10px;
background-color: #d7a6ee;
}
#kanan{
float: right;
width: 250px;
height: 500px;
background-color: #cf51e2;
}
#footer{
margin: 0 auto;
width: 960px;
line-height: 50px;
background-color: #510f55;
}
#copyright{
text-align: center;
color:#ffffff;
}
.clear
{
clear: both;
}
Simpan dengan style.css, Lihat HasilnyaPembahasan
Pada file index.html terdapat kode:
<link rel="stylesheet" href="style.css" type="text/css">Kode tersebut berfungsi untuk memanggil kode css dari file “style.css” yang berada pada folder yang sama dengan “index.html”.
BoxKemasan atau pembungkus tampilan web secara keseluruhan.
Headermerupakan tempat meletakan judul website, pada css judul terdapat pengaturan-pengaturan judul seperti font-size: ukuran huruf, text-align: perataan, top:letak tulisan dari atas, position : relative agar sepuya teks berada pada area yg kita inginkan. color: warna tulisan, dan masih banyak lagi perintah css yang bisa anda tambahkan selain itu.
ContainerMerupakan sebuah wadah/tempat untuk area kiri (#kiri) dan area kanan (#kanan). Jangan lupa menambahkan tag div clear setelah </div> Container. Pada area kiri dan kanan terdapat float, float sama seperti perataan float left berfungsi untuk meletakan atau nempelnya pada area kiri container, sedangkan float kanan berfungsi untuk meletakan atau nempelnya pada area kanan container.
FooterMerupakan keterangan bawah biasanya sebagai identitas web yang menunjuk pada identitas pembuat dan privasi dari website tersebut.
Sekian dulu artikel auradesignweb – cara design web pada artikel membuat template dengan css kali ini, semoga bermanfaat.
Tidak ada komentar:
Posting Komentar