Scribd
Unggah
21 tayangan14 halaman

Rickyriotaro (CSS)

Dokumen tersebut memberikan contoh penggunaan CSS untuk mengatur tampilan elemen berbagai tag HTML seperti <body>, <h1>, <p>, dengan mengatur warna latar belakang, ukuran font, posisi gambar latar belakang, dan properti CSS lainnya seperti opacity, attachment gambar latar belakang.

Diunggah oleh

taronet288
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 DOCX, PDF, TXT atau baca online di Scribd
21 tayangan14 halaman

Rickyriotaro (CSS)

Dokumen tersebut memberikan contoh penggunaan CSS untuk mengatur tampilan elemen berbagai tag HTML seperti <body>, <h1>, <p>, dengan mengatur warna latar belakang, ukuran font, posisi gambar latar belakang, dan properti CSS lainnya seperti opacity, attachment gambar latar belakang.

Diunggah oleh

taronet288
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 DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 14

NAMA : RICKY RIOTARO

NIM : 6304211412
KELAS : RPL4C
MATKUL : PEMOGRAMAN WEB

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:2px;}
body {background-image:url("foto/bg.jpg");}
</style>
</head>
<h1 style="color:aliceblue">Menampilkan Latar Belakang dengan CSS</h1>
<hr>
</html>

<html>
<head>
<title>bentuk inline</title>
</head>
<body bgcolor="#ffffff">
<p id="cth1">kalimat ini tidak menggunakan format css</p>
<p id="cth2" style="font-size:20pt">kalimat ini menggunakan
format css untuk ukuran font sebesar 20 point</p>
<p id="cth3" style="font-size:15pt" >kalimat ini menggunakan
format css untuk ukuran font sebesar 15 point</p>
</body>
</html>
<html>
<head>
<title>bentuk penulisan secara embedded</title>
</head>
<style>
body {background:#ffffff color#ffff00; margin-left:0.5}
h1 {font-size:18pt; color:#ff0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">judul berukuran 18 point dan warna merah</h1>
<p id="cth2">tag p di format dengan ukuran 12, tipe font arial,
indensi 0.5 inch</p>
</body>
</html>

<html>
<head>
<title>bentuk penulisan secara embedded dengan class</title>
</head>
<style>
p.coklat {font-size:14pt; color:brown}
p.biru {font-size:15pt; color:blue}
</style>
<body>
<p id="cth1">bentuk standar tanpa style</p>
<p id="cth2" class="coklat">bentuk class coklat</p>
<p id="cth3" class="biru">bentuk class biru</p>
</body>
</html>

<html>
<head>
<title>bentuk linked style sheet</title>
<link rel=stylesheet href="linked.css" type="text/css">
</head>
<body>
<h1 id="cth1">judul berukuran 20 point dengan warna biru</h1>
<p id="cth2">tag p di format dengan ukuran 14, tipe font arial, indensi 0.5
inch</p>
<p id="cth3">latar belakang warna putih dengan margin 0,5 inch</p>
</body>
</html>
<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Belajar CSS</p>
<p>Paragrap ini menggunakan CSS.</p>
</body>
</html>a

<html>
<head>
<style type="text/css">
#paragrap1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="paragrap1">Belajar CSS!</p>
<p>Tulisan ini tidak menggunakan style yang telah dibuat</p>
</body>
</html>

<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

<html>
<head>
<style type="text/css">
body
{
background-color:#A9A9A9;
}
</style>
</head>
<body>
<h1>Jurusan Teknik Informatika</h1>
<p>universitas Komputer Indonesia</p>
</body>
</html>

<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Mengatur Warna Background dengan CSS!</h1>
<div>
VIRUS MALWARE TROJAN HORSE
<p>Sebagai salah satu platform yang paling populer sejagat saat ini, ternyata
telah membawa
Android ke sisi dimana harus dihadapkan pada permasalahan keamanan baru berupa
munculnya
ancaman virus Trojan Horse tangguh terbaru bernama Obad yang ditemukan oleh
Kaspersky
baru-baru ini dan setidaknya harus segera ditanggulangi secepatnya.
<p>sumber:http://www.beritateknologi.com</p>
</div>
</body>
</html>

<html>
<head>
<style>
div {
 background: rgb(0, 128, 0);
}
div.satu {
 background: rgba(0, 128, 0, 0.1);
}
div.dua {
 background: rgba(0, 128, 0, 0.3);
}
div.tiga {
 background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;">
 <h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
 <h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
 <h1>60% opacity</h1>
</div>
<div>
 <h1>opacity 1</h1>
</div>
<p>With RGBA color values:</p>
<div class="satu">
 <h1>10% opacity</h1>
</div>
<div class="dua">
 <h1>30% opacity</h1>
</div>
<div class="tiga">
 <h1>60% opacity</h1>
</div>
<div>
 <h1>default</h1>
</div>
</body>
</html>

<html>
<head>
<style>
body {
 background-image: url("foto/gif.gif");
}
</style>
</head>
<body>
<h1 style="color:aliceblue">Hello CSS!</h1>
<p style="color:aliceblue">Background Menggunakan Gambar</p>
</body>
</html>
<html>
<head>
<style>
p {
 background-image: url("foto/gif.gif");
}
</style>
</head>
<body>
<h1>Hello CSS!</h1>
<p style="color:aliceblue">Paragrap Ini Menggunakan Latar Belakang Gambar!</p>
</body>
</html>

<html>
<head>
<style>
body {
 background-image: url("foto/bg.jpg");
 background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1 style="color:aliceblue">Hello CSS!</h1>
<p style="color:aliceblue">Latar Belakang Gambar hanya diulang pada bagian
Horizontal!</p>
<p style="color:aliceblue">Latar Belakang Gambar hanya diulang pada bagian
Horizontal!</p>
<p style="color:aliceblue">Latar Belakang Gambar hanya diulang pada bagian
Horizontal!</p>
<p style="color:aliceblue">Latar Belakang Gambar hanya diulang pada bagian
Horizontal!</p>
</body>
</html>

<html>
<head>
<style>
body {
 background-image: url("user.png");
 background-repeat: no-repeat;
 background-position: right top;
 margin-right: 200px;
 background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image
should scroll or be
fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the
browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
<html>
<head>
<style>
body {
 background-image: url("foto/user.webp");
 background-repeat: no-repeat;
 background-position: right top;
 margin-right: 200px;
 background-attachment: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the
browser window.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
</body>
</html>
<html>
<head>
<style>
body {
 background: #ffffff url("foto/user.webp") no-repeat right top;
 margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the
background properties in one
declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in
the top-right
corner.</p>
<p>We have also added a right margin, so that the text will not write over the
background image.</p>
</body>
</html>

Anda mungkin juga menyukai