Scribd
Unggah
6 tayangan7 halaman

Modul 3 - Web Client

Modul ini membahas dasar-dasar HTML dan CSS dalam pemrograman web client, termasuk cara menuliskan CSS dengan berbagai metode seperti inline, internal, dan eksternal. Pembelajaran mencakup penggunaan selektor ID dan class, serta praktik langsung untuk menerapkan CSS dalam HTML. Alat yang diperlukan termasuk editor teks dan browser untuk pengujian.

Diunggah oleh

Najla Safa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
6 tayangan7 halaman

Modul 3 - Web Client

Modul ini membahas dasar-dasar HTML dan CSS dalam pemrograman web client, termasuk cara menuliskan CSS dengan berbagai metode seperti inline, internal, dan eksternal. Pembelajaran mencakup penggunaan selektor ID dan class, serta praktik langsung untuk menerapkan CSS dalam HTML. Alat yang diperlukan termasuk editor teks dan browser untuk pengujian.

Diunggah oleh

Najla Safa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

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/

Anda mungkin juga menyukai