Scribd
Unggah
117 tayangan

Modul 2 CSS (Proweb)

Dokumen tersebut merupakan modul praktikum CSS dan CSS3 di Laboratorium Teknik Informatika UMM. Modul ini membahas tentang pengenalan CSS, anatomi CSS, metode penulisan CSS, dan contoh latihan penggunaan CSS dan CSS3 seperti efek shadow, animasi, dan penggunaan warna RGBA.

Diunggah oleh

DediPurniawan
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
117 tayangan

Modul 2 CSS (Proweb)

Dokumen tersebut merupakan modul praktikum CSS dan CSS3 di Laboratorium Teknik Informatika UMM. Modul ini membahas tentang pengenalan CSS, anatomi CSS, metode penulisan CSS, dan contoh latihan penggunaan CSS dan CSS3 seperti efek shadow, animasi, dan penggunaan warna RGBA.

Diunggah oleh

DediPurniawan
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

Modul 2 Web

Lab.Assignment: CSS & CSS 3


A. Tujuan :
1. Memahami tag HTML.
2. Memahami pembuatan aplikasi web dengan HTML dengan CSS
3. Bisa menggunakan Penggabungan antar pemrograman client side (HTML,
XHTML,CSS)
B. Dasar Teori :
CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol
tampilan dari sebuah halaman website. Dengan mengunakan CSS cukup satu kode untuk
semua mark up yang sama pada tag HTML.

Anantomi CSS
Sintak dari CSS berbeda dengan HTML. Apabila HTML menggunakan tag dan attribute,
maka CSS menggunakanselector, dimana selector memiliki declarations. Declarations
memiliki properties dan ke dalam properties ini dimasukkanvalue. Sintak-sintak CSS ini
ada yang diselipkan di dalam dokumen HTML ada juga yang berupa file tersendiri yang
dapat diakses oleh HTML. Secara garis besar anatomi dari aturan CSS adalah sebagai
berikut:

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum


Pemrograman Web By. TeamInformatika UMM
Metode Penulisan
ada tiga jenis penulisan pada kode css yaitu inline, internal dan external, saya jelaskan
satu-persatu.

INLINE
penulisan pada kode css dengan metode inline adalah penulisan kode css dilakukan
langsung pada tag html yang ingin diberi style yang dengan menggunakan atribut style.
contoh sebagai berikut :
<h2 style:"color : black; :">aku ganteng</h2>

saya tidak menganjurkan cara ini karena cara ini akan mencarmpur antara format dan
presentasi, dan juga cara ini akan sulit ketika kita akan melakukan perubahan pada kode
CSS.

INTERNAL
penulisan kode css dengan metode internal adalah penulisan css yang dilakukan pada
tag head, contoh sebagai berikut :
<html>
<head>
#judul h2 {
color : white;
background : black;
{
</head>
<body>
<div id="judul">
<h2>aku adalah anak gembala selalu riang serta gembira
</h2>
</div>
</body>
</html>
menuliskan kode css dengan metode internal ini biasa dilakukan untuk menguji style
atau kalau anda membuat halaman web statis.

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum


Pemrograman Web By. TeamInformatika UMM
EXTERNAL
penulisan kode css pada file css dan di panggil pada pada file html. file css yang
berektensi (.css). contoh sebagai berikut.

style.css
#judul h2 {
color : white;
background : black;
}
disimpan dengan nama "style.css"

filehtml.html
<html>
<head>
<link rel=stylesheet href=style.css>
</head>
<body>
<div id="judul">
<h2>aku adalah anak gembala selalu
riang serta gembira </h2>
</div>
</body>
</html>

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum


Pemrograman Web By. TeamInformatika UMM
CSS 3
CSS 3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa
web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan
tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari
CSS 2 ke CSS 3, tidak perlu mengubah apapun
CSS 3 memiliki beberapa fitur baru, seperti:
a. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe
Flash dan Microsoft Silverlight
b. Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap".
c. Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk
"web-safe fonts".
d. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah,
transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.

C. Peralatan :
1. Editor
2. Browser
D. Percobaan
Latihan I - CSS
a. Buatlah file HTML dengan nama NIM masing-masing dengan
extensi[dot]html
b. Buatlah file CSS di dalam satu folder dengan document html dengan nama
style[dot]css
c. Ketiklah script di bawah ini. Pahami dan berilah komentar pada script
tersebut.
d. Penulisan komentar (<!komentar-->) pada html
e. Penulisan komentar (/*komentar*/) pada css

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum


Pemrograman Web By. TeamInformatika UMM
File: index.html

File: style.css

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum


Pemrograman Web By. TeamInformatika UMM
Hasil :

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum


Pemrograman Web By. TeamInformatika UMM
Latihan II CSS 3
Membuat efek shadow menggunakan CSS 3

#contoh_1 { box-shadow: -5px -5px #888;


-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888; }

Hasil:

#Contoh_2 { box-shadow: -5px -5px 5px #888;


-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888; }

Hasil:

Latihan III CSS 3


<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}

/* Chrome, Safari, Opera */


@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum


Pemrograman Web By. TeamInformatika UMM
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>

Color :

#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum


Pemrograman Web By. TeamInformatika UMM

Anda mungkin juga menyukai