Membuat halaman web sederhana
dengan html dan css
html adalah
bahasa pemrograman inti untuk membuat halaman web, untuk membuat halaman web
biasanya html dikombinasikan dengan script css agar tampilannya lebih dinamis
dan mudah di edit. css adalah cascading style sheet dimana fungsinya untk
mempercantik halaman web html. untuk contohnya adalah seperti berikut:
1. pertama
kita ketik kodehtml berikut (copas juga bisa, hehe):
<html >
<head>
<title>belajar membuat halaman web dengan html dan css</title>
</head>
<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>
2. kemudian
kita buat kode css nya seperti ini :
body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
kemudia
taruh kode css tersebut dibawah kode ‘</head>’ dan diawal script
tambahkan <script>, kemudia di akhir kode tambahkan tag script penutup
‘</script>’ , karena disini kita membuat css yang embeded dengan html
artinya kode css menyatu dengan kode htmlnya (css di halaman html).
sehingga
kode lengkapnya seperti ini :
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>belajar membuat halaman web dengan html dan css</title>
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>belajar membuat halaman web dengan html dan css</title>
<style
type=”text/css”>
<!–
body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
–>
</style>
</head>
<!–
body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
–>
</style>
</head>
<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>
hasilnya seperti ini
Tidak ada komentar:
Posting Komentar