Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi CSS (Dmi)

    Diunggah oleh

    fahmi
    44 tayangan21 halaman

    Judul Asli

    MATERI CSS (DMI)

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    44 tayangan21 halaman

    Materi CSS (Dmi)

    Diunggah oleh

    fahmi

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 21

    Style pada Multimedia

    Interaktif berbasis
    Halaman Web
    CASCADING STYLE SHEETS (CSS)

    Januar Fahmi, S.kom


    Pengertian
    CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah
    website
    Kita dapat mengontrol isi (konten) dan tampilan secara terpisah

    Penggunaan CSS dalam Pembuatan web akan memberikan beberapa manfaat :


    a. Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
    b. Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
    c. Mudah untuk mengubah tampilan hanya dengan mengubah file CSS.
    d. Dapat berkolaborasi dengan javascript
    e. Dapat digunakan dalam hamper semua jenis web browser.
    Sintaks dan Properti
    Bagian pertama sebelum tanda '{}' dinamakan selector,
    sedangkan yang diapit oleh '{}' disebut declaration yang
    terdiri dari dua unsur, yaitu property dan value.
    Selector dalam pernyataan di atas adalah h1,
    sedangkan color adalah property, dan #0789de adalah value.
    Metode Penulisan CSS
    Inline Style Sheet
    Embedded Style Sheet
    Inline Style Sheet
    CSS didefinisikan langsung pada
    tag HTML yang bersangkutan.

    Cara penulisannya cukup dengan


    menambahkan
    atribut style="..." dalam tag HTML
    tersebut. 

    Style hanya akan berlaku pada tag


    yang bersangkutan, dan tidak akan
    memengaruhi tag HTML yang lain
    Embedded Style Sheet
    Pada Embedded Style Sheet, CSS
    didefinisikan terlebih dahulu dalam
    tag <style> ... </style> di atas
    tag <body>. 

    Pada pendefinisian ini disebutkan


    atribut-atribut CSS yang akan digunakan
    untuk tag-tag HTML, yang selanjutnya
    dapat digunakan oleh tag HTML yang
    bersangkutan.
    Contoh efek <U>..</U> menjadi pengatur warna

    Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu warna
    tulisan.

    Hasilnya sama dengan kode berikut :

    demo

    Modul -4 : CSS 8
    Efek yang sama pada dua kode I dan U
    Tag <U> =under line
    Dan tag <I> = italic
    Diberi efek baru,
    yaitu warna merah
    hurufnya
    Tag <B> = bold,
    diberi efek warna
    hijau

    Klik untuk lihat hasil

    DEMO

    Modul -4 : CSS 9
    Beberapa efek pada satu kode B

    • Misalkan pada tag <B> akan


    dilekatkan efek warna, jenis
    huruf dan gaya huruf
    • Perintahnya CSS-style nya
    • B { color:lime;
    text-decoration: underline;
    font-family:Arial }

    Klik untuk lihat hasil

    Demo

    Modul -4 : CSS 10
    CSS-GLOBAL :Sekali Tulis, pakai bersama

     Kita dapat File : global.css


    mendefinisikan suatu file B {color: red; text-decoration: underline;
    *.css yang berisi kode- font-family: Arial }
    kode CSS I {color:blue; font-family:"Monotype Corsiva";
     File tersebut dapat diacu font-size:20}
    oleh setiap HTML
     Jika file HTML akan
    mengacu file CSS Digunakan oleh Css_global.html
    tersebut ditulis :
     <HEAD>
     <LINK REL="stylesheet"
    HREF="global.css"
     TYPE="text/css"> Dan Digunakan oleh Css_global2.html
     </HEAD>

    Modul -4 : CSS 11
    Selanjutnya 2 file html digabung dalam 1 frame

    Klik lihat hasil

    Terlihat :
    Efek dari tag <B> dan
    tag <I> yang
    didefinisikan dalam
    STYLE di file global.css

    demo

    Modul -4 : CSS 12
    Pewarisan
    • Jika kita definisikan suatu CSS yang berefek pada huruf, sementara dalam HTML
    juga didefinisikan efek huruf, dan jika tag CSS mengapit tag HTML maka
    pengaruh tag CSS akan mewaris (menurun) pada tag HTMLnya

    Efek warna huruf sebagai pengaruh


    tag CSS “menurun” pada tag HTML
    font,
    Klikyaitu
    lihatwarna
    hasil hijau

    demo

    Modul -4 : CSS 13
    Class

    • Class adalah suatu kelompok perintah CSS yang dapat digunakan pada tag tertentu
    HTML untuk memberi efek tambahan berdasar definisi class
    • <STYLE TYPE="text/css">
    .tanya {color: red}
    .jawab {color: blue}
    </STYLE>
    • Pada efek HTML dapat digunakan sbb :
    • <P CLASS=“tanya”> ini adalah teks yang terpengaruh efek
    class tanya</P>

    • Efek class dapat dilekatkan paad tag HTML apa saja, seperti pada tag <B>, tag <I> dst

    Modul -4 : CSS 14
    Contoh class (untuk ubah warna)

    Klik lihat hasil

    Class :merah berefek warna huruf


    menjadi merah dan class:biru
    berefek warna huruf menjadi
    biru. Dapat di-inset pada tag <P>
    dan tag <b>

    Modul -4 : CSS 15
    Contoh class (untuk ubah ukuran huruf)

    Klik lihat hasil

    Font-size : xx-small, x-small,


    small, medium, large, x-large, xx-
    large

    Modul -4 : CSS 16
    Contoh class (untuk ubah warna)

    Klik lihat hasil

    Class :merah berefek warna huruf


    menjadi merah dan class:biru
    berefek warna huruf menjadi
    biru. Dapat di-inset pada tag <P>
    dan tag <b>

    Modul -4 : CSS 17
    Positioning

    Klik lihat hasil demo

    Modul -4 : CSS 18
    Watermarking
     Watermarking adalah konsep
    mendesaign background layar dengan
    gambar tertentu
     Konsep ini dapat diimplementasikan
    melalui konsep class sebagai berikut :
     <STYLE TYPE="text/css">
    .nama_Class {background-
    image:
    url(“namagambar"); background-
    repeat: yes}
     </STYLE> </HEAD>
    demo
     CONTOH : klik ! Hasil
    klik
    Modul -4 : CSS 19
    Kesimpulan
    CSS merupakan teknik perancangan tampilan WEB untuk melengkapi kemampuan HTML dengan
    mendefinisikan tag-tag baru melalui konsep class dan pewarisan
    Beberapa Kepraktisan dalam mengatur format teks dapat diatasi dengan CSS seperi atur model
    huruf, besar huruf, gaya huruf, macam huruf posisi
    Konsep yang sangat bagus dlama menampilkan halaman web adlah konsep watermarking yang
    tidak dapat diatasi dengan HTML murni dan hanya dengan class CSS
    <STYLE TYPE=“text/css”>
    . Namaklass { background-image: url(namagambar) }
    </STYLE>
    Penggunaan konsep CSS, yaitu dengan tag STYLE juga dapat langsung dimasukkan dalam tag
    HTML sehingga pengaruhnya lokal pada tag tersebut
    TERIMA KASIH

    Januar Fahmi, S.kom

    Anda mungkin juga menyukai