Modul 2 CSS (Proweb)

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.

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>

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

File: index.html
File: style.css

Hasil :

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;}

25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
}
/* Standard syntax */
@keyframes example {
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
}
</style>
Color :
#p1 {background-color:rgba(255,0,0,0.3);}


Modul 2 CSS (Proweb)

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul 2 CSS (Proweb)

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul 2 Web

Lab.Assignment: CSS & CSS 3

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum

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

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

Latihan III CSS 3

/* Chrome, Safari, Opera */

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum

Dokumen Laboratorium Teknik Informatika UMM @ 2015 Modul Praktikum

Anda mungkin juga menyukai