Pengenalan CSS

LAPORAN II PRAKTIKUM PEMROGRAMAN WEB

Pengenalan CSS

Disusun untuk Memenuhi Matakuliah Praktikum Pemograman Web Yang Dibimbing oleh Bapak Didik Dwi Prasetya S.T, M.T

Oleh :Teguh Surgianto

1305336088224

UNIVERSITAS NEGERI MALANGFAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

S1 PENDIDIKAN TEKNIK INFORMATIKAFebruari 2015

A. KOMPETENSI DASAR Memahami struktur dasar CSS Mampu membuat dokumen CSS yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar CSS untuk menampilkan informasi.

B. ALOKASI WAKTU 4 JS (4 x 50 menit) C. DASAR TEORI

Pengenalan CSS CSS (Cascading Style Sheet) merupakan suatu bahasa program web yang digunakan untuk mengendalikan dan membangun berbagai komponen dalamn web yang digunakan untuk mengendalikan dan membangun berbagai komponen dalam web sehingga tampilan web akan lebihrapi, terstruktur dan seragam.

CSS merupakan pemrograman wajib yang harus dikuasi oleh setiap pembuat program (Web Programmer), terlebih lagi itu adalah pendesain web (web designer).

CSS saat ini dikembangkan oleh World Wide Web Consortium (W3C) dan menjadi bahasa standar dalam pembuatan web. CSS difungsikan sebagai penopang atau pendukung, dan pelengkap dari file html yang berperan dalam penataan kerangka dan layout.

CSS mampu di berbagai platform, maksudnya dapat dijalankan pada berbagai macam sistem operasi dan web browser. Secara umum, yang dilakukan oleh CSS adalah pengaturan layout, kerangka, teks, gambar, warna, tabel, spasi, dan lain sebagainya. Kita akan mengetahui masing-masing pengaturan tersebut pada pembahasan selanjutnya.

CSS (Cascading Style Sheet) dapat menerapkan suatu format ketika lebih dari satu style berlaku. Misalkan kita menginginkan semua paragraph harus memiliki font biru, namun secara khusus menginginkan satu kata agar berwarna merah. CSS bisa melakukan itu.

Mengapa Terpisah?

Terdapat dua alasan mengapa memisahkan file css dan html. Pertama, kita dapat menerapkan style yang sama untuk beberapa elemen tanpa menulis ulang kode. Kedua, kita dapat menerapkan style dan format yang sama (satu file css) untuk beberapa halamanHTML.

Satu selector dengan bayak properties Salah satu kelebihan CSS adalah kita dapat menerapkan beberapa format untuk satu selector. Semisal anda akan mengatur jenis font, warna, dan ukuran dari suatu paragraph, cukup tuliskan :

D. LATIHANa. Syntax css

1. 2.

3. 4.

5.

b. Output css

c. Penjelasan- Seperti yang tampil pada saat output, css berguna

untuk mempercantik halaman web kita- Pada css, kita dapat mempercantiknya dengan memakai

fungsi khusus yang dapat diterapkan kebanyak tempat sehingga mempermudah dan mempercepat proses

- Css dapat dipanngil dengan internal maupun ekternal.Pada program kali ini kita memakai yang ekternal yaitu dengan memanggilnya pada head html

- Pengatura css harus pada direktori yang sama dengan file htmlnya

2. Latihan 2a. Syntax html

lb. Output html

c. Syntax css

d. Output css

e. Penjelasan - Pada css, kita mengganti berdasarkan suatu area.- Area tersebut mempunnyai nama yaitu yang disebut

selector- Missal di dalam paragraph maka kita hanya perlu

memberinya dengan p- Untuk warna merah karena dia berada diantara span

maka di css kita ubah area span menjadi bewarna merah

- Untuk pewarnaan kita gunakan color lalu warna yang kita inginkan

- Untuk warna dapat dengan bahasa inggris atau dengan angka hexa


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Karena kita disuruh menggati daerah span menjadi

font cursive maka kita seleksi span lalu ganti fontnya dengan cursive. Dengan demikian daerah span akan berubah menjadi cursive


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Pada css kita dapat menggunakan lebih dari satu

fungsi pada suatu selector- Pada soal ada 3 ketentuan yaitu warn : hijau, font :

Garamond, dan size 24px- Karena itu kita masukan ketiga syarat tersebut pada

suatu selector


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Css dapat dipakai di banyak selector dan mempunyai

masing-masing fungsi.- Pada program kali ini, heading bewarna merah,

paragfraph memiliki font courier dan banckground pada span adalah kuning


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Kita mangganti h1 menjadi verdana, h3 fontnya

menjadi courier dan paragraph menjadi ungu


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Pada css kita juga mem-backup font kita. Artinya,

jika computer tidak mempunyai font yang kita sebutkan maka dia akan meneruskan ke font cadangan

- Pada css kita mempunyai 3 font yaitu cusive, Times ,dan san-serif

- Karena penuisan cursive salah (Cursive) maka dia akan melihat font kedua yaitu Times

- Karena tidak ada font Times (Time New Roman) maka dia akan melihat font ketiga

- Karena dalam computer terdapat font San-Serif maka dia akan memakai font ini


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Untuk mengganti background, kita memakai body- Jika kita mengganti aya yang ada di body, maka semua

akan berubah


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Pada program diatas kita memakai table- Pada table kita mengenal gari table atau yang disebt

border- Pada css kita memberikan border pada table yang

sebelumnya tidak mempunyai border


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Pada program diatas kita mengganti ukuran dan

menggati tempat dari button- Untuk pemberian block, kita lakukan di area img- Ukuran dan tampilan block dapat kita ubdah pada css


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- pada program diatas, kita lihat ada 3 div sehingga

kita pelu masuk pada div ke tiga untuk mengganti h3 pada div ketiga. Karena jika kita ketikan h3 maka semuanya akan berubah menjadi merah


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Pada css kita mengenal class yaitu mengganti semua

selector yang memiliki nama yang sama- Pada program diatas nama yang sama adalah mewah da

nada 2- Pada css class dipanggil dengan . di depan namanya- Kedua div berubah karena memiliki nama yang sama


b. Output html

c. Syntax css

d. Output css

e. Penjelasan- Selain class kita jugamemiliki ID yaitu dalam satu

class, ada bagian yang ingin kita rubah maka kita bisa merubahnnya secara terpisah

E. Studi Kasus

a. Syntax

b. Output

c. Penjelasan Program web diatas merupakan program yang akan

menampilkan kumupulan-kumpulan film favorit

Pada web diatas terdapat beberapa sub menu yaitu film action, adventure, horror, animation dan romance

Untuk membuat submenu digunakan fungsi tab

F. KESIMPULAN

1. CSS meruapakan salah satu cara untuk membuat tampilan webagar lebih menarik

2. Terdapat dua alasan mengapa memisahkan file css dan html.Pertama, kita dapat menerapkan style yang sama untuk beberapa elemen tanpa menulis ulang kode. Kedua, kita dapat menerapkan style dan format yang sama (satu file css) untuk beberapa halaman HTML.

3. Salah satu kelebihan CSS adalah kita dapat menerapkan beberapa format untuk satu selector.

G. DAFTAR PUSTAKA Modul 1 Praktikum Pemrograman WEB

Documents

Pengenalan CSS