SlideShare a Scribd company logo
MODUL PERTEMUAN 5 CSS
PEMROGRAMAN BERBASIS WEB
LAPORAN CSS
DIBUAT OLEH :
NAMA : ACHMAD NUR FADILLAH
NIM : 1210651001
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014
MODUL CSS
Definisi CSS :
Apa itu CSS ?
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style
sheet language) yang mengontrol format tampilan sebuah halaman web yang
ditulis dengan menggunakan penanda (markup laguage). Biasanya CSS
digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi
sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG
dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen
yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkann daya
akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol
dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan,
memungkinkan untuk membagi halaman untuk sebuah formatting dan
mengurangi kerumitan dalam penulisan kode dan struktur dari konten,
contohnya teknik tableless pada desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai
style dengan menggunakan metode pembawaan yang berbeda pula,
seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu, pemilik
konten web bisa menentukan link yang menghubungkan konten dengan file
CSS.
Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan
dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang
web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web
diantaranya adalah warna, ukuran dan formatting. Dengan adanya CSS, konten
dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan
pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan
memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya
dapat memangkas waktu pembuatan web.
Sintaks CSS :
Terdiri dari beberapa set peraturan yang memiliki :
selector, property, value.
selector {property: value;}
Selector menunjukkan bagian mana yang hendak diatur/diformat.
Property bagian dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya
Contoh sintaks CSS:
h1 {color: red;}
Keterangan:
Selector: h1
Property: color
Value: red
Terjemahan bahasa manusia: mengatur color dari h1 ke red
(warna merah).
Anda dapat menulis satu kode CSS untuk berbagai macam selector
dengan cara menggunakan pemisah koma.
Misalkan mengatur tag-tag h1, h2, h3 menggunakan warna
merah, maka CSSnya menjadi:
h1, h2, h3 {color: red;}
Untuk mengatur lebih dari satu property gunakan pemisah
titik koma ( ; )
Contoh:
h1, h2, h3 {
color: red;
font-family: arial;
font-size: 150%;
}
Tugas :
Editlah template web ini dengan CSS :
Langkah – langkah :
Disini saya menggunakan teks editor Sublime Text 2
Bagian yang harus diedit adalah :
 Deskripsi tulisan susu disetarakan dengan font penjelasan
kandungan susu.
 Bila kursor diarahkan ke link menu, maka background menu akan
berubah menjadi warna putih.
 Hiaslah dengan kreasi css
 Isi bagian- bagian web yang kosong / tambahkan beberapa
sentuhan agar hiasan web terisi dengan baik.
Jawab :
1.) Deskripsi font web susu yang telah di edit :
Script yang telah di edit :
2.) Halaman link menu edit :
Script link menu :
3.) Efek 3D pada tulisan ayo minum susu
Script :
4.) Isi bagian web yang kosong
Konten sebelah kanan
footer
Script konten :
Tampilan template web setelah di edit secara keseluruhan :
Demikian pengerjaan tugas ini, mohon maaf bila ada kekurangan dalam
pengerjaan seperti gambar yang tak menyatu dan lain-lain.

More Related Content

PPTX
materi webdesign - CSS
DOCX
Pemrograman Berbasis Web - CSS
DOCX
Praktikum pemrograman berbasis web
DOCX
Praktikum pemrograman berbasis web
PDF
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
DOC
Laporan pbw css
PPTX
Pengenalan web minggu ketiga
DOCX
Laporan pbw
materi webdesign - CSS
Pemrograman Berbasis Web - CSS
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan pbw css
Pengenalan web minggu ketiga
Laporan pbw

What's hot (20)

DOC
Laporan pemrograman berbasis web
PPT
Materi CSS Dasar
PDF
Tugas_pbw_css-1210651163-abdul wafi
PDF
Modul css
PDF
5 pemrograman internet css
PDF
Css pweb
DOCX
Pemerograman berbasisi web
DOCX
Laporan pemrograman berbasis web
DOCX
Tugaspbw
PPT
Penggunaan html
PPTX
Bootstrap
PDF
Ardian css-01-pengenalan-css-september-2015
PDF
Bootstrap latihan
PPT
Pengenalan css
PPTX
Tugas 2 - Rekayasa Web
PDF
Web html
PPTX
HTML dan CSS
DOCX
PENGENALAN CSS
Laporan pemrograman berbasis web
Materi CSS Dasar
Tugas_pbw_css-1210651163-abdul wafi
Modul css
5 pemrograman internet css
Css pweb
Pemerograman berbasisi web
Laporan pemrograman berbasis web
Tugaspbw
Penggunaan html
Bootstrap
Ardian css-01-pengenalan-css-september-2015
Bootstrap latihan
Pengenalan css
Tugas 2 - Rekayasa Web
Web html
HTML dan CSS
PENGENALAN CSS
Ad

Similar to modul CSS tugas Pemrograman Berbasis Web (20)

PDF
Tugas4
PDF
Modul Pembelajaran dasar dasar PPLG Pemrograman web
DOCX
Pengenalan Dasar Dasar web dengan CSS.docx
PPTX
Pertemuan 8 a
PPTX
Pertemuan 8 a
PPTX
Pertemuan 3 - Pengenalan dasar CSS
PPTX
PPTX
cascading style sheets in html website koding
PDF
Cascading Style Sheets (CSS).pdf
PPTX
Pengantar CSS berisi dasar2 css untuk pemula
PPTX
chap CSS.pptx
PDF
Praktikum Dasar-Dasar CSS.pdf
PPTX
pengenalan dasar CSS untuk pemrograman web.pptx
PPTX
dmi css.pptx
PPTX
Pert 05 HTML dan Web Programming
DOC
Laporan css 1210651099
PPT
Pengenalan css
PPT
18040 pertemuan13(css)
PDF
Laporan Pemrograman Berbasis Web
Tugas4
Modul Pembelajaran dasar dasar PPLG Pemrograman web
Pengenalan Dasar Dasar web dengan CSS.docx
Pertemuan 8 a
Pertemuan 8 a
Pertemuan 3 - Pengenalan dasar CSS
cascading style sheets in html website koding
Cascading Style Sheets (CSS).pdf
Pengantar CSS berisi dasar2 css untuk pemula
chap CSS.pptx
Praktikum Dasar-Dasar CSS.pdf
pengenalan dasar CSS untuk pemrograman web.pptx
dmi css.pptx
Pert 05 HTML dan Web Programming
Laporan css 1210651099
Pengenalan css
18040 pertemuan13(css)
Laporan Pemrograman Berbasis Web
Ad

Recently uploaded (20)

PDF
BUKTI KEMENANGAN DI SITUS TANGkI 4D DENGAN Jp NYA
PPTX
GEDUNG baru bisa di lihat oleh pengunjung .pptx
PPTX
Pengelolaan_Emosi_Visual_Template_Murid.pptx
PDF
Tatacara pendaftaran Baksos melalui Aplikasi SIKAP.pdf
PPTX
Presentation1SSSSSSSSSSSSSSDDAADDDS.pptx
PPTX
Salinan Asmaul Husna Kartu Pengingat Biru dan Putih Sederhana_20250808_230415...
PPTX
Download Materi Inisiasi Sesi 8.pptxf presentasi
PDF
TA_Haafizd_Jamalulail_-_1601194147 Revisi.pdf
PDF
KOLONI4D VIP №1 BERLISENSI STAR GAMING ASIA
PPTX
1750471892153_NEGOSIASI punya Tuti .pptx
DOCX
struktur LDK Ashabul Muslimin Migasss.docx
PPTX
MATERI SOSIALISASI KONSELING PKM .pptx
PPTX
Tatacara pendaftaran Baksos melalui Aplikasi SIKAP.pptx
PPTX
PPT MAGANG PLNjj gt eeeeuihhgghjjj.pptx
PDF
Template KARTU PELAJAR MADRASAH TSANAWIYAH.pdf
PDF
ALFABET88 AGEN SABUNG AYAM 24 JAM DAN BONUS WINSTREAK 100%.pdf
PDF
GAME ONLINE MENARIK PELAJAR4D COBA KEBERUNTUNGAN MU
PPTX
ppt permainan tradisional kebugaran jasmani
PPTX
ppt pramuka pedoman tongkat pramuka dalam baris-berbaris
PDF
gambar kop pan Musyawarah daerah provinsi
BUKTI KEMENANGAN DI SITUS TANGkI 4D DENGAN Jp NYA
GEDUNG baru bisa di lihat oleh pengunjung .pptx
Pengelolaan_Emosi_Visual_Template_Murid.pptx
Tatacara pendaftaran Baksos melalui Aplikasi SIKAP.pdf
Presentation1SSSSSSSSSSSSSSDDAADDDS.pptx
Salinan Asmaul Husna Kartu Pengingat Biru dan Putih Sederhana_20250808_230415...
Download Materi Inisiasi Sesi 8.pptxf presentasi
TA_Haafizd_Jamalulail_-_1601194147 Revisi.pdf
KOLONI4D VIP №1 BERLISENSI STAR GAMING ASIA
1750471892153_NEGOSIASI punya Tuti .pptx
struktur LDK Ashabul Muslimin Migasss.docx
MATERI SOSIALISASI KONSELING PKM .pptx
Tatacara pendaftaran Baksos melalui Aplikasi SIKAP.pptx
PPT MAGANG PLNjj gt eeeeuihhgghjjj.pptx
Template KARTU PELAJAR MADRASAH TSANAWIYAH.pdf
ALFABET88 AGEN SABUNG AYAM 24 JAM DAN BONUS WINSTREAK 100%.pdf
GAME ONLINE MENARIK PELAJAR4D COBA KEBERUNTUNGAN MU
ppt permainan tradisional kebugaran jasmani
ppt pramuka pedoman tongkat pramuka dalam baris-berbaris
gambar kop pan Musyawarah daerah provinsi

modul CSS tugas Pemrograman Berbasis Web

  • 1. MODUL PERTEMUAN 5 CSS PEMROGRAMAN BERBASIS WEB LAPORAN CSS DIBUAT OLEH : NAMA : ACHMAD NUR FADILLAH NIM : 1210651001 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2014
  • 2. MODUL CSS Definisi CSS : Apa itu CSS ? CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (markup laguage). Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID. CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web. CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS. Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukuran dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.
  • 3. Sintaks CSS : Terdiri dari beberapa set peraturan yang memiliki : selector, property, value. selector {property: value;} Selector menunjukkan bagian mana yang hendak diatur/diformat. Property bagian dari selector yang hendak diatur. Value adalah nilai dari pengaturannya Contoh sintaks CSS: h1 {color: red;} Keterangan: Selector: h1 Property: color Value: red Terjemahan bahasa manusia: mengatur color dari h1 ke red (warna merah). Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan pemisah koma. Misalkan mengatur tag-tag h1, h2, h3 menggunakan warna merah, maka CSSnya menjadi: h1, h2, h3 {color: red;} Untuk mengatur lebih dari satu property gunakan pemisah titik koma ( ; ) Contoh: h1, h2, h3 { color: red; font-family: arial; font-size: 150%; }
  • 4. Tugas : Editlah template web ini dengan CSS : Langkah – langkah : Disini saya menggunakan teks editor Sublime Text 2 Bagian yang harus diedit adalah :  Deskripsi tulisan susu disetarakan dengan font penjelasan kandungan susu.  Bila kursor diarahkan ke link menu, maka background menu akan berubah menjadi warna putih.  Hiaslah dengan kreasi css  Isi bagian- bagian web yang kosong / tambahkan beberapa sentuhan agar hiasan web terisi dengan baik.
  • 5. Jawab : 1.) Deskripsi font web susu yang telah di edit : Script yang telah di edit :
  • 6. 2.) Halaman link menu edit : Script link menu : 3.) Efek 3D pada tulisan ayo minum susu Script :
  • 7. 4.) Isi bagian web yang kosong Konten sebelah kanan footer
  • 9. Tampilan template web setelah di edit secara keseluruhan : Demikian pengerjaan tugas ini, mohon maaf bila ada kekurangan dalam pengerjaan seperti gambar yang tak menyatu dan lain-lain.