Kang Wi': Desain Halaman Web Sederhana Menggunakan CSS

CSS adalah kepanjangan dari Cascading Style Sheets, yaitu sebuah halaman terpisah dari halaman web yang dipergunakan untuk pengaturan komponen style seperti font, warna, layout dan sebagainnya. CSS bekerja sebagai pelengkap pada HTML. Jika anda baru mempelajari HTML, maka cobalah untuk sekaligus belajar CSS. Dan anda akan terkejut dengan hasilnya..!!
CSS memungkinkan web developer untuk memisahkan HTML dari aturan-aturan untuk membentuk tampilan sebuah website. Tapi terkadang, banyak orang yang baru belajar HTML, menganggap remeh kekuatan dan fleksibilitas dari sebuah css. Banyak kegunaan CSS yang telah saya posting diwaktu sebelumnya, kilik disini untuk kembali ke Posting sebelumnya yang membahas tentang CSS

Update TGL 04-03-2009

Pembuatan Web seperti pada gambar dapat dipermudah dengan adanya CSS, berikut merupakan code CSS yang saya simpan dengan nama file mod3tgs2.css. Berikut Kodenya :

#wrapper {
margin: auto;
width: 997px;
border: 0;
}

#header {
height: 120px;
border: 1px solid blue;
margin-bottom:2px;
background:blue url('Header2.jpg');
}
#Gambarum {
float: left;
height: 63px;
width:61px;
margin-top:20px;
margin-left:50px;
border: 0;
background:red url('UM warna 3D.PNG');
}
#Te {
float: left;
height: 35px;
width:300px;
margin-top:35px;
margin-left:5px;
}
#aaaa {
float: right;
height: 120px;
width:400px;
border: 0;
}
#atas {
float: left;
height: 25px;
width:350px;
margin-left:30px;
margin-top:2px;
border: 0;
}
#search {
clear:both;
float: right;
height: 20px;
width:300px;
margin-top:67px;
margin-right:20px;
border: 0;
}
#search1 {
float: left;
height: 15px;
width:120px;
margin-left:10px;
margin-top:4px;
border: 0;
}
#search2 {
float: right;
height: 17px;
width:110px;
margin-right:35px;
margin-top:4px;
border: 0;
background:0;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
margin-right: 0px;
width: 250px;
height:420px;
border: 1px solid blue;
background:blue url('sidebar.jpg');
}
#Inner2 {
float: left;
width: 745px;
height: 420px;
border: 0;
}
#top{
height: 80px;
border: 0;
background:blue url('header5.jpg');
}
#content {
float: left;
margin-top:10px;
margin-right:15px;
margin-left:15px;
width: 460px;
height: 323px;
border: 0;
}
#right {
float: left;
width: 250px;
height: 200px;
margin-top:10px;
border: 1px solid green;
background:blue url('JuaraFutsal.jpg');
}
#Rightup {
float: left;
width: 250px;
height: 80px;
margin-top:3px;
border: 1px solid Blue;
background-color:#0066CC;
}
#Rightbot {
float: left;
width: 250px;
height: 26px;
margin-top:10px;
border: 0;

}
#footer {
clear: both;
height: 80px;
border: 1px solid blue;
background:blue url('Footer1.jpg');
}
.style2 {
    font-size: 24px;
    font-weight: bold;
    color: #000099;
}
.style3 {
    color: #0000CC;
    font-weight: bold;
}
.style4 {
    font-family: "Times New Roman", Times, serif;
    font-size: xx-large;
    color: #FFFFFF;
    font-weight: bold;
}
.style6 {
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
}
.style7 {color: #FFFFFF}
.style8 {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
}
.style10 {
color: #FFFFFF; font-size: 12px;
}
.style11 {
    color: #000066;
    font-weight: bold;
}
#leftmenu ul {
width: 250px;
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: blue url('button.jpg');
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #000066 no-repeat left center; color: #ffffff
}

Untuk Koce HTML nya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Halaman Web By_Dwipriyatmoko</title>
<link rel="stylesheet" href="mod3tgs2.css" type="text/css" />
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="Gambarum">
        </div>
        <div class="style4" id="Te">TEKNIK ELEKTRO
        </div>
        <div id="aaaa">
            <div class="style6" id="atas">
            <div align="right" class="style7"><a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Home</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Sitemap</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">RSS</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">Contact</a> | <a href="http://localhost/Tugasku/mod3tgs2.html" target="_blank" class="style7">About Us</a> </div>
            </div>
            <div id="search">
                <div class="style7" id="search1">
                <div align="right"><em><strong>
                Search
                    </strong></em></div>
                </div>
                <div id="search2">

                      <input type="text" name="textfield" id="textfield" />

                </div>
        </div>

        </div>
    </div>
    <div id="inner">
        <div id="sidebar">
            <div id="leftmenu">
            <ul>
            <li>
            <div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Home</a></div>
            </li>
            <li>
            <div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">News & Media </a></div>
            </li>
            <li>
            <div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Tutorial</a></div>
            </li>
            <li>
            <div align="center"><a href="http://localhost/Tugasku/mod3tgs2.html">Tips and Trik</a></div>
            </li>
            <li>
            <div align="center"><a href="#">Download</a></div>
            </li>
            </ul>
            </div>
        </div>
        <div id="Inner2">
            <div id="top">
            </div>
            <div id="content">
            <p class="style2">Lomba Desain WE</p>
            <p class="style3">By : Dwipriyatmoko</p>
            <p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
                nisi ut aliquip ex ea commodo consequat.</p>
            <p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
              nisi ut aliquip ex ea commodo consequat. </p>
            </div>
            <div id="right">
            </div>
            <div id="Rightup">
            <p align="center" class="style8">Juara Pertama FUTSAL KAJUR CUP, PTI 07 </p>
            </div>
            <div id="Rightbot">
            <div align="center" class="style11"><u>TEKNIK ELEKTRO UM</u>
              </div>
            </div>
        </div>
    </div>
    <div id="footer">
    <p align="right" class="style10">Design By Dwipriyatmoko © PTI 07 </p>
    </div>
</div>
</body>
</html>

Pembuatan Web diatas diperlukan banyak komponen pembangunnya, seperti gambar header, footer,dll. File pendukung maupun kode dapat di copas Terima kasih atas kunjungannya...semoga bermanfaat, jangan lupa comment'nya ya...mungkin kalau ada saran ataupun kritik...

Kang Wi'

Monday, March 1, 2010

Desain Halaman Web Sederhana Menggunakan CSS

1 comments:

Post a Comment

My Blog

Translator

Ym!!

Pasti Murah

Categories

Followers

Gabung Yuuk

Anda Kutu Buku

My Blog List

Blog Archive

Langganan Artikel

Ramal Cinta Anda

Klik Image

My Profile

Flag Counter

My Visitor

My Article

Sampaikan Pesan Anda