SlideShare a Scribd company logo
Profesional 1
Tahun
CSS Basic
Overview Materi
CSS (Cascading Style Sheet) merupakan salah satu
bahasa pemrograman web untuk mengendalikan
beberapa komponen dalam sebuah web sehingga
akan lebih terstruktur dan seragam. Dengan CSS kita
dapat mengatur dan mengontrol tampilan halaman
web serta memisahkan antara tampilan dan konten
halaman web. Aplikasi ini banyak digunakan dalam
pembuatan website karena kemampuannya untuk
menghasilkan tampilan website yang sama namun
dengan format yang berbeda dan dilengkapi
dengan kemudahan serta kepraktisan dalam
membuat sebuah website.
Durasi Pembelajaran
Jumlah Pertemuan     : 8 Sesi
Durasi / Sesi        : 120 Menit
Jumlah Latihan       : 6 topik
Quis                 : 1 kali
Final & Skill Test   : Dilakukan pada
akhir pertemuan
Target Kompetensi
ο‚›   Peserta didik mampu merancang dan membuat
    desain website.
Topik Pembelajaran
Materi Pertemuan 1
Menggunakan css sesuai dengan aturan penulisannya untuk
membuat halaman website.

Materi Pertemuan 2
Mendesain sebuah halaman website menggunakan selector tag
html.
Membuat halaman website menggunakan aturan penulisan
selector class.

Materi Pertemuan 3
Membuat listing teks dan link teks.
Mendesain website sederhana menggunakan kode CSS layout.
Materi Pertemuan 4
Membuat desain menu drop down untuk sebuah website.

Materi Pertemuan 5
Membuat form di dalam layout menggunakan CSS untuk
halaman website.

Materi Pertemuan 6
Mendesain website secara utuh menggunakan kode CSS
layout.

Materi Pertemuan 7
Quis 1

Materi Pertemuan 8
Final & Skill Test
Instruktur Pengajar
         Nama               : Herlinda Kusmiati
         Status             : Instruktur Tetap
                              PalComTech
                              Palembang
         Pengalaman         : Merupakan salah satu
         staff instruktur pada LKP PalComTech
         yang telah berpengalaman dalam
         mengajar bidang Desain Web dan
         Desain Animasi. Adapun materi yang
         diampuh antara lain
         β€’ Adobe Flash
         β€’ Adobe Dreamweaver
         β€’ PHP & MYSQL
Instruktur Pengajar
            Nama               : Khoirunnisah
            Status             : Instruktur Tetap
                                 PalComTech
                                 Lahat
 NO PHOTO   Pengalaman         : Merupakan salah satu
            staff instruktur pada LKP PalComTech
            yang telah berpengalaman dalam
            mengajar bidang Desain Web dan
            Desain Animasi. Adapun materi yang
            diampuh antara lain
            β€’ Adobe Flash
            β€’ Adobe Dreamweaver
Instruktur Pengajar
            Nama               : Wafa Gunawan
            Status             : Instruktur Luar Biasa
                                 PalComTech
                                 Prabumulih
 NO PHOTO   Pengalaman         : Merupakan salah satu
            staff instruktur pada LKP PalComTech
            yang telah berpengalaman dalam
            mengajar bidang Desain Web dan PHP
            & MYSQL. Adapun materi yang
            diampuh antara lain
            β€’ Adobe Photoshop
            β€’ Adobe Dreamweaver
            β€’ HTML, PHP & MYSQL
Instruktur Pengajar
            Nama               : Lora Anggisti
            Status             : Instruktur Luar Biasa
                                 PalComTech
                                 Baturaja
 NO PHOTO   Pengalaman         : Merupakan salah satu
            staff instruktur pada LKP PalComTech
            yang telah berpengalaman dalam
            mengajar bidang Desain Grafis dan
            Desain Web. Adapun materi yang
            diampuh antara lain
            β€’ Adobe Photoshop
            β€’ Adobe Dreamweaver
            β€’ HTML
Instruktur Pengajar
            Nama               : Novan Suseno
            Status             : Instruktur Tetap
                                 PalComTech
                                 Jambi
 NO PHOTO   Pengalaman         : Merupakan salah satu
            staff instruktur pada LKP PalComTech
            yang telah berpengalaman dalam
            mengajar bidang Web Programming
            dan Desain Web. Adapun materi yang
            diampuh antara lain
            β€’ Web Programming
            β€’ Desain Grafis
Instruktur Pengajar
            Nama               : Nori Sahrun
            Status             : Instruktur Luar Biasa
                                 PalComTech
                                 Pekanbaru
 NO PHOTO   Pengalaman         : Merupakan salah satu
            staff instruktur pada LKP PalComTech
            yang telah berpengalaman dalam
            mengajar bidang Web Programming
            dan Microsoft Office. Adapun materi
            yang diampuh antara lain
            β€’ Web Programming
            β€’ Microsoft Office

More Related Content

Viewers also liked

Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 1 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   1 частв свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   1 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 1 частRumiana Tarpova
Β 
история Π½Π° химията ΠΊΠ°Ρ‚ΠΎ Π½Π°ΡƒΠΊΠ°
история Π½Π° химията ΠΊΠ°Ρ‚ΠΎ наукаистория Π½Π° химията ΠΊΠ°Ρ‚ΠΎ Π½Π°ΡƒΠΊΠ°
история Π½Π° химията ΠΊΠ°Ρ‚ΠΎ Π½Π°ΡƒΠΊΠ°
Rumiana Tarpova
Β 
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 2 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   2 частв свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   2 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 2 част
Rumiana Tarpova
Β 
Trick mengerjakan toefl
Trick mengerjakan toeflTrick mengerjakan toefl
Trick mengerjakan toefl
Ardian Namikaze
Β 
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 5 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   5 частв свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   5 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 5 част
Rumiana Tarpova
Β 
Π΅Π΄Π½ΠΎΠΊΠ»Π΅Ρ‚ΡŠΡ‡Π½ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈ
Π΅Π΄Π½ΠΎΠΊΠ»Π΅Ρ‚ΡŠΡ‡Π½ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΠ΅Π΄Π½ΠΎΠΊΠ»Π΅Ρ‚ΡŠΡ‡Π½ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈ
Π΅Π΄Π½ΠΎΠΊΠ»Π΅Ρ‚ΡŠΡ‡Π½ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈRumiana Tarpova
Β 
Царство Π“ΡŠΠ±ΠΈ
Царство   Π“ΡŠΠ±ΠΈΠ¦Π°Ρ€ΡΡ‚Π²ΠΎ   Π“ΡŠΠ±ΠΈ
Царство Π“ΡŠΠ±ΠΈRumiana Tarpova
Β 
мускули Π² Ρ‡ΠΎΠ²Π΅ΡˆΠΊΠΎΡ‚ΠΎ тяло
мускули Π² Ρ‡ΠΎΠ²Π΅ΡˆΠΊΠΎΡ‚ΠΎ тяломускули Π² Ρ‡ΠΎΠ²Π΅ΡˆΠΊΠΎΡ‚ΠΎ тяло
мускули Π² Ρ‡ΠΎΠ²Π΅ΡˆΠΊΠΎΡ‚ΠΎ тяло
Rumiana Tarpova
Β 
ΠΏΠ°ΠΏΡ€Π°Ρ‚ΠΎΠ²ΠΈ растСния
ΠΏΠ°ΠΏΡ€Π°Ρ‚ΠΎΠ²ΠΈ растСнияпапратови растСния
ΠΏΠ°ΠΏΡ€Π°Ρ‚ΠΎΠ²ΠΈ растСнияRumiana Tarpova
Β 
клас Π—Π΅ΠΌΠ½ΠΎΠ²ΠΎΠ΄Π½ΠΈ
клас Π—Π΅ΠΌΠ½ΠΎΠ²ΠΎΠ΄Π½ΠΈ клас Π—Π΅ΠΌΠ½ΠΎΠ²ΠΎΠ΄Π½ΠΈ
клас Π—Π΅ΠΌΠ½ΠΎΠ²ΠΎΠ΄Π½ΠΈ Rumiana Tarpova
Β 
голосСмСнни растСния 2013
голосСмСнни растСния  2013голосСмСнни растСния  2013
голосСмСнни растСния 2013
Rumiana Tarpova
Β 
ΠΎΠΏΠΎΡ€Π½ΠΎ Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π½Π° систСма
ΠΎΠΏΠΎΡ€Π½ΠΎ      Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π½Π°       систСмаопорно      Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π½Π°       систСма
ΠΎΠΏΠΎΡ€Π½ΠΎ Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π½Π° систСмаRumiana Tarpova
Β 

Viewers also liked (12)

Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 1 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   1 частв свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   1 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 1 част
Β 
история Π½Π° химията ΠΊΠ°Ρ‚ΠΎ Π½Π°ΡƒΠΊΠ°
история Π½Π° химията ΠΊΠ°Ρ‚ΠΎ наукаистория Π½Π° химията ΠΊΠ°Ρ‚ΠΎ Π½Π°ΡƒΠΊΠ°
история Π½Π° химията ΠΊΠ°Ρ‚ΠΎ Π½Π°ΡƒΠΊΠ°
Β 
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 2 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   2 частв свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   2 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 2 част
Β 
Trick mengerjakan toefl
Trick mengerjakan toeflTrick mengerjakan toefl
Trick mengerjakan toefl
Β 
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 5 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   5 частв свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅   5 част
Π² свСта Π½Π° ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΡ‚Π΅ 5 част
Β 
Π΅Π΄Π½ΠΎΠΊΠ»Π΅Ρ‚ΡŠΡ‡Π½ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈ
Π΅Π΄Π½ΠΎΠΊΠ»Π΅Ρ‚ΡŠΡ‡Π½ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈΠ΅Π΄Π½ΠΎΠΊΠ»Π΅Ρ‚ΡŠΡ‡Π½ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈ
Π΅Π΄Π½ΠΎΠΊΠ»Π΅Ρ‚ΡŠΡ‡Π½ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΈ
Β 
Царство Π“ΡŠΠ±ΠΈ
Царство   Π“ΡŠΠ±ΠΈΠ¦Π°Ρ€ΡΡ‚Π²ΠΎ   Π“ΡŠΠ±ΠΈ
Царство Π“ΡŠΠ±ΠΈ
Β 
мускули Π² Ρ‡ΠΎΠ²Π΅ΡˆΠΊΠΎΡ‚ΠΎ тяло
мускули Π² Ρ‡ΠΎΠ²Π΅ΡˆΠΊΠΎΡ‚ΠΎ тяломускули Π² Ρ‡ΠΎΠ²Π΅ΡˆΠΊΠΎΡ‚ΠΎ тяло
мускули Π² Ρ‡ΠΎΠ²Π΅ΡˆΠΊΠΎΡ‚ΠΎ тяло
Β 
ΠΏΠ°ΠΏΡ€Π°Ρ‚ΠΎΠ²ΠΈ растСния
ΠΏΠ°ΠΏΡ€Π°Ρ‚ΠΎΠ²ΠΈ растСнияпапратови растСния
ΠΏΠ°ΠΏΡ€Π°Ρ‚ΠΎΠ²ΠΈ растСния
Β 
клас Π—Π΅ΠΌΠ½ΠΎΠ²ΠΎΠ΄Π½ΠΈ
клас Π—Π΅ΠΌΠ½ΠΎΠ²ΠΎΠ΄Π½ΠΈ клас Π—Π΅ΠΌΠ½ΠΎΠ²ΠΎΠ΄Π½ΠΈ
клас Π—Π΅ΠΌΠ½ΠΎΠ²ΠΎΠ΄Π½ΠΈ
Β 
голосСмСнни растСния 2013
голосСмСнни растСния  2013голосСмСнни растСния  2013
голосСмСнни растСния 2013
Β 
ΠΎΠΏΠΎΡ€Π½ΠΎ Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π½Π° систСма
ΠΎΠΏΠΎΡ€Π½ΠΎ      Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π½Π°       систСмаопорно      Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π½Π°       систСма
ΠΎΠΏΠΎΡ€Π½ΠΎ Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π½Π° систСма
Β 

Css basic

  • 2. Overview Materi CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Dengan CSS kita dapat mengatur dan mengontrol tampilan halaman web serta memisahkan antara tampilan dan konten halaman web. Aplikasi ini banyak digunakan dalam pembuatan website karena kemampuannya untuk menghasilkan tampilan website yang sama namun dengan format yang berbeda dan dilengkapi dengan kemudahan serta kepraktisan dalam membuat sebuah website.
  • 3. Durasi Pembelajaran Jumlah Pertemuan : 8 Sesi Durasi / Sesi : 120 Menit Jumlah Latihan : 6 topik Quis : 1 kali Final & Skill Test : Dilakukan pada akhir pertemuan
  • 4. Target Kompetensi ο‚› Peserta didik mampu merancang dan membuat desain website.
  • 5. Topik Pembelajaran Materi Pertemuan 1 Menggunakan css sesuai dengan aturan penulisannya untuk membuat halaman website. Materi Pertemuan 2 Mendesain sebuah halaman website menggunakan selector tag html. Membuat halaman website menggunakan aturan penulisan selector class. Materi Pertemuan 3 Membuat listing teks dan link teks. Mendesain website sederhana menggunakan kode CSS layout.
  • 6. Materi Pertemuan 4 Membuat desain menu drop down untuk sebuah website. Materi Pertemuan 5 Membuat form di dalam layout menggunakan CSS untuk halaman website. Materi Pertemuan 6 Mendesain website secara utuh menggunakan kode CSS layout. Materi Pertemuan 7 Quis 1 Materi Pertemuan 8 Final & Skill Test
  • 7. Instruktur Pengajar Nama : Herlinda Kusmiati Status : Instruktur Tetap PalComTech Palembang Pengalaman : Merupakan salah satu staff instruktur pada LKP PalComTech yang telah berpengalaman dalam mengajar bidang Desain Web dan Desain Animasi. Adapun materi yang diampuh antara lain β€’ Adobe Flash β€’ Adobe Dreamweaver β€’ PHP & MYSQL
  • 8. Instruktur Pengajar Nama : Khoirunnisah Status : Instruktur Tetap PalComTech Lahat NO PHOTO Pengalaman : Merupakan salah satu staff instruktur pada LKP PalComTech yang telah berpengalaman dalam mengajar bidang Desain Web dan Desain Animasi. Adapun materi yang diampuh antara lain β€’ Adobe Flash β€’ Adobe Dreamweaver
  • 9. Instruktur Pengajar Nama : Wafa Gunawan Status : Instruktur Luar Biasa PalComTech Prabumulih NO PHOTO Pengalaman : Merupakan salah satu staff instruktur pada LKP PalComTech yang telah berpengalaman dalam mengajar bidang Desain Web dan PHP & MYSQL. Adapun materi yang diampuh antara lain β€’ Adobe Photoshop β€’ Adobe Dreamweaver β€’ HTML, PHP & MYSQL
  • 10. Instruktur Pengajar Nama : Lora Anggisti Status : Instruktur Luar Biasa PalComTech Baturaja NO PHOTO Pengalaman : Merupakan salah satu staff instruktur pada LKP PalComTech yang telah berpengalaman dalam mengajar bidang Desain Grafis dan Desain Web. Adapun materi yang diampuh antara lain β€’ Adobe Photoshop β€’ Adobe Dreamweaver β€’ HTML
  • 11. Instruktur Pengajar Nama : Novan Suseno Status : Instruktur Tetap PalComTech Jambi NO PHOTO Pengalaman : Merupakan salah satu staff instruktur pada LKP PalComTech yang telah berpengalaman dalam mengajar bidang Web Programming dan Desain Web. Adapun materi yang diampuh antara lain β€’ Web Programming β€’ Desain Grafis
  • 12. Instruktur Pengajar Nama : Nori Sahrun Status : Instruktur Luar Biasa PalComTech Pekanbaru NO PHOTO Pengalaman : Merupakan salah satu staff instruktur pada LKP PalComTech yang telah berpengalaman dalam mengajar bidang Web Programming dan Microsoft Office. Adapun materi yang diampuh antara lain β€’ Web Programming β€’ Microsoft Office