inf104: web design dasar pemrograman web dengan css...pendahuluan definisi • cascading style...

INF104: WEB DESIGN

Dasar Pemrograman Web

dengan CSS

Dosen: Wayan Suparta, PhD

Pertemuan 5 & 6:

Pendahuluan Definisi

• Cascading Style Sheets(CSS) adalah suatu teknologi yang digunakan untuk

memperindah halaman website (situs), dengan CSS kita dapat dengan

mudah mengubah keseluruhan warna dan tampilan yang ada disitus kita

sekaligus memformat ulang situs kita.

• CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk

digunakan diweb browser.

Keuntungan CCS

• Dapat di-update dengan cepat dan mudah, karena kita cukup

mendefinisikan sebuah style-sheet global yang berisi aturan-aturan

CSS tersebut untuk diterapakan pada seluruh dokumen-dokumen

HTML pada halaman situs kita.

• User yang berbedadapat mempunyai style-sheet yang berbeda pula. • Ukuran dan kompleksitas document code dapat diperkecil.

CSS Secara Umum ada tiga bagian yaitu

• Selector (elemen yang akan didefinisikan)

• Properti (atribut yang akan diubah)

• Value (Nilai)

Bentuk Umum :

Selector{property: value}

Perintah CSS terdiriatas 2 komponen, yakni Selector & Declaration.

– Selector berfungsi untuk memberitahu browser bahwa pada elemen mana rule CSS diterapkan.

– Selector dapat berupa elemen HTML, selector class atau selector id.

– Declaration merupakan aturan CSS yang diterapkan, terdiri atas property dan value.

Struktur Dasar CSS

External Style Sheet

Bentuk :

dimana :

• ”

• rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet

• type=“text/css”, file yang dipanggil berupa css

• href=“css_files.css”, alamat dokumen stylesheet yang dipanggil

Internal Style Sheet

Bentuk umum :

…definisi style…

Struktur CSS

Lihat Tutorial CSS

https://www.w3schools.com/css/default.asp

https://www.w3schools.com/css/default.asp

Aturan Penulisan CSS (External Style)

Grouping

CSS Class Selector

CSS ID Selector

Class ID Selector

CSS Dimension

CSS Padding : Contoh

CSS Float

Contoh-Contoh

Save: Prak_CSS01.html

Contoh-Contoh


.header {

width:900px;

height:50px;

border: 1px solid #640404;

}

.headerLeft {

width:400px;

background-

color:#CCCCCC;

height:50px;

float:left;

text-align:center;

}

.headerRight {

width:450px;

background-

color:#999999;

height:50px;

float:right;

text-align:center;

}

Contoh-Contoh


121411091-SYAIFUL

City Gallery

LONDON

PARIS

TOKYO

LONDON

London is the capital city of England.

If is the most populous city in the United

Kingdom, with a metropolitan area of over

13 million inhabitants.

Standing on the River Thames,

London has been a major settlement for

two millennia, its history going back to its

founding by the Romans, who named it

Londinium.

LONDON

LATIHAN5 (Praktikum)

1. Tuliskan program CSS dengan hasil tampilan seperti berikut:

Save: Latihan_CSS5.html

INF104: WEB DESIGN

Pemrograman dengan CSS

Lanjutan

Dosen: Wayan Suparta, PhD

Pertemuan 5 & 6:

CSS Box Model

1. CSS Box Model

https://www.w3schools.com/css/css_boxmodel.asp

https://www.w3schools.com/css/css_boxmodel.asp

2. CSS Margin

3. CSS Table

table, th, td {

border: 1px solid black;

}

Add a border to a table:

Firstname

Lastname

Peter

Griffin

Lois

Griffin

https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy

https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy

4. CSS Pseudo-Class

• Berfungsi untuk memberikan efek yang

berbeda pada sebuah selektor.

• Biasanya digunakan untuk link/anchor

• Property:

• Contoh:

a:hover

{

color:red;

text-decoration:underline;

}

• Perhatikan contoh berikut:

/* unvisited link */

a:link {

color: red;

}

/* visited link */

a:visited {

color: green;

}

/* mouse over link */

a:hover {

color: hotpink;

}

/* selected link */

a:active {

color: blue;

}

This is a

link

Note: a:hover a:hover MESTI datang setelah a:link dan a:visited dalam definisi CSS agar dapat efektif.

Note: a:active MUST come after a:hover in

the CSS definition in order to be effective.

Ouputnya:

5. CSS Image Gallery

div.gallery {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

div.gallery:hover {

border: 1px solid #777;

}

div.gallery img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

Add a description of the image

here

https://www.w3schools.com/css/css_image_gallery.asp

https://www.w3schools.com/css/css_image_gallery.asp

Add a description of the image here



Outputnya:

6. CSS Default Button

.button {

background-color: #4CAF50;

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

CSS Buttons

Default Button

Link Button

Button

https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic

https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic

7. CSS Running Text

usage marquee

Example of using marquee.

Latest news !. Latest news !.Latest news !.Latest news !.

8. CSS Website Layout

https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_navbar

https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_navbar

CSS Website Layout

* {

box-sizing: border-box; }

body {

margin: 0; }

/* Style the header */

.header {

background-color: #f1f1f1;

padding: 20px;

text-align: center;

}

/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

}

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none; }

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

}

Header

Link

Link

Link

LATIHAN6 (Praktikum)

2. Tuliskan program CSS dengan hasil tampilan dengan memebri link seperti gambar berikut:

Save: Latihan_CSS6.html

TUGAS 2 (6 hari) Buatlah sebuah webpage news papers, minimal seperti gambar di bawah dengan CSS.

Berilah nama file dengan nama Anda: News_NIM_Nama4huruf (misalkan:

04206063_Arya_Tugas2.html). Kirim ke link:

https://new.edmodo.com/groups/webdesign-29276210
https://new.edmodo.com/groups/webdesign-29276210https://new.edmodo.com/groups/webdesign-29276210https://new.edmodo.com/groups/webdesign-29276210

inf104: web design dasar pemrograman web dengan css...pendahuluan definisi • cascading style...

Documents