ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
PEMROGRAMAN BERBASIS WEB
CSS(Cascading Style Sheets)
Disusun oleh:
Fadinda Suci Rosiana
1210651222
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014
I. Tujuan:
II. Dasar Teori
Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain
(style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML
dengan kode untuk menampilkannya (CSS). Di dalam dunia desain web, layout atau
mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian
yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web
lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah
diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki
dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang
berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang
dukungannya terhadap CSS.
Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika
kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file
CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium).
CSS dapat dipasang pada dikumen HTML yang telah jadi. Dalam melayout sebuah web ada
dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:
1. Metode Table
2. Metode Div
Manfaat dari CSS:
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript.
5. Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright
III. Tugas
1.Ubahlah teks dalam list (kandungan susu) sehingga property font
(warna, jenis font, ukurannya sama dengan paragraf pertama)
2.Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot
dengan kursor, warna teks dan background-nya berubah.
3.Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan
suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan
kreasi CSS anda (tidak ada CSS berarti juga TIDAK ADA NILAI)
4.Tambahkanlah teks/ tulisan yang proporsional di bagian header
halaman
5.Dibuat laporan ya, upload di slideshare.net dan URLnya disubmit di
elearning.
Tugaspbw
Hasil:
Tugaspbw

More Related Content

What's hot (20)

CSS
CSSCSS
CSS
muhammad nainuridho
Ìý
materi webdesign - CSS
materi webdesign - CSSmateri webdesign - CSS
materi webdesign - CSS
SMK Negeri 6 Malang
Ìý
Css pweb
Css pwebCss pweb
Css pweb
Fajar Baskoro
Ìý
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
kunidar
Ìý
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
andika_navian
Ìý
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
andika_navian
Ìý
1. Pengantar HTML
1. Pengantar HTML1. Pengantar HTML
1. Pengantar HTML
Ratzman III
Ìý
Pemerograman berbasisi web
Pemerograman berbasisi webPemerograman berbasisi web
Pemerograman berbasisi web
ahmadyulianto93
Ìý
PENGENALAN CSS
PENGENALAN CSSPENGENALAN CSS
PENGENALAN CSS
hendrik_bayu
Ìý
Tag HTML untuk mendesain website
Tag HTML untuk mendesain websiteTag HTML untuk mendesain website
Tag HTML untuk mendesain website
Putri Ardiana Puspita Sari
Ìý
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
gufron_ar
Ìý
Html
HtmlHtml
Html
Dwi Aisyah
Ìý
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
Vicky Nitinegoro
Ìý
Bootstrap
BootstrapBootstrap
Bootstrap
Fajar Baskoro
Ìý
Cara membuat ukuran kertas yang berbeda
Cara membuat ukuran kertas yang berbedaCara membuat ukuran kertas yang berbeda
Cara membuat ukuran kertas yang berbeda
Drs. HM. Yunus
Ìý
PENGERTIAN TENTANG PHP, MYSQL, CSS, HTML DAN XML
PENGERTIAN TENTANG PHP, MYSQL, CSS, HTML DAN XMLPENGERTIAN TENTANG PHP, MYSQL, CSS, HTML DAN XML
PENGERTIAN TENTANG PHP, MYSQL, CSS, HTML DAN XML
Dian Arifin
Ìý
Part 1 - pengenalan website
Part 1 - pengenalan websitePart 1 - pengenalan website
Part 1 - pengenalan website
Arfian Cahya Dwi Setya
Ìý
Css pengenalan css
Css   pengenalan cssCss   pengenalan css
Css pengenalan css
YUSRA FERNANDO
Ìý
Pemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLPemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTML
KuliahKita
Ìý
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
kunidar
Ìý
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
andika_navian
Ìý
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
andika_navian
Ìý
1. Pengantar HTML
1. Pengantar HTML1. Pengantar HTML
1. Pengantar HTML
Ratzman III
Ìý
Pemerograman berbasisi web
Pemerograman berbasisi webPemerograman berbasisi web
Pemerograman berbasisi web
ahmadyulianto93
Ìý
PENGENALAN CSS
PENGENALAN CSSPENGENALAN CSS
PENGENALAN CSS
hendrik_bayu
Ìý
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
gufron_ar
Ìý
Cara membuat ukuran kertas yang berbeda
Cara membuat ukuran kertas yang berbedaCara membuat ukuran kertas yang berbeda
Cara membuat ukuran kertas yang berbeda
Drs. HM. Yunus
Ìý
PENGERTIAN TENTANG PHP, MYSQL, CSS, HTML DAN XML
PENGERTIAN TENTANG PHP, MYSQL, CSS, HTML DAN XMLPENGERTIAN TENTANG PHP, MYSQL, CSS, HTML DAN XML
PENGERTIAN TENTANG PHP, MYSQL, CSS, HTML DAN XML
Dian Arifin
Ìý
Css pengenalan css
Css   pengenalan cssCss   pengenalan css
Css pengenalan css
YUSRA FERNANDO
Ìý
Pemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLPemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTML
KuliahKita
Ìý

Viewers also liked (9)

Role of Peers in Children Development
Role of Peers in Children DevelopmentRole of Peers in Children Development
Role of Peers in Children Development
Yang Mae Tiquio
Ìý
Draft presentation final
Draft presentation finalDraft presentation final
Draft presentation final
dyorukog
Ìý
Biopsyinoralsurgery
Biopsyinoralsurgery Biopsyinoralsurgery
Biopsyinoralsurgery
robe654ahoy526
Ìý
ERM Presentation
ERM PresentationERM Presentation
ERM Presentation
Deneys Minne
Ìý
Ford Motor Company -The Open and Mobile Platform
Ford Motor Company -The Open and Mobile Platform Ford Motor Company -The Open and Mobile Platform
Ford Motor Company -The Open and Mobile Platform
Shreya Ganapathy
Ìý
Microsoft Dynamics AX for Government Brochure FY15_final
Microsoft Dynamics AX for Government Brochure FY15_finalMicrosoft Dynamics AX for Government Brochure FY15_final
Microsoft Dynamics AX for Government Brochure FY15_final
Deneys Minne
Ìý
Business Plan
Business PlanBusiness Plan
Business Plan
Eduardo Reyes
Ìý
Developing Responsibility in Our Children
Developing Responsibility in Our ChildrenDeveloping Responsibility in Our Children
Developing Responsibility in Our Children
Jackylene Wegoki Gitari
Ìý
Transforming agriculture through_mechanisation
Transforming agriculture through_mechanisationTransforming agriculture through_mechanisation
Transforming agriculture through_mechanisation
Prateek Goel
Ìý
Role of Peers in Children Development
Role of Peers in Children DevelopmentRole of Peers in Children Development
Role of Peers in Children Development
Yang Mae Tiquio
Ìý
Draft presentation final
Draft presentation finalDraft presentation final
Draft presentation final
dyorukog
Ìý
Biopsyinoralsurgery
Biopsyinoralsurgery Biopsyinoralsurgery
Biopsyinoralsurgery
robe654ahoy526
Ìý
ERM Presentation
ERM PresentationERM Presentation
ERM Presentation
Deneys Minne
Ìý
Ford Motor Company -The Open and Mobile Platform
Ford Motor Company -The Open and Mobile Platform Ford Motor Company -The Open and Mobile Platform
Ford Motor Company -The Open and Mobile Platform
Shreya Ganapathy
Ìý
Microsoft Dynamics AX for Government Brochure FY15_final
Microsoft Dynamics AX for Government Brochure FY15_finalMicrosoft Dynamics AX for Government Brochure FY15_final
Microsoft Dynamics AX for Government Brochure FY15_final
Deneys Minne
Ìý
Developing Responsibility in Our Children
Developing Responsibility in Our ChildrenDeveloping Responsibility in Our Children
Developing Responsibility in Our Children
Jackylene Wegoki Gitari
Ìý
Transforming agriculture through_mechanisation
Transforming agriculture through_mechanisationTransforming agriculture through_mechanisation
Transforming agriculture through_mechanisation
Prateek Goel
Ìý

Similar to Tugaspbw (20)

Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
Shofura Kamal
Ìý
Rifkillah s
Rifkillah sRifkillah s
Rifkillah s
aibi_caem
Ìý
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
BeeOkee
Ìý
Laporan css (1152)
Laporan css (1152)Laporan css (1152)
Laporan css (1152)
diyahapriliana
Ìý
Laporan Pemrograman Berbasis Web
Laporan Pemrograman Berbasis WebLaporan Pemrograman Berbasis Web
Laporan Pemrograman Berbasis Web
M Zaenol Arifin S.Kom
Ìý
Materi CSS Dasar
Materi CSS DasarMateri CSS Dasar
Materi CSS Dasar
Robby Firmansyah
Ìý
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
Ilham Yahya
Ìý
Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdf
SayedAchmady1
Ìý
Laporan css 1210651099
Laporan css 1210651099Laporan css 1210651099
Laporan css 1210651099
M Zaenol Arifin S.Kom
Ìý
Pengenalan web minggu ketiga
Pengenalan web minggu ketigaPengenalan web minggu ketiga
Pengenalan web minggu ketiga
Wawan Darmawan
Ìý
Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)
Luszara Part II
Ìý
1210651097 css
1210651097 css1210651097 css
1210651097 css
ardyansyahAhmad
Ìý
Desain web 2 kolom
Desain web 2 kolomDesain web 2 kolom
Desain web 2 kolom
Haswi Haswi
Ìý
Modul edit template web dengan php dan my sq lx
Modul edit template web dengan php dan my sq lxModul edit template web dengan php dan my sq lx
Modul edit template web dengan php dan my sq lx
sugiyanto gunadi
Ìý
Modul css
Modul cssModul css
Modul css
danver98
Ìý
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web Programming
Andino Maseleno
Ìý
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
Shofura Kamal
Ìý
Rifkillah s
Rifkillah sRifkillah s
Rifkillah s
aibi_caem
Ìý
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
BeeOkee
Ìý
Laporan css (1152)
Laporan css (1152)Laporan css (1152)
Laporan css (1152)
diyahapriliana
Ìý
Laporan Pemrograman Berbasis Web
Laporan Pemrograman Berbasis WebLaporan Pemrograman Berbasis Web
Laporan Pemrograman Berbasis Web
M Zaenol Arifin S.Kom
Ìý
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
Ilham Yahya
Ìý
Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdf
SayedAchmady1
Ìý
Pengenalan web minggu ketiga
Pengenalan web minggu ketigaPengenalan web minggu ketiga
Pengenalan web minggu ketiga
Wawan Darmawan
Ìý
Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)
Luszara Part II
Ìý
Desain web 2 kolom
Desain web 2 kolomDesain web 2 kolom
Desain web 2 kolom
Haswi Haswi
Ìý
Modul edit template web dengan php dan my sq lx
Modul edit template web dengan php dan my sq lxModul edit template web dengan php dan my sq lx
Modul edit template web dengan php dan my sq lx
sugiyanto gunadi
Ìý
Modul css
Modul cssModul css
Modul css
danver98
Ìý
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web Programming
Andino Maseleno
Ìý

Tugaspbw

  • 1. PEMROGRAMAN BERBASIS WEB CSS(Cascading Style Sheets) Disusun oleh: Fadinda Suci Rosiana 1210651222 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2014
  • 2. I. Tujuan: II. Dasar Teori Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Di dalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS. Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi. Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu: 1. Metode Table 2. Metode Div Manfaat dari CSS: 1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur, 2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat, 3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja, 4. Dapat berkolaborasi dengan JavaScript. 5. Digunakan dalam hampir semua web browser. Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu: Header –> berisi tema web/ judul Menu –> menu link web Content –> isi dari web Footer –> identitas/ copyright
  • 3. III. Tugas 1.Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama) 2.Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah. 3.Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga TIDAK ADA NILAI) 4.Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman 5.Dibuat laporan ya, upload di slideshare.net dan URLnya disubmit di elearning.