Contoh Membuat Web dengan CSS
LangkahKe 1 menentukan
layout web
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>body</title>
</head>
<body>
<div
id="header">
<h1><a href="/">SMK N 2
SURAKARTA</a></h1>
<h2>Jl. LU Adisucipto No. 33
Surakarta</h2>
</div>
</body>
</html>
Isi File style.css
PengaturanUmum
{
padding:0;
margin:0;
}
Script
pengaturanhalaman web
body {
font-family:Geneva, Arial,
Helvetica, sans-serif;
font-size:1.0em;
background-color:#232323;
margin:0 auto;
padding:0;
background-image:url('images/atas.jpg');
background-repeat:repeat-x;
height:100%;
background-position:top left;
}
Script pengaturanletak header
div#header {
padding-left:10px;
padding-top:55px;
}
div#header h1 {
font-size:2.9em;
}
h2 {
font-family:Geneva,Arial,Helvetica,sans-serif;
font-weight:normal;
margin:-10px
0 10px 0;
padding:0;
font-size:1.1em;
color:#666666;
text-align:left;
}
LangkahKe 2 menentukan
layout content<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>halamanjadi</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="container">
<div id="header">
<h1><a href="/">SMK N 2 SURAKARTA</a></h1>
<h2>Jl. LU Adisucipto No. 33 Surakarta</h2>
</div>
<div id="nav">
<br class="clear" />
</div>
<div id="content">
<div class="top-panel">
</div></div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<p>© By RPL 2011 | <a href="#">Google</a> | <a href="#">Yahoo</a></p>
</div>
</div>
</div>
</body>
</html>
Isi File style.css
Pengaturanbakground menudiv#nav {
background-color:red;
.clear {
clear:both;
}
Script pengaturanwarna layout isi web
div#content {
min-height:400px;
background-color:#ffffff;
}Scriptpengaturan layout header 3
div.top-panel {
background-image:url('images/panelbg.jpg');
background-repeat:repeat-x;
background-position:bottom
left;
background-color:#43CE00;
padding:30px
15px;
}
Script pengaturan layout footerdiv#footer p {
padding:15px 0;
margin:0;
font-size:0.7em;
color:#ffffff;
}
SCRIPT PADA MENU
<div id="header">
<h1><a href="/">SMK N 2 SURAKARTA</a></h1>
<h2>Jl. LU Adisucipto No. 33 Surakarta</h2>
</div>
<div id="nav">
<ul>
<li><a href="index.html" class="selected" title="home page">home</a></li>
<li><a href="profil.html" title="ProfilSekolah">Profil</a></li>
<li><a href="progdi.html" title="Program Keahlian">Progdi</a></li>
</ul>
<br class="clear" />
</div>
div#navul {
list-style:none;
margin:0;
padding:0;
font-size:1.0em
}
div#navul li {
display:inline;
float:left;
margin:5px;
}
div#navul li a {
color:#ffffff;
font-size:0.9em;
font-weight:bold;
text-decoration:none;
float:left;
padding:5px 10px;
}
div#navul li a.selected, div#navul li a.selected:hover {
background-color:#666666;
}
div#navul li a:hover {
background-color:#151515;
}
<div id="content">
<div class="top-panel">
<h3>REKAYASA PERANGKAT LUNAK</h3>
<p>Program RekayasaPerangkatLunakadalahmerupakan program keahlian yang dibukamulaitahunpelajaran 2010-2011.Kelasdiawaltahunpelajarandibukasatukelas<br /><br />
</p>
</div></div>
<div class="page-wrap">
<div class="page">
</div>
</div>
</div>
h3 {
color:#ffffff;
font-family:Geneva,Arial,Helvetica,sans-serif;
font-size:1.6em;
font-weight:normal;
letter-spacing:-1px;
margin:0;
padding:0;
}
div.page-wrap {
background-position:left top;
background-repeat:repeat-x;
padding:5px;
}
div.page {
width:65%;
float:left;
padding:5px 0 0 10px;
}
SCRIPT PADA CONTENT
<Script content >
<h4>Kelas XI RPL</h4>
<p>Selamatdatang di kelas XI RPL yang terdiridari 35 siswa, semuadalamkeadaansehatdanutuh:</p>
<h4>TambahOpo</h4>
<p>Isinenopokono.....</p>
h4 {
color:#232323;
padding:0;
font-size:1.2em;
margin:0;
}
SCRIPT KOLOM BARU
<div class="sidebar">
<h4>Links</h4>
<ul>
<li><a href="#" >UnduhModul</a></li>
<li><a href="#" >UnduhTugas</a></li>
<li><a href="#" >LihatNilai</a></li>
</ul>
</div>
div.sidebar {
width:20%;
float:right;
padding-top:5px;
div.sidebarul {
list-style:none;
padding:0;
border-top:4px solid #dddddd;
margin:0 0 20px 0
ul {
margin:0
0 20px 20px;
font-size:0.9em;
padding:0;
list-style:square;
}
ul li {
padding:3px
0;
}
Sumber : Pak Tri Guru RPL SMKN 2 SKA
No comments:
Post a Comment