Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi Praktikum Pemrog Web Dasar 2

    Diunggah oleh

    irfan
    2 tayangan20 halaman
    Materi Praktikum Pemrog Web Dasar 2

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Materi Praktikum Pemrog Web Dasar 2

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    2 tayangan20 halaman

    Materi Praktikum Pemrog Web Dasar 2

    Diunggah oleh

    irfan
    Materi Praktikum Pemrog Web Dasar 2

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 20
    Cascading Style Sheet (CSS) CSS adalah bahasa pemrograman web yang digunakan untuk menggambarkan presentasi semantik (tampilan dan format) dari dokumen yang ditulis dalam bahasa markup. Aplikasi yang paling umum adalah untuk gaya halaman web yang ditulis dalam format HTML dan XHTML yang telah dipelajari sebelumnya, CSS juga dapat diterapkan pada setiap jenis doukumen XML (Extensible Markup Language) (Sumber: http://en. wikipedia org/wiki/Cascading_Style_Sheets ). CSS dirancang untuk memungkinkan pemisahan konten dokumen (yang ditulis dalam HTML atau yang serupa) dari dokumen presentasi, termasuk elemen seperti tata letak, pewarnaan, dan tipografi (font). Pemisahan ini memberikan keuntungan antara lain: 1, Dapat meningkatkan aksesibilitas konten, 2. Memberikan lebih banyak fleksibilitas dan kontrol dalam spesifikasi karakteristik presentasi, 3. Memungkinkan beberapa halaman ke format berbagi, 4 ‘Mengurangi kompleksitas dan pengulangan dalam isi struktural (seperti dengan memungkinkan untuk desain web tanpa table (tableless)). Sintaks CSS memiliki aturan sebagai berikut: Selector Declaration Declaration @ {color:blue; font-size:12px; Property Value Property Value Gambar 1. Sumber: hitp//www. schools com/ess Keterangan: + Selector biasanya berupa clemen HTML yang ingin dibuat gaya (style). + Setiap deklarasi (declaration) terdiri dari properti (property) dan nilai (value). + Properti ini adalah atribut gaya yang ingin diubah nilainya. Selector ada 3 tipe (http://webdesign.about.com/od/beginningess/p/aacss2syntax.htm): 1, Type selector, jenis selector CSS untuk tag atau elemen HTML/XHTML. Untuk menggunakan tipe ini cukup ditulis nama tag HTML-nya. Contoh: Untuk style paragraf tag/elemen

    cukup ditulis: Pt color + green ; : 13 Untuk style heading tag

    cukup ditulis: a font-size + 1.2em 7 Untuk banyak tag dipisahkan tanda koma: py hl, he font family : Geneva, Arial, Helvetl Class selector, menentukan class untuk penugasan, Sebuah class selector CSS berlaku untuk banyak elemen sekaligus, atau sub-set elemen HTML tertentu, Untuk menggunakannya perlu mengedit tag HTML untuk mendefinisikan kelas pada elemen HTML yang diinginkan untuk ditata, Kemudian tentukan gaya dalam style sheet. Conteh: Untuk setiap tag XHTML ditambahkan atribut class:

    atau

    Class selector didefinisikan dengan titik (.) sebelum ditulis nama class-nya. Contoh: -bordered { border : 1px solid black ; } Bila menginginkan class yang spesifik pada elemen tertentu bisa ditulis: div.bordered { order : 2px solid red ; ) Perhatian: div. bord: di dalam satu kaitan tanpa dipisahkan spasi. ID selectors, untuk mendefinisikan elemen dengan atribut ID yang spesifik, Sebuah ID selector CSS berlaku untuk satu elemen dalam dokumen HTML. Sama seperti class selector, ID selector didefinisikan dalam HTML, tetapi tidak seperti kelas, masing-masing ID harus unik pada setiap halaman, Contoh: Gunakan atribut ID di setiap elemen HTML/XHTML.

    atau pordered"> ID selector didefinisikan dengan sebuah hash (#) atau pound-sign (#) sebelum ditulis nama id- nya, contoh: fhordered { lpx solid black ; border ) Untuk elemen spesifik, elemen tersebut dapat digabung dengan hastag (#) dan nama id-nya tanpa dipisahkan spasi, Contoh: div#bordered { border : 2px solid red ; ) ‘Untuk Group selector (banyak selector sekaligus) dapat dipisahkan tanda koma (,) Contoh: +p, div { color: #£00; + p.red, #sub ( color: #£00; } + p, .red, #sub, div nk { color: Penulisan sintaks CSS ada beberapa gaya 1, Inline Styles, di dalam dokumen HTML, informasi style pada elemen tunggal, ditentukan dengan menggunakan "gaya" atribut Contoh:

    text

    2. Embedded Styles, blok informasi CSS dalam HTML itu sendiri Contoh: Dose Shtm]> 2... 3 Membuat web dengan CSS

    Selamat datang di web saya yang sederhana ini.
    Ini digunakan untuk kepentingan belajar saat ini.
    Terima kasih.

    3. External Style Sheet, yaitu file CSS terpisah (style.css) yang dirujuk dokumen web. Contoh, diberikan 2 file: contoh.html dan contoh.css, contoh.html ="stylesheet” type="text/css" href.

    This header is blue 1 3 4 5. Gauu.This header is 36 pt 1 8.....Sp>This paragraph has a left margin of 50 pixels

    9. 1 8 Saal Ll...colortblue; ) 13.P 14. 15...margin-Left:50px; 1s.) Latihan, Jatihan! hte 1... 2....chtml> 3... 4. tle> 5. ta http-equi Type" content="text /htmL charset=UIP-8"> Hello world!
    Ini adalah halaman pertama saya membuat hal web dengan CSS.

    Berikut adalah paragraph pertama saya.

    Sebaiknya rancanglah lebih dulu atau gambarlah pada kertas berupa sketsa desain antar- mukanya. Dengan sketsa tersebut Anda dapat memperkirakan tata letak, tipografi, pewarnaan maupun navigasinya. Latihan2?.html
    header">
    19 kiri
    kanan
    4]... 48. Hasilnya seperti di bawah in 20 Latihan3.html (menggunakan File CSS terpisah, style.css) dtu Membuat laman web dengan CSS
    Al">Belajar CSS

    ="A2">

    Menu

      <1i>home
    • profil

    what is CS$?

    • CSS stands for Cascading Style Sheets
    • styles define how to display HTML elements
    • styles were added to HIML 4.0 to solve a problem
      25.
    • ixternal Style Sheets can save a lot of work
    • External Style Sheets are stored in CSS files

    21 Style.css body { background-color: ) p, lif font-family: Arial, small; font-size: margin: color: white; text-align: margin: Opx; colo: margin: red; ) 4kotak { wit! height: border: margin: } Al ( height: 200px; background-color: } 4A2 ( width: 200px; height: 400px; background-color: float: left; } #82 { width: 400px; height: 400px; background-color: float: } 600px; 600px; right; grey; monospace; 10px 10px 10px 10px; center; 10px 10px 10px 10px; px black solid; 0px autos blue; green; yellow; 22 Hasilnya seperti demikian: Belajar CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem Extemal Style Sheets can save a lot of work Extemal Style Sheets are stored in CSS files Latihan4 html Materi Quis I Pemrograman Web
    content
    28 ese con Coe 26 Latihans.html Light Template Css
    judul">Light Template CSs
    Template Sederhana Materi UIS Pemrograman Web
    31 Hasilnya sebagai berikut: calhost/repo(cssjtemplatel html Light Template CSS ‘Template Sederhana Mates! UTS Pemvograman Web Ketentuan Soal ‘Suatlan cosain tempiato woo cengan manggunakan CSS (Cascaaing Style Shoct) sopert in, dongan ukuran kanvas Teta (wath) 70opx, dan parjang (eight) kurang lebin 70Op%. Pada kanvas tera alas! srran Bacham + Header Goa + Menu ‘Nusoin Hats + Contant Fright Sidobar 1 mapas, Fight Sidabar 2 Elman Uting ‘an Footer Kerjakan langoung di komputer masing masing. \Wektu terbatas: 45 ment (untuk Desain Ternplate CSS in) & ‘49 monit untuk Seal Javasonpt. by Dosen Pemrograman Web Dasar 32

    Anda mungkin juga menyukai