Scribd Logo
Unggah

Selamat datang di Scribd!

  • Bab 2a Dasar Css1

    Diunggah oleh

    Gumilar Pratama
    13 tayangan17 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPT, 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 PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    13 tayangan17 halaman

    Bab 2a Dasar Css1

    Diunggah oleh

    Gumilar Pratama

    Hak Cipta:

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

    Modul-4 :

    Cascading Style Sheet (CSS)

    Mempelajari dasar-dasar CSS :


    Inheritance, class, positioning dan
    watermarking

    1
    Dalam modul ini akan dipelajari:

    1. Apa CSS
    2. Text formating (color, size)
    3. Pewarisan
    4. Class
    5. Positioning
    6. Watermarking

    2
    1. Apa itu CSS
     CSS = Cascading Style Sheet adalah suatu teknik penulisan kode untuk
    memperindah dan mempermudah dalam pengkodean HTML dengan tujuan
    untuk memperindah tampilan situs
     CSS dimulai dengan :

    <STYLE TYPE="text/css">
    NamaKODeBaru { Parameter : nilai }
    </STYLE>

     Sebagai contoh untuk kode HTML <B>..</B> artinya adalah cetak tebal pada
    teks yang terletak diantaranya. Dengan CSS kita dapat mendefinisikan
    <B>..</B> agar memiliki efek tambahan sesuai yang kita inginkan, misalnya
    efek terhadap warna huruf.
     Contoh : <Style TYPE=“txt/CSS”
    B {color=red}
    </Style>

    3
    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

    4
    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

    5
    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

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

    Dan Digunakan oleh Css_global2.html

    7
    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

    8
    3. 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
    Klik lihat hasil
    font, yaitu warna hijau

    9
    4. 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

    10
    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>

    11
    Contoh class (untuk ubah ukuran huruf)

    Klik lihat hasil

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

    12
    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>

    13
    5. Positioning

    Klik lihat hasil

    14
    6. 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>
    Hasil
     CONTOH : klik ! klik

    15
    Rangkuman

     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

    16
    Latihan

    1. Buatlah gambar dari


    windows search seperti
    gambar dog sebelah ini
    2. Namakan gambar tersebut
    dengan dog2.bmp
    3. Gunakan gambar
    dog2.BMP tersebut
    sebagai watermarking
    dalam menampilkan tulisan
    seperti dalam gambar
    berikutnya
    4. Atur dalam konsep class
    sedemikian sehingg huruf
    berwarna magenta dan
    berukuran 20

    17

    Anda mungkin juga menyukai