SlideShare a Scribd company logo
1 of 10
Pemrograman Berbasis WEB
Tugas 4
Oleh
(Yudha Anggara)
(1210651028)
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2013/2014
Pertemuan 5
Pemrograman Berbasis Web
Apa itu CSS?
Cascading Style Sheets.
-kode berurutan dan saling berhubungan
untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan CSS:


penggantian format secara keseluruhan.
Sintax CSS:

selector {property: value;}
Sintax CSS (cont’d)


h1 {color: red;}
color dari h1 ke red (warna merah)
Pengelompokan Selectors



cara menggunakan pemisah koma.
tag-tag h1, h2, h3 menggunakan warna merah, maka
CSSnya menjadi:
h1, h2, h3 {color: red;}
Penggunaan Multi Property


h1, h2, h3 {
color: red;
font-family: arial;
font-size: 150%;
}
CSS Comment
komentar di CSS.
/* tulis komentar anda disini */
p {
text-align: justify;
/* tulis lagi komentar anda disini */
color: blue;
font-family: arial;
}
Pemasangan CSS di HTML


1.Inline CSS
2.Embedded CSS
3.Import CSS file
Inline CSS


kali.
<p style=“color:blue;”>
isi paragraf.
</p>
Embedded CSS


<head> dan </head> atau dapat juga
diantara tag <body> dan </body>
<head>
<style type=“text/css”>
p {color:blue;}
</style>
</head>
Import CSS File
<head> dan </head>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"
/>
</head>
href itulah yang merujuk pada file CSS, yaitu berada pada folder
css dengan nama file style.css
Class dan Id Selector


<h1>, sintaks CSSnya h1 {color:
red;}
<h1> maka teksnya berwarna merah.
dibutuhkan penentuan Class dan ID Selector.
Class Selector

sering digunakan pada beberapa elemen.
.nama_class_selector {property: value;}
class.
<div class="nama_class_selector"> dan diakhiri dengan tag </div>
Class Selector (cont’d)

.tengah {text-align: center;}
p.tengah {color: red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
<p class=“tengah”>Teks tengah akan berwarna merah</p>
<div class="tengah">
<h1>Tag h1 tengah akan berwarna hitam</h1>
</div>
<h1 class="kiri">Tag h1 kiri akan berwarna biru</h1>
ID selector


yang unik.
id pada HTML, dan didefinisikan dengan tanda # pada
sintaks CSS.
TUGAS 4
Hasil:


More Related Content

Similar to Laporan Pbw 4

modul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Webmodul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis WebSayoer Tetep Slankers
 
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis webandika_navian
 
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis webandika_navian
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis webIlham Yahya
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)Dnr Creatives
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPutu Mardika
 
Materi CSS yang akan dipaparkan di salah satu
Materi CSS yang akan dipaparkan di salah satuMateri CSS yang akan dipaparkan di salah satu
Materi CSS yang akan dipaparkan di salah satuDera62
 
Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfSayedAchmady1
 
Pemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style SheetsPemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style SheetsIsna Dwi Setianingsih
 

Similar to Laporan Pbw 4 (20)

modul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Webmodul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Web
 
Laporan pbw
Laporan pbwLaporan pbw
Laporan pbw
 
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
 
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
 
Web
WebWeb
Web
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
PENGENALAN CSS
PENGENALAN CSSPENGENALAN CSS
PENGENALAN CSS
 
Laporan Pemrograman Berbasis Web
Laporan Pemrograman Berbasis WebLaporan Pemrograman Berbasis Web
Laporan Pemrograman Berbasis Web
 
chap CSS.pptx
chap CSS.pptxchap CSS.pptx
chap CSS.pptx
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)
 
Laporan pbw css
Laporan pbw cssLaporan pbw css
Laporan pbw css
 
Laporan css 1210651099
Laporan css 1210651099Laporan css 1210651099
Laporan css 1210651099
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web Programming
 
Tugas4
Tugas4Tugas4
Tugas4
 
Materi CSS yang akan dipaparkan di salah satu
Materi CSS yang akan dipaparkan di salah satuMateri CSS yang akan dipaparkan di salah satu
Materi CSS yang akan dipaparkan di salah satu
 
Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdf
 
Materi CSS Dasar
Materi CSS DasarMateri CSS Dasar
Materi CSS Dasar
 
dmi css.pptx
dmi css.pptxdmi css.pptx
dmi css.pptx
 
Pemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style SheetsPemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style Sheets
 
Modul 2 - CSS
Modul 2 - CSSModul 2 - CSS
Modul 2 - CSS
 

Recently uploaded

Integrasi nasional dalam bingkai bhinneka tunggal ika
Integrasi nasional dalam bingkai bhinneka tunggal ikaIntegrasi nasional dalam bingkai bhinneka tunggal ika
Integrasi nasional dalam bingkai bhinneka tunggal ikaAtiAnggiSupriyati
 
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...MetalinaSimanjuntak1
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxIrfanAudah1
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxadimulianta1
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxdeskaputriani1
 
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptxPPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptxdpp11tya
 
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdfaksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdfwalidumar
 
Latsol TWK Nasionalisme untuk masuk CPNS
Latsol TWK Nasionalisme untuk masuk CPNSLatsol TWK Nasionalisme untuk masuk CPNS
Latsol TWK Nasionalisme untuk masuk CPNSdheaprs
 
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptxPEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptxsukmakarim1998
 
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptx
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptxSesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptx
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptxSovyOktavianti
 
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi SelatanSosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatanssuser963292
 
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptxBab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptxssuser35630b
 
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDPPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDNurainiNuraini25
 
Hiperlipidemiaaaaaaaaaaaaaaaaaaaaaaaaaaa
HiperlipidemiaaaaaaaaaaaaaaaaaaaaaaaaaaaHiperlipidemiaaaaaaaaaaaaaaaaaaaaaaaaaaa
Hiperlipidemiaaaaaaaaaaaaaaaaaaaaaaaaaaafarmasipejatentimur
 
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdfMODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdfNurulHikmah50658
 
RENCANA + Link2 Materi Pelatihan/BimTek "PTK 007 Rev-5 Thn 2023 (PENGADAAN) &...
RENCANA + Link2 Materi Pelatihan/BimTek "PTK 007 Rev-5 Thn 2023 (PENGADAAN) &...RENCANA + Link2 Materi Pelatihan/BimTek "PTK 007 Rev-5 Thn 2023 (PENGADAAN) &...
RENCANA + Link2 Materi Pelatihan/BimTek "PTK 007 Rev-5 Thn 2023 (PENGADAAN) &...Kanaidi ken
 
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfBab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfbibizaenab
 
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ikabab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ikaAtiAnggiSupriyati
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfCandraMegawati
 
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxPERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxRizkyPratiwi19
 

Recently uploaded (20)

Integrasi nasional dalam bingkai bhinneka tunggal ika
Integrasi nasional dalam bingkai bhinneka tunggal ikaIntegrasi nasional dalam bingkai bhinneka tunggal ika
Integrasi nasional dalam bingkai bhinneka tunggal ika
 
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptx
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
 
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptxPPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
PPT PERUBAHAN LINGKUNGAN MATA PELAJARAN BIOLOGI KELAS X.pptx
 
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdfaksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
 
Latsol TWK Nasionalisme untuk masuk CPNS
Latsol TWK Nasionalisme untuk masuk CPNSLatsol TWK Nasionalisme untuk masuk CPNS
Latsol TWK Nasionalisme untuk masuk CPNS
 
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptxPEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
 
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptx
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptxSesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptx
Sesi 1_PPT Ruang Kolaborasi Modul 1.3 _ ke 1_PGP Angkatan 10.pptx
 
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi SelatanSosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
 
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptxBab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
 
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDPPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
 
Hiperlipidemiaaaaaaaaaaaaaaaaaaaaaaaaaaa
HiperlipidemiaaaaaaaaaaaaaaaaaaaaaaaaaaaHiperlipidemiaaaaaaaaaaaaaaaaaaaaaaaaaaa
Hiperlipidemiaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdfMODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
 
RENCANA + Link2 Materi Pelatihan/BimTek "PTK 007 Rev-5 Thn 2023 (PENGADAAN) &...
RENCANA + Link2 Materi Pelatihan/BimTek "PTK 007 Rev-5 Thn 2023 (PENGADAAN) &...RENCANA + Link2 Materi Pelatihan/BimTek "PTK 007 Rev-5 Thn 2023 (PENGADAAN) &...
RENCANA + Link2 Materi Pelatihan/BimTek "PTK 007 Rev-5 Thn 2023 (PENGADAAN) &...
 
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfBab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
 
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ikabab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
 
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxPERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
 

Laporan Pbw 4

  • 1. Pemrograman Berbasis WEB Tugas 4 Oleh (Yudha Anggara) (1210651028) JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2013/2014
  • 2. Pertemuan 5 Pemrograman Berbasis Web Apa itu CSS? Cascading Style Sheets. -kode berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. Keuntungan CSS:   penggantian format secara keseluruhan. Sintax CSS:  selector {property: value;}
  • 3. Sintax CSS (cont’d)   h1 {color: red;} color dari h1 ke red (warna merah) Pengelompokan Selectors    cara menggunakan pemisah koma. tag-tag h1, h2, h3 menggunakan warna merah, maka CSSnya menjadi: h1, h2, h3 {color: red;} Penggunaan Multi Property   h1, h2, h3 { color: red; font-family: arial; font-size: 150%; } CSS Comment komentar di CSS. /* tulis komentar anda disini */
  • 4. p { text-align: justify; /* tulis lagi komentar anda disini */ color: blue; font-family: arial; } Pemasangan CSS di HTML   1.Inline CSS 2.Embedded CSS 3.Import CSS file Inline CSS   kali. <p style=“color:blue;”> isi paragraf. </p> Embedded CSS   <head> dan </head> atau dapat juga diantara tag <body> dan </body> <head> <style type=“text/css”> p {color:blue;} </style> </head>
  • 5. Import CSS File <head> dan </head> <head> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> </head> href itulah yang merujuk pada file CSS, yaitu berada pada folder css dengan nama file style.css Class dan Id Selector   <h1>, sintaks CSSnya h1 {color: red;} <h1> maka teksnya berwarna merah. dibutuhkan penentuan Class dan ID Selector. Class Selector  sering digunakan pada beberapa elemen. .nama_class_selector {property: value;} class. <div class="nama_class_selector"> dan diakhiri dengan tag </div>
  • 6. Class Selector (cont’d)  .tengah {text-align: center;} p.tengah {color: red;} h1.kiri {color:blue;} h1.tengah {color:black;} <p class=“tengah”>Teks tengah akan berwarna merah</p> <div class="tengah"> <h1>Tag h1 tengah akan berwarna hitam</h1> </div> <h1 class="kiri">Tag h1 kiri akan berwarna biru</h1> ID selector   yang unik. id pada HTML, dan didefinisikan dengan tanda # pada sintaks CSS.
  • 8.
  • 10.