CSS Syntax

Contoh

• Lihat pada  contoh 1
• Lihat pada  contoh 2

---

CSS Syntax

aturan CSS terdiri dari dua garis besar utama :  selector, dan satu atau lebih deklarasi:



selector biasanya adalah elemen HTML yang bisa diberi style.
setiap declaration terdiri dari property dan value.
property adalah atribut style attribute yang bisa diganti.setiap  property mempunyai nilai.

---

contoh CSS

deklarai CSS selalu diakhiri dengan tanda titik koma ( ; ), dan grup dari deklarasi dikelilingi oleh tanda kurung keriting }:

p {color:red;text-align:center;}

untuk membuat CSS mudah dibaca, bisa juga meletekkan syntax css tiap garis satu deretan seperti ini

Example p { color:red; text-align:center; } cobalah sendiri »

---

komentar di  CSS

komentar digunakan untuk menjelaskan kode dan bisa saja menolong disaat ketika ingin mengedit source code dikemudian hari.komentar diabaikan oleh browser.
komentar CSS dimulai dengan "/*", dan berakhir dengan "*/":

/*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

CSS

jadi apa itu  CSS?

• CSS adalah kepanjangan dari  Cascading Style Sheets
• Styles menetapkan bagaimana untuk menampilkan HTML elements
• Styles ditambahkan pada  HTML 4.0 untuk menyelesaikan suatu permasalahan
• External Style Sheets bisa menyelesaikan beberapa masalah
• External Style Sheets disimpan pada  CSS files

---

CSS Demo

dokumen HTML document bisa ditampilkan dengan styles yang berbeda : lihat bagaimana cara kerjanya

---

Styles menyelesaikan permasalahn besar

HTML tidak pernah ditujukan untuk mengandung tags yg menformat suatu dokumen
HTML ditujukan untuk mendefinisikan konten dari suatu dokumen seperti:
<h1>ini adalah heading</h1>
<p>ini adalah paragraf.</p>
ketika tags seperti <font>, dan atribut color ditamkbahkan pada  spesifikasi HTML 3.2, itulah permulaan mimpi buruk bagi   web developers. mengembangkan web site yg besar, dimana informasi fonts and color information ditambhakan untuk setiap halaman, menjadi proses yang mahal dan lama.
untuk menyelesaikan permasalahan ini ,  World Wide Web Consortium (W3C) menciptakan CSS.
di HTML 4.0, semua jenis  format bisa di hilangkan dari dokumen HTML, dan disimpan pada file css secara terpisah .
semua browsers mendukung CSS saat ini.

---

CSS bisa menghemat pekerjaan!

CSS menentukan elemen BAGAIMANA  HTML untuk ditampilkan.
Styles biasanya disimpan di file external.css . External style sheets memungkinkan untuk mengganti tampilan dan layout dari semua halaman pada website,dengan hanya mengedit satu file css saja !

HTML AUDIO

sampai saat ini, belumlah ada suatu standar untuk memutar audio pada halaman web.Sekarang, hampir semuanya audio dimainkan melalui suatu pluggin (seperti flash).tapi bagaimanapun juga tidak semua jenis browser mempunyai pluggin yang sama.HTML5 menetapkan suatu standar yang menyertakan audio, dengan elemen audio.elemen audio bisa memainkan file sound maupun audio stream.

Audio Formats

saat ini, ada 3 jenis format utama untuk elemen audio:

Format	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	Tidak	Ya	Ya	Ya	Tidakl
MP3	Ya	Tidak	Tidak	Ya	Ya
Wav	Tidak	Ya	Ya	Ya	Ya

Bagaimana Memakainya

untuk memainkan  audio file dalam HTML5:

<audio src="song.ogg" controls="controls"> </audio>

atribut control digunakan untuk menambah kontrol play,pause,dan volume
masukkan  konten diantara  <audio> dan </audio> tag untuk browsers yang tidak mendukung elemen audio.

Contoh

<audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio>

Coba Sendiri »


contoh diatas menggunakan file jenis Ogg , dan akan bisa ditampilkan  pada  Firefox, Opera dan Chrome.
untuk membuat audio bekerja pada Internet Explorer dan Safari, tambahkan audio file dari tipe Mp3 nya.

contoh <audio controls="controls">   <source src="song.ogg" type="audio/ogg" />   <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> Coba sendiri »

---

All <audio> Attributes

Attribute	Value	Description
autoplay	autoplay	membuat audio bermain secara otomatis
controls	controls	menentukan kontrol apa yg akan ditampilkan misalnya seperti tombol play
loop	loop	menentukan apakah  audio akan bermain lagi (looping) setelah selesai terputar
preload	preload	menentukan apakah audio akan terisi (load) pada page load dan siap untuk dijalankan
src	url	menentukan URL dari suatu audio untuk diputar atau play

HTML5 VIDEO

sebelumnya check dahulu browser anda disini untuk melihat apakah web browser anda mendukung features html5video .

Silahkan check browser anda apakah terdukung oleh html5

---

untuk menampilkan video di HTML5:

<video controls="controls" src="movie.ogg">
</video>

atribut controls berfungsi untuk menambahkan play, pause, dan volume controls.
anda bisa menyertakan  atribut lebar dan tinggi. anda bisa menyertakan isi diantara <video> </video> bagi tampilan untuk browser yang tidak mensuport html5

Example

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

 coba latih

 <video> Attributes

Attribute	Value	Description
audio	muted	menentukan nilai default dari audio. saat ini, hanya "muted"
autoplay	autoplay	memutar video secara otomatis
controls	controls	bila tersetting, controls akan ditampilkan , seperti tombol play
height	pixels	mengatur  tinggi dari  video player
loop	loop	bila tersetting, video akan diputar lagi sesaat video telah selesai
poster	url	Specifies the URL of an image representing the video
preload	preload	bila disetting, the video akan di loaded pada  page load, dan siap untuk dijalankan. Ignored bila "autoplay" terset
src	url	URL dari video video untuk diputar
width	pixels	menentukan lebar video player

HTML 5

HTML5 adalah generasi terbaru dari html  tutorial berikut akan memberikan beberapa keistimewan dari html5 ini Coba Latihan

Apakah itu HTML5?

HTML5 akan menjadi standar baru untuk  HTML, XHTML, dan HTML DOM.

HTML versi sebelumnya dibuat pada tahun 1999. web sudah banyak berubah semenjak itu, HTML5 masi sedang dalam tahap pengembangan namun web browser saat ini sudah banyak yg menanamkan feature html5.

Bagaimana HTML5 dibuat?

HTML5 adalah bentuk kerja sama antara World Wide Web Consortium (W3C) dengan Web Hypertext Application Technology Working Group (WHATWG).

WHATWG telah banyak melakukan pekerjaan berhubungan dengan web forms dan applications, dan W3C dengan XHTML 2.0. pada tahun 2006, mereka telah memutuskan untuk bekerja sama  dan menciptakan  versi baru dari HTML.

beberapa aturan baru dari HTML5:

• feature baru didasarkan pada   HTML, CSS, DOM, dan JavaScript
• meminimalkan penggunaan atas external plugins(seperti Flash)
• error handling yang lebih baik
• markup yang lebih banyak untuk mengganti scripting
• HTML5 merupakan device independent 
• proses pengembangan haruslah terbuka untuk publik

New Features

beberapa feature terbaru dari HTML5:

• elemen canvas untuk menggambar
• elemen video dan  audio untuk media playback
• support yang lebih baik untuk penyimpanan local secara offline
• isi content elemen yang lebih spesifiki, seperti article, footer, header, nav, section
• kontrol form ,seperti calendar, date, time, email, url, search

Browser Support

HTML5 belumlah memiliki standart secara official, dan belum ada browsers yang mendukungl HTML5 secara penuh.

tapi browsers seperti  (Safari, Chrome, Firefox, Opera, Internet Explorer) telah berlangsung secara kontinu untuk menambahkan feautre HTML5 di versi terakhir mereka.

selamat datang di blog ini

Halo semuanya selamat datang di blog ini. pertama - tama saya ucapkan terimakasih banyak karena telah berkunjung ke blog ini , www.pelajaranweb.blogspot.com dibuat dengan tujuan untuk memberikan pelajaran tentang web. yg dimana saya rasa akan sangat berguna bila kita saling membagi ilmu, karena selain bisa menambah pengetahuan kita dan kita juga bisa lebih mendalami ilmu tersebut.saya harapkan saran dan kritik dari anda semua untuk sedianya memberikan komentar di blog ini, yang bisa membuat saya membangun blog ini menjadi lebih baik. oke ikat sabuk pengaman anda dan selamat datang silahkan nikmati perjalanan anda menelusuri ini

Our regards