Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Contoh pembuatan desain layout halaman web dengan HTML
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :
1.Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita. Ketikkan kode berikut ini:
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}
#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}
#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}Simpan dengan nama mystyle.css
1.Selanjutnya ketikkan kode berikut ini juga :
<meta equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
<div id="wrapper">
<div id="header">
header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
Simpan file dalam bentuk html (Desain.html)
2.Buka file html, maka hasilnya adalah :
1.Langkah selanjutnya adalah membuat isi dari setiap kolom-kolom yang telah ada, misalnya dengan cara mengetikkan kode berikut ini pada file tgs2.css yang sebelumnya :
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: black;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: black;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 135px;
background: black;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: black;
border: 1px solid white;
}
#right {
float: right;
width: 357px;
height: 165px;
background: black;
border: 1px solid white;
}
#footer {
clear:both;
height: 50px;
background: black;
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: maroon no-repeat left center;
margin: 0px 0px 1px; color: blue;
}
#leftmenu a:hover {
background: blue no-repeat left center; color: white
}
#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: black;
border: 1px solid white;
}
#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: black;
border: 1px solid #99CC00;
}
#box3{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 35px;
height: 20px;
background: black;
border: 1px solid #99CC00;
}
#box4{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 32px;
height: 20px;
background: black;
border: 1px solid #99CC00;
}
#box5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: white;
border: 1px solid #99CC00;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: black;
border: 1px solid #99CC00;
}
#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 200px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
2.Dan mengetikkan kode berikut pada file html-nya :
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="tgs2.css" type="text/css">
<div id="wrapper">
<div id="header">
<div id="box1">
<img src="http://www.blogger.com/top.gif" />
</div>
<div id="box7">
<img src="http://www.blogger.com/imgad2.jpg" />
</div>
<div id="box5">
</div>
<div id="box6"><span style="color:white;"> Search :
</span></div><span style="color:white;">
</span><div id="box2"><span style="color:white;">
<a href="http://www.blogger.com/link.html"> <span style="color:white;">About Us</span></a></span><p></p><span style="color:white;"><span style="color:white;">
</span></span></div><span style="color:white;"><span style="color:white;">
</span></span><div id="box3"><span style="color:white;"><span style="color:white;">
<a href="http://www.blogger.com/link.html"><span style="color:white;"> Profil</span></a></span></span><p></p><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span><div id="box4"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<a href="http://www.blogger.com/link.html"><span style="color:white;"> Tips</span></a></span></span></span><p></p><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="inner"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="sidebar"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="leftmenu"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><ul><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<li><ahref="#"><span style="color:white;">Home</span></ahref="#"></li>
<li><ahref="#"><span style="color:white;">Artikel</span></ahref="#"></li>
<li><ahref="#"><span style="color:white;">News</span></ahref="#"></li>
<li><ahref="#"><span style="color:white;">Mix</span></ahref="#"></li>
</span></span></span></span></ul><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="top"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="box8"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<img src="http://www.blogger.com/new.jpg" width="400" />
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="box9"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<img src="http://www.blogger.com/15.jpg" width="400" />
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="content"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<b>Pengumuman
</b>
Untuk Temen-temen PTI Input 08
Jangan Lupa ngerjain Tugas ya...
Tugasnya buanyaaaak:
ada Laporan Basis Data
Laporan Jarkomdat
Buat proposal skripsi
Pusing dech...., SMANGAAAATTTT!!!
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="right"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<b>Schedule :</b>
</span></span></span></span><ul><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<li>Pemotretan </li>
<li>Syuting Iklan</li>
<li>Kuliah pastinya. . . .</li>
</span></span></span></span></ul></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span><div id="footer"><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
<h3align="center"><marquee><span style="color:white;"><b>snowbellpoo.blogspot.com</b></span></marquee><span style="color:white;"><b></b></span><b></b>
</h3align="center"></span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
</span></span></span></span></div><span style="color:white;"><span style="color:white;"><span style="color:white;"><span style="color:white;">
Maka hasilnya adalah :
Tidak ada komentar:
Posting Komentar