MODUL 3
PRAKTIKUM PEMROGRAMAN WEB CLIENT
Disusun oleh :
FX. Henry Nugroho, S.T., M.Cs.
UNIVERSITAS TEKNNOLOGI DIGITAL INDONESIA
YOGYAKARTA
2024
i
MODUL 3
TAG DASAR HTML
CAPAIAN PEMBELAJARAN
1. Menuliskan CSS sesuai aturan (properti dan nilai)
2. Menuliskan selektor tag
3. Menuliskan selektor id
4. Menuliskan selektor class
5. Menuliskan script internal style
6. Menuliskan script eksternal style
7. Menuliskan inline style
KEBUTUHAN ALAT/BAHAN/SOFTWARE
1. Editor notepad / notepad++
2. Browser
DASAR TEORI
CSS (Cascading Style Sheets) adalah script program yang digunakan untuk mengatur
tampilan website, misalnya warna body , jenis serta ukuran font, layout website.
Perintah html hanya mampu mengatur tampilan untuk satu halaman site sedangkan CSS
mampu mengontrol tampilan banyak halaman sekaligus. CSS tidak dikategorikan sebagai
bahasa pemrograman karena di dalamnya tidak ada struktur kontrol (percabangan,
perulangan, array dll). CSS dapat ditambahkan ke dalam HTML dengan 3 cara:
a. inline : melalui atribut “style” pada elemen Html
b. internal : melalui tag <style> yang diletakkan di dalam tag <Head>
c. eksternal : CSS disimpan pada sebuah file tersendiri dengan ekstensi *.css
Syntax CSS :
1
Keterangan :
- Selector : menentukan elemen html yang akan diatur tampilannya.
- Declaration : menentukan atribut apa saja yang akan diatur , misal warna font,
ukuran font, warna background website.
CSS ID Selector
ID pada CSS berfungsi layaknya KTP pada manusia, yaitu sebagai nama pengenal. Jadi
kita dapat membuat sebuah nama pengenal khusus untuk memudahkan mengingat
bagian CSS tertentu. CSS ID diawali dengan karakter (#), contohnya:
#aturFont {
text-align: center;
color: red;
}
CSS Class Selector
Class CSS fungsinya mirip seperti ID CSS yaitu sebagai pengenal. Perbedaannya saat
pemanggilan pada file Html, CSS class bisa dipanggil lebih dari satu kali sedangkan
CSS Id hanya dipanggil satu kali. Penulisan CSS class diawali dengan tanda (.),
contohnya:
.center {
text-align: center;
color: red;
}
2
PRAKTIK
Praktik 1 : Menambahkan CSS secara Internal
1. Ketikan kode program berikut ini
3
Praktik 2 : Menambahkan CSS secara inline di dalam elemen html
Buat file baru lalu ketikkan kode program berikut ini
Praktik 3 : Menambahkan CSS secara eksternal
1. Buat file baru lalu ketikkan kode program berikut ini. simpan dengan nama file
desainku.css
2. Buat file baru lalu ketikkan kode program berikut ini. simpan dengan nama file
eksternalCSS.html
3. Jalankan di browser file eksternalCSS.html
4
Praktik 4 : Membuat ID CSS
Buat file baru lalu ketikkan kode program berikut ini
Praktik 5 : Membuat Class CSS
Buat file baru lalu ketikkan kode program berikut ini.
Perhatikan baris 13 , 14 dimana sebuah class bisa dipanggil lebih dari satu kali
5
LATIHAN
1. Modifikasi program praktik 4, CSS dibuat menjadi eksternal file seperti praktik 3
2. Modifikasi program praktik 5, CSS dibuat menjadi eksternal file seperti praktik 3
TUGAS
Tugas diberikan oleh dosen pengampu
REFERENSI
1. https://www.w3schools.com/css/
