Sunday, February 3, 2013

Belajar Dasar Membuat Web Sesi 3 "Mendesign Tampilan Web Dengan CSS Bagian 1"

Sunday, February 03, 2013  ,  2 comments

Menurut wikipedia, Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

 CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasastyle sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Dengan kata lain, CSS digunakan untuk mendesign tampilan web agar terlihat lebih cantik dan terstruktur. Selain itu, CSS juga mempermudah dan mempersingkat kita dalam meng-coding tampilan web.

Penulisan syntax CSS
selector { property: value }
Keterangan:
  • Selector : menunjukkan bagian mana yang hendak diatur / diformat. 
  • Property : menunjukkan bagian (properti) dari selector yang hendak diatur. 
  • Value : nilai dari pengaturannya. 
Sebagai contoh:

<head> 
<title>Belajar Dasar Membuat Web Sesi 3 "Mendesign Tampilan Web Dengan CSS Bagian 1"</title> 
<style type="text/css"> 
body { background-color:#d0e4fe; } 
h2 { color:orange;} 
p { font-family:"Times New Roman"; font-size:20px; } 
</style> 
</head> 
<body> 
<h2>Contoh tampilan "h2"</h2> 
<p>Contoh tampilan "p".</p> 
</body> 
</html>
 Hasilnya akan seperti berikut: 

Pengelompokan Selector


Pada penulisan kode CSS, bisa juga beberapa selector dikelompokkan menjadi satu dengan cara menambahkan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna biru, maka kode CSS nya menjadi:
h1,h2,h3 { color: blue }

Penggunaan Banyak Properties


Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warnamerah, dengan type font arial, dan ukuran font 150%.

Fungsi ID dan CLASS pada CSS


Fungsi ID :
  • ID di gunakan untuk style elemen tunggal yang unik dan biasanya mempunyai banyak element-element lain di dalamnya.
  • ID di  lambangkan dengan simbol "#" ( pager )
  • ID di tulis ke html / body  dengan style "<div id="nama_selector_anda">" dan di tutup dengan kode </div> 
  • contoh singkat ID 

#namaselector
{
text-align : center;
color : red;
background : #ffffff;
margin :0px;
padding:10px;
}
Dari contoh di atas dapat di simpulkan bahwa pemakaian ID dengan selector "namaselector" . Untuk penulisan pada html / body menjadi seperti di bawah ini :

<div id="namaselector"> dan di tutup </div>

Untuk nama dari "namaselector" bisa diubah-ubah sesuai keinginan Anda.


Fungsi CLASS :
  • Class digunakan untuk menentukan style pada sekelompok element
  • Class biasanya terdapat di dalam selector ID
  • Class memungkinkan kalian untuk menetapkan style tertentu  untuk setiap element html  dengan banyak class yang sama .
  • Class di lambangkan dengan simbol "." ( titik )
  • lihat contoh di bawah untuk lebih jelasnya 
.class1 {color:blue;}
Untuk penulisan pada html / body menjadi seperti di bawah ini :

<div class="class1"> Hasilnya tulisan akan berwarna biru </div>
Nama class bisa diubah sesuai keinginan


 Pemasang CSS pada dokumen HTML

 Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
1. External Style Sheet (file CSS berbeda dari file HTML),
2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

 Dari ketiga cara tersebut,menurut saya paling enak menggunakan eksternal CSS karena file CSS terpisah dari file HTML, sehingga lebih mudah dalam mengolahnya.

  • Internal CSS
Pada css jenis ini, kode css berada dalam html. Contohnya adalah sebagai berikut:

<html>
    <head>
        <title>Belajar Web dengan CSS</title>
        <style type = "text/css">
            #container{
                margin:auto;
                width:1000px
            }
            #header{
                background-image:url("header.jpg");
                width:1000px;
                height:180px;
            }
            #leftbar{
                background-color:orange;
                width:200px;
                padding-left:10px;
                float:left;
            }
            .menu{
                font-family:Calibri;
                color:black;
            }
            .menu a{
                font-family:Calibri;
                color:olive;
            }
            .menu a:hover{
                font-family:Calibri;
                color:purple;
            }
            #contain{
                background-color:yellow;
                width:770px;
                float:left;
                padding: 10px 10px 10px 10px;
            }
            #footer{
                width:1000px;
                background-color:teal;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header"">
                 Ini Header
        </div>
        <div id="leftbar">
            Ini Leftbar
            <div class="menu">
                <ul>
                    <li><a href="http://www.spirit221.blogspot.com/">Home</a></li>
                    <li><a href="http://www.spirit221.blogspot.com/l">About</a></li>
                    <li><a href="http://www.spirit221.blogspot.com/">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="contain">
            Ini Contain
        </div>
        <div id="footer" align="center">
            Ini Footer<br>
            Copyright : <a href="http://www.spirit221.blogspot.com/">spirit221.blogspot.com</a>
        </div>
    </div>
</body>
</html>
 Hasilnya adalah sebagai berikut :
  • Eksternal CSS
Pada css jenis ini, kode css berada di file .css yang terpisah dengan file .html. Pada file html terdapat kode yang digunakan untuk memanggil file css tersebut.
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
nama style sesuai dengan nama file css Anda
Contoh:
Buat file .html terserah namanya. Tuliskan kode berikut


<html>
    <head>
        <title>Belajar Web dengan CSS</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>

     </head>
    <body>
        <div id="container">
            <div id="header"">
                 Ini Header
        </div>
        <div id="leftbar">
            Ini Leftbar
            <div class="menu">
                <ul>
                    <li><a href="http://www.spirit221.blogspot.com/">Home</a></li>
                    <li><a href="http://www.spirit221.blogspot.com/l">About</a></li>
                    <li><a href="http://www.spirit221.blogspot.com/">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="contain">
            Ini Contain
        </div>
        <div id="footer" align="center">
            Ini Footer<br>
            Copyright : <a href="http://www.spirit221.blogspot.com/">spirit221.blogspot.com</a>
        </div>
    </div>
</body>
</html>

 Buat file style.css dan tulis kode berikut:
            #container{
                margin:auto;
                width:1000px
            }
            #header{
                background-image:url("header.jpg");
                width:1000px;
                height:180px;
            }
            #leftbar{
                background-color:orange;
                width:200px;
                padding-left:10px;
                float:left;
            }
            .menu{
                font-family:Calibri;
                color:black;
            }
            .menu a{
                font-family:Calibri;
                color:olive;
            }
            .menu a:hover{
                font-family:Calibri;
                color:purple;
            }
            #contain{
                background-color:yellow;
                width:770px;
                float:left;
                padding: 10px 10px 10px 10px;
            }
            #footer{
                width:1000px;
                background-color:teal;
                float:left;
            }
 Hasilnya akan seperti pada contoh internal CSS, karena isi CSSnya sama. :


  • Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
    <head>
        <title>Belajar Web dengan CSS</title>
    </head>
    <body>
        <div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>

Yaaaa.... sampai segini dulu ya... tunggu  postingan saya selanjutnya "Belajar Dasar Membuat Web Sesi 3 "Mendesign Tampilan Web Dengan CSS Bagian 2"". Nanti akan saya postingkan contoh css yang lumayan.
Selamat mencoba ^_^ semoga bermanfaat.

2 comments:

  1. UnknownSeptember 29, 2014 at 2:38 PM

    z toch z pake PHP, bisakh z pake jg kode" yg dpake di CSS tpi tdk ada aplikasi CSSq?????


    mohon jawabannya.........

    ReplyDelete
  2. BundetFebruary 21, 2015 at 8:11 AM

    Terimakasih, sekedar menambahkan, semoga bermanfaat
    Rekomendasi Artikel Terkait ->

    SUBSTANSI :

    - Pengertian CSS
    - Fakta Menggunakan CSS
    - 3 Cara Menginputkan CSS ke HTML
    - Pengertian Selector, Property dan Value
    - 5 Jenis Selector CSS
    - Latihan Penggunaan Selector CSS

    Pranala -> Mengatur Tampilan Web Dengan CSS 3

    ReplyDelete

Subscribe to: Post Comments (Atom)