inf104: web design dasar pemrograman web dengan...
TRANSCRIPT
![Page 1: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/1.jpg)
INF104: WEB DESIGN
Dasar Pemrograman Web
dengan CSS
Dosen: Wayan Suparta, PhD
Pertemuan 5 & 6:
![Page 2: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/2.jpg)
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.
![Page 3: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/3.jpg)
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.
![Page 4: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/4.jpg)
Struktur Dasar CSS
External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
• <link, merupakan tag pembuka diakhiri dengan tanda “>”
• 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 :
<style type=“text/css”>
…definisi style…
</style>
![Page 5: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/5.jpg)
Struktur CSS
Lihat Tutorial CSS
https://www.w3schools.com/css/default.asp
![Page 6: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/6.jpg)
![Page 7: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/7.jpg)
Aturan Penulisan CSS (External Style)
![Page 8: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/8.jpg)
![Page 9: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/9.jpg)
Grouping
![Page 10: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/10.jpg)
CSS Class Selector
![Page 11: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/11.jpg)
CSS Class Selector
![Page 12: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/12.jpg)
CSS ID Selector
![Page 13: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/13.jpg)
Class ID Selector
![Page 14: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/14.jpg)
CSS Dimension
![Page 15: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/15.jpg)
CSS Padding : Contoh
![Page 16: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/16.jpg)
CSS Float
![Page 17: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/17.jpg)
Contoh-Contoh
Save: Prak_CSS01.html
![Page 18: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/18.jpg)
Contoh-Contoh
Save: Prak_CSS02.html
<html>
<head>
<style type = “text/css”>
.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;
}
</style>
</head>
<body>
</body>
</html>
![Page 19: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/19.jpg)
Contoh-Contoh
Save: Prak_CSS03.html
<html>
<head>
<title>121411091-SYAIFUL</title>
<style>
</style>
</head>
<body>
<div id="batas">
<div id="head">
<center><h1>City Gallery</h1></center>
</div>
<div id="sideleft">
<ul id="hv">LONDON</ul>
<ul id="hv">PARIS</ul>
<ul id="hv">TOKYO</ul>
</div>
<div id="content">
<h2>LONDON</h2>
<p>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.</p>
<p>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.</p>
</div>
<div id="foot">
<center><strong><u>LONDON</u></str
ong></center>
</div>
</div>
</body>
</html>
![Page 20: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/20.jpg)
LATIHAN5 (Praktikum)
1. Tuliskan program CSS dengan hasil tampilan seperti berikut:
Save: Latihan_CSS5.html
![Page 21: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/21.jpg)
INF104: WEB DESIGN
Pemrograman dengan CSS
Lanjutan
Dosen: Wayan Suparta, PhD
Pertemuan 5 & 6:
![Page 22: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/22.jpg)
CSS Box Model
![Page 23: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/23.jpg)
1. CSS Box Model
https://www.w3schools.com/css/css_boxmodel.asp
![Page 24: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/24.jpg)
2. CSS Margin
![Page 25: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/25.jpg)
3. CSS Table <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
![Page 26: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/26.jpg)
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:
![Page 27: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/27.jpg)
<!DOCTYPE html>
<html>
<head>
<style>
/* 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;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b> a:hover a:hover MESTI datang setelah a:link dan a:visited dalam definisi CSS agar dapat efektif. </p>
<p><b>Note:</b> a:active MUST come after a:hover in
the CSS definition in order to be effective.</p>
</body>
</html>
Ouputnya:
![Page 28: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/28.jpg)
5. CSS Image Gallery
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque
Terre" width="600"height="400">
</a>
<div class="desc">Add a description of the image
here</div>
</div>
https://www.w3schools.com/css/css_image_gallery.asp
![Page 29: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/29.jpg)
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600"height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600"height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600"height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
![Page 30: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/30.jpg)
Outputnya:
![Page 31: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/31.jpg)
6. CSS Default Button
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<h2>CSS Buttons</h2>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button"
value="Input Button">
</body>
</html>
https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic
![Page 32: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/32.jpg)
7. CSS Running Text <HTML>
<head>
<title>usage marquee</title>
</head>
<body>
<p>Example of using marquee.</p>
<div align="center">
<marquee
direction="left"
loop="7"
scrollamount="1"
scrolldelay="2"
behavior="alternate"
width="60%"
bgcolor="#ff3424"
>Latest news !. Latest news !.Latest news !.Latest news !.
</marquee>
</div>
</body>
</html>
![Page 33: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/33.jpg)
8. CSS Website Layout
https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_navbar
![Page 34: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/34.jpg)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1">
<style>
* {
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;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</body>
</html>
![Page 35: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/35.jpg)
LATIHAN6 (Praktikum)
2. Tuliskan program CSS dengan hasil tampilan dengan memebri link seperti gambar berikut:
Save: Latihan_CSS6.html
![Page 36: INF104: WEB DESIGN Dasar Pemrograman Web dengan CSSocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-6.pdf · memperindah halaman website (situs), dengan CSS kita dapat dengan mudah](https://reader030.vdocuments.net/reader030/viewer/2022040113/5d4f2ea588c993720d8bd468/html5/thumbnails/36.jpg)
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