LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

MODUL 2
CSS
Untuk memenuhi tugas matakuliah Praktikum Pemrograman Berbasis Web
yang dibimbing oleh Bapak Didik Dwi Prasetya

Asisten Praktikum:
Samsul Arifin

Oleh :
AMADEUZ EZRAFEL
(120533430965)
S1 PTI 12 Off D

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
UNIVERSITAS NEGERI MALANG
FEBRUARI 2014

A.
-

TUJUAN
Memahami struktur dasar Cascading Style Sheet (CSS).
Mampu membuat dokumen CSS yang baik dan benar.
Mampu memanfaatkan elemen-elemen dasar CSS untuk mendesain tampilan web.

B. LATIHAN
Latihan 1
Berikut adalah latihan pengenalan tentang desain web menggunakan CSS.
Pemanggilan CSS dilakukan menggunakan kode atribut <link type="text/css"
rel="stylesheet" href="stylesheet.css"/> dengan meletakkannya di dalam
head.

Berikut adalah isi dari file CSS yang telah dibuat yang dipanggil dalam index
HTML

tadi. Tentunya dengan penggunaan CSS menjadikan struktur kode

HTML terlihat lebih ringkas dan rapi.

Latihan 2
Berikut merupakan pengenalan CSS terhadap pengubahan warna font
menggunakan tag span yang dibuat sendiri dan tag paragraf yang didalamnya
diberi pengubahan warna

Latihan 3
Berikut format CSS dalam mengubah tampilan jenis atau tipe font, hanya yang
diapit oleh tag span saja yang akan berganti tipe menjadi font cursive.

Latihan 4
Untuk mengubah ukuran, warna serta jenis font dapat langsung dituliskan dalam
selector yang akan diubah seperti contoh berikut menggunakan tag paragraf.

Latihan 5
Dalam penulisan CSS kita dapat memisah mana yang akan kita ubah ukuran
warna, background maupun jenis font dengan membuat selector yang terpisah.

Latihan 6

Pada pengubahan jenis font tertentu dapat diaplikasikan kode seperti berikut,
missal pada tulisan bertag h1 diubah menjadi verdana dan h3 menjadi courier,
sedangkan pada jenis font yang diapit tag paragraf menjadi warna ungu.

Latihan 7
Untuk pengubahan macam-macam jenis font dapat diterapkan pada CSS berikut,
misalnya diletakan font family cursive,times dan sans serif. Bila pada default
tidak terdapat font cursive, maka akan diubah menjadi font times, jika tak ada
maka dioakai font sans serif.

Latihan 8
Pada CSS berikut menerapkan pengubahan background warna dengan terapakan
tinggi dan lebar nya seperti pada contoh berikut membuat blok tulisan yang
berwarna merah dengan panjang dan lebar sesuai ketentuan.

Latihan 9
Pada latihan ini menerapkan desain CSS pada pembuatan tabel, seperti
pemberian ketebalan garis tepi/ border dan warnanya serta tinggi dari cell tabel
yang akan dibuat seperti contoh berikut.

Latihan 10
Pada penulisan CSS berikut menerapkan desain CSS terhadap obyek tampilan
gambar, pengubahan desain paragraf dan tag div yang diberi bentuk border
mulai dari tingg, warna, hingga style. Seperti pada contoh berikut yang
mendapat border diapit oleh tag div sehingga menghasilkan garis tepi yang
tulisannya berposisi center.

Latihan 11
Pada desain CSS bisa menerapkan elemen tertentu yang diinginkan, seperti pada
contoh berikut untuk mengubah tulisan h3 yang diapit oleh 3 div agar berwarna

merah, maka selector penulisannya dapat dilakukan dengan cara div div div h3
{}

Latihan 12
Pada CSS bisa juga untuk dilakukan pemanggilan pengubahan melalui class.
Class pada CSS berfungsi untuk menerapkan suatu style pada banyak elemen
sehingga dapat diturunkan atau bersifat inheritance. Pemanggilannya diawali
oleh titik (.) seperti pada contoh berikut.

Latihan 13
CSS juga menyediakan pemanggilan hanya untuk penerapan satu elemen saja
atau khusus yang dinamakan ID. Sehingga pengubahan terhadap HTML
nantinya hanya berfungsi khusus dengan nama unik, seperti untuk header, footer
dsb. Penulisannya diawali dengan tanda # lalu nama unik seperti pada contoh
berikut.

C. STUDI KASUS
- Coding HTML

Coding CSS

Tampilan Web
Tampilan Header, Menu dan Content Batik

Tampilan Content Sejarah Batik

Tampilan Content Teknik Pembuatan

Tampilan Content Join Us dan Footer

Keterangan :
Pada kode HTML terdapat pemanggilan stylesheet CSS dengan
tugrum.css Background dari HTML menggunakan gambar yang ada pada
direktori penyimpanan yang sama. Pada tugas ini menggunakan 5 divisi yang
semuanya bertipe id atau khusus yaitu div container, header, menu, content,
footer. Div container berfungsi sebagai wrapper atau pengelompok dari pada div
id yang lain sehinggga membentuk satu kesatuan. Pada div header terdapat
pemanggilan gambar yang di dalam file css diatur width dan height nya. Pada
div menu terdapat link internal yang akan merujuk pada div content. Pada div
content terdapat konten yang berisi tulisan dan gambar. Pada div footer terdapat
keterangan pembuat dengan teks berjalan.
Pada kode CSS terdapat desain pada keseluruh div id. Pada selector
container diatur border, warnanya, dsb. Pada selector header diatur ukuran
gambar/banner, background,dsb. Pada selector menu juga diatur background,
border serta selector menu anchor maupun hover jika merujuk pada link yang
akan dituju. Pada selector p, hr maupun span diatur untuk mendesain bentuk
format paragraf, garis horiszontal pemisah dan tulisan tertentu. Sedangkan pada
selector footer diatur untuk teks maupun area yang berada pada bagian bawah.

D. KESIMPULAN

CSS (Cascading Style Sheet) merupakan dokumen standar yang digunakan

untuk mendesain tampilan web.

<link type="text/css" rel="stylesheet" href="stylesheet.css"/> pada tag head.

E. DAFTAR PUSTAKA

Arifin, Samsul. 2014. Modul Ajar Praktikum Pemrograman Web Bab 2 CSS.
Jurusan Teknik Elektro FT.UM.