WARKOP IT: Tutorial CSS dan HTML untuk Membuat Sebuah Desain Web

Kalau pada postingan mengenai web desain yang sebelumnya, kita belajar mengenai dasar-dasar html. Maka untuk kali ini kita akan sedikit bermain-main dengan CSS.
CSS?
CSS memiliki kepanjangan cascading style sheet. Yang merupakan pelengkap dari script html. Dengan adanya CSS ini maka desain akan lebih mudah dilakukan dan juga script html terlihat relatif "bersih". CSS dapat mengatur mengenai tata letak, style font, warna dan lain sebagainya.
Cara penyantuman CSS terdapat 2 cara yakni css yang embedded dengan script html dan css yang terpisah. Untuk saat ini penggunaan css yang menjadi satu dengan script html menjadi opsi yang sering digunakan para programmer web.
Ok, kita sudahi intermezzonya. Dan mari kita langsung menuju ke TKP. :-)
Goal yang ingin kita capai pada tutorial kali ini adalah sebuah halaman awal website sederhana dengan gambaran secara garis besar seperti berikut :

(note: klik untuk memperjelas gambar)
Yang pertama kita lakukan adalah menganalisis komponen2 dasar dari halaman tersebut :
1. Header.
2. Sidebar.
3.Content.
4.Footer.
Perlu diingat bahwa didalam komponen dasar masih terdapat komponen2 turunan dari masing-masing komponen.
1. Untuk header komponen turunannya adalah Logo, Teks "teknik Elektro","menu" dan search field serta search button.
2. Sedangkan untuk sidebar, adalah menu navigasi utama.
3. Content terdiri dari, content gambar, content posting dan content event.
4. Untuk footer tidak terdapat turunan komponen.
Setelah melakukan dokumentasi dan analisis komponen halaman web maka hal yang selanjutnya dilakukan adalah membuat layout awal (sketsa desain yang masih berupa border2). Gambarnya seperti berikut :

Layout tersebut kita buat dengan memanfaatkan script HTML dan CSS. Pada tutorial ini saya memakai sistem embedded. Jadi penulisan CSS berada pada head script html.

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Teknik Elektro UM</title>
<style type="text/css">
    
</style>
</head

-Langkah pertama yang dilakukan adalah membuat sebuah style wrapper atau bingkai utama dalam desain.Untuk wrapper ini lebarnya ditentukan terserah anda dan dengan margin auto. Margin auto ini dibuat karena wrapper digunakan untuk menampung konten lainnya.

#wrapper {
    margin:auto;
    width: 1260px;
    border: 3px solid red;
    background: yellow;
    }

- Kemudian kita menginjak ke bagian header. Didalam header kita akan membentuk 5 style css sesuai dengan hasil analisis. Properties yang ada kita sesuaikan dengan kebutuhan yang diinginkan.
-header

#header {
    margin: 2px 0;
    height: 100px;
    border: 1px solid blue;
    }

-logo

#boxlogo {
    float: left;
    margin: 10px 10px 0 50px;
    width: 75px;
    height: 75px;
    border: 1px solid blue;
    }

-text "teknik elektro"

#textheader {
    float: left;
    margin: 10px 10px 0 0;
    width: 600px;
    height: 75px;
    padding: 10px 0 0 0;
    font-size: 35px;
    font-weight: bold;
    text-align : left;
    font-family: "Tahoma", Times, serif;
    color: black;
    border: 1px solid blue;
    }

- Menu navigasi header. Untuk menu ini style css berfungsi untuk mengatur posisi dari menu (#menuheader ul) dan fontase dari menu (#menuheader ul li a). Berikut kodenya,

#menuheader ul {
   float: right;
    width: 350px;
    margin: 0;
    padding: 0 27px 0 0;
    list-style: none;
   }

   #menuheader ul li a{
   float: left;
    width: 50px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #00034b;
    border-right: 1px solid #5f3b11;
   }

- Style untuk search, terdapat dua style untuk menentukan properties kontainer (menusearch dan menusearchbutton) dan dua style untuk mengatur tentang searchbutton dan searchfield.

#menusearch {
    float: right;
    margin : 50px 50px 0 0;
    width: 150px;
    height : 30px;
    border : 2px solid black;
    }
    #menusearchbutton {
    float: right;
    margin : 50px 0 0 0;
    width: 50px;
    height : 30px;
    border: 1px solid blue;
    }
    #searchfield{
    border: 1px solid #ffffff;
    color: #000000;
    font-size: 13px;
    font-variant: normal;
    height: 25px;
    line-height: normal;
    width: 148px;
    }
    #searchbutton{
    float: right;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    height: 30px;
    margin: 0 0 0 7px;
    text-align: center;
    vertical-align: bottom;
    white-space: pre;
    width: 50px;
    }

-Selanjutnya kita melangkah untuk style content. Didalam content kita akan membuat kontainer untuk isi dari sidebar dan content yang kita berinama style inner. Style inner ini akan menampung isi dari konten2 sebaiknya kita kasih nilai height yang auto.

#inner {
    width: 1260px
    height: auto;
    float: left;
    margin: 0 0;
    border: 2px solid orange;
    }

- Next step is sidebar. Di sidebar ini kita buat dua tipe style, satu untuk mengatur positioning (sidebar) dan satu lagi mengatur tentang menu-menu navigasi.Style2 menu navigasi ini berguna untuk menganimasikan menu bila kita lakukan manipulasi kepadanya (click atau sorot).

#sidebar {
    float: left;
    margin-right: 30px;
    width: 200px;
    height: 350px;
    border: 1px solid yellow;
    background: yellow;
    border: 1px solid blue;
    }
    #leftmenu ul{
    width:200px;
    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: #f6b446 no-repeat left center;
    margin: 0px 0px 1px;
    color: black ;
    }

#leftmenu a:hover{
    background: #f89806 no-repeat left center;
    color: black;
    }

Sampai disini masih bisa ngikutin khan??? Harus bisa...hehe (note: kalau gag bisa hubungi aja authornya :-p)

-Lanjut gan, Kita menuju ke content atau isi. Disini kita aka membuat beberapa style antara lain style content, top content (ini buat gambar2 yang diatas postingan), main content (isi postingan) left content (event). Dalam style2 ini kita mengatur mengenai positioning dan fontase serta warna2 yang akan digunakan.

#content {
    float: left;
    width: 1015px;
    height: 350px;
    border: 1px solid black;
    background : white;
    }

    #topcontent {
    float: left;
    width: 1014px;
    height: 100px;
    border: 2px solid orange;
    }
    #maincontent {
    float: left;
    width: 750px;
    height: 248px;
    border: 1px solid blue;
    }

    #rightcontent {
    float: right;
    width : 220px;
    height : 243px;
    border : 1px solid black;
    background: orange;
    }

-Baiklah, kita hampir selesai dalam membuat css style. Apakah anda ingat? Bagian mana yang belum dibuatkan style? Yups, benar... Jawabannya adalah footer. Ini scriptnya...

#footer {
   clear: both;
   height: 50px;
   border: 1px solid blue;
   background: black;
   padding: 10px 0 0 0;
   font-size: 15px;
   font-weight: bold;
   text-align : center;
   font-family: "comic sans series", Times, serif;
   color: orange;
}

Untuk style css dasar (layout) telah selesai. Anda dapat menambahkan style2 terkait fontase untuk melengkapinya. jadi ketika menulis script html anda tinggal memanggil style yang telah anda buat tersebut. CSS ini semacam fungsi pada bahasa pemrograman...
Kesulitan yang dialami pada css ini adalah tata letak. Karena kita menggunakan full script tanpa bantuan CSS editor macam dreamweaver, maka tata letak layout adalah flowlayout. Yakni layout yang mengalir sesuai aliran atau float yang ada. Untuk dapat mengetahui mengenai ini, silahkan anda ubah nilai2 float dan margin atau padding pada style2 tertentu. Lama kelamaan anda akan mengerti mengenai cara pengaturan tata letak dari CSS ini.
Ok setelah kita membuat style tersebut, langkah yang dikerjakan berikutnya adalah membuat script htmlnya. Kita harus mengingat kembali komponen2 dasar dari halaman ini dan turunannya. Karena kita akan memanggilnya dengan membuat divisi2 (div) dengan style yang telah kita buat. Sebagai contoh untuk header, maka div terluar adalah div style header lalu didalamnya terdapat div style logo, teks, menu navigasi, dan search. Begitu pula bagian yang lain. Bila kita salah melakukan peletakkan ini maka akan terjadi penumpukan yang salah.
Berikut ini adalah script html untuk body. Kita tinggal membuat divisi(div) dan memberinya style dengan cara memanggil style CSS yang telah kita buat diatas.
<body>
    <div id="wrapper">
        <div id="header">
        header
            <div id="boxlogo">
                <img src="um.png" height="75" width="75" />
            </div>
            <div id="textheader">
                TEKNIK ELEKTRO
            </div>
            <div id="menuheader">
                <ul>
                       <li><a href="#home">Home</a></li>
                       <li><a href="#Situs_Map">Situs Map</a></li>
                       <li><a href="#RSS">RSS</a></li>
                       <li><a href="#Contact">Contact</a></li>
                       <li><a href="#About_US">About Us</a></li>
                </ul>
            </div>
            <div id="menusearch">
                search field
            </div>
            <div id="menusearchbutton">
                search
            </div>
        </div>
        <div id="separateheader">
        </div>
    <div id="inner">
        <div id="sidebar">
            sidebar
            <div id="leftmenu">
         </div>
        </div>
        <div id="content">
            <div id="topcontent">
                topcontent
            </div>
            <div id="maincontent">
                maincontent
            </div>
            <div id="rightcontent">
                rigthcontent
            </div>
        </div>
    </div>

    <div id="footer">
        footer
    </div>
      </div>
</body>

Maka desain layout awal sudah selesai.
-Hal yang selanjutnya dilakukan adalah dengan memasukkan gambar,tulisan, warna kepada layout tersebut.
Anda juga dapat mempercantik tampilannya sesuai dengan keinginan anda. Dengan cara merubah style CSS yang telah dibuat.

Ini adalah script secara keseluruhan :

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Teknik Elektro UM</title>

    <style type="text/css">
    
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">

            <div id="boxlogo">
                <img src="um.png" height="75" width="75" />
            </div>
            <div id="textheader">
                TEKNIK ELEKTRO
            </div>
            <div id="menuheader">
                <ul>

                       <li><a href="#home">Home</a></li>

                       <li><a href="#Situs_Map">Situs Map</a></li>

                       <li><a href="#RSS">RSS</a></li>

                       <li><a href="#Contact">Contact</a></li>

                       <li><a href="#About_US">About Us</a></li>

                </ul>
            </div>
            <div id="menusearch">
                <input type="text" name="q" size="10" id="searchfield" title="searchfield" />
            </div>
            <div id="menusearchbutton">
                <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
            </div>
        </div>
        <div id="separateheader">
        </div>
    <div id="inner">
        <div id="sidebar">
            <div id="leftmenu">
            <ul>
                       <li><a href="#home">Home</a></li>
                       <li><a href="#News_and_Media">News and Media</a></li>
                       <li><a href="#Tutorials">Tutorials</a></li>
                       <li><a href="#Tips_and_Tricks">Tips and Tricks</a></li>
                       <li><a href="#Downloads">Downloads</a></li>
                    </ul>
         </div>
        </div>
        <div id="content">
            <div id="topcontent">
            <img src="mahasiswaum.jpg" align="left" height="100" width="200"></img>
            <img src="gedungelektro.png" align="left" height="100" width="200"></img>
            <img src="pkpt.png" align="left" height="100" width="218"></img>
            <img src="gazebo.png" align="left" height="100" width="200"></img>
            <img src="dosen.png" align="left" height="100" width="196"></img>
            </div>
            <div id="maincontent">
                <h1> Selayang Pandang </h1>
                <p>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>
                <br/>
                <p>read more</p>
            </div>
            <div id="rightcontent">
            <h3>Event</h3>
            <ul>
                <li>Pelatihan Pembuatan Game</li>
                <li>Seminar Nasional Pembuatan Media Pembelajaran Interaktif</li>
                <li>Seminar pra skripsi</li>
            </ul>
            </div>
        </div>
    </div>

    <div id="footer">
        <p>Design by Gilang Copyright 2010</p>
    </div>

    </div>
</body>
</html>

Untuk dapat mencobanya secara keseluruhan maka anda harus mendonload komponen2 gambar dari web ini. Anda dapat mengunduhnya di http://www.ziddu.com/download/8817080/ScriptCSSHTMLDesainWebtutorial.rar.html

Sekian postingan untuk hari ini, semoga tutorial ini bermanfaat. Berhubung saya masih awam dalam membaut tutorial. Saran dan kritik anda sangat saya harapkan. Silahkan tinggalkan komentar.... terimakasih...
Salam hangat selalu... cheers

=================================================
kurangin tidur banyakin ngopi

WARKOP IT

Thursday 4 March 2010

Tutorial CSS dan HTML untuk Membuat Sebuah Desain Web

4 comments:

Important Link