SlideShare a Scribd company logo
1 of 7
Download to read offline
Di susun Oleh: kelompok pemograman web 1 dengan anggota:
1. Elpin dri
2. M.nainuridho
3. M.prianda utama
4. Muhammad rafly
5. M.dedek apandi
Dosen pembimbing: M.soekarno putra,S.kom
Codding pada css nya:
Coding pada html nya:
Sehingga tampilan pada web browsernya:
Maka dari coding dan desain di atas pertanyaannya:
1. Apakah manfaat menggunakan css untuk mendesain halaman web ?
2. Apakah fungsi dari css eksternal dan inline yang ada di code di atas ?
3. Apakah keuntungan Anda menggunakan css eksternal pada latihan ini ?
4. Apakah bisa jika ditambahkan css internal ??? Berikan contoh!
Jawab:
1. Manfaatnya menggunakan css untuk mendesain halaman web agar mempermudah
dan mempercepat pembuatan desain web dan dengan css lebih praktis dalam
membuat coding –coding desain web tersebut.
2. Css eksternal fungsinya untuk memudahkan saat Didalam HTML kita perlu
memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara
tag <head>.
Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk
memanggil CSS selector, dan jika ingin mengganti font untuk semua halaman cukup
mengubah selector CSSnya saja.
Inline merubah satu atau dua element yang hanya ada dalam satu halaman tersebut.
3. Keuntungannya : memudahkan saat Didalam HTML kita hanya perlu memanggil file
CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>.
4. Bisa di tambahkan css internal tapi lebih baik tidak usah karena Internal CSS digunakan
hanya dalam kondisi tertentu saja apabila ingin merubah sebuah element yang hanya ada pada
satu halaman HTML atau bisa juga dipakai untuk sebuah halaman statis(tidak berubah-ubah).
contohnya:
Sehingga tampilannya berubah pada hurufnya:
Manfaat-CSS-untuk-Mengdesain-Halaman-Web

More Related Content

Similar to Manfaat-CSS-untuk-Mengdesain-Halaman-Web

[Panduan Lengkap] Cara Menentukan Kata Kunci paling Tepat bagi Blog Anda
[Panduan Lengkap] Cara Menentukan Kata Kunci paling Tepat bagi Blog Anda[Panduan Lengkap] Cara Menentukan Kata Kunci paling Tepat bagi Blog Anda
[Panduan Lengkap] Cara Menentukan Kata Kunci paling Tepat bagi Blog AndaYosua Herbi
 
Study Jam 1 - HTML CSS.pdf
Study Jam 1 - HTML CSS.pdfStudy Jam 1 - HTML CSS.pdf
Study Jam 1 - HTML CSS.pdfanjarmath
 
Makalah kata kunci
Makalah kata kunciMakalah kata kunci
Makalah kata kuncimiftaaulia5
 
Aplikasi crud-menggunakan-framework-codeigniter-dengan-teknik-scaffolding
Aplikasi crud-menggunakan-framework-codeigniter-dengan-teknik-scaffoldingAplikasi crud-menggunakan-framework-codeigniter-dengan-teknik-scaffolding
Aplikasi crud-menggunakan-framework-codeigniter-dengan-teknik-scaffoldingBudi Permana
 
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 WebsiteShofura Kamal
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSAhmad Afandi
 
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptxDeniHidayat46
 
AI Talks #3: Bagaimana AI?
AI Talks #3: Bagaimana AI?AI Talks #3: Bagaimana AI?
AI Talks #3: Bagaimana AI?SABDA
 
SEO (Search Engine Optimizing)
SEO (Search Engine Optimizing)SEO (Search Engine Optimizing)
SEO (Search Engine Optimizing)Aditya Fakhri
 

Similar to Manfaat-CSS-untuk-Mengdesain-Halaman-Web (20)

Laporan css
Laporan cssLaporan css
Laporan css
 
[Panduan Lengkap] Cara Menentukan Kata Kunci paling Tepat bagi Blog Anda
[Panduan Lengkap] Cara Menentukan Kata Kunci paling Tepat bagi Blog Anda[Panduan Lengkap] Cara Menentukan Kata Kunci paling Tepat bagi Blog Anda
[Panduan Lengkap] Cara Menentukan Kata Kunci paling Tepat bagi Blog Anda
 
Laporan css
Laporan cssLaporan css
Laporan css
 
Study Jam 1 - HTML CSS.pdf
Study Jam 1 - HTML CSS.pdfStudy Jam 1 - HTML CSS.pdf
Study Jam 1 - HTML CSS.pdf
 
Makalah kata kunci
Makalah kata kunciMakalah kata kunci
Makalah kata kunci
 
Tugas4
Tugas4Tugas4
Tugas4
 
Laporan css (1152)
Laporan css (1152)Laporan css (1152)
Laporan css (1152)
 
BOOK-web-programming.pdf
BOOK-web-programming.pdfBOOK-web-programming.pdf
BOOK-web-programming.pdf
 
seo
seoseo
seo
 
Web
WebWeb
Web
 
Pengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docxPengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docx
 
Modul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman webModul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman web
 
Aplikasi crud-menggunakan-framework-codeigniter-dengan-teknik-scaffolding
Aplikasi crud-menggunakan-framework-codeigniter-dengan-teknik-scaffoldingAplikasi crud-menggunakan-framework-codeigniter-dengan-teknik-scaffolding
Aplikasi crud-menggunakan-framework-codeigniter-dengan-teknik-scaffolding
 
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
 
Web templating
Web templatingWeb templating
Web templating
 
Web templating
Web templatingWeb templating
Web templating
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSS
 
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
 
AI Talks #3: Bagaimana AI?
AI Talks #3: Bagaimana AI?AI Talks #3: Bagaimana AI?
AI Talks #3: Bagaimana AI?
 
SEO (Search Engine Optimizing)
SEO (Search Engine Optimizing)SEO (Search Engine Optimizing)
SEO (Search Engine Optimizing)
 

Recently uploaded

ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptArkhaRega1
 
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptxMODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptxSlasiWidasmara1
 
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
 
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...Kanaidi ken
 
POWER POINT MODUL 1 PEBI4223 (PENDIDIKAN LINGKUNGAN HIDUP)
POWER POINT MODUL 1 PEBI4223 (PENDIDIKAN LINGKUNGAN HIDUP)POWER POINT MODUL 1 PEBI4223 (PENDIDIKAN LINGKUNGAN HIDUP)
POWER POINT MODUL 1 PEBI4223 (PENDIDIKAN LINGKUNGAN HIDUP)PUNGKYBUDIPANGESTU1
 
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxPPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxssuser8905b3
 
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
 
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
 
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfirwanabidin08
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAAndiCoc
 
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
 
aksi nyata penyebaran pemahaman merdeka belajar
aksi nyata penyebaran pemahaman merdeka belajaraksi nyata penyebaran pemahaman merdeka belajar
aksi nyata penyebaran pemahaman merdeka belajarHafidRanggasi
 
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk HidupUT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidupfamela161
 
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING...
PELAKSANAAN  + Link-Link MATERI Training_ "Effective INVENTORY &  WAREHOUSING...PELAKSANAAN  + Link-Link MATERI Training_ "Effective INVENTORY &  WAREHOUSING...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING...Kanaidi ken
 
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdf
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdfMAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdf
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdfChananMfd
 
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
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxsyahrulutama16
 
aksi nyata sosialisasi Profil Pelajar Pancasila.pdf
aksi nyata sosialisasi  Profil Pelajar Pancasila.pdfaksi nyata sosialisasi  Profil Pelajar Pancasila.pdf
aksi nyata sosialisasi Profil Pelajar Pancasila.pdfsdn3jatiblora
 
Modul Ajar Pendidikan Pancasila Kelas 5 Fase C
Modul Ajar Pendidikan Pancasila Kelas 5 Fase CModul Ajar Pendidikan Pancasila Kelas 5 Fase C
Modul Ajar Pendidikan Pancasila Kelas 5 Fase CAbdiera
 
Latsol TWK Nasionalisme untuk masuk CPNS
Latsol TWK Nasionalisme untuk masuk CPNSLatsol TWK Nasionalisme untuk masuk CPNS
Latsol TWK Nasionalisme untuk masuk CPNSdheaprs
 

Recently uploaded (20)

ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
 
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptxMODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
 
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
 
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
 
POWER POINT MODUL 1 PEBI4223 (PENDIDIKAN LINGKUNGAN HIDUP)
POWER POINT MODUL 1 PEBI4223 (PENDIDIKAN LINGKUNGAN HIDUP)POWER POINT MODUL 1 PEBI4223 (PENDIDIKAN LINGKUNGAN HIDUP)
POWER POINT MODUL 1 PEBI4223 (PENDIDIKAN LINGKUNGAN HIDUP)
 
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxPPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
 
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
 
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
 
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
 
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
 
aksi nyata penyebaran pemahaman merdeka belajar
aksi nyata penyebaran pemahaman merdeka belajaraksi nyata penyebaran pemahaman merdeka belajar
aksi nyata penyebaran pemahaman merdeka belajar
 
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk HidupUT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
 
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING...
PELAKSANAAN  + Link-Link MATERI Training_ "Effective INVENTORY &  WAREHOUSING...PELAKSANAAN  + Link-Link MATERI Training_ "Effective INVENTORY &  WAREHOUSING...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING...
 
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdf
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdfMAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdf
MAKALAH KELOMPOK 7 ADMINISTRASI LAYANAN KHUSUS.pdf
 
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
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
aksi nyata sosialisasi Profil Pelajar Pancasila.pdf
aksi nyata sosialisasi  Profil Pelajar Pancasila.pdfaksi nyata sosialisasi  Profil Pelajar Pancasila.pdf
aksi nyata sosialisasi Profil Pelajar Pancasila.pdf
 
Modul Ajar Pendidikan Pancasila Kelas 5 Fase C
Modul Ajar Pendidikan Pancasila Kelas 5 Fase CModul Ajar Pendidikan Pancasila Kelas 5 Fase C
Modul Ajar Pendidikan Pancasila Kelas 5 Fase C
 
Latsol TWK Nasionalisme untuk masuk CPNS
Latsol TWK Nasionalisme untuk masuk CPNSLatsol TWK Nasionalisme untuk masuk CPNS
Latsol TWK Nasionalisme untuk masuk CPNS
 

Manfaat-CSS-untuk-Mengdesain-Halaman-Web

  • 1. Di susun Oleh: kelompok pemograman web 1 dengan anggota: 1. Elpin dri 2. M.nainuridho 3. M.prianda utama 4. Muhammad rafly 5. M.dedek apandi Dosen pembimbing: M.soekarno putra,S.kom
  • 4.
  • 5. Sehingga tampilan pada web browsernya: Maka dari coding dan desain di atas pertanyaannya: 1. Apakah manfaat menggunakan css untuk mendesain halaman web ? 2. Apakah fungsi dari css eksternal dan inline yang ada di code di atas ? 3. Apakah keuntungan Anda menggunakan css eksternal pada latihan ini ? 4. Apakah bisa jika ditambahkan css internal ??? Berikan contoh!
  • 6. Jawab: 1. Manfaatnya menggunakan css untuk mendesain halaman web agar mempermudah dan mempercepat pembuatan desain web dan dengan css lebih praktis dalam membuat coding –coding desain web tersebut. 2. Css eksternal fungsinya untuk memudahkan saat Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector, dan jika ingin mengganti font untuk semua halaman cukup mengubah selector CSSnya saja. Inline merubah satu atau dua element yang hanya ada dalam satu halaman tersebut. 3. Keuntungannya : memudahkan saat Didalam HTML kita hanya perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. 4. Bisa di tambahkan css internal tapi lebih baik tidak usah karena Internal CSS digunakan hanya dalam kondisi tertentu saja apabila ingin merubah sebuah element yang hanya ada pada satu halaman HTML atau bisa juga dipakai untuk sebuah halaman statis(tidak berubah-ubah). contohnya: Sehingga tampilannya berubah pada hurufnya: