Pengenalan web minggu ketiga
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Pengenalan web minggu ketiga

on

  • 355 views

 

Statistics

Views

Total Views
355
Views on SlideShare
355
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Pengenalan web minggu ketiga Presentation Transcript

  • 1. Pemrograman Web (Teori) CSS (Cascading Style Sheet)Wawan Darmawan, S.Komdarmawan.wawan@gmail.com STMIK MUHAMMADIYAH JAKARTA - 2012
  • 2. CSS• Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. STMIK MUHAMMADIYAH JAKARTA - 2012
  • 3. • Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. STMIK MUHAMMADIYAH JAKARTA - 2012
  • 4. • CSS dibagi menjadi 3 yaitu:- Dengan menambahkan langsung di tag dokumen html (Inline Style)- Dengan menaruhnya di dalam header dokumen html (Internal Style Sheet)- Membuat file CSS tersendiri yang tespisah dari dokumen html (External Style Sheet) STMIK MUHAMMADIYAH JAKARTA - 2012
  • 5. 1. Contoh Inline Style<p style="color:blue">Membuat tulisan warna biru</p><p style="font-family:arial;font-size:150%;color:green">Membuat jenis font, ukuran dan warna</p><p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p><p style="font-style:italic;">Membuat tulisan miring</p> STMIK MUHAMMADIYAH JAKARTA - 2012
  • 6. 2. Contoh Internal Style SheetSebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf didokumen html, cara penulisannya adalah sebagai berikut: <style> <!– p { color:green;font-family:arial;font-size:120%;} --> </style>
  • 7. Kemudian kita masukkan style tersebut di antara tag <head> dan </head> : <html> <head> <style> <!-- p { color:green;font-family:arial;font-size:120%;} --> </style> </head> <body> <p>Saat ini saya sedang belajar CSS</p> <p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p> <p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara < p > dan < /p > akan memiliki format yang sama</p> </body> </html> STMIK MUHAMMADIYAH JAKARTA - 2012
  • 8. Contoh lainnya: <HTML> <HEAD> <TITLE>:hover and :focus Example</TITLE> <STYLE> A:link { COLOR: red } A:visited { COLOR: blue } A:active { COLOR: lime } A:hover { COLOR: yellow } A:unknown { COLOR: green } BODY { FONT-WEIGHT: bold; FONT-SIZE: 40px; FONT-FAMILY: Arial, Helvetica, sans-serif } </STYLE> </HEAD> <BODY> <A href="http://www.detik.com">Satu</A> <A href="http://www.bola.net">Dua</A> <A href="http://www.google.com">Tiga</A> </BODY> </HTML> STMIK MUHAMMADIYAH JAKARTA - 2012
  • 9. 3. Contoh External Style Sheet Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang terpisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html: <link rel="stylesheet" href="style.css" type="text/css"> Sehingga di dokumen html akan terlihat seperti berikut ini: <html> <head> <title>Titel websiteku</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> </body> </html>Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website,berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama“csstest.html” STMIK MUHAMMADIYAH JAKARTA - 2012
  • 10. <html><head><title>Titel websiteku</title><link href="style.css" rel="stylesheet" type="text/css"></head><body><div id="halaman"><!-- div id halaman dimulai --><div id="judul"><!-- div id judul dimulai --><h1 class="judul">Disini judul websiteku</h1><h2 class="sub-judul">Disini sub-judul websiteku</h2></div><!-- div id judul berakhir --><div id="konten"><!-- div id konten dimulai --><div class="kiri"><!-- div class kiri dimulai --><p>Disini navigasi bagian kiri</p></div><!-- div class kiri berakhir --><div class="tengah"><!-- div class tengah dimulai --><p>Disini konten websiteku</p></div><!-- div class tengah berakhir --><div class="kanan"><!-- div class kanan dimulai --><p>Disini navigasi bagian kanan</p></div><!-- div class kanan berakhir --></div><!-- div id konten berakhir --><div class="footer"><!-- div class footer dimulai --><p>Disini Footer websiteku</p></div><!-- div class footer berakhir --></div><!-- div id halaman berakhir --></body></html> STMIK MUHAMMADIYAH JAKARTA - 2012
  • 11. Yang berada diantara <–– dan ––> hanya sebagai keterangan agar lebihmudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebutdengan browser, maka kita akan melihat halaman yang polos dengan tulisanseadanya.
  • 12. Sekarang salin CCS berikut kemudian simpan ke folder yang samadengan “csstest.html” dengan nama “style.css” #halaman { /* "id" dilambangkan dengan "#" */ width: 800px; margin: 0 auto; /* agar dokumen berada ditengah */ padding: 0 auto; } #judul { width: 100%; height: 100px; background: #5F9EA0; margin: 0; /* pengaturan sisi bagian luar */ padding: 0; /* pengaturan sisi bagian dalam */ } #konten { width: 100%; margin: 0; padding: 0; } .kiri { /* "class" dilambangkan dengan "." */ width: 25%; height: 300px; float: left; background: #ADD8E6; } STMIK MUHAMMADIYAH JAKARTA - 2012
  • 13. .tengah{width: 50%;height: 300px;float: left;background: #FDF5E6;}.kanan{width: 25%;height: 300px;float: right;background: #ADD8E6;}.footer{height: 40px;background: #8FBC8F;clear: both;}.judul {color: Red;padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */}.sub-judul {color: #ff0;padding: 0 10px 10px;}p{padding-left: 10px; /* penulisan untuk satu sisi saja */} STMIK MUHAMMADIYAH JAKARTA - 2012
  • 14. Yang berada diantara /* dan */ hanya sebagai keterangan agar lebihmudah dimengerti, anda bisa menghapusnya.Sekarang buka file “csstest.html” dengan browser anda. STMIK MUHAMMADIYAH JAKARTA - 2012
  • 15. CSS Sekarang• Pada perkembangannya CSS sudah masuk level 3 untuk sekarang, dimana dimulai CSS level 1 atau yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1.• CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya : - Ukuran file lebih kecil - Load file lebih cepat - Dapat berkolaborasi dengan JavaScript - Pasangan setia XHTML - Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS. - Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja. - Dan banyak lagi yang lainnya. STMIK MUHAMMADIYAH JAKARTA - 2012
  • 16. Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite.Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan refresh browser untuk melihat hasilnya.Be creative… STMIK MUHAMMADIYAH JAKARTA - 2012
  • 17. CSS Framework• CSS framework adalah library CSS yang digunakan untuk membuat standarisasi layout dan thema dari website. Dengan CSS framework kita bisa membuat Front-end website dengan cepat mengingat layout dan tampilan sudah disediakan. CSS Framework bertugas membuat tampilan layout yang standar, rapih, dan tampil sempurna disetiap browser atau device. STMIK MUHAMMADIYAH JAKARTA - 2012