Scribd
Unggah
17 tayangan

Pemrograman Web Sederhana-: Dasar Komputasi

Dokumen ini membahas tentang pengaturan CSS untuk mendesain halaman web, termasuk pengaturan warna, ukuran font, gambar, link, dan selector. Dokumen ini juga menjelaskan tiga cara penyisipan CSS yaitu inline, internal, dan external.

Diunggah oleh

SALMA SHAFIRA FATYA ARDYANI
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
17 tayangan

Pemrograman Web Sederhana-: Dasar Komputasi

Dokumen ini membahas tentang pengaturan CSS untuk mendesain halaman web, termasuk pengaturan warna, ukuran font, gambar, link, dan selector. Dokumen ini juga menjelaskan tiga cara penyisipan CSS yaitu inline, internal, dan external.

Diunggah oleh

SALMA SHAFIRA FATYA ARDYANI
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 29

PROGRAM STUDI

Teknik Informatika MATA KULIAH


DASAR KOMPUTASI

CSS
-pemrograman web sederhana-

Team Pengajar Dasar Komputasi

<a href='https://www.freepik.com/free-photos-vectors/background'>Background 2020


vector created by freepik - www.freepik.com</a>
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Capaian Pembelajaran

Mahasiswa dapat mengatur style pada halaman


Web untuk membuat halaman web menjadi lebih
menarik.

Kemampuan Akhir yang Diharapkan

1. Mahasiswa dapat memahami pengaturan CSS

2. Mahasiswa dapat menerapkan CSS pada halaman


Web.
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

APA ITU
CSS
(Cascading Style She
ets)?
• cara untuk mengatur style suatu dokumen

HTML,
• mengatur bagaimana element-elemen HTML

disajikan pada layar monitor, kertas, dan media lain,


PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Syntax
CSS
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Contoh:<!DOCTYPE
<html>
html>

<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Style paragraphs ini diatur menggunakan CSS.</p>
</body>
</html>
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Penyisipan CSS

• external
• internal
• Inline

Urutan prioritas pengaturan CSS inline,internal,external


PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Inline CSS

Latih4_5.html
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Internal CSS
Latih4_4.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

ExternalCSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Mengatur Image
<!DOCTYPE html>
<body>

<div class="gallery">
<html> <a target="_blank" href="img_5terre.jpg">
<head> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
<style> </a>
div.gallery { <div class="desc">gambar 1</div>
margin: 5px; </div>
border: 1px solid #ccc;
float: left; <div class="gallery">
width: 180px; <a target="_blank" href="img_forest.jpg">
} <img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
div.gallery:hover { <div class="desc">Gambar 2</div>
border: 1px solid #777; </div>
}
<div class="gallery">
div.gallery img { <a target="_blank" href="img_lights.jpg">
width: 100%; <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
height: auto; </a>
} <div class="desc">Gambar 3</div>
</div>
div.desc {
padding: 15px; <div class="gallery">
text-align: center; <a target="_blank" href="img_mountains.jpg">
} <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</style> </a>
</head> <div class="desc">Gambar 4</div>
</div>

</body>
</html>
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Mengatur Fonts,ukuran,dan warna


PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Mengatur Margin

03
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Box Model

04
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

Mengatur Background
Mengatur Background
Mengatur Background
background dengan shorthand
property
Mengatur Link
selector sederhana
Nama elemen id class
p{ #para1 { .center {
text-align: center; text-align: center; text-align: center;
color: red; color: red; color: red;
} } }

pemilihan element-elemen menggunakan


name, id, dan class
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

selector sederhana

• pemilihan element-elemen menggunakan name, id, dan class

Nama elemen id class


p{ #para1 { .center {
text-align: center; text-align: center; text-align: center;
color: red; color: red; color: red;
} } }

03
Contoh selector sederhana
Pemilihan selector menggunakan ID
Contoh selector sederhana
Pemilihan selector menggunakan Class
selector sederhana

• Memilih elemen secara Keseluruhan dan Kelompok

universal group
*{ h1, h2, p {
text-align: center; text-align: center;
color: blue; color: red;
} }
Memilih elemen secara universal
Latihan
<!DOCTYPE html> /* Change color on hover */
<html lang="en">
.topnav a:hover {
background-color: #ddd;
<head>
color: black;
<title>CSS Website Layout</title>
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> </style>
<style> </head>
* { box-sizing: border-box; <body>
}
body { <div class="header">
margin: 0;} <h1>Tutorial Web</h1>
/* Style the header */ <p>Mempelajari Dasar Pembuatan Website</p>
.header { </div>
background-color: #f1f1f1;
padding: 20px; <div class="topnav">
text-align: center;
<a href="#">Home</a>
<a href="#">JavaScript</a>
}
<a href="#">PHP</a>
/* Style the top navigation bar */
<a href="buku_tamu.php">Buku Tamu</a>
.topnav {
</div>
overflow: hidden;
background-color: #333; <div class="row">
} <div class="column">
/* Style the topnav links */ <h2>Home</h2>
.topnav a { <p>Selamat Datang di website tutorial belajar
float: left; Website.</p>
display: block; </div>
color: #f2f2f2;
text-align: center;
padding: 14px 16px; </div>
text-decoration: none;
} </body>
</html>
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

RANGKUMA
N
Dengan menggunakan CSS kita dapat mengontrol warna, font,
ukuran teks, jarak antar elemen, bagaimana elemen diposisikan
dan ditata, mengatur background dsb
PROGRAM STUDI MATA KULIAH
Teknik Informatika DASAR KOMPUTASI

SUMBER PUSTAKA

 www.w3schools.com
THANKS
ANY QUESTIONS?

Anda mungkin juga menyukai