WEB PROGRAMING PART 3 - CARA MENGGUNAKAN CSS PADA HTML UNTUK PEMULA LENGKAP

CARA MENGGUNAKAN CSS PADA HTML BAHASA INDONESIA.  Sebenarnya tutorial yang saya bagikan ini masih tentang dasar pemrograman web untuk pemula, yaitu lanjutan dari tutorial yang sebelumnya tentang “Dasar-dasar Penggunaan HTML Untuk pemula” yang sudah saya bagikan sebelumnya di blog zeroncode.blogspot.com.

Pada tutorial kali ini saya akan membahas tentang cara penggunaan CSS pada HTML. Apa itu CSS..? Sebenarnya pada artikel sebelumnya saya sudah membahas sedikit tentang : apa itu CSS pada pemrograman web.

Ok, bagi anda yang masih belum tahu, akan saya jelaskan sedikit pengertian CSS pada pemrograman web. CSS atau yang mempunyai kepanjangan dari “Cascading Style Sheet” yaitu aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Pengertian CSS secara sederhana menurut saya adalah kumpulan sintak yang disisipkan didalam file HTML agar tampilan web lebih menarik dan tersusun dengan rapi.

Contoh penggunaan CSS pada perancangan sebuah Web, atau biasa di sebut dengan Template Web, CSS bisa kita gunakan untuk membuat kotak-kotak, membuat header, membuat tombol navigasi menu, disain body, sidebar, dan footer.

Ok, seperti biasa, tanpa basa-basi lagi agar anda tidak bignung, kita langsung saja ke tutorialnya. Berikut dibawah ini adalah daftar isi dari tutorial kali ini.

1. PENGERTIAN CSS

Sebenarnya pada kata pengantar diatas saya sudah menjelaskan sedikit tentang perngertian dari CSS. Namun mungkin sebagian anda ingin tahu penjelasan lebih lengkapnya tentang CSS. Untuk lebih jelasnya tentang penjelasan CSS, anda bisa mencarinya di google.

2. Membuat File CSS

Untuk membuat file CSS, itu sama caranya membuat file HTML. Jika file HTML berextensi .html, maka untuk file CSS adalah file-nya berextensi .css. Jika anda sudah membaca tentang “cara membuat file HTML” yang sudah saya jelaskan sebelumnya, saya rasa anda sudah mengerti untuk membuat sebuah file HTML atau CSS.

Untuk lebih jelasnya, perhatikan gambar berikut :

Gambar diatas adalah contoh file HTML, karena berextensi .html.

Gambar diatas adalah contoh file CSS, karena berextensi .CSS.

3. Aturan Penulisan CSS

Didalam penulisan CSS ada aturan-aturan yang digunakan.Aturan penulisan CSS pada komponen utama terbagi 2, yaitu Selektor dan Deklarator. Apa itu Selektor dan Deklarator pada CSS..? Berikut penjelasannya dari Selektor dan deklarator.

3.1. Selektor dan Deklarator

Selektor merupakan tag dari penulisan HTML. Contohnyapada tag body, h1, p, a, dan lain-lain. Jika anda sudah membaca tentang dasar-dasar HTML, saya rasa anda sudah tahu apa itu tag body, h1, p, a, dan lain-lain.

Deklarator adalah yang memerintahkan browser untuk membuat tampilan pada selector sesuai dengan perintah yang ada pada deklarator. Sedangkan deklarator terdiri dari Property dan Value.

Berikut cara penulisan Selektor dan Deklarator pada CSS :

Selektor {Deklarator;}

Apakah anda bingung..? Ok, untuk lebih jelasnya berikut  dibawah ini saya berikancontoh.

Sebagai contoh: Biasanya pada penulisan artikel pada sebuah halaman web banyak digunakan Tag <p> atau paragraph.Jika anda ingin merubah bentuk penulisan atau jenis tulisan, ukuran tulisan, dan warna tulisan dari text anda pada tag <p> atau paragraph tersebut, pada CSS penulisannya adalah sebagai berikut :

p {font-family: verdana;}

atau bisa juga ditulis seperti berikut :

p {
    font-family: verdana;
}

Huruf p Merupakan selektor dari tag <p> atau paragraph,dan yang berada dalam kurung kurawal adalah deklaratornya yang memerintahkan browser untuk menampilkan artikel paragraph dengan font verdana. Sedangkan font-family adalah Property dan verdana adalah Value.Berikut dibawah ini screenshot aturan penilisan yang biasa digunakan oleh para programer pada CSS :

Screenshot diatas adalah cara penulisan CSS yang biasa digunakan.

3.2. Selector ID dan Selektor Class

Pada bagian aturan penulisan Selektor, aturan penulisan Selektor tersebut-pun terbagi menjadi 2 macam, yaitu Selektor ID dan Selektor Class.

Selain selector yang bisa ditulis secara langsung seperti tag <p>, kemudian kita tulis selektornya psaja dengan menghilangkan tanda <…>, ada selektor lain yang tidak kalah pentingnya yaitu selector ID dan selektor Class.

Selektor ID dan selektor Class digunakan jika anda mau merubah tampilan tag <p> dan tampilannya berlainan semisal untuk font,anda bisa menentukan tag <p>tertentu yang akan di edit tampilannyadi CSS.Tapi jika pada penulisannya p {font-family:arial}, maka semua tag <p> akan dirubah menjadi font Arial semua. Bagaimana jika salah satunya saja pada Tag <p> anda menginginkan Font nya dirubah menjadi Consolas, untuk itu anda harus membedakannya menggunakan Selektor ID atau Selektor Class.

Untuk lebih jelasnya, berikut penjelasannya :

- Selector ID

Biasanya misalkan anda mempunyai sebuah tag pada HTML seperti berkut :

<p>Selamat Datang Di Web Saya</p>

Maka penulisan Selektor-nya pada CSS adalah sebagai berukut :

p {
    font-family: verdana;
}

Sedangkan untuk cara penggunaan Selektor ID pada CSS, anda harus menambahkan kata id pada tag di HTML-nya dan menggunakan tanda # (pagar)pada awal Selektordi CSS.

Untuk lebih jelasnya, berikut dibawah ini cara penggunaan Selektor ID :

Sebagai contoh, misalkan anda mempunyai sebuah tag <p>pada HTML, maka pada tag tersebut anda harus sertakan dengan kata idpada tag <p> yang ada pada HTML tersebut. Kurang lebih penulisannya adalahsebagai berikut :

<p id=”p1”>Selamat Datang Di Web Saya</p>

Maka penulisan Selektor ID-nya pada CSS adalah sebagai berukut :

#p1 {
       font-family: verdana;
}

- Selektor Class

Untuk cara penggunaan Selektor class hampir sama dengan cara penggunaan Selektor ID. Bedanya, pada Selektor ID kita harus menggunakan kata ID pada setiap tag yang ada pada HTML dan harus menggunakn tanda # (pagar)padasetiap awalSelektordi CSS.

Sedangkan untuk Selektor Class kita harus menggunakan kata Class pada setiap tag yang ada pada HTML dan harus menggunakan tanda Titik(.) pada setiap awalSelektordi CSS.

Untuk lebih jelasnya, berikut contohnya :

Misalkan anda mempunyai sebuah tag <p> pada HTML, maka pada tag tersebut harus anda sertakan dengan kata id pada tag <p> yang ada pada HTML tersebut. Kurang lebih penulisannya adalah sebagai berikut  :

 <p class=”p1”>Selamat Datang Di Web Saya</p>

Maka penulisan Selektor Class-nya pada CSS adalah sebagai berukut :

.p1 {
       font-family: verdana;

}

4. Cara Menggunakan CSS pada HTML

Sebelumnya kita sudah membahas tentang aturan penulisan CSS dan macam-macam dari penulisan CSS. Sekarang kita kembali ke topik yaitu Cara Menggunakan CSS Pada HTML.

Untuk cara penggunaan CSS pada HTML terbagi menjadi beberapa bagian yaitu :

• Inline Style
• Embedded Style
• Link/External Style

Ok, akan saya jelaskan satu persatu.

4.1. Inline Style

Penggunaan CSS secara Inline Style adalah menempatkan sintak CSS secara langsung di dalam tag yang ada pada HTML.

Untuk lebih jelasnya, berikut contoh dari Inline Style :

<html>

<head>

<title>Penggabungan File HTML dan CSS</title>

</head>

<body>

<p><h2 style=”color:#FFCC00″>Contoh untuk Inline Style </h2></p>

</body>

</html>

Untuk lebih jelasnya, berikut Screenshot cara penulisannya di Notepad++ :

Keterangan :

Sintak pada baris ke 6 yang bertulisan style, itu adalah sintak CSS yang diletakkan paga tag h2. Dimana CSS akan memberikan perintah pada tag h2untuk merubah text yang ada pada tag h2 tersebut akan berubah warna menjadi “#FFCC00”. #FFCC00 itu adalah warna yang dideskripsikan berdasarkan nilai Hexa (Hexa = nilai dalam bahasa pemrograman.

Jika file html diatas anda jalankan di browser anda, maka hasilnya kurang lebih akan seperti gambar berikut :

4.2. Embedded Style

Penggunaan CSS secara Embedde Style adalah menempatkan sintak CSS didalam setiap fileHTMLsebelum tag </head>. Untuk lebih jelasnya, berikut contoh dari Embedded Style :

<html>

<head>

<title>Penggabungan File HTML dan CSS</title>

<style type=”text/css”>

h2{

    color:#FFCC00;

}

</style>

</head>

<body>

<p><h2 >Contoh untuk Inline Style </h2></p>

</body>

</html>

Untuk lebih jelasnya, berikut Screenshot cara penulisannya di Notepad++ :

Keterangan :

Sintak pada baris ke 4 sampai 8, itu adalah sintak CSS yang diletakkan pada bagian sebelum/diatas tag<head>. Dimana CSS akan memberikan perintah pada tag h2 untuk merubah text yang ada pada tag h2 tersebut akan berubah warna menjadi “#FFCC00”. #FFCC00 itu adalah warna yang dideskripsikan berdasarkan nilai Hexa (Hexa = nilai dalam bahasa pemrograman.

4.3. Link/External Style

Penggunaan CSS secara Link atau External Style adalah membuat file CSS secara terpisah dari file HTML, kemudian file CSS tersebut di link (dihubungkan) ke file HTML sebelum tag </head>. Para programer web biasanya menggunakan cara Link/External Style iniuntuk membuat sebuah web. Karena banyak kelebihannya. Kelebihan menggunakan cara Link/External Syle ini diantaranya adalah mempercepat saat ngoding, hemat koding, dan hanya sekali tulis di file CSS sehingga bisa digunakan pada setiap file HTML nantinya.

Untuk lebih jelasnya, berikut contoh langkah-langkah membuat Link Style :

- Silahkan anda buat sebuah file CSS dengan nama terserah anda. Disini sebagai contoh file CSS saya buat dengan nama link_style.css, kemudian ketikkan sintak berikut :

- Kemudian silahkan anda buat sebuah file HTML dengan nama terserah anda. Disini sebagai contoh file HTML saya buat dengan nama link_syle.html,kemudian ketikkan sintak berikut :

Keterangan :

Koding pada baris ke 4 itu adalah sintak untuk link, dan pada bagian href itu adalah untuk menghubungkan (link) ke file tertentu, dan sedangkan pada bagian “link_style.css” itu adalah nama dari file CSS yang akan kita hubungkan.

- Setelah itu, silahkan anda jalankan file link_style.html di browser anda, maka hasilnya kurang lebih seperti gambar berikut :

Itulah cara menggunakan file CSS secara Link. Ingat, untuk Link file CSS, harus ditempatkan diatas tag </head>pada file HTML.

5. Property dan Value pada CSS

Pada penjelasan sebelumnya saya sudah membahas sedikit tentang Property dan Value(nilai) pada CSS. Anda masih ingat dengan Selektor dan Deklarator...? Nah, Property dan Value adalah bagian dari Deklarator.

Perhatikan contoh CSS berikut :

h2{

    color:#ffcc00;

}

Pada contoh CSS diatas, yang sebagai Property dan Value adalah sebagai berikut :

h2{

    Property:Value;

}

Untuk Property pada CSS, terbagi menjadi beberapa bagian, yaitu :

- Color

Property ini digunakan untukmengatur warna text.

Cara penulisannya :Selektor {color:#000000;}.

Value warna bisa menggunakan Hexadesimal, dan juga bisamenggunakan Value standar, misalnya untuk kuning bisa menggunakanValue untuk property-nya ‘yellow’.

- Font-weight

Property ini digunakan untuk mengaturketebalan text.

Cara penulisannya :Selektor {font-weight:100;}.

Value bisa menggunakan angka, dan juga bisa menggunakan Value standar, misalnya untuk tebal bisa menggunakan Value untuk property-nya‘bold’.

- Font-family

Property ini digunakan untuk mengaturjenis text.

Cara penulisannya :Selektor {font-family:arial, times new roman;}.

Bagi anda yang biasa mengetik di komputer, saya rasa anda sudah tahu jenis-jenis font standarbawaan komuter anda.

- Font-size

Property ini digunakan untuk mengaturukuran text.

Cara penulisannya :Selektor {font-size:12px;}.

Value bisa menggunakan angka dengan diikuti tanda ..px, dan juga bisa menggunakan Value standar, misalnya bisa menggunakan Value untuk property-nya “small, medium, large, dan lain-lain”.

- Font-style

Property ini digunakan untuk mengaturfont style text.

Cara penulisannya :Selektor {font-style:italic;}.

Value lain diantaranya : normal, oblique.

- Font-variant

Property ini digunakan untuk mengaturjenis text yang akan muncul apakah small caps atau huruf kecil.

Cara penulisannya :Selektor {font-variant:normal;}.

Value lain diantaranya : small-caps.

- Text-transform

Property ini digunakan untuk mengaturkapital font.

Cara penulisannya :Selektor {text-transform:capitalize;}.

Value lain diantaranya : lowercase, uppercase.

- Text-decoration

Property ini digunakan untuk mengaturfont stylepada text juga. Misal apakah text tersebut akan dirubah menjadi bergaris bawah atau tidak.

Cara penulisannya :Selektor {text-decoration:underline;}.

Value lain diantaranya : none, blink, line through, overline.

- Letter-spacing

Property ini digunakan untuk mengaturjarak setiap antar karakter text.

Cara penulisannya :Selektor {letter-spacing:normal;}.

Value lain diantaranya : 1px, 2px, 3px, dan seterusnya.

- Text-align

Property ini digunakan untuk mengatur posisi dari text.

Cara penulisannya :Selektor {text-align:lef;}.

Value lain diantaranya : right, center, justify.

- Word-spacing

Property ini digunakan untuk mengaturjarak spasi antar setiap kata dari text.

Cara penulisannya :Selektor {word-spacing:normal;}.

Value lain diantaranya : 1px, 2px, 3px, dan seterusnya.

- Line-height

Property ini digunakan untuk mengatur jarak garis.

Cara penulisannya :Selektor {line-height:normal;}.

Value lain diantaranya : ..px, ..em, ..%.

- Text-indent

Property ini digunakan untuk mengatur baris pertama pada paragraph.

Cara penulisannya :Selektor {text-indent:30px;}.

- Vertical-align

Cara penulisannya :Selektor {vertical-align:top;}.

Value lain diantaranya : bottom, middle, super, sub, dan lain-lain.

- Unicode-bifdi

Cara penulisannya :Selektor {unicode-bidi:normal;}.

Value lain diantaranya : embed, dan lain-lain.

- Direction

Cara penulisannya :Selektor {decoration:normal;}.

- Margin

Cara penulisannya :Selektor {margin:10px;}.

- Margin-top

Cara penulisannya :Selektor { margin-top:10px;}.

- Margin-left

Cara penulisannya :Selektor { margin-top:10px;}.

- Margin-right

Cara penulisannya :Selektor { margin-top:10px;}.

- Margin-bottom

Cara penulisannya :Selektor { margin-top:10px;}.

- Padding

Property ini biasa digunakan untuk mengatur jarak dalam elemen, seperti memberi jarak antara header dengan jarak tepi header atau memberi jarak antara elemen dengan konten(isi).

Untuk cara penggunaan Property Padding, caranya hampir sama dengan cara penggunaan property margin.

Untuk padding, biasanya menggunakan property padding, padding-top, padding-left, padding-right, padding-bottom.Untuk value sama saja penggunaannya dengan value pada Property Margin.

- Border

Cara penulisannya :Selektor {border:normal;}.

Value lain diantaranya : ..px, none, hidden, grove, solid, dan lain-lain.

- Untuk border lainnya  yaitu ada border-top, border-left, border-right, border-bottom.

Cara penulisannya sama dengan cara penulisan pada property border

- Float

Cara penulisannya :Selektor {float:left;}.

Value lainnya : none, right.

- Background

Cara penulisannya :Selektor {background:blue;}.

Value lain diantaranya : anda bisa menggunakan Hexadecimal seperti #ffcc00, atau anda bisa menggunakan url seperti : 

selector {background:url(http://zeroncode.blogspor.com/background.jpg)}.

Itulah sedikit dari Property-property CSS yang biasa digunakan. Sebenarnya masih banyak lagi dari Property-property CSS, namun kalau saya tulissemuanya disini, saya rasa aka membuat anda menjadi bosan untuk membacanya. Untuk Property-property CSS lainnya, akan saya update untuk tulisan saya selanjutnya.

Untuk lebih lengkapnya, silahkan download filenya berupa PDF DISINI. Karena pada File PDF tersebut lebih lengkap daripada di artikel ini.

===============================================

Ok, sekian dulu dari saya, salah dan kurangnya dalam penulisan saya ini saya mohon ma’af. Dan bagi anda yang ingin bertanya, silahkan tinggalkan kompentar pada blog saya yaitu di zeroncode.blogspot.com, dan semoga bermanfaat.

Salam sukses.

Tweet

Ditulis Unknown — September 26, 2016 — Add Comment