BKPM - Minggu 3 Acara 5 Dan 6

BKPM – WORKSHOP PEMROGRAMAN WEB
BUKU KERJA PRAKTIK MAHASISWA (BKPM)

WORKSHOP PEMROGRAMAN WEB
TKK20707
SEMESTER 2
PENGAMPU :
Lukie Perdanasari, S.Kom., M.T.
Lukman Hakim, S.Kom., M.Kom.
Yogiswara, ST, MT
PROGRAM STUDI D3 TEKNIK KOMPUTER

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI JEMBER
TAHUN 2023
Acara 5. CSS
Pokok Bahasan : Penggunaan CSS

Acara Praktikum/Praktik : Acara 1 / Minggu 3
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 Menit
a. Capaian Pembelajaran Mata Kuliah (CPMK)
1. Mahasiswa mampu memahami syntax dasar css
2. Mahasiswa mampu mendesain halaman HTML dengan CSS sederhana
b. Indikator
Kemampuan bekerja individu terkait dasar desain sederhana HTML menggunakan CSS
c. Dasar Teori
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk
mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS
berfungsi untukmemisahkan konten dari tampilan visualnya di situs.
Dalam kode CSS, ada 2 bagian yang terpisah, yaitu Selector dan Declaration.
Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi
suatu nilai.
Setiap Declaration terdiri dari Property dan Value. Untuk penulisan Declaration
harus menggunakan tanda kurung kurawal {...} Property adalah atribut style yang
ingin dirubah, misalnya color, background, margin, dll.
Setiap Property memiliki Value (nilai) sesuai dengan jenis property-nya.
d. Alat dan Bahan
1. Komputer Kerja
2. Ms. Word
3. Browser (Mozila/Chrome)
4. Instaler Xampp dapat di download di
https://www.apachefriends.org/download.html
5. Instaler IDE (tidak mengikat)
- notepad++ (https://notepad-plus-plus.org/downloads/)
- visual studio (https://code.visualstudio.com/download)
e. Prosedur Kerja
Buka notepad++ atau IDE yang anda gunakan, kemudian ketikkan kode dibawah
ini, simpan, kemudian jalankan pada browser anda. Jangan lupa screenshot kode
dan hasilnya untuk digunakan sebagai laporan. Jangan lupa analisa kode
program yanganda buat.
1. Menerapkan css sederhana di dalam file html
2. Menggunakan DIV
3. Mengubah background menjadi gambar

4. Membuat file .css
5. Olah gambar menggunakan CSS

Tambahkan padding, kemudian jelaskan fungsinya

TUGAS PRAKTIKUM 1
Buat sebuah file html dengan mengkreasikan border menggunakan css. Tampilan
minimal adalah seperti gambar diatas.
f. Hasil dan Pembahasan
1. Kerjakan laporan sesuai dengan format yang sudah diberikan

2. Tambahkan dasar teori yang menunjang kegiatan workshop
3. Screenshot kode program dan hasil
4. Analisa program dan Jawab jika ada pertanyaan pada BKPM
5. Beri kesimpulan
6. Kumpulkan tepat waktu disertai kode program/source code (file html) yang
sudah dibuat (berupa archive bisa rar/zip)
7. Dasar teori, proses pengerjaan, hasil dan pembahasan, penulisan kesimpulan,

referensi, keunikan laporan memperoleh apresiasi.
g. Rubrik Penilaian
Bobot Nilai
No. Indikator Kinerja Penilaian
Penilaian Akhir
1 Mahasiswa mampu memahami
50%
syntax dasar css
2 Mahasiswa mampu mendesain
halaman HTML dengan CSS 50%
sederhana
Total 100%
Acara 6. CSS
Pokok Bahasan : Membuat Layout Menggunakan CSS

Acara Praktikum/Praktik : Acara 2 / Minggu 3
Tempat : Politeknik Negeri Jember
Alokasi Waktu : 120 menit
a. Capaian Pembelajaran Mata Kuliah (CPMK)

1. Mahasiswa mampu memahami class dan id pada CSS
2. Mahasiswa mampu mendesain halaman dan layout HTML dengan CSS
sederhana
b. Indikator
Kemampuan bekerja individu terkait dasar desain HTML menggunakan CSS
c. Dasar Teori
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk
mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti
HTML. CSS berfungsi untukmemisahkan konten dari tampilan visualnya di
situs.
Dalam kode CSS, ada 2 bagian yang terpisah, yaitu Selector dan
Declaration. Selector biasanya merupakan elemen HTML atau tag dimana
berbagai properti diberi suatu nilai.
Setiap Declaration terdiri dari Property dan Value.
Untuk penulisan Declaration harus menggunakan tanda kurung kurawal
{...} Property adalah atribut style yang ingin dirubah, misalnya color,
background, margin,dll.
Setiap Property memiliki Value (nilai) sesuai dengan jenis property-nya.
d. Alat dan Bahan

1. Komputer Kerja
2. Ms. Word
3. Browser (Mozila/Chrome)
4. Instaler Xampp dapat di download di
https://www.apachefriends.org/download.html
5. Instaler IDE (tidak mengikat)
- notepad++ (https://notepad-plus-plus.org/downloads/)
- visual studio (https://code.visualstudio.com/download)
e. Prosedur Kerja
Buka notepad++ atau IDE yang anda gunakan, kemudian ketikkan kode dibawah
ini, simpan, kemudian jalankan pada browser anda. Jangan lupa screenshot kode dan
hasilnya untuk digunakan sebagai laporan. Jangan lupa analisa kode program yang
buat.
1. Mengenal Class dan ID
• Selektor ID bersifat unik, hanya bisa digunakan 1x. ID diawali dengan (#) dan
diikuti dengan nama identitasnya.
Pada contoh di bawah ini, ID dicontohkan dengan #par, dan untuk
menggunakan cssnya dapat menggunakan atribut id=”par”
• Selektor class dapat digunakan berulang kali. Class diawali dengan titik (.)
Pada contoh di bawah ini, class dicontohkan dengan .par, dan untuk
menggunakan cssnya dapat menggunakan atribut class=”par”
2. Membuat header menggunakan elemen semantik HTML5

Elemen semantik merupakan fitur tambahan yang mulai ada pada HTML5.
Elemen semantik adalah elemen yang menyatakan makna/tujuan dari elemen
itu sendiri. Pada contoh kali ini kita akan gunakan elemen header.
Ketikkan contoh kode di bawah ini, kemudian jalankan di browser anda.
3. Mempelajari elemen semantik lain yaitu nav, section, footer.

Selain header, nav (navigation), section, footer masih banyak lagi elemen
semantik dariHTML5 yang bisa kalian pelajari sendiri.
Kode program diatas menampilkan hasil seperti dibawah ini. elemen semantik
dapatdigunakan untuk membuat header, navigation, section dan footer dengan
mudah.
4. Mengubah layout menggunakan CSS

Selain menggunakan elemen semantik, kita juga bisa kreasikan layout website
sederhana kita menggunakan CSS. Contoh di bawah ini bertujuan untuk
menambah menu navigasi di baris atas konten. Ketik dan jalankan pada browser
anda kode HTMLberikut. Pisahkan antara elemen desain dan emelen utama.
Bagian mana yang berubah dari layout? Jelaskan!
5. Menjadikan konten menjadi dua kolom

Selain menggunakan nav dan section pada HTML5, kita dapat mendesain sendiri
layout website sesuai dengan keinginan kita. Pada poin 5 akan kita pelajari cara
mengubah konten website menjadi 2 kolom sama besar.
Buat 2 buah file baru. css dan html, jangan gunakan file pada latihan poin 4), hal
ini dilakukan agar kalian dapat membedakan kegunaan dan fungsi kode yang
dipakai.
6. Menjadikan konten menjadi tiga kolom

7. Menjadikan konten menjadi tiga kolom dengan proporsi berbeda

8. TUGAS PRAKTIKUM
BUAT KREASI WEBSITE SEDERHANA MENGGUNAKAN MATERI DI BKPM INI.
BOLEH MENGGUNAKAN ELEMEN SEMANTIK, ATAU MENGGUNAKAN CSS.
Isi konten semenarik mungkin, gunakan link sebagai navigasi.
f. Hasil dan Pembahasan

1. Kerjakan laporan sesuai dengan format yang sudah diberikan
2. Tambahkan dasar teori yang menunjang kegiatan workshop
3. Screenshot kode program dan hasil
4. Analisa program dan Jawab jika ada pertanyaan pada BKPM
5. Beri kesimpulan
6. Kumpulkan tepat waktu disertai kode program/source code (file html)yang sudah
dibuat (berupa archive bisa rar/zip)
7. Dasar teori, proses pengerjaan, hasil dan pembahasan, penulisan kesimpulan,

referensi, keunikan laporan memperoleh apresiasi.
g. Rubrik Penilaian
Bobot Nilai
No. Indikator Kinerja Penilaian
Penilaian Akhir
1 Keberhasilan memahami class dan id
pada CSS 50%
2 Keberhasilan dalam mendesain

halaman danlayout HTML dengan CSS 50%
sederhana
Total 100%

BKPM - Minggu 3 Acara 5 Dan 6

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

BKPM - Minggu 3 Acara 5 Dan 6

Diunggah oleh

Hak Cipta:

Format Tersedia

BKPM – WORKSHOP PEMROGRAMAN WEB

BUKU KERJA PRAKTIK MAHASISWA (BKPM)

PROGRAM STUDI D3 TEKNIK KOMPUTER

Pokok Bahasan : Penggunaan CSS

a. Capaian Pembelajaran Mata Kuliah (CPMK)

1. Mahasiswa mampu memahami syntax dasar css

2. Mahasiswa mampu mendesain halaman HTML dengan CSS sederhana

d. Alat dan Bahan

3. Mengubah background menjadi gambar

4. Membuat file .css

5. Olah gambar menggunakan CSS

Tambahkan padding, kemudian jelaskan fungsinya

f. Hasil dan Pembahasan

1. Kerjakan laporan sesuai dengan format yang sudah diberikan

7. Dasar teori, proses pengerjaan, hasil dan pembahasan, penulisan kesimpulan,

Pokok Bahasan : Membuat Layout Menggunakan CSS

a. Capaian Pembelajaran Mata Kuliah (CPMK)

d. Alat dan Bahan

2. Membuat header menggunakan elemen semantik HTML5

3. Mempelajari elemen semantik lain yaitu nav, section, footer.

4. Mengubah layout menggunakan CSS

Bagian mana yang berubah dari layout? Jelaskan!

5. Menjadikan konten menjadi dua kolom

6. Menjadikan konten menjadi tiga kolom

7. Menjadikan konten menjadi tiga kolom dengan proporsi berbeda

f. Hasil dan Pembahasan

7. Dasar teori, proses pengerjaan, hasil dan pembahasan, penulisan kesimpulan,

2 Keberhasilan dalam mendesain

Anda mungkin juga menyukai