Kelebihan HTML 5

Pada bagian sebelumnya saya menuliskan arikel tentang apa itu HTML?. Sekarang saya akan memberikan sedikit bacaan tentang apa itu HTML5 yang merupakan penyempurnaan dari versi HTML yang sebelumnya.

Pengertian HTML5

Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
• Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
• Penanagan kesalahan yang lebih baik
• Lebih markup untuk menggantikan scripting
• HTML5 merupakan perangkat mandiri
• Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

• Unsur kanvas untuk menggambar
• Video dan elemen audio untuk media pemutaran
• Dukungan yang lebih baik untuk penyimpanan secara offline
• Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
• Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

<object width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut

<video src=tutorialku.mp4>
</video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

Apakah Browser Saya Support HTML5?

Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut:

http://html5test.com

Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point. 

Materi Dasar Algoritma

1. Pengertian Algoritma

Algoritma adalah urutan langkah-langkah logis penyelesaian masalah yang disusun secara sistematis.  Masalah dapat berupa apa saja, dengan catatan untuk setiap masalah, ada syarat kondisi awal yang harus dipenuhi sebelum menjalankan algoritma.  Konsep algoritma sering kali disetarakan dengan sebuah resep.  Sebuah resep biasanya memiliki daftar bahan atau bumbu yang akan digunakan, urutan pengerjaan dan bagaimana hasil dari urutan pengerjaan tersebut.  Apabila bahan yang digunakan tidak tertera (tidak tersedia) maka resep tersebut tidak akan dapat dikerjakan.  Demikian juga jika urutan pengerjaannya tidak beraturan, maka hasil yang diharapkan tidak akan dapat diperoleh.  

Algoritma yang berbeda dapat diterapkan pada suatu masalah dengan syarat yang sama.  Tingkat kerumitan dari suatu algoritma merupakan ukuran seberapa banyak komputasi yang dibutuhkan algoritma tersebut untuk menyelesaikan masalah.  Umumnya, algoritma yang dapat menyelesaikan suatu permasalahan dalam waktu yang singkat memiliki tingkat kerumitan yang rendah, sementara algoritma yang membutuhkan waktu lama untuk menyelesaikan suatu masalah membutuhkan tingkat kerumitan yang tinggi. Perhatikan algoritma sederhana berikut.

Contoh :Algoritma menghitung luas segitiga.

1. Start

2. Baca data alas dan tinggi.

3. Luas adalah alas kali tinggi kali 0.5

4. Tampilkan Luas

5. Stop

Algoritma di atas adalah algoritma yang sangat sederhana, hanya ada lima langkah.  Pada algoritma ini tidak dijumpai perulangan ataupun pemilihan.  Semua langkah dilakukan hanya satu kali. Sekilas algoritma di atas benar, namun apabila dicermati maka algoritma ini mengandung kesalahan yang mendasar, yaitu tidak ada pembatasan pada nilai data untuk alas dan tinggi. Bagaimana jika nilai data alas atau tinggi adalah bilangan 0 atau bilangan negatif ?  Tentunya hasil yang keluar menjadi tidak sesuai dengan yang diharapkan. Dalam kasus seperti ini kita perlu menambahkan langkah untuk memastikan nilai alas dan tinggi memenuhi syarat, misalnya dengan melakukan pengecekan pada input yang masuk. Apabila input nilai alas dan tinggi kurang dari 0 maka program tidak akan dijalankan.  Sehingga algoritma di atas dapat dirubah menjadi seperti contoh berikut.

Contoh  ;Hasil perbaikan algoritma perhitungan luas segitiga.

1.     Start

2.     Baca data alas dan tinggi.

3.     Periksa data alas dan tinggi, jika nilai data alas dan tinggi lebih besar dari nol maka lanjutkan ke langkah ke 4 jika tidak maka stop

4.     Luas adalah alas kali tinggi kali 0.5

5.     Tampilkan Luas

6.     Stop

Dari penjelasan di atas dapat diambil kesimpulan pokok tentang algoritma. Pertama, algoritma harus benar. Kedua algoritma harus berhenti, dan setelah berhenti, algoritma memberikan hasil yang benar.

2. Cara Penulisan Algoritma

Ada tiga cara penulisan algoritma, yaitu :

a. Structured English (SE)

SE merupakan alat yang cukup baik untuk menggambarkan suatu algoritma. Dasar dari SE adalah Bahasa Inggris, namun kita dapat memodifikasi dengan Bahasa Indonesia sehingga kita boleh menyebutnya sebagai Structured Indonesian (SI). Algoritma seperti pada Contoh 5.10 dan 5.11 merupakan algoritma yang ditulis menggunakan SI. Karena dasarnya adalah bahasa sehari-hari, maka SE atau SI lebih tepat untuk menggambarkan suatu algoritma yang akan dikomunikasikan kepada pemakai perangkat lunak.

b. Pseudocode

Pseudocode mirip dengan SE.  Karena kemiripan ini kadang-kadang SE dan Pseudocode dianggap sama.  Pseudo berarti imitasi atau tiruan atau menyerupai, sedangkan  code menunjuk pada kode program.  Sehingga pseudocode adalah kode yang mirip dengan instruksi kode program sebenarnya.   Pseudocode didasarkan pada bahasa pemrograman yang sesungguhnya seperti BASIC, FORTRAN atau PASCAL. Pseudocode yang berbasis bahasa PASCAL merupakan  pseudocode yang sering digunakan Kadang-kadang orang menyebut pseudocode sebagai PASCAL-LIKE algoritma Apabila Contoh 5.10 ditulis dalam pseudocode berbasis bahasa BASIC akan tampak seperti pada contoh 5.12.

Contoh 5.12.  Pseudocode.

1. Start

2. READ alas, tinggi

3. Luas = 0.5 * alas * tinggi

4. PRINT Luas

5. Stop

Pada Contoh 5.12 tampak bahwa algoritma sudah sangat mirip dengan bahasa BASIC.  Pernyataan seperti READ dan PRINT merupakan keyword yang ada pada bahasa BASIC yang masing-masing menggantikan kata “baca data” dan “tampilkan”. Dengan menggunakan pseudocode seperti di atas maka proses penterjemahan dari algoritma ke kode program menjadi lebih mudah.

c. Flowchart

Flowchart atau bagan alir adalah skema/bagan (chart) yang menunjukkan aliran (flow) di dalam suatu program secara logika.  Flowchart merupakan alat yang banyak digunakan untuk menggambarkan algoritma dalam bentu notasi-notasi tertentu.  Secara lebih detil bagian ini akan dibahas pada bagian berikutnya. Pada flowchart ada beberapa simbol penting yang digunakan untuk membuat algoritma sebagaimana tercantum pada Gambar 5.3.

Simbol Flowchart :

                Gambar Simbol-simbol yang digunakan dalam flowchart.

Program Flowchart dapat terdiri dari dua macam, yaitu bagan alir logika program ( program logic flowchart ) dan bagan alir program komputer terinci (detailed computer program flowchart).  Bagan alir logika program digunakan untuk menggambarkan tiap-tiap langkah di dalam program komputer secara logika dan biasanya dipersiapkan oleh seorang analis system.  Sedangkan bagan alir program komputer terinci digunakan untuk menggambarkan instruksi-instruksi program komputer secara terinci dan biasanya dipersiapkan oleh seorang programmer. 

Apabila Contoh  dibuat program  flowchartnya maka akan tampak pada gambar

 

                 Bagan alir logika program                                        Bagan alir program komputer terinci

Struktur Algoritma Berurutan

Ada tiga struktur dasar yang digunakan dalam membuat algoritma yaitu struktur berurutan sequencing), struktur pemilihan / keputusan / percabangan (branching) dan struktur pengulangan (looping).   
Sebuah algoritma biasanya akan menggabungkan ketiga buah struktur ini untuk menyelesaikan masalah.

Pada bagian ini kita akan bahas lebih dulu struktur algoritma berurutan.   
Struktur berurutan dapat kita samakan dengan mobil yang sedang berjalan pada jalur lurus yang tidak terdapat persimpangan .  Mobil tersebut akan melewati kilometer demi kilometer jalan sampai tujuan tercapai.  

Struktur berurutan terdiri satu atau lebih instruksi.  Tiap instruksi dikerjakan secara berurutan sesuai dengan urutan penulisannya, yaitu sebuah instruksi dieksekusi setelah instruksi sebelumnya selesai dieksekusi.  Urutan instruksi menentukan keadaan akhir dari algoritma.  Bila urutannya diubah, maka hasil akhirnya mungkin juga berubah. 

Menurut Goldshlager dan Lister (1988) struktur berurutan mengikuti ketentuan-ketentuan sebagai berikut: 

·         tiap instruksi dikerjakan satu persatu

·         tiap instruksi dilaksanakan tepat sekali, tidak ada yang diulang

·         urutan instruksi yang dilaksanakan pemroses sama dengan urutan aksi sebagaimana yang tertulis di dalam algoritmanya

·         akhir dari instruksi terakhir merupakan akhir algoritma.

Contoh 5.13.  Flowchart untuk menghitung luas bangun.

Buatlah flowchart untuk menghitung:

a. volume balok

b. luas lingkaran

Penyelesaian:

Soal ini merupakan permasalahan dengan algoritma struktur berurutan karena tidak ada proses pemilihan atau pengulangan.  Untuk volume balok, kita harus menentukan variabel input dan output yang dibutuhkan.  Untuk menghitung volume balok dibutuhkan variabel input panjang, lebar

dan tinggi.  Sedangkan variabel outputnya adalah volume.  Pada luas lingkaran dibutuhkan variabel input radius dan variabel output luas.  Untuk menghitung luas lingkaran ini kita juga membutuhkan konstanta phi.  

Contoh 5.14.  Flowchart untuk konversi suhu.

Buat  flowchart untuk mengubah temperatur dalam Fahrenheit menjadi temperatur dalam Celcius dengan rumus C = 5/9 x (F -32).

Penyelesaian:

Soal ini juga masih menggunakan algoritma dengan struktur berurutan.  Variabel input yang dibutuhkan adalah F dan variabel outputnya adalah C.  Flowchart untuk dua masalah ini dapat dilihat pada Gambar 5.7.

4. Struktur Algoritma Percabangan

Sebuah program tidak selamanya akan berjalan dengan mengikuti struktur berurutan, kadang-kadang kita perlu merubah urutan pelaksanaan program dan menghendaki agar pelaksanaan program meloncat ke baris tertentu.  Peristiwa ini kadang disebut sebagai percabangan/pemilihan atau keputusan.  Hal ini seperti halnya ketika mobil berada dalam persimpangan seperti pada Gambar 5.7.  Pengemudi harus memutuskan apakah harus menempuh jalur yang kanan atau yang kiri.

Pada struktur percabangan, program akan berpindah urutan pelaksanaan jika suatu kondisi yang disyaratkan dipenuhi. Pada proses seperti ini simbol flowchart Decision harus digunakan. Simbol decision akan berisi pernyataan yang akan diuji kebenarannya. Nilai hasil pengujian akan menentukan cabang mana yang akan ditempuh.

Struktur percabangan untuk masalah batasan umur.

Sebuah aturan untuk menonton sebuah film tertentu adalah sebagai berikut, jika usia penonton lebih dari 17 tahun maka penonton diperbolehkan dan apabila kurang dari 17 tahun maka penonton tidak diperbolehkan nonton.  Buatlah flowchart untuk permasalahan tersebut.

Penyelesaian:

Permasalahan diatas merupakan ciri permasalahan yang menggunakan struktur percabangan.  Hal ini ditandai dengan adanya pernyataan  jika .. maka ...(atau If ... Then dalam Bahasa Inggris. Flowchart penyelesaian masalah tampak pada Gambar 5.9. Pada gambar tersebut, tampak penggunaan simbol Decision. Pada simbol ini terjadi pemeriksaan kondisi, yaitu apakah usia lebih dari 17 tahun atau tidak.  Jika jawaban ya maka program akan menghasilkan keluaran teks “Silahkan Menonton”, sedangkan jika input usia kurang dari 17 tahun maka program akan menghasilkan keluaran teks “Anda Tidak Boleh Menonton”.

 

Contoh 5.16.  Struktur percabangan untuk perhitungan dua buah bilangan.

Dalam suatu perhitungan nilai P = X + Y.  Jika P positif, maka Q = X * Y, sedangkan jika negative maka nilai Q = X/Y.  Buatlah  flowchart untuk mencari nilai P dan Q

Penyelesaian:

Pada contoh ini input yang dibutuhkan adalah nilai X dan Y, sedangkan proses pemeriksaan kondisi dilakukan pada nilai P apakah positif (termasuk 0) ataukah negative.  Perhatikan  flowchart penyelesaian masalah pada Gambar 5.10.

Kedua contoh di atas (5.15 dan 5.16) merupakan contoh struktur percabangan sederhana yang melibatkan hanya satu percabangan.  Pada masalah-masalah yang lebih rumit, kita akan menjumpai lebih banyak percabangan.  Kita juga akan menjumpai suatu struktur percabangan berada di dalam struktur percabangan yang lain, atau yang biasa disebut nested (bersarang). Perhatikan contoh-contoh berikut.

Sebuah usaha fotokopi mempunyai aturan sebagai berikut :

-       jika yang fotokopi statusnya adalah langganan, maka berapa lembar pun dia fotokopi, harga perlembarnya Rp. 75,-

-       jika yang fotokopi bukan langganan, maka jika dia fotokopi kurang dari 100 lembar harga perlembarnya Rp. 100,-. Sedangkan jika lebih atau sama dengan 100 lembar maka harga perlembarnya Rp. 85,-.

Buat flowchart untuk menghitung total harga yang harus dibayar jika seseorang memfotokopi sejumlah X lembar. 

Penyelesaian:

Pada contoh ini, masalah terlihat lebih rumit.  Ada dua percabangan yang terjadi.  Yang pertama adalah pemeriksaan apakah status seseorang pelanggan atau bukan.  Kedua, apabila status seseorang bukan pelanggan, maka dilakukan pemeriksaan berapa jumlah lembar fotokopi, apakah lebih dari 100 lembar atau tidak.  

Pada soal ini kita juga menjumpai apa yang disebut sebagai nested. Perhatikan pernyataan pada syarat kedua dari persoalan di atas.jika yang fotokopi bukan langganan, maka jika dia fotokopi kurang dari 100 lembar harga perlembarnya Rp. 100

pernyataan jika yang kedua berada di dalam jika yang pertama.

Input yang dibutuhkan untuk permasalahan ini adalah status orang yang fotokopi dan jumlah lembar yang difotokopi.  Sehingga variable input yang digunakan adalah:

-       Status untuk status orang yang fotokopi

-       JLF untuk jumlah lembar yang difotokopi

Selain itu terdapat variable dengan nama HPP yang digunakan untuk menyimpan harga per lembar dan TH untuk menyimpan nilai total harga.  Perhatikan, variable Status bertipe data char, sehingga penulisannya harus menggunakan tanda “ “.

Flowchart penyelesaian masalah ini dapat dilihat pada Gambar 5.11.

Contoh 5.18.  Struktur percabangan bersarang untuk masalah kelulusan siswa.

Aturan kelulusan siswa pada mata pelajaran Pemrograman Web diterapkan

sebagai berikut :

-       Jika nilai ujian tengah semester (UTS) lebih besar dari 70 maka siswa dinyatakan lulus dan Nilai Akhir sama dengan nilai UTS.

-       Jika nilai UTS kurang atau sama dengan 70 maka siswa dinyatakan lulus jika Nilai Akhir lebih besar atau sama dengan 60 dimana Nilai Akhir = (nilai UTS x 40%) + (nilai UAS x 60%).

Buatlah flowchart penyelesaian masalah tersebut apabila output yang diinginkan adalah NIM, Nama Siswa, Nilai Akhir dan Status Kelulusan. 

Penyelesaian:

Pada contoh ini, ada dua percabangan. Yang pertama adalah pemeriksaan apakah nilai UTS siswa lebih dari 70.  Kedua, apabila nilai UTS tidak lebih dari 70, maka dilakukan pemeriksaan apakah nilai akhir lebih dari 60.

Input yang dibutuhkan untuk permasalahan ini adalah NIM, nama siswa, nilai UTS, dan nilai UAS.  Sehingga variable input yang digunakan adalah: NIM untuk Nomor induk siswa, nama untuk nama siswa, NUTS untuk nilai ujian tengah semester, dan NUAS untuk nilai ujian akhir semester.  Sedangkan variabel ouput terdiri dari NA yang digunakan untuk menyimpan nilai akhir dan Status untuk menyimpan status kelulusan.

5. Struktur Algoritma Pengulangan

Dalam banyak kasus seringkali kita dihadapkan pada sejumlah pekerjaan yang harus diulang berkali.  Salah satu contoh yang gampang kita jumpai adalah balapan mobil seperti tampak pada gambar 5.13.  Mobil-mobil peserta harus mengelilingi lintasan sirkuit berkali-kali sesuai yang ditetapkan dalam aturan lomba.  Siapa yang mencapai garis akhir paling cepat, dialah yang menang.

Pada pembuatan program komputer, kita juga kadang-kadang harus mengulang satu atau sekelompok perintah berkali-kali agar memperoleh hasil yang diinginkan.  Dengan menggunakan komputer, eksekusi pengulangan mudah dilakukan.  Hal ini karena salah satu kelebihan komputer dibandingkan dengan manusia adalah kemampuannya untuk mengerjakan tugas atau suatu instruksi berulangkali tanpa merasa lelah, bosan, atau malas.  Bandingkan dengan pengendara mobil balap, suatu ketika pasti dia merasa lelah dan bosan untuk berputar-putar mengendarai mobil balapnya.

Struktur pengulangan terdiri dari dua bagian :

1.     Kondisi pengulangan, yaitu syarat yang harus dipenuhi untuk melaksanakan pengulangan.  Syarat ini biasanya dinyatakan dalam ekspresi Boolean yang harus diuji apakah bernilai benar (true) atau salah (false)

2.     Badan pengulangan (loop body), yaitu satu atau lebih instruksi yang akan diulang.

Pada struktur pengulangan, biasanya juga disertai bagian inisialisasi dan bagian terminasi. Inisialisasi adalah instruksi yang dilakukan sebelum pengulangan dilakukan pertama kali. Bagian insialisasi umumnya digunakan untuk memberi nilai awal sebuah variable.  Sedangkan terminasi adalah instruksi yang dilakukan setelah pengulangan selesai dilaksanakan. Ada beberapa bentuk pengulangan yang dapat digunakan, masing-masing dengan syarat dan karakteristik tersendiri.  Beberapa bentuk dapat dipakai untuk kasus yang sama, namun ada bentuk yang hanya cocok untuk kasus tertentu saja.  Pemilihan bentuk pengulangan untuk masalah tertentu dapat mempengaruhi kebenaran algoritma.  Pemilihan bentuk pengulangan yang tepat bergantung pada masalah yang akan diprogram.

Struktur pengulangan dengan For

Pengulangan dengan menggunakan  For, merupakan salah teknik  pengulangan yang paling tua dalam bahasa pemrograman.  Hampir semua  bahasa pemrograman menyediakan metode ini, meskipun sintaksnya mungkin  berbeda.  Pada struktur For kita harus tahu terlebih dahulu seberapa banyak

badan loop akan diulang.  Struktur ini menggunakan sebuah variable yang  biasa disebut sebagai loop’s counter, yang nilainya akan naik atau turun selama  proses pengulangan.   Flowchart umum untuk struktur  For

Semoga ilmu ini bermanfaat ,
sebelum pergi like dlu dong :D

 

 

 

 

”Baik” apabila nilainya 70-84;

”Cukup” apabila nilainya 60-69;

”Kurang” apabila nilainya 0-59;

            dengan menggunakan perintah if-then.

Belajar CSS dengan mudah

 

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).
Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.
Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.
Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:
1. Metode Table
2. Metode Div
Manfaat dari CSS:

1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript.
5. Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

• Static –> posisi normal (default).
• Relative –> posisi elemen tergantung dari elemen yang lain.
• Absolute –> posisi elemen berpatokan pada jendela browser.
• Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:

• Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
• Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
• Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
• Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
• Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:
contoh penulisan css :

<html>
<head>
<style type = "text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = "header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
</body>
</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).

Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:
Penempatan CSS dalam HTML

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:

<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.
Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:

a.link1:link {
font-weight: bold; 
font-size: 12px; 
color: #C87C28; 
font-family: Times New Roman; 
text-decoration: none;
}
a.link1:visited {
font-weight: bold; 
font-size: 12px; 
color: #CC6600; 
font-family: Times New Roman; 
text-decoration: none;
}
a.link1:hover {
font-weight: bold; 
font-size: 12px; 
color: #C87C28; 
font-family: Times New Roman; 
text-decoration: underline
}
a.link1:active {
font-weight: bold; 
font-size: 12px; 
color: #C87C28; 
font-family: Times New Roman; 
text-decoration: none;
}
a.link2:link {
font-weight: bold; 
font-size: 12px; 
color: #663300; 
font-family: Arial, Helvetica, sans-serif; 
text-decoration: underline;
}
a.link2:visited {
font-weight: bold; 
font-size: 12px; 
color: #800000; 
font-family: Arial, Helvetica, sans-serif; 
text-decoration: none;
}
a.link2:hover {
font-weight: bold; 
font-size: 12px; 
color: #ff6600; 
font-family: Arial, Helvetica, sans-serif; 
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold; 
font-size: 12px; 
color: #ff6600; 
font-family: Arial, Helvetica, sans-serif; 
text-decoration: underline;
}

bila kurang lengkap buka yang ini :

                         ========>> di sini bray <<=======