Pemograman Web - Per5

14/2/2011 Web Development Fundamental 1
PERTEMUAN 5
CSS (NAVIGASI DAN LAYOUT)
Shadow
.classshadow • 1px adalah tebal bayangan secara horisontal, kekanan untuk
{ nilai (+) dan kekiri untuk nilai (-), misal -1px;
font-family: • 2px adalah tebal bayangan secera vertikal, kebawah untuk
color:#333333;
nilai (+) dan keatas untul nilai (-), misal -2px;
• 3px adalah tingkat keburaman, semakin tinggi nilainya maka
text-shadow:
semakin buram pula bayanganya
1px 2px 3px blue;
• blue ada warna bayangan.
}
setiap value dipisakan dengan ,(koma) dan maksud dari

kita juga bisa menambah value lagi misal :
kedua value ini ialah manambah efek dengan dua value tadi.
text-shadow:
1px 2px 3px blue,
2px 3px 2px red;
 <html> .text-shadow4{
 <head> text-shadow:
 <title>Contoh Text Shadow</title>
 <style> -1px -2px 2px black,
 body{ width:80%;margin:30px auto;} 1px 2px 2px black;
 p{ }
 color:#888888; .text-shadow5{
 font:bold 40px arial;
 text-transform:uppercase; text-shadow:
 } -1px -2px 0 black,
 .text-shadow1{ 1px 2px 20px black;
 text-shadow: }
 1px 2px 3px blue;
 } </style>
 .text-shadow2{ </head>
 text-shadow: <body>
 1px 1px 0 #444444, <p class='text-shadow1'>text shadow</p>
 2px 2px 0 #444444,
 3px 3px 0 #444444, <p class='text-shadow2'>text shadow</p>
 4px 4px 0 #444444; <p class='text-shadow3'>text shadow</p>
 } <p class='text-shadow4'>text shadow</p>
 .text-shadow3{ <p class='text-shadow5'>text shadow</p>
 text-shadow:
 1px 1px 0 red, </body>
 2px 2px 0 pink, </html>
 3px 3px 0 yellow,
 4px 4px 0 blue,
 5px 5px 0 green;
 }
Navigasi
• Navigasi pada dasarnya adalah daftar link.
• Navigasi akan menggunakan tag <ul> dan <li>
Contoh :
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Contoh :
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Navigasi vertikal
<html> <body>
<head> <ul>
<style>
<li><a href="#home">Home</a></li>
ul
{ <li><a href="#news">News</a></li>
list-style-type:none; margin:0; <li><a href="#contact">Contact</a></li>
padding:0; <li><a href="#about">About</a></li>
}
a:link,a:visited </ul>
{ </body>
display:block; font-weight:bold; </html>
color:#FFFFFF; background-
color:#98bf21;
width:120px; text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style></head>
 list-style-type:none – menghapus bullets.
Navigasi utama tidak memerlukan penanda
bullet ini.
 Margins dan padding = 0 untuk menghapus
pengaturan default browser
 display:block - menampilkan link sebagai elemen
blok untuk membuat seluruh bagian link dapat
diklik (tidak hanya teks), dan Memungkinkan kita
untuk menentukan lebar
 width:60px – pengaturan lebar blok
Background gambar
<html>
<head> <body>
<style> <ul>
ul <li><a href="#home">Home</a></li>
{
list-style-type:none;
<li><a href="#news">News</a></li>
margin:0; padding:0; <li><a
} href="#contact">Contact</a></li>
a:link,a:visited <li><a href="#about">About</a></li>
{ </ul>
display:block;
font-weight:bold; color:#FFFFFF;
</body>
background: url(menu9.gif); </html>
width:120px; text-align:right;
padding:6px; text-decoration:none;
}
a:hover,a:active
{
background: url(menu9.gif);
}
</style></head>
Navigasi horisontal
<html> <body>
<head>
<style> <ul>
ul <li><a href="#home">Home</a></li>
{
list-style-type:none; margin:0; <li><a href="#berita">Berita</a></li>
padding:0; overflow:hidden; <li><a href="#kontak">kontak</a></li>
}
li <li><a href="#about">About</a></li>
{ </ul>
float:left;
} </body>
a:link,a:visited </html>
{
display:block;
width:120px; font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style></head>
Layout
• Content
– Text & web page
The Box Model
elements in the
container
• Padding
– Area between the
content and the border
• Border
– Between the padding
and the margin
• Margin
– Menentukan ruang
kosong antara elemen
dan unsur-unsur yang
berdekatan
12
Float Property
h1 { background-color:#cccccc;
padding:5px;
• Unsur Itu tampaknya
color: #000000; "mengambang" di sisi kanan
} atau kiri baik jendela browser
p { font-family:Arial,sans-serif; atau elemen lain.
}
#yls {float:right;
margin: 0 0 5px 5px;
border: solid;
}
13
Value float
 flaoat:right
menekan bidang keatas, maksud dari float right
ialah menekan ke atas kanan
 float:left
float left ialah menekan ke atas kiri
 float:none
nilai defaultnya, float none sama saja dengan tdk
usah ditulis
 float:inherit
fungsi falue ini adalah mengikuti nilai(value)
bidang sebelumnya
body {margin:0;
font-family:Verdana, Arial, sans-serif; }
#wrapper { background-color:#e8b9e8; Layout dua kolom
color:#000066; }
#leftcolumn { float:left;
width:100px; }
#rightcolumn { margin-left:100px;
background-color:#ffffff;
color:#000000; }
#logo { background-color:#eeeeee;
color: #cc66cc;
font-size:x-large;
border-bottom: 1px solid #000000;
padding:10px; }
.content {padding:20px 20px 0 20px; }
#floatright {margin:10px;
float:right; }
.footer {font-size:xx-small;
text-align:center;
clear:right;
padding-bottom:20px; }
.navBar{ text-decoration:none;
margin: 15px;
display:block; } 15
Layout tiga kolom
<html> #sidebar-kanan{
min-height:500px;/* tinggi minimal*/
<head> float:left;/* menekan ke kiri*/
<title>contoh css float 3 kolom</title> width:300px;/* lebar */
<style type="text/css"> margin:5px;
background-color:white;
<!-- }
body{background-color:pink; </style>
width:1000px; </head>
<body>
margin:auto;} <div id="sidebar-kiri"> <h2>sidebar kiri</h2>
h2{padding-left:10px;} </div>
#sidebar-kiri{ <div id="sidebar-tengah-atau-badan">
<h2>sidebar tengah</h2>
min-height:500px;/* tinggi minimal*/ </div>
float:left;/* menekan ke kiri*/ <div id="sidebar-kanan">
width:300px;/* lebar */ <h2>sidebar kanan</h2>
margin:5px; </div>
</body></html>
}
#sidebar-tengah-atau-badan{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:350px;/* lebar */
margin:5px;
}
Hasil :

Pemograman Web - Per5

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemograman Web - Per5

Diunggah oleh

Hak Cipta:

Format Tersedia

14/2/2011 Web Development Fundamental 1

setiap value dipisakan dengan ,(koma) dan maksud dari

Anda mungkin juga menyukai