inf104: web design dasar pemrograman web dengan css...pendahuluan definisi • cascading style...
TRANSCRIPT
-
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 Class Selector
-
CSS ID Selector
-
Class ID Selector
-
CSS Dimension
-
CSS Padding : Contoh
-
CSS Float
-
Contoh-Contoh
Save: Prak_CSS01.html
-
Contoh-Contoh
Save: Prak_CSS02.html
.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
Save: Prak_CSS03.html
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
Add a description of the image here
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