Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pert 1

    Diunggah oleh

    Adelin Be
    20 tayangan6 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    20 tayangan6 halaman

    Pert 1

    Diunggah oleh

    Adelin Be

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    Pertemuan 1.

    Pengantar CSS
    CSS (Cascading Style Sheet) adalah bahasa style sheet yang digunakan untuk mengatur tampilan
    dokumen web. Dengan adanya CSS, memungkinkan kita untuk menampilkan halaman yang sama
    dengan format yang berbeda.
    Secara sederhana, CSS adalah sebuah metode yang digunakan untuk mempersingkat penulisan tag
    HTML, seperti font, color, text, dan tabel menjadi lebih ringkas, sehngga tidak terjadi pengulangan
    penulisan.
    Kegunaan CSS
    1. Mempersingkat penulisan tag HTML : kita tidak perlu mendefinisikan setiap tag dengan
    properti dan nilai yang sama.
    2. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan
    penulisan.
    3. Mudah dan cepat dalam me-maintenance : dikarenakan file CSS yang dbuat secara terpisah,
    maka Anda tidak perlu merombak seluruh elemen atau properti dalam HTML, cukup
    mengedit file CSS-nya saja.
    4. CSS bisa melakukan apa yang tidak bisa dilakukan leh HTML, misalnya memberikan warna
    pada input box atau scrollbar.

    Cara Penulisan CSS


    1. Inline Style Sheet
    Penulisan sintaks CSS di dalam elemen HTML.
    Contoh :
    <p style=”color: green”>
    Sintaks di atas memberikan warna hijau pada tag <p>
    2. Embedded (internal) Style Sheet
    Penulisan sintaks CSS dalam dokumen HTML menggunakan tag <style> dan </style>.
    Contoh :
    <style type=”text/css”>
    H1 {color: red}
    </style>

    3. Linked (eksternal) Style Sheet


    Penulisan skrip CSS di halaman yang berbeda atau terpisah dari HTML. Untuk
    menghubungkan antara skrip css dengan dokumen HTML, kita hanya perlu melakukan link
    ke file CSS yang telah dibuat. Metode ini menggunakan tag <link rel> yang ditemptakan
    pada bagian tag <HEAD>.
    Keuntungan Linked Style Sheet adalah kemudahan dalam mengedit skrip CSS, karena hanya
    file CSS saja yang kita ubah.
    Contoh :
    <link rel=”stylesheet” type=”text/css” href=www.webgue.com/global.css>

    Kita bisa menggunakan keyword @import untuk menggantikan metode <link rel> seperti
    contoh berikut :
    <style type=”text/css”>
    @import url(htttp://www.webgue.com/global.css);
    </style>

    Kedua sintaks diatas mengacu lokasi file css yag digunakan terletak pada www.webgue.com
    dengan nama file global.css.

    Aturan Penulisan CSS


    CSS memiliki aturan penulisan sebagai berikut :
    1. Selector: yang terdiri dari Tag, Class, Id dan Pseudo yang digunakan sebagai pemisah antar
    elemen. Bagian pertama sebelum tanda “{}” dinamakan selector
    2. Declaration: untuk mendefinisikan properti dan value yang akan digunakan pada selector.

    Bentuk Penulisan :
    Selector { property : value}
    Contoh :
    h1 { color: #0000FF; }

    Keterangan:
    Selector = h1
    Properti = color
    Value = #0000FF
    Seluruh elemen (tag) HTML bisa dijadikan sebagai selector.

    Komentar pada CSS


    Komentar diberikan pada sebuah skrip untuk menjelaskan sesuatu. Komentar pada CSS
    menggunakan :
    /* isi komentar */

    Contoh :
    H1 {
    color: red; /* memberikan warna merah pada heading 1 */
    }

    Menggunakan Adobe Dreamwaver


    Untuk mendesain halaman web dan menerapkan sintaks css, kita memerlukan sebuah web editor,
    salah satunya yaitu Adobe dreamwaver CS3.

    Langkah-langkah mengakses adobe dreamwaver :

    1. Klik Start menu


    2. Pilih All Program
    3. Cari icon adobe dreamwaver CS3, kemudian klik
    4. Tunggu proses loading, kemudian akan muncul jendela adobe dreamwaver CS3, pilih HTML
    untuk menampilkan lembar kerja HTML.

    5. Untuk menuliskan kode-kode HTML, klik bagian code pada lembar kerja dreamwaver

    6. Untuk mengetik kode-kode CSS yang bersifat eksternal (Linked CSS) maka pada lembar kerja
    Dreamwaver, klik menu File -> New -> pilih CSS -> klik create
    Praktikum
    1. Membuat halaman web sederhana, menggunakan embedded (internal) CSS
    a. Buka lembar kerja HTML dan sisipkan kode html berikut :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Latihan Menggunakan Embedded CSS</title>
    </head>
    <body>
    <h1> Cascading style SHEET (CSS) </h1>
    <p> CSS (Cascading Style Sheet) secara sederhana adalah sebuah metode yang digunakan untuk
    mempersingkat penulisan tag HTML, seperti font, color, text, dan tabel menjadi lebih ringkas
    sehingga tidak terjadi pengulangan penulisan. CSS adalah bahasa style sheet yang digunakan
    untuk mengatur tampilan dokumen. Dengan adanya CSS, memungkinkan kita untuk
    menampilkan halaman yang sama dengan format yang berbeda. CSS sendiri merupakan sebuah
    teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada
    tahun 1996. </p>
    <p> Beberapa kemudahan dan manfaat CSS membuat CSS sangat populer dikalangan web
    desainer. CSS dapat mempersingkat penulisan tag HTML. dimana kita tidak perlu mendefinisikan
    setiap tag dengan properti dan nilai yang sama. CSS juga mempercepat proses rendering atau
    pembacaan HTML karena tidak terdapat pengulangan penulisan. </p>
    </body>
    </html>
    b. Kemudian simpan dengan nama file latihan1.html
    c. Kemudian lihat hasil sementara pada web browser

    d. Kemudian sisipkan kode CSS berikut pada bagian HEAD

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Latihan Menggunakan Embedded CSS</title>
    <style type="text/css">
    body { background-color:#CCCC99; }
    h1 { color:#990066}
    p { color:#CC3300}

    </style>
    </head>

    e. Kemudian simpan ulang dokumen, dan lihat hasilnya pada web browser

    f. Terlihat terjadi perubahan pada style dokumen yaitu warna pada background, h1 dan p.

    2. Latihan Embedded CSS ke 2


    a. Save as dokumen HTML latihan1.html menjadi latihan2.html
    b. Pada latihan2.html, tambahkan kode html berikut :

    <h1> Apa itu JQuery </h1>

    <p> JQuery adalah librari JavaScript yang memungkinkan kita untuk membuat
    program web pada suatu halaman web, tanpa harus secara eksplisit kita
    menambahkan event atau pun properti pada halaman web tersebut.</p>

    <p> JQuery dikembangkan pertama kali oleh John Resig, yang dibuat lebih
    ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini.
    Secara pemrograman, JQuery memiliki kemiripan seperti Prototype.</p>
    c. Simpan ulang dokumen, kemudian lihat hasilnya pada web browser.

    d.

    Anda mungkin juga menyukai