SlideShare uma empresa Scribd logo
1 de 15
CSS
Cascading Style Sheet
Ingat  Aturan XHTML
1.   elemen XHTML harus ditulis secara
     bersarang
2.   elemen XHTML (yang berpasangan) harus
     ditutup dengan pasangannya
3.   elemen XHTML yang kosong (yang tidak
     berpasangan) juga harus ditutup
4.   elemen XHTML harus ditulis dalam huruf
     kecil
5.   dokumen XHTML hanya memiliki 1
     elemen induk, yaitu <html>. Elemen anak
     harus ditulis secara berpasangan dan
     bersarang terhadap elemen induknya
Ingat  Aturan XHTML
6.    nama atribut ditulis dalam huruf kecil
7.    nilai atribut harus diapit dengan tanda petik
8.    penulisan atribut dalam bentuk minimal
      dilarang
9.    atribut 'lang' (bahasa) digunakan jika
      konten elemen mengandung bahasa tertentu
10.   semua dokumen XHTML harus memiliki
      deklarasi DOCTYPE.
fungsi CSS
   Mengatur ulang tampilan (presentation) tag
    HTML

    Misalnya tag <H1> mempunyai style/gaya
    tampilan :
    Font : Times New Roman; Size : 6 (24pt);
    Text Decoration : Bold; Line-height = 24pt;

    INI JUDUL DENGAN H1 STANDAR
Struktur webpage XHTML
   DOCTYPE, HTML, HEAD, BODY

   DOCTYPE menentukan bagaimana
    dokumen tersebut dibaca oleh browser.
    Apakah browser membaca dokumen tersebut
    dalam modus Standard atau Quirks.

   Pada prinsipnya XHTML = HTML, hanya
    ada perbaikan pada aturan-aturan penulisan
    dan penggunaan elemen & atribut HTML
XHTML: Document Type Definitions
   XHTML - Strict / strict doctype
    declaration: Kontrol seluruh layout dan
    format sebuah halaman Web melalui CSS.
    Tidak menggunakan tag font, align dan table

   XHTML - Transitional / transitional
    doctype declaration: masih menggunakan
    sebagian besar tag-tag HTML seperti font
    dan table untuk melayout halaman.

   XHTML - Frames / frameset declaration:
    Penggunaan Frame pada halaman Web.
Penulisan Doctype
   <!DOCTYPE html PUBLIC "-//W3C//DTD
    XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    strict.dtd">

   <!DOCTYPE html PUBLIC "-//W3C//DTD
    XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    transitional.dtd">

   <!DOCTYPE html PUBLIC "-//W3C//DTD
    XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    frameset.dtd">
fungsi CSS
   Membuat tata letak/layout halaman web

    halaman web tanpa css

    halaman web dengan css

   Memudahkan dalam mengelola website
    ◦ Mengatur ulang tata letak
    ◦ Mengatur ulang tampilan tag HTML
Implementasi/penerapan CSS
CSS dapat ditambahkan dalam halaman
web kita dengan 3 cara:
1.   Inline CSS: menulis style langsung pada
     tag HTML
2.   Embedded CSS: menulis CSS di dalam
     bagian HEAD sebuah dokumen HTML
3.   External File CSS: menggunakan file CSS
     terpisah
Contoh penulisan inline style

<div style=“color:red; background-
color:silver;”>
..... konten / isi informasi .....
</div>
Contoh penulisan embedded
style
Contoh penulisan external file
Box model

Mais conteúdo relacionado

Mais procurados (20)

Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Pemerograman berbasisi web
Pemerograman berbasisi webPemerograman berbasisi web
Pemerograman berbasisi web
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
 
Css pweb
Css pwebCss pweb
Css pweb
 
Pemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSSPemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSS
 
Tugaspbw
TugaspbwTugaspbw
Tugaspbw
 
Tugas 2 - Rekayasa Web
Tugas 2 - Rekayasa WebTugas 2 - Rekayasa Web
Tugas 2 - Rekayasa Web
 
Ardian css-01-pengenalan-css-september-2015
Ardian css-01-pengenalan-css-september-2015Ardian css-01-pengenalan-css-september-2015
Ardian css-01-pengenalan-css-september-2015
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
Part 1 - pengenalan website
Part 1 - pengenalan websitePart 1 - pengenalan website
Part 1 - pengenalan website
 
Majid
MajidMajid
Majid
 
CSS
CSSCSS
CSS
 
Bootstrap latihan
Bootstrap latihanBootstrap latihan
Bootstrap latihan
 
PENGENALAN CSS
PENGENALAN CSSPENGENALAN CSS
PENGENALAN CSS
 
05 XHTML CSS
05 XHTML CSS05 XHTML CSS
05 XHTML CSS
 
Web html
Web htmlWeb html
Web html
 
CSS: Introduction
CSS: IntroductionCSS: Introduction
CSS: Introduction
 
Laporan Pbw 4
Laporan Pbw 4Laporan Pbw 4
Laporan Pbw 4
 
18040 pertemuan13(css)
18040 pertemuan13(css)18040 pertemuan13(css)
18040 pertemuan13(css)
 

Semelhante a CSS-DASAR

Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepadSamsuri14
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtmlgueste0c708
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtmlgueste0c708
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisrahmantaufik00
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)T Ghazali
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptEdiyono3
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptAkhmadAlbari1
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptsopi20
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptreskieki4
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptcigugurfree
 
Dasar-dasar HTML.ppt
Dasar-dasar HTML.pptDasar-dasar HTML.ppt
Dasar-dasar HTML.pptandresept0186
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptRizkyRamdan2
 
Dasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam htmlDasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam htmloyie76
 
Pemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLPemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLKuliahKita
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01fanfandi21
 
BAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEBBAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEBTeukuMahawira
 

Semelhante a CSS-DASAR (20)

Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
 
Css
CssCss
Css
 
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
Dasar-dasar HTML.ppt
Dasar-dasar HTML.pptDasar-dasar HTML.ppt
Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
Dasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam htmlDasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam html
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
 
Pemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLPemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTML
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
Css tutorial-01
Css tutorial-01Css tutorial-01
Css tutorial-01
 
BAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEBBAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEB
 

Mais de SMK Negeri 6 Malang

PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI UPAYA MENINGKATKAN HASIL BELAJAR BIOL...
PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI  UPAYA MENINGKATKAN HASIL BELAJAR BIOL...PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI  UPAYA MENINGKATKAN HASIL BELAJAR BIOL...
PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI UPAYA MENINGKATKAN HASIL BELAJAR BIOL...SMK Negeri 6 Malang
 
PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...
PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...
PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...SMK Negeri 6 Malang
 
PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0
PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0
PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0SMK Negeri 6 Malang
 
REGULASI EMOSI (DASAR KONSEPTUAL)
REGULASI EMOSI (DASAR KONSEPTUAL)REGULASI EMOSI (DASAR KONSEPTUAL)
REGULASI EMOSI (DASAR KONSEPTUAL)SMK Negeri 6 Malang
 
PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...
PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...
PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...SMK Negeri 6 Malang
 
PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...
PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...
PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...SMK Negeri 6 Malang
 
PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...
PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...
PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...SMK Negeri 6 Malang
 
PENGARUH KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA PRAKTIK DI SMK T...
PENGARUH  KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA  PRAKTIK DI SMK  T...PENGARUH  KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA  PRAKTIK DI SMK  T...
PENGARUH KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA PRAKTIK DI SMK T...SMK Negeri 6 Malang
 
Tutorial lanjutan java netbeans 8 : Create Read Update Delete
Tutorial lanjutan java netbeans 8 : Create Read Update DeleteTutorial lanjutan java netbeans 8 : Create Read Update Delete
Tutorial lanjutan java netbeans 8 : Create Read Update DeleteSMK Negeri 6 Malang
 
Lokasi halal bi halal IKB HA Kariem 2015
Lokasi halal bi halal IKB HA Kariem 2015Lokasi halal bi halal IKB HA Kariem 2015
Lokasi halal bi halal IKB HA Kariem 2015SMK Negeri 6 Malang
 
Tes ujian online google drive google form
Tes ujian online google drive google formTes ujian online google drive google form
Tes ujian online google drive google formSMK Negeri 6 Malang
 
kimia - penentuan bilangan oksidasi ( biloks )
kimia - penentuan bilangan oksidasi ( biloks )kimia - penentuan bilangan oksidasi ( biloks )
kimia - penentuan bilangan oksidasi ( biloks )SMK Negeri 6 Malang
 
Struktur dan kurikulum SMK Teknik Komputer dan Informatika
Struktur dan kurikulum SMK Teknik Komputer dan InformatikaStruktur dan kurikulum SMK Teknik Komputer dan Informatika
Struktur dan kurikulum SMK Teknik Komputer dan InformatikaSMK Negeri 6 Malang
 
Reuni lintas angkatan SMP Negeri 6 Malang (SPENMAL)
Reuni lintas angkatan SMP Negeri 6 Malang (SPENMAL)Reuni lintas angkatan SMP Negeri 6 Malang (SPENMAL)
Reuni lintas angkatan SMP Negeri 6 Malang (SPENMAL)SMK Negeri 6 Malang
 
webdesign dasar : 11 list sebagai menu
webdesign dasar : 11 list sebagai menuwebdesign dasar : 11 list sebagai menu
webdesign dasar : 11 list sebagai menuSMK Negeri 6 Malang
 

Mais de SMK Negeri 6 Malang (20)

PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI UPAYA MENINGKATKAN HASIL BELAJAR BIOL...
PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI  UPAYA MENINGKATKAN HASIL BELAJAR BIOL...PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI  UPAYA MENINGKATKAN HASIL BELAJAR BIOL...
PEMANFAATAN MEDIA KIT GENETIKA SEBAGAI UPAYA MENINGKATKAN HASIL BELAJAR BIOL...
 
PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...
PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...
PENERAPAN MODEL PEMBELAJARAN LANGSUNG (DIRECT INSTRUCTION) DENGAN PENDEKATAN ...
 
PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0
PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0
PROBLEMATIKA PENDIDIKAN KEJURUAN DALAM REVOLUSI INDUSTRI 4.0
 
REGULASI EMOSI (DASAR KONSEPTUAL)
REGULASI EMOSI (DASAR KONSEPTUAL)REGULASI EMOSI (DASAR KONSEPTUAL)
REGULASI EMOSI (DASAR KONSEPTUAL)
 
PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...
PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...
PENINGKATAN KEMAMPUAN MENGHAFAL DAN MEMAHAMI AYAT-AYAT PILIHAN DALAM AL-QUR’A...
 
PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...
PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...
PENGGUNAAN MEDIA WAYANG PAHLAWAN NASIONAL UNTUK MENINGKATKAN HASIL BELAJAR BA...
 
PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...
PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...
PENINGKATAN KOMPETENSI MENGGAMBAR TEKNIK SISWA KELAS X TEKNIK INSTALASI TENAG...
 
PENGARUH KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA PRAKTIK DI SMK T...
PENGARUH  KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA  PRAKTIK DI SMK  T...PENGARUH  KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA  PRAKTIK DI SMK  T...
PENGARUH KEPEMIMPINAN DAN DIKLAT SERTA KELENGKAPAN SARANA PRAKTIK DI SMK T...
 
Tutorial lanjutan java netbeans 8 : Create Read Update Delete
Tutorial lanjutan java netbeans 8 : Create Read Update DeleteTutorial lanjutan java netbeans 8 : Create Read Update Delete
Tutorial lanjutan java netbeans 8 : Create Read Update Delete
 
Lokasi halal bi halal IKB HA Kariem 2015
Lokasi halal bi halal IKB HA Kariem 2015Lokasi halal bi halal IKB HA Kariem 2015
Lokasi halal bi halal IKB HA Kariem 2015
 
Tes ujian online google drive google form
Tes ujian online google drive google formTes ujian online google drive google form
Tes ujian online google drive google form
 
kimia - penentuan bilangan oksidasi ( biloks )
kimia - penentuan bilangan oksidasi ( biloks )kimia - penentuan bilangan oksidasi ( biloks )
kimia - penentuan bilangan oksidasi ( biloks )
 
Latihan soal kimia ujian smk
Latihan soal kimia ujian smkLatihan soal kimia ujian smk
Latihan soal kimia ujian smk
 
Ki kd kimia smk kurikulum 2013
Ki kd kimia smk kurikulum 2013Ki kd kimia smk kurikulum 2013
Ki kd kimia smk kurikulum 2013
 
Struktur dan kurikulum SMK Teknik Komputer dan Informatika
Struktur dan kurikulum SMK Teknik Komputer dan InformatikaStruktur dan kurikulum SMK Teknik Komputer dan Informatika
Struktur dan kurikulum SMK Teknik Komputer dan Informatika
 
Tes tulis html dan css
Tes tulis html dan cssTes tulis html dan css
Tes tulis html dan css
 
Reuni lintas angkatan SMP Negeri 6 Malang (SPENMAL)
Reuni lintas angkatan SMP Negeri 6 Malang (SPENMAL)Reuni lintas angkatan SMP Negeri 6 Malang (SPENMAL)
Reuni lintas angkatan SMP Negeri 6 Malang (SPENMAL)
 
Soal uts pemrograman web
Soal uts pemrograman webSoal uts pemrograman web
Soal uts pemrograman web
 
webdesign dasar : 12 multimedia
webdesign dasar : 12 multimediawebdesign dasar : 12 multimedia
webdesign dasar : 12 multimedia
 
webdesign dasar : 11 list sebagai menu
webdesign dasar : 11 list sebagai menuwebdesign dasar : 11 list sebagai menu
webdesign dasar : 11 list sebagai menu
 

Último

LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptLATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptPpsSambirejo
 
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
 
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
 
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
 
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxPERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxRizkyPratiwi19
 
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
 
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMMAKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMMIGustiBagusGending
 
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfSalinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfWidyastutyCoyy
 
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
 
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxPPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxssuser8905b3
 
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
 
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
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxadimulianta1
 
ppt-akhlak-tercela-foya-foya-riya-sumah-takabur-hasad asli.ppt
ppt-akhlak-tercela-foya-foya-riya-sumah-takabur-hasad asli.pptppt-akhlak-tercela-foya-foya-riya-sumah-takabur-hasad asli.ppt
ppt-akhlak-tercela-foya-foya-riya-sumah-takabur-hasad asli.pptAgusRahmat39
 
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
 
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
 
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
 
Modul Projek - Batik Ecoprint - Fase B.pdf
Modul Projek  - Batik Ecoprint - Fase B.pdfModul Projek  - Batik Ecoprint - Fase B.pdf
Modul Projek - Batik Ecoprint - Fase B.pdfanitanurhidayah51
 
PPT Penjumlahan Bersusun Kelas 1 Sekolah Dasar
PPT Penjumlahan Bersusun Kelas 1 Sekolah DasarPPT Penjumlahan Bersusun Kelas 1 Sekolah Dasar
PPT Penjumlahan Bersusun Kelas 1 Sekolah Dasarrenihartanti
 
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
 

Último (20)

LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.pptLATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
LATAR BELAKANG JURNAL DIALOGIS REFLEKTIF.ppt
 
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
 
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
 
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
 
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxPERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
 
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
 
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMMAKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
 
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfSalinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.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) &...
 
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxPPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
 
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
 
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)
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptx
 
ppt-akhlak-tercela-foya-foya-riya-sumah-takabur-hasad asli.ppt
ppt-akhlak-tercela-foya-foya-riya-sumah-takabur-hasad asli.pptppt-akhlak-tercela-foya-foya-riya-sumah-takabur-hasad asli.ppt
ppt-akhlak-tercela-foya-foya-riya-sumah-takabur-hasad asli.ppt
 
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
 
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
 
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
 
Modul Projek - Batik Ecoprint - Fase B.pdf
Modul Projek  - Batik Ecoprint - Fase B.pdfModul Projek  - Batik Ecoprint - Fase B.pdf
Modul Projek - Batik Ecoprint - Fase B.pdf
 
PPT Penjumlahan Bersusun Kelas 1 Sekolah Dasar
PPT Penjumlahan Bersusun Kelas 1 Sekolah DasarPPT Penjumlahan Bersusun Kelas 1 Sekolah Dasar
PPT Penjumlahan Bersusun Kelas 1 Sekolah Dasar
 
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
 

CSS-DASAR

  • 2. Ingat  Aturan XHTML 1. elemen XHTML harus ditulis secara bersarang 2. elemen XHTML (yang berpasangan) harus ditutup dengan pasangannya 3. elemen XHTML yang kosong (yang tidak berpasangan) juga harus ditutup 4. elemen XHTML harus ditulis dalam huruf kecil 5. dokumen XHTML hanya memiliki 1 elemen induk, yaitu <html>. Elemen anak harus ditulis secara berpasangan dan bersarang terhadap elemen induknya
  • 3. Ingat  Aturan XHTML 6. nama atribut ditulis dalam huruf kecil 7. nilai atribut harus diapit dengan tanda petik 8. penulisan atribut dalam bentuk minimal dilarang 9. atribut 'lang' (bahasa) digunakan jika konten elemen mengandung bahasa tertentu 10. semua dokumen XHTML harus memiliki deklarasi DOCTYPE.
  • 4.
  • 5. fungsi CSS  Mengatur ulang tampilan (presentation) tag HTML Misalnya tag <H1> mempunyai style/gaya tampilan : Font : Times New Roman; Size : 6 (24pt); Text Decoration : Bold; Line-height = 24pt; INI JUDUL DENGAN H1 STANDAR
  • 6. Struktur webpage XHTML  DOCTYPE, HTML, HEAD, BODY  DOCTYPE menentukan bagaimana dokumen tersebut dibaca oleh browser. Apakah browser membaca dokumen tersebut dalam modus Standard atau Quirks.  Pada prinsipnya XHTML = HTML, hanya ada perbaikan pada aturan-aturan penulisan dan penggunaan elemen & atribut HTML
  • 7. XHTML: Document Type Definitions  XHTML - Strict / strict doctype declaration: Kontrol seluruh layout dan format sebuah halaman Web melalui CSS. Tidak menggunakan tag font, align dan table  XHTML - Transitional / transitional doctype declaration: masih menggunakan sebagian besar tag-tag HTML seperti font dan table untuk melayout halaman.  XHTML - Frames / frameset declaration: Penggunaan Frame pada halaman Web.
  • 8. Penulisan Doctype  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">
  • 9. fungsi CSS  Membuat tata letak/layout halaman web halaman web tanpa css halaman web dengan css  Memudahkan dalam mengelola website ◦ Mengatur ulang tata letak ◦ Mengatur ulang tampilan tag HTML
  • 10. Implementasi/penerapan CSS CSS dapat ditambahkan dalam halaman web kita dengan 3 cara: 1. Inline CSS: menulis style langsung pada tag HTML 2. Embedded CSS: menulis CSS di dalam bagian HEAD sebuah dokumen HTML 3. External File CSS: menggunakan file CSS terpisah
  • 11. Contoh penulisan inline style <div style=“color:red; background- color:silver;”> ..... konten / isi informasi ..... </div>
  • 14.