SlideShare uma empresa Scribd logo
1 de 5
PEMROGRAMAN BERBASIS WEB
CSS (Cascading Style Sheets)
Disusun oleh:
Firdaus Zulkarnain
12 1065 1100
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014
I. 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.
4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman
Jawab :
1. Berikan script berikut pada tag <ul></ul> :
 Fungsinya adalah merubah font yang ada didalam tag <ul></ul> dengan “font
Candara” berukuran “12px”.
 Hasilnya :
Tugas
2. Merubah teks panel menjadi link dan merubah warna background link
 Sebelum diberi script link
 CSS untuk merubah warna link dan background link
 Fungsi dari #menu a{
Memberikan warna putih pada font saat tidak disorot
}
 Fungsi dari #menu a:hover{
Memberikan warna putih pada font dan background berwarna hitam
saat link disorot
}
 Masing-masing panel menu diberi tag <a></a>
 Hasil saat link disorot mouse
3. Mengisi halaman sebelah kanan dengan konten
 Sebelum disorot mouse
 Setelah disorot mouse
 Gunakan tag <a></a> untuk membuat link ke artikel tujuan
 CSS untuk artikel
 Sama seperti pada fungsi CSS diatas yaitu untuk merubah warna font dan
background font saat disorot ataupun tidak disorot
 Artikel 1 : ( hanya sebagai contoh )
4. Memberi teks pada header
 Masukkan teks pada tag <div></div>
Contohnya :
<h2>PT.SUSU MAKMUR JAYA</h2>
 Hasilnya
5. Hasil akhirnya

Mais conteúdo relacionado

Destaque

Los Reptiles (Este)
Los Reptiles (Este)Los Reptiles (Este)
Los Reptiles (Este)
tiapame
 
2015 2016. 2ºeso examen teórico 1ª evaluación
2015 2016. 2ºeso examen teórico 1ª evaluación2015 2016. 2ºeso examen teórico 1ª evaluación
2015 2016. 2ºeso examen teórico 1ª evaluación
Chemagutierrez73
 
Evaluaciones tercer parcial
Evaluaciones tercer parcialEvaluaciones tercer parcial
Evaluaciones tercer parcial
Miel Hudgens
 
2015 2016. recuperación 1ª (4º eso)
2015 2016. recuperación 1ª (4º eso)2015 2016. recuperación 1ª (4º eso)
2015 2016. recuperación 1ª (4º eso)
Chemagutierrez73
 

Destaque (20)

Umbrella
UmbrellaUmbrella
Umbrella
 
Los Reptiles (Este)
Los Reptiles (Este)Los Reptiles (Este)
Los Reptiles (Este)
 
2015 2016. 2ºeso examen teórico 1ª evaluación
2015 2016. 2ºeso examen teórico 1ª evaluación2015 2016. 2ºeso examen teórico 1ª evaluación
2015 2016. 2ºeso examen teórico 1ª evaluación
 
Pic
PicPic
Pic
 
MEW Approval
MEW ApprovalMEW Approval
MEW Approval
 
Opdracht 9
Opdracht 9Opdracht 9
Opdracht 9
 
Reference Letter #1
Reference Letter #1Reference Letter #1
Reference Letter #1
 
Archivo
ArchivoArchivo
Archivo
 
Carsales
CarsalesCarsales
Carsales
 
Prueba
PruebaPrueba
Prueba
 
Hy Lite Brochure
Hy Lite BrochureHy Lite Brochure
Hy Lite Brochure
 
Saturación y luminosidad
Saturación y luminosidadSaturación y luminosidad
Saturación y luminosidad
 
Asiento 2
Asiento 2Asiento 2
Asiento 2
 
WOM UK February Espresso: James Whatley's WOM Case Studies
WOM UK February Espresso: James Whatley's WOM Case StudiesWOM UK February Espresso: James Whatley's WOM Case Studies
WOM UK February Espresso: James Whatley's WOM Case Studies
 
Evaluaciones tercer parcial
Evaluaciones tercer parcialEvaluaciones tercer parcial
Evaluaciones tercer parcial
 
2015 2016. recuperación 1ª (4º eso)
2015 2016. recuperación 1ª (4º eso)2015 2016. recuperación 1ª (4º eso)
2015 2016. recuperación 1ª (4º eso)
 
App Store Optimization - SMX Munich - Emily Grossman
App Store Optimization - SMX Munich - Emily GrossmanApp Store Optimization - SMX Munich - Emily Grossman
App Store Optimization - SMX Munich - Emily Grossman
 
ReACTS: Word of mouth and the law
ReACTS: Word of mouth and the lawReACTS: Word of mouth and the law
ReACTS: Word of mouth and the law
 
Unimex estructura financiera del estado mexicano
Unimex   estructura financiera del estado mexicanoUnimex   estructura financiera del estado mexicano
Unimex estructura financiera del estado mexicano
 
eLearning für Unternehmen
eLearning für UnternehmeneLearning für Unternehmen
eLearning für Unternehmen
 

Semelhante a Membuat Web Sederhana Dengan CSS (Cascading Style Sheets) (16)

Tugas 4 CSS
Tugas 4 CSSTugas 4 CSS
Tugas 4 CSS
 
Tugas4 css
Tugas4   cssTugas4   css
Tugas4 css
 
Tugas CSS
Tugas CSSTugas CSS
Tugas CSS
 
tugas4.PBW_CSS
tugas4.PBW_CSStugas4.PBW_CSS
tugas4.PBW_CSS
 
Tugas_pbw_css-1210651163-abdul wafi
Tugas_pbw_css-1210651163-abdul wafiTugas_pbw_css-1210651163-abdul wafi
Tugas_pbw_css-1210651163-abdul wafi
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
 
PENGENALAN CSS
PENGENALAN CSSPENGENALAN CSS
PENGENALAN CSS
 
Tugaspbw
TugaspbwTugaspbw
Tugaspbw
 
Laporan css
Laporan cssLaporan css
Laporan css
 
Laporan css (1152)
Laporan css (1152)Laporan css (1152)
Laporan css (1152)
 
Menggedit CSS
Menggedit CSSMenggedit CSS
Menggedit CSS
 
Laporan pbw css
Laporan pbw cssLaporan pbw css
Laporan pbw css
 
Kj informatika sma_1_henry pandia
Kj informatika sma_1_henry pandiaKj informatika sma_1_henry pandia
Kj informatika sma_1_henry pandia
 
Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)
 
Chapter 3 css
Chapter 3   cssChapter 3   css
Chapter 3 css
 
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
 

Último

ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptxppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
Arisatrianingsih
 
Bahan kuliah elemen mesin semester 2 rekayasa manufaktur
Bahan kuliah elemen mesin semester 2 rekayasa manufakturBahan kuliah elemen mesin semester 2 rekayasa manufaktur
Bahan kuliah elemen mesin semester 2 rekayasa manufaktur
AhmadAffandi36
 
Lecture 02 - Kondisi Geologi dan Eksplorasi Batubara untuk Tambang Terbuka - ...
Lecture 02 - Kondisi Geologi dan Eksplorasi Batubara untuk Tambang Terbuka - ...Lecture 02 - Kondisi Geologi dan Eksplorasi Batubara untuk Tambang Terbuka - ...
Lecture 02 - Kondisi Geologi dan Eksplorasi Batubara untuk Tambang Terbuka - ...
rororasiputra
 
LAJU RESPIRASI.teknologi hasil pertanianpdf
LAJU RESPIRASI.teknologi hasil pertanianpdfLAJU RESPIRASI.teknologi hasil pertanianpdf
LAJU RESPIRASI.teknologi hasil pertanianpdf
IftitahKartika
 
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptxPresentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
yoodika046
 
397187784-Contoh-Kasus-Analisis-Regresi-Linear-Sederhana.pptx
397187784-Contoh-Kasus-Analisis-Regresi-Linear-Sederhana.pptx397187784-Contoh-Kasus-Analisis-Regresi-Linear-Sederhana.pptx
397187784-Contoh-Kasus-Analisis-Regresi-Linear-Sederhana.pptx
VinaAmelia23
 
Abortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
Abortion Pills In Doha // QATAR (+966572737505 ) Get CytotecAbortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
Abortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
Abortion pills in Riyadh +966572737505 get cytotec
 
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptxManajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
arifyudianto3
 

Último (19)

Kalor dan Perpindahan Kalor presentasi.ppt
Kalor dan Perpindahan Kalor presentasi.pptKalor dan Perpindahan Kalor presentasi.ppt
Kalor dan Perpindahan Kalor presentasi.ppt
 
Pengeloaan Limbah NonB3 KLHK-Upik-090921.pdf
Pengeloaan Limbah NonB3 KLHK-Upik-090921.pdfPengeloaan Limbah NonB3 KLHK-Upik-090921.pdf
Pengeloaan Limbah NonB3 KLHK-Upik-090921.pdf
 
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptxppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
 
Bahan kuliah elemen mesin semester 2 rekayasa manufaktur
Bahan kuliah elemen mesin semester 2 rekayasa manufakturBahan kuliah elemen mesin semester 2 rekayasa manufaktur
Bahan kuliah elemen mesin semester 2 rekayasa manufaktur
 
Lecture 02 - Kondisi Geologi dan Eksplorasi Batubara untuk Tambang Terbuka - ...
Lecture 02 - Kondisi Geologi dan Eksplorasi Batubara untuk Tambang Terbuka - ...Lecture 02 - Kondisi Geologi dan Eksplorasi Batubara untuk Tambang Terbuka - ...
Lecture 02 - Kondisi Geologi dan Eksplorasi Batubara untuk Tambang Terbuka - ...
 
Gambar kerja TUREN KETAWANG malang jawa timur.pdf
Gambar kerja TUREN KETAWANG malang jawa timur.pdfGambar kerja TUREN KETAWANG malang jawa timur.pdf
Gambar kerja TUREN KETAWANG malang jawa timur.pdf
 
Pengolahan Kelapa Sawit 1 pabrik pks.pdf
Pengolahan Kelapa Sawit 1 pabrik pks.pdfPengolahan Kelapa Sawit 1 pabrik pks.pdf
Pengolahan Kelapa Sawit 1 pabrik pks.pdf
 
Presentasi gedung jenjang 6 - Isman Kurniawan.ppt
Presentasi gedung jenjang 6 - Isman Kurniawan.pptPresentasi gedung jenjang 6 - Isman Kurniawan.ppt
Presentasi gedung jenjang 6 - Isman Kurniawan.ppt
 
LAJU RESPIRASI.teknologi hasil pertanianpdf
LAJU RESPIRASI.teknologi hasil pertanianpdfLAJU RESPIRASI.teknologi hasil pertanianpdf
LAJU RESPIRASI.teknologi hasil pertanianpdf
 
perbedaan jalan raya dan rel bahasa Indonesia.pptx
perbedaan jalan raya dan rel bahasa Indonesia.pptxperbedaan jalan raya dan rel bahasa Indonesia.pptx
perbedaan jalan raya dan rel bahasa Indonesia.pptx
 
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptxPresentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
 
Laporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptx
Laporan Tinjauan Manajemen HSE/Laporan HSE TriwulanpptxLaporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptx
Laporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptx
 
PPT AHLI MADYA BANGUNAN GEDUNGggggg.pptx
PPT AHLI MADYA BANGUNAN GEDUNGggggg.pptxPPT AHLI MADYA BANGUNAN GEDUNGggggg.pptx
PPT AHLI MADYA BANGUNAN GEDUNGggggg.pptx
 
BAB_3_Teorema superposisi_thevenin_norton (1).ppt
BAB_3_Teorema superposisi_thevenin_norton (1).pptBAB_3_Teorema superposisi_thevenin_norton (1).ppt
BAB_3_Teorema superposisi_thevenin_norton (1).ppt
 
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptx
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptxUTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptx
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptx
 
Gambar Rencana TOYOMARTO KETINDAN Malang jawa timur.pdf
Gambar Rencana TOYOMARTO KETINDAN Malang jawa timur.pdfGambar Rencana TOYOMARTO KETINDAN Malang jawa timur.pdf
Gambar Rencana TOYOMARTO KETINDAN Malang jawa timur.pdf
 
397187784-Contoh-Kasus-Analisis-Regresi-Linear-Sederhana.pptx
397187784-Contoh-Kasus-Analisis-Regresi-Linear-Sederhana.pptx397187784-Contoh-Kasus-Analisis-Regresi-Linear-Sederhana.pptx
397187784-Contoh-Kasus-Analisis-Regresi-Linear-Sederhana.pptx
 
Abortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
Abortion Pills In Doha // QATAR (+966572737505 ) Get CytotecAbortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
Abortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
 
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptxManajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
 

Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)

  • 1. PEMROGRAMAN BERBASIS WEB CSS (Cascading Style Sheets) Disusun oleh: Firdaus Zulkarnain 12 1065 1100 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2014
  • 2. I. 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. 4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman Jawab : 1. Berikan script berikut pada tag <ul></ul> :  Fungsinya adalah merubah font yang ada didalam tag <ul></ul> dengan “font Candara” berukuran “12px”.  Hasilnya : Tugas
  • 3. 2. Merubah teks panel menjadi link dan merubah warna background link  Sebelum diberi script link  CSS untuk merubah warna link dan background link  Fungsi dari #menu a{ Memberikan warna putih pada font saat tidak disorot }  Fungsi dari #menu a:hover{ Memberikan warna putih pada font dan background berwarna hitam saat link disorot }  Masing-masing panel menu diberi tag <a></a>  Hasil saat link disorot mouse 3. Mengisi halaman sebelah kanan dengan konten  Sebelum disorot mouse
  • 4.  Setelah disorot mouse  Gunakan tag <a></a> untuk membuat link ke artikel tujuan  CSS untuk artikel  Sama seperti pada fungsi CSS diatas yaitu untuk merubah warna font dan background font saat disorot ataupun tidak disorot  Artikel 1 : ( hanya sebagai contoh ) 4. Memberi teks pada header  Masukkan teks pada tag <div></div> Contohnya : <h2>PT.SUSU MAKMUR JAYA</h2>