Laporan Praktikum Pemrograman Web Modul 2

7/25/2019 Laporan Praktikum Pemrograman Web Modul 2

1/23

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:

Samsu Ari!in

Oe" :

AMADEU# E#RA$EL

%&2'())*)'+,(-

S& PTI .&2 O!! D

$AKULTAS TEKNIK

/URUSAN TEKNIK ELEKTRO

PRODI S& PENDIDIKAN TEKNIK IN$ORMATIKA

UNI0ERSITAS NEGERI MALANG

$EBRUARI 2'&*


2/23

A. TU/UAN

- Memahami struktur dasar Cascading Style Sheet (CSS)

- Mampu membuat dokumen CSS yang baik dan benar

- Mampu meman!aatkan elemen"elemen dasar CSS untuk mendesain tampilan web

B. LATI1AN

#atihan $

Berikut adalah latihan pengenalan tentang desain web menggunakan CSS

Pemanggilan CSS dilakukan menggunakan kode atribut ink t34e56te7t89ss6

re56st3es"eet6 "re!56st3es"eet9ss68; dengan meletakkannya di dalam

head


3/23

Berikut adalah isi dari !ile CSS yang telah dibuat yang dipanggil dalam inde%

&'M# tadi 'entunya dengan penggunaan CSS menadikan struktur kode

&'M# terlihat lebih ringkas dan rapi


4/23


5/23

#atihan

Berikut merupakan pengenalan CSS terhadap pengubahan warna !ont

menggunakan tag span yang dibuat sendiri dan tag paragra! yang didalamnya

diberi pengubahan warna


6/23

#atihan *

Berikut !ormat CSS dalam mengubah tampilan enis atau tipe !ont+ hanya yang

diapit oleh tag span saa yang akan berganti tipe menadi !ont cursi,e


7/23

#atihan -

Untuk mengubah ukuran+ warna serta enis !ont dapat langsung dituliskan dalam

selector yang akan diubah seperti contoh berikut menggunakan tag paragra!

#atihan .

Dalam penulisan CSS kita dapat memisah mana yang akan kita ubah ukuranwarna+ background maupun enis !ont dengan membuat selector yang terpisah


8/23

#atihan /


9/23

Pada pengubahan enis !ont tertentu dapat diaplikasikan kode seperti berikut+

missal pada tulisan bertag h$ diubah menadi ,erdana dan h* menadi courier+

sedangkan pada enis !ont yang diapit tag paragra! menadi warna ungu

#atihan 0

Untuk pengubahan macam"macam enis !ont dapat diterapkan pada CSS berikut+

misalnya diletakan !ont !amily cursi,e+times dan sans seri! Bila pada de!ault

tidak terdapat !ont cursi,e+ maka akan diubah menadi !ont times+ ika tak ada

maka dioakai !ont sans seri!


10/23

#atihan 1

Pada CSS berikut menerapkan pengubahan background warna dengan terapakan

tinggi dan lebar nya seperti pada contoh berikut membuat blok tulisan yang

berwarna merah dengan panang dan lebar sesuai ketentuan


11/23

#atihan 2

Pada latihan ini menerapkan desain CSS pada pembuatan tabel+ seperti

pemberian ketebalan garis tepi3 border dan warnanya serta tinggi dari cell tabel

yang akan dibuat seperti contoh berikut


12/23

#atihan $4

Pada penulisan CSS berikut menerapkan desain CSS terhadap obyek tampilangambar+ pengubahan desain paragra! dan tag di, yang diberi bentuk border

mulai dari tingg+ warna+ hingga style Seperti pada contoh berikut yang

mendapat border diapit oleh tag di, sehingga menghasilkan garis tepi yang

tulisannya berposisi center


13/23

#atihan $$

Pada desain CSS bisa menerapkan elemen tertentu yang diinginkan+ seperti pada

contoh berikut untuk mengubah tulisan h* yang diapit oleh * di, agar berwarna


14/23

merah+ maka selector penulisannya dapat dilakukan dengan cara


15/23

#atihan $*

CSS uga menyediakan pemanggilan hanya untuk penerapan satu elemen saa

atau khusus yang dinamakan 5D Sehingga pengubahan terhadap &'M#

nantinya hanya ber!ungsi khusus dengan nama unik+ seperti untuk header+ !ooter

dsb Penulisannya diawali dengan tanda 6 lalu nama unik seperti pada contoh

berikut


16/23


17/23

C. STUDI KASUS

- Coding &'M#


18/23


19/23


20/23

- Coding CSS


21/23

- 'ampilan Web

'ampilan &eader+ Menu dan Content Batik

'ampilan Content Searah Batik


22/23

'ampilan Content 'eknik Pembuatan

'ampilan Content 7oin Us dan 8ooter


23/23

- 9eterangan :

Pada kode &'M# terdapat pemanggilan stylesheet CSS dengan

tugrumcss Background dari &'M# menggunakan gambar yang ada pada

direktori penyimpanan yang sama Pada tugas ini menggunakan . di,isi yang

semuanya bertipe id atau khusus yaitu di, container+ header+ menu+ content+

!ooter Di, container ber!ungsi sebagai wrapper atau pengelompok dari pada di,

id yang lain sehinggga membentuk satu kesatuan Pada di, header terdapat

pemanggilan gambar yang di dalam !ile css diatur width dan height nya Pada

di, menu terdapat link internal yang akan meruuk pada di, content Pada di,

content terdapat konten yang berisi tulisan dan gambar Pada di, !ooter terdapat

keterangan pembuat dengan teks beralanPada kode CSS terdapat desain pada keseluruh di, id Pada selector

container diatur border+ warnanya+ dsb Pada selector header diatur ukuran

gambar3banner+ background+dsb Pada selector menu uga diatur background+

border serta selector menu anchor maupun ho,er ika meruuk pada link yang

akan dituu Pada selector p+ hr maupun span diatur untuk mendesain bentuk

!ormat paragra!+ garis horis;ontal pemisah dan tulisan tertentu Sedangkan pada

selector !ooter 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

Dokumen CSS dapat dipanggil pada dokumen &'M# dengan cara menuliskan

te%t3css> rel=>stylesheet> hre!=>stylesheetcss>3? pada tag head

Pada penulisan !ile CSS kita dapat mendesain tampilan dengan cara menuliskan

selector@property:,alueA)

E. DA$TAR PUSTAKAri!in+ Samsul. 4$- Modul Ajar Praktikum Pemrograman Web Bab 2 CSS

7urusan 'eknik lektro 8'UM

Laporan Praktikum Pemrograman Web Modul 2

Documents

Transcript of Laporan Praktikum Pemrograman Web Modul 2