Scribd Logo
Unggah

Selamat datang di Scribd!

  • Cssku

    Diunggah oleh

    Zico Aritonang
    15 tayangan10 halaman
    Ada rss guys

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Ada rss guys

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    15 tayangan10 halaman

    Cssku

    Diunggah oleh

    Zico Aritonang
    Ada rss guys

    Hak Cipta:

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

    INSTITUT TEKNOLOGI DEL

    MATERI PRAKTIKUM
    1131104 – Pengembangan Situs Web
    SEMESTER I TAHUN AJAR 2019/2020

    Session Date : 30 September 2019


    Semester : 1
    Courses : Pengembangan Situs Web I
    Week/Session : 4/2
    Key Topics : Cascading Style Sheet (CSS)
    Activity : Mahasiswa menambahkan style melalui CSS
    Duration : 110 menit
    Goal : Mahasiswa mampu memahami konsep cascading style sheet yang
    digunakan pada pembuatan situs web.

    CSS adalah salah satu bahasa pemrograman desain web (style sheet languages) yang mengontrol
    format tampilan sebuah halaman web yang ditulis dengan bahasa penanda (markup language).
    Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang
    bahasa pemrograman CSS bisa diaplikasikan untuk segala dokumen XML, termasuk SVG dan XUL.

    Aturan dasar untuk CSS antara lain:


    1. Setiap statement harus mempunyai selector dan deklartor. Deklarator harus dibuat setelah selector
    dan diapit 2 buah kurung kurawal (buka dan tutup).
    2. Properti dari deklarator dipisahkan menggunakan titik koma (;)
    3. Setiap property mempunyai nama dan diikuti oleh titik dua dan selanjuatnya nilai (value) dari
    properti tersebut. Terdapat banyak tipe dari nilai ini, tetapi setiap properti hanya bisa mengambil
    beberapa value seperti yang telah diatur pada spesifikasi CSS. Spesifikasi ini akan memberitahu
    nilai yang mungkin diletakkan pada setiap property
    4. Beberapa properti bisa menampung berberapa nilai, seperti pada contoh pada gambar 3.1 yakni
    font-family, nilai baru harus dipisah dengan koma dan spasi.
    5. Beberapa nilai mempunyai ukuran tertentu seperti pt (point), px(pixel), seperti pada font-size.
    Anda tidak dapat member spasi antara nilai dan ukurannya seperti 45pt / 45px.
    6. Spasi dapat digunakan untuk memudahkan anda mengubah atau memperbahuri file CSS anda.

    Lingking and Embedding CSS


    Ada beberapa cara untuk memasukkan CSS ke dalam satu dokumen HTML antara lain:
    1. Menyisipkan CSS langsung ke dalam tag HTML

    1131104/PSW/W04S02 30/09/2019 08.38 1


    2. Mengembed CSS ke HTML

    3. Menghubungkan file CSS yang terpisah ke HTML

    4. Mengimpor file CSS di dalam CSS

    LANGKAH-LANGKAH PRAKTIKUM:
    Pada praktikum week 3 sesi 2, Anda sudah menggunakan CSS untuk menambahkan style pada halaman
    web Warung Nasi Tegal. Pada praktikum tersebut Anda memasukkan CSS dengan mengembed CSS ke
    file HTML yang diletakkan pada bagian <style></style> yang ada di antara tag
    <head>. Beberapa bagian yang Anda atur style nya adalah body, wrapper, header, section, footer, aside,
    nav, article, figure, figcaption, dan hgroup. Anda dapat memperbaiki halaman web Warung Nasi Tegal
    setelah melakukan langkah-langkah praktikum di bawah ini, untuk mendapatkan pemahaman dasar
    mengenasi penggunaan CSS.

    Buat folder dengan nama w04s02_NIM dan letakkan di dalamnya file-file dengan isi sbb ini :
    a. Contoh style sheet untuk properti latar :
    Buat sebuah file dengan nama indexLatarX.html (X diganti dengan angka yang ditunjukkan
    pada CSS). Kemudian isi style pada HTML dengan contoh yang ada di CSS. Contoh untuk
    indexlatar1.html isinya sbb : style=”background-color:green”;. Lakukan percobaan ini
    dengan seluruh style yang ada di dalam CSS. Untuk gambar1.jpg, gunakan photo diri kalian
    dengan ukuran yang sudah di resize menjadi 30px X 40px.

    1131104/PSW/W04S02 30/09/2019 08.38 2


    b. Contoh style sheet untuk properti teks :
    Buat sebuah file dengan nama indexTeksX.html (X diganti dengan angka yang ditunjukkan
    pada CSS Teks, untuk CSS Font tuliskan isi keseluruhannya). Isikan elemen style pada HTML
    di bawah ini dengan contoh yang ada di CSS Teks. Kemudian tuliskan elemen p di bawah ini
    di dalam elemen body. Lakukan percobaan ini dengan seluruh style yang ada.

    1131104/PSW/W04S02 30/09/2019 08.38 3


    CSS

    c. Contoh style sheet untuk properti font :


    Buat sebuah file dengan nama indexFontX.html (X diganti dengan angka yang ditunjukkan
    pada CSS Font). Isikan elemen style pada HTML di bawah ini dengan contoh yang ada di CSS
    Font. Kemudian tuliskan elemen p di bawah ini di dalam elemen body. Lakukan percobaan ini
    dengan seluruh style yang ada.

    CSS

    1131104/PSW/W04S02 30/09/2019 08.38 4


    d. Contoh style sheet untuk properti list (daftar) :
    Buat sebuah file dengan nama indexListX.html (X diganti dengan angka yang ditunjukkan
    pada CSS List). Isikan elemen style pada HTML di bawah ini dengan contoh yang ada di CSS.
    Kemudian tuliskan elemen ul di bawah ini di dalam elemen body. Lakukan percobaan ini
    dengan seluruh style yang ada.

    CSS

    e. Contoh style sheet untuk properti anchor/link (tautan) :


    Buat sebuah file dengan nama indexLink.html. Buat juga sebuah file yang lain dengan nama
    styleku.css dan tuliskan style CSS di bawah ini. Isikan elemen link pada HTML di bawah ini
    dengan nama dari file CSS tsb. Kemudian tuliskan elemen a pada HTML di bawah ini di
    dalam elemen body.

    1131104/PSW/W04S02 30/09/2019 08.38 5


    f. Contoh style sheet untuk properti block (border, margin dan padding) menggunakan
    selector class:
    Buat sebuah file dengan nama indexBlok.html. Buat juga sebuah file yang lain dengan nama
    mystyle.css dan tuliskan style CSS di bawah ini (Perhatian : yang bukan style sheet ubah jadi
    komentar). Isikan elemen import pada HTML di bawah ini dengan nama dari file CSS tsb.
    Kemudian tuliskan elemen p pada HTML di bawah ini di dalam elemen body.

    1131104/PSW/W04S02 30/09/2019 08.38 6


    g. Contoh style sheet untuk bentuk kotak/blok :
    Kali ini anda akan membuat sebuah box yang ukurannya telah ditentukan, kita beri nama ini
    sebagai box model. Simpan file berikut ini dengan nama indexKotak1.html:

    Tambahkan properti “background-color” dengan value “lightgreen” pada kotak di atas,


    dapatkah anda memperoleh hasil seperti berikut ini :

    h. Contoh style sheet untuk bentuk kotak yang memiliki objek lain :
    Dengan menggunakan kotak yang telah didefinisikan sebelumnya, sekarang hapus objek
    tulisan di dalam elemen div (Ini model kotak) dan buat 2 objek baru yaitu elemen p dan img.
    Simpan dengan nama indexKotak2.html

    1131104/PSW/W04S02 30/09/2019 08.38 7


    Tambahkan properti “float” pada style kucing dengan value “left” pada kotak di atas, dapatkah
    anda memperoleh hasil seperti berikut ini :

    Ganti value “left” dengan “right”, apakah yang terjadi pada gambar tersebut sekarang?
    Penjelasan: “Pada dasarnya, properti float memungkinkan kita untuk mengambil elemen,
    menghapusnya dari aliran normal halaman, dan memposisikannya ke kiri atau kanan elemen
    induknya.”

    1131104/PSW/W04S02 30/09/2019 08.38 8


    i. Contoh style sheet untuk properti position :
    Buat sebuah file dengan nama indexKotakWarna1.html. Isikan elemen style pada HTML di
    bawah ini dengan contoh yang ada di CSS.

    1131104/PSW/W04S02 30/09/2019 08.38 9


    - Tambahkan properti “position” pada style div-1 dengan value “static” pada kotak di atas,
    apa yang terjadi?
    - Ubah properti “position” pada style div-1 dengan value “relative” pada kotak di atas
    seperti gambar di bawah ini, apa yang terjadi?

    - Kembalikan apa yang telah anda ubah, kemudian tambahkan style berikut ini pada style
    div- 1a, apa yang terjadi?

    - Bagaimana menurut anda perbedaan style position dengan style float ?

    Selamat Belajar & Good Luck!

    1131104/PSW/W04S02 30/09/2019 08.38 10

    Anda mungkin juga menyukai