Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
KOMPUTER APLIKASI IT XHTML & CSS MODUL 02
2
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01
APA ITU CSS ? Merupakan Cara Standard untuk melakukan pemformatan/styling pada XHTML (Halaman Web). Dengan CSS, designer dapat dengan mudah melakukan pemformatan Huruf, Teks, Alignment, Positioning, Border, Background, dan sebagainya. CSS menupakan standard pemformatan dari W3C dikarenakan kekeliruan HTML-3 dalam penggunaan Tag untuk melakukan styling.
3
Memiliki Struktur seperti: h { font-size: 14px; color: red; }
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CIRI-CIRI DOKUMEN CSS Memiliki Struktur seperti: h { font-size: 14px; color: red; } Merupakan File Teks Biasa yang dapat di edit dengan text editor seperti Notepad, UltraEdit, Notepad+, Gedit, VIM, dan sebagainya. Memiliki ekstensi .css pada nama filenya.
4
nama-properti : isi-property; nama-properti : isi-property-2
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 SINTAX “STYLE” CSS Style CSS Memiliki Sintax Dasar: nama-properti : isi-property; nama-properti : isi-property-2 Nama Properti diikuti titik dua “:” lalu diikuti isi properti, dan diikuti titik koma “;” bila terdapat properti selanjutnya.
5
Dimana Harus Menambahkan CSS:
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 PELETAKAN CSS Dimana Harus Menambahkan CSS: Di dalam tag dengan menggunakan attribut style. Di dalam tag <style> tersendiri. Di dalam file .CSS tersendiri.
6
Contoh CSS Attribute Style:
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CSS ATTRIBUTE STYLE Contoh CSS Attribute Style: <b style=“color:red”>Merah</b> <u style=“font-size:40px; background: blue; color: white”>Ukuran Besar, Latar Biru</u>
7
Penjelasan Contoh: <span style=“color:red”>Merah</span>
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CSS ATTRIBUTE STYLE Penjelasan Contoh: <span style=“color:red”>Merah</span> Pada contoh ini CSS berada di dalam attribut style (berwarna merah), menjelaskan properti “color” yang berisi “red” jadi tag b ini akan memiliki warna huruf merah.
8
Penjelasan Contoh: <u style=“font-size:40px; background: blue;
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CSS ATTRIBUTE STYLE Penjelasan Contoh: <u style=“font-size:40px; background: blue; color: white”>Ukuran Besar, Latar Biru</u> Pada contoh ini, properti font-size berisi 40px, background berisi blue, dan color berisi white.
9
CONTOH <html> <head>
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CONTOH <html> <head> <title>Latihan CSS 1</title> </head> <body> <b style=“color:red”>Merah</b> <u style=“font-size:40px; background: blue; color: white”>Ukuran Besar, Latar Biru</u> </body> </html>
10
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01
CONTOH
11
CSS Memiliki Sintax Dasar: Selector{ nama-properti : isi-property;
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 SINTAX “TAG STYLE” CSS CSS Memiliki Sintax Dasar: Selector{ nama-properti : isi-property; nama-properti : isi-property-2 } Dimana selector adalah elemen tag yang akan di format dengan css.
12
CONTOH KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 <html>
<head> <title>Latihan CSS 2</title> <style> b { color: green; text-decoration: underline; } </style> </head> <body> Latihan menggunakan tag Style untuk menerapkan <b>Pemformatan dengan CSS</b> </body> </html>
13
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01
CONTOH
14
TERIMA KASIH DAN SELAMAT BELAJAR PENUTUP
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 PENUTUP TERIMA KASIH DAN SELAMAT BELAJAR
Presentasi serupa
