LAPORAN RESMI modul 4
advertisement
LAPORAN RESMI
PRAKTIKUM WEB 1
MODUL IV
CSS
(CSS IMAGE)
DisusunOleh:
NAMA
NRP
JURUSAN
DOSEN
KELAS B
AULIA WAHYU PERMATASARI.S
120451100032
MANAJEMEN INFORMATIKA
SRI HERAWATI, S.KOM
TELAH DISETUJUI TANGGAL :
.....-......-.....
ASISTEN PRAKTIKUM
NORMAN HIDAYATULLAH
( 11.04.5.1.1.00001)
LABORATORIUM BISNIS INTELIJEN SISTEM
JURUSAN MANAJEMEN INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BAB I
PENDAHULUAN
1.1 Latar Belakang
Pada modul ini akan melanjutkan penjelasan pada beberapa bagian
dari CSS Image yang digunakan untuk mengatur tampilan dari gambar
(image) pada html. Elemen ini mempunyai beberapa attribut. Satu properti
dapat mempunyai beberapa nilai.
CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti CSS
paling tidak kita harus sedikit tahu tentang HTML. Cascading StyleSheet
adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman
website (situs). Singkatnya dengan menggunakan Methode CSS ini anda
dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di
situs anda, sekaligus memformat ulang situs anda (merubah secara cepat).
CSS juga memungkinkan si pembuat web untuk memodifikasi HTML
untuk membentuk tampilan sebuah website Jadi kalo kita ini adalah arsitek,
maka HTML adalah bangunannya dan CSS adalah desain interior dan
eksteriornya.
1.2 Tujuan
Peserta praktikum dapat menggunakan CSS-Images untuk memformat atau
membuat halaman web tampil lebih menarik
BAB II
DASAR TEORI
CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada html.
Elemen ini mempunyai beberapa attribut. Satu properti dapat mempunyai
beberapa nilai
Tabel 4.1. Property dan value CSS yang mendukung format Gambar
Attribute
background
background-attachment
background-color
background-image
background-position
background-repeat
border
Values
color
size
percentage
pos-key-term
url
repeat
repeat-x
repeat-y
no-repeat
fixed
scroll
fixed
scroll
color
none
url
size
percentage
pos-key-term
repeat
repeat-x
repeat-y
no-repeat
solid
double
groove
dooted
dashed
inset
outset
ridge
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
hidden
four-sides
width-key-term
size
color
width-key-term
Color
solid
double
groove
dooted
dashed
inset
outset
ridge
hidden
size
width-key-term
color
size
color
width-key-term
color
solid
double
groove
dooted
dashed
inset
outset
ridge
hidden
size
width-key-term
size
color
width-key-term
color
solid
double
border-right-width
border
border-top
border-top-color
border-top-style
border-top-width
border- width
clear
color
groove
dooted
dashed
inset
outset
ridge
hidden
size
width-key-term
solid
double
groove
dooted
dashed
inset
outset
ridge
hidden
four-sides
width-key-term
size
color
width-key-term
color
solid
double
groove
dooted
dashed
inset
outset
ridge
hidden
size
width-key-term
size
width-key-term
left
right
both
color
display
float
block
inline
left
right
BAB IV
IMPLEMENTASI
<html>
<head>
<title>Implementasi Modul 4</title>
<style>
body{
background:url(file:///E:/Kuliah/Semester%20III/Permrograman%20Web
%201/Aulia%20wahyu%20permatasari.s/stock-illustration-11883961-seamlessbaby-wallpaper-background.jpg);
background-size:250px;
background-repeat:repeat-y;
}
div.item{
color : mediumslateblue;
border : 3px solid black;
width : 540px;
padding : 5px 10px 10px 10px;
margin: 40px 40px 40px 40px ;
text-align : justify;
background:plum;
font-family:Century Gothic;
font-weight:bold;
font-size:14px;
}
div.item2
{
font-family:Comic Sans MS;
font-size:20px;
color:Royalblue;
border:3px solid black;
width:200px;
padding : 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
background:Lightskyblue;
}
div.item3{
float:left;
color:Tomato;
border:4px solid black;
width:170px;
padding : 10px 10px 10px 10px;
margin: 10px 10px 0px 0px;
background:white;
}
ul{
list-style : square;
font-family:tahoma;
font-size:10;
text-align:justify;
}
img{
float : left;
height : 75px;
}
</style>
</head>
<body>
<center>
<div class="item2" ><marquee>Implementasi Modul
4</marquee> </div>
</center>
<center>
<div class="item"><h2 align="center">CSS IMAGE</h2>
<div class="item3">
<img
src="file:///E:/Kuliah/Semester%20III/Permrograman%20Web%201/MODUL%2
04/download%20(1).jpg" title="Teddy bear ^^">
<ul>
<li>Background</li>
<li>Background-attachement</li>
<li>Background-color</li>
<li>Background-image</li>
<li>Background-size</li>
</ul>
</div>
CSS Image digunakan untuk mengatur tampilan dari gambar
(image) pada html.
Elemen ini mempunyai beberapa attribut. Satu properti dapat
mempunyai beberapa nilai.
CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti
CSS paling tidak
kita harus sedikit tahu tentang HTML. Cascading StyleSheet
adalah suatu teknologi yang
digunakan untuk memperindah tampilan halaman website (situs).
Singkatnya dengan menggunakan
Methode CSS ini anda dengan mudah mengubah secara
keseluruhan warna dan tampilan yang ada di
situs anda, sekaligus memformat ulang situs anda (merubah secara
cepat).
CSS juga memungkinkan si pembuat web untuk memodifikasi
HTML untuk membentuk tampilan sebuah
website Jadi kalo kita ini adalah arsitek, maka HTML adalah
bangunannya dan CSS adalah desain
interior dan eksteriornya.
</div>
</center>
<p align="center">
<font size="2px" face="tahoma" color="blue"> &copy; AULIA 'Hyun Mi'
wahyu Permatasari.s </p></font>
</body>
</html>
Tampilan
BAB V
PENUTUP
KESIMPULAN DAN SARAN
Kesimpulan :
CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada
html. Elemen ini mempunyai beberapa attribut. Satu properti dapat mempunyai
beberapa nilai.
Saran :
Diharapkan asisten praktikum dapat membimbing para peserta praktikum
dengan baik sehingga para peserta praktikum dapat memahami apa yang sedang
di praktikkan dan bisa mempraktikkannya sendiri selain itu asisten praktikum bisa
membantu para peserta praktikum yang kesulitan memahami materi praktikum.
