Selasa, 02 April 2013

Contoh Membuat Web dengan CSS


   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>
<link rel="stylesheet" href="styles.css" type="text/css" />
</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>&copy; By RPL 2011 | <a href="#">Google</a> | <a href="#">Yahoo</a></p>
            </div>
</div>
</div>
</body>
</html>

Isi File style.css
Pengaturanbakground menu
div#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 footer
div#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;
}

Tidak ada komentar:

Poskan Komentar