LAPORAN RESMI modul 5
advertisement
LAPORAN RESMI
PRAKTIKUM WEB 1
MODUL V
CSS
(NAVIGASI dan LAYOUT CSS)
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
CSS diperkenalkan untuk pengembangan website pada tahun 1996.
Nama CSS didapat dari fakta bahwa setiap deklarasi website yang berbeda
dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan
parent-child pada setiap style. Setelah CSS distandarisasikan, Internet
Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau
paling tidak hampir mendekati dengan standar CSS. CSS adalah sebuah
dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau
sekedar mejadi rujukan oleh HTML dalam pendefinisian style.
CSS menggunakan kode2 yang tersusun untuk menetapkan style pda
elemen HTML atau dapat juga digunakan style baru yang biasa disebut class.
CSS dapat mengubah besar kecilnya text, mengganti warna background pada
sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan
masih banyak lagi hal yang dapat dilakukan oleh CSS. Singkatnya, CSS
digunakan untuk mengatur susunan tampilan pada halaman HTML.
1.2 Tujuan
1. Peserta praktikum dapat menggunakan CSS-layout untuk memformat atau
membuat halaman web tampil lebih dinamis tanpa menggunakan table
sebagai layoutnya
2. Peserta praktikum dapat mendesain menu navigasi menggunakan CSS
pada halaman web agar tampil lebih menarik
BAB II
DASAR TEORI
Tabel 5.1. Property dan value CSS yang mendukung format Menu Navigasi
Attribute
list-style
list-style-image
list-style-position
list-style-type
Values
circle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal
inside
outside
url
none
url
inside
outside
circle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal
Tabel 5.1. Property dan value CSS yang mendukung format layout halaman web
Attribute
Clear
cursor
Values
left
right
both
none
url
auto
crosshair
default
Display
Float
Position
Visibility
pointer
move
e-rezise
ne-rezise
nw-rezise
n-rezise
se-rezise
sw-rezise
s-rezise
w-rezise
text
wait
help
none
inline
block
list-item
rin-in
compact
merker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
left
right
none
static
relative
absolute
fixed
visible
hiodden
collapse
BAB IV
IMPLEMENTASI
<html>
<head>
<title>Implementasi Modul 5</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:750px;
background-repeat:repeat-x;
}
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;
}
#kiri{
height:330px;
padding:30px 20px 0px 0px;
background-color:none;
float:left;
width:270px;
margin-top:10px;
padding : 10px;
}
#navigation{
margin : 20px 20px 20px 20px;
width:240px;
font-family:Times new roman;
}
#navigation ul{
list-style:none;
margin:0px 0px 0px 20px;
padding:0px;
}
#navigation li{
border-bottom: 2px solid black;
list-style:none;
}
#navigation ul li a{
display : block;
padding:5px 5px 5px 0.5em;
border-left:12px solid lavender;
border-right:2px solid lavender;
background-color:plum;
color:azure;
text-decoration:none;
}
#navigation li ul a{
background-color : lavender;
}
#navigation li ul{
display : none;
position : relative;
}
#navigation li:hover ul{
display : block;
}
#navigation li a:hover{
background-color : lavender;
color:white;
font-weight : bold;
}
</style>
</head>
<body>
<center>
<div class="item2" ><marquee>Implementasi Modul
5</marquee> </div>
</center>
<div id="kiri">
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul></div></div>
<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 :
Tag <ul>..<li>..</li>..</ul> digunakan untuk memberi list
Untuk mengatur style, posisi dan type dari list kita bisa mengaturnya di
CSS list
Display digunakan untuk memunculkan / menghilangkan style dari list.
Terdapat dua macam list yaitu : orderd list (numbering) & unordered list
(bullet).
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.
