Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan 2 CSS (Praktik)

    Diunggah oleh

    Arnita Fentrin
    38 tayangan39 halaman

    Judul Asli

    PPT pertemuan 2 CSS (praktik) (1)

    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
    38 tayangan39 halaman

    Pertemuan 2 CSS (Praktik)

    Diunggah oleh

    Arnita Fentrin

    Hak Cipta:

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

    UNIVERSITAS

    MUHAMMADIYAH
    SIDOARJO

    CSS
    Matakuliah Pemrograman Web

    Oleh:
    Septian Rahman Hakim, S.Kom, M.Pd
    Universitas Muhammadiyah Sidoarjo
    Pembahasan
    • Pengertian CSS

    • CSS (Font, Text, Color)

    • CSS – Image

    • CSS Layout

    • CSS Navigasi

    2
    Pengertian CSS
    • Singkatan dari Cascanding Style Sheet

    • Digunakan dalam kode HTML untuk menciptakan suatu kumpulan style


    menjadi lebih menarik dan mudah dikelola.

    • CSS dapat dituliskan pada bagian <body>, <head> suatu dokumen HTML atau
    diletakkan di sebuah file eksternal.

    • Perintah-perintah CSS dibatasi oleh tag <style> dan </style>

    3
    Contoh Sederhana

    4
    Selector
    • Adalah nama yang diberikan untuk setiap style berbeda yang dibuat. Di
    dalamstyle didefinisikan bagaimana setiap selector akan bekerja (font, color dan
    lain-lain.). Kemudian di dalam bagian body halaman web, selector tersebut
    dipanggil untuk mengaktifkan style yang telah didefinisikan.
    • Jenis-jenis Selector:
    Selector HTML
    Selector Class
    Selector ID

    5
    Selector HTML
    • Digunakan untuk mendefinisikan style yang berhubungan dengan tag HTML,
    melakukan redefinisi tag normal HTML
    • Syntax:
    SelectorHTML{
    Properti:Nilai;
    }

    6
    Contoh Selector HTML

    7
    Selector Class
    • Digunakan untuk mendefinisikan style yang dapat dipakai tanpa melakukan
    redefinisi tag HTML.
    • Syntax:
    ClassSelector {
    Properti:Nilai;
    }

    8
    Contoh Selector Class

    9
    Selector ID
    • Digunakan untuk mendefinisikan style yang berhubungan dengan suatu object
    memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer

    • Syntax:
    #IDSelector {
    Properti:Nilai;
    }

    10
    Contoh Selector ID

    11
    Komentar Dalam Style Sheet
    • Dalam pasangan tag <STYLE> dan </STYLE>, dapat memberikan suatu
    komentar yang membuat browser tidak memproses bagian dalam komentar
    tersebut.

    • Tag :

    /* dan */

    12
    Contoh Komentar

    13
    Style dalam file eksternal
    • CSS dapat didefinisikan untuk semua halaman hanya dengan menulis definisi
    CSS di dalam sebuah file teks yang selanjutnya dirujuk oleh setiap halaman
    web yang akan menggunakannya.

    • Dengan demikian jika suatu saat ingin dilakukan perubahan style yang berlaku
    untuk semua halaman Web maka yang diubah ada file teks eksternal tersebut.

    14
    Contoh File Eksternal
    • File style.css : File HTML :

    15
    Elemen-elemen CSS
     Font

     Text

     Color

     Link

    16
    Font
    Digunakan untuk mengatur
    tingkah-laku huruf (font).
    Elemen ini mempunyai
    beberapa properti. Satu
    properti dapat mempunyai
    beberapa nilai.

    17
    Contoh Font

    18
    Text
    Element text akan membuat tampilan teks
    menjadi lebih menarik

    19
    Contoh Text

    20
    Color
    Elemen color yang digunakan untuk mengatur warna teks dan background
    halaman web

    21
    Contoh Color

    22
    Properti Border Style
    • Properti border style berguna untuk mengatur bingkai suatu isi dalam halaman
    web.

    23
    Contoh Border Style

    24
    SPAN dan DIV
    • Dua tag yang sering dikombinasikan dengan selector class adalah <SPAN> dan
    <DIV>

    • Tag <SPAN> adalah "inline-tag" dalam HTML, berarti tidak ada pergantian
    baris (line break) yang disisipkan sebelum atau setelah penulisannya.

    25
    Contoh SPAN

    26
    • Tag <DIV> adalah "block tag" dalam HTML, berarti pergantian baris secara
    otomatis disisipkan untuk memberikan jarak antara blok yang dibuat dengan
    teks atau blok lain sebelum dan sesudahnya (seperti tag <P> atau <TABLE>).

    • Tag <DIV> sering digunakan untuk implementasi layer karena layer merupakan
    blok informasi terpisah. Tag <DIV> merupakan pilihan yang tepat saat
    membuat layer pada halaman web.

    27
    Contoh DIV

    28
    Image
    • CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada html.

    • Elemen ini mempunyai beberapa attribut.

    • Satu properti dapat mempunyai beberapa nilai.

    29
    Property Background Color
    • Properti background color digunakan untuk mengatur warna latar belakang.
    • Contoh :

    30
    Property Background Image
    • Tidak hanya warna yang bisa dijadikan sebagai latar belakang, tetapi juga
    gambar.
    • hal ini bisa dilakukan dengan menggunakan properti background-image

    31
    Layout Menu (Membuat Box Header)
    • Langkah 1: *) index.html
    *) style1.css

    32
    Membuat Style Text
    • Langkah 2 :
     Pada style1.css ditambahi:

     Pada index.html:

    33
    Navigasi Kanan dan Atas
    • Langkah 3 :
     Pada style1.css ditambahkan:

     Pada index.html ditambahkan:

    34
    Box Link
    • Langkah 4 :
     Pada style1.css ditambahkan:

     Pada index.html ditambahkan:

    35
    Buat Content
    • Langkah 5 :
     Pada style1.css ditambahkan:

     Pada index.html ditambahkan:

    36
    Hasil Akhir

    37
    Tugas Praktikum
    • Website yang telah anda buat pada saat Praktikum pertemuan 1 percantiklah
    dengan menggunakan CSS

    • Pengumpulan dilakukan di elearning pertemuan 2 tugas CSS.

    38

    Anda mungkin juga menyukai