Scribd
Unggah
11 tayangan

Menu CSS

CSS digunakan untuk mengatur tampilan halaman web seperti menu, ukuran font, warna, dan lainnya. Contoh kode menampilkan menu utama tanpa dan dengan CSS, di mana CSS memberikan tampilan yang lebih rapi dengan mengatur ukuran, posisi, dan warna menu serta sub-menu.

Diunggah oleh

Halo Sayang
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
11 tayangan

Menu CSS

CSS digunakan untuk mengatur tampilan halaman web seperti menu, ukuran font, warna, dan lainnya. Contoh kode menampilkan menu utama tanpa dan dengan CSS, di mana CSS memberikan tampilan yang lebih rapi dengan mengatur ukuran, posisi, dan warna menu serta sub-menu.

Diunggah oleh

Halo Sayang
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

Mempercantik Tampilan dengan CSS

Cascading Style Sheet (CSS) merupakan bahasa pemrograman yang digunakan untuk
mengatur tampilan halaman web agar lebih menarik dan lebih mudah dioperasikan. CSS, seperti
juga PHP, dapat disisipkan atau diintegrasikan dengan bahasa pemrogram HTML maupun PHP.
Banyak hal yang dapat dilakukan dengan CSS seperti mengatur tampilan menu, ukuran font,
warna tampilan, barus antar paragraf, dan lain-lain.

Contoh dua kode program di bawah ini diharapkan akan memberikan gambaran peran
CSS dalam pemrograman. Kedua kode tersebut memiliki tujuan pokok yang sama yaitu
menampilkan menu utama sebuah aplikasi. Perbedaan dari keduanya adalah, kode pertama tidak
menggunakan CSS sedangkan kode ke-2 dilengkapi dengan kode CSS.

Program 1: Index1.php

<!DOCTYPE html>
<html>
<head>
<title>Tanpa CSS</title>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Ruang Baca </a>
<ul>
<li><a href="#11">Keanggotaan </a></li>
<li><a href="#12">Daftar Koleksi</a></li>
<li><a href="#13.php">Transaksi Pinjaman</a></li>
</ul>
</li>
<li><a href="#2">Kemahasiswaan</a>
<ul>
<li><a href="#21">Sub Menu 1</a></li>
<li><a href="#22">Sub Menu 2</a></li>
<li><a href="#23">Sub Menu 3</a></li>
<li><a href="#24">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#3">Dosen dan Staf</a>
<ul>
<li><a href="#31">Sub Menu 1</a></li>
<li><a href="#32">Sub Menu 2</a></li>
<li><a href="#33">Sub Menu 3</a></li>
<li><a href="#34">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#4">Pengelolaan Jurnal</a>
<ul>
<li><a href="#41">Sub Menu 1</a></li>
<li><a href="#42">Sub Menu 2</a></li>
<li><a href="#43">Sub Menu 3</a></li>
<li><a href="#44">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#5">Laboratorium</a>
<ul>
<li><a href="#51">Sub Menu 1</a></li>
<li><a href="#52">Sub Menu 2</a></li>
<li><a href="#53">Sub Menu 3</a></li>
<li><a href="#54">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#6">Perkuliahan</a>
<ul>
<li><a href="#61">Sub Menu 1</a></li>
<li><a href="#62">Sub Menu 2</a></li>
<li><a href="#63">Sub Menu 3</a></li>
<li><a href="#64">Sub Menu 4</a></li>
</ul>
</li>

</ul>
<table width="700" border="1">
<tr>
<td colspan="1" align="center">
<img src='logo_undip.jpg' width=130 height=150> </td>
<td colspan="2" align="center">
<h1>Sistem Informasi Manajemen</h1>
<h3>DEPARTEMEN STATISTIKA<h3>
</td>
</tr>
</table>
</body>

Program 2: Index2.php

<!DOCTYPE html>
<html>
<head>
<title>Dengan CSS</title>
<!-- awal CSS-->
<style type="text/css">
.dropmenu {
background: #616161;
height: 30px;
list-style-type: none;
margin: 0;
padding: 0px;
}
.dropmenu li {
border-right: solid 1px white;
float: left;
height: 30px;
}
.dropmenu li a {
color: #fff;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
background-color: #3f4a54;
border: 1px solid grey;
left: 0px;
padding: 3px;
top: 30px;
width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
background-color: #778899;
border: 1px solid transparent;
color: #fff;
display: block;
font-size: 11px;
height: 18px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: silver;
border: solid 1px #444;
color: #000;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
<!-- akhir CSS-->
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Ruang Baca </a>
<ul>
<li><a href="#11">Keanggotaan </a></li>
<li><a href="#12">Daftar Koleksi</a></li>
<li><a href="#13.php">Transaksi Pinjaman</a></li>
</ul>
</li>
<li><a href="#2">Kemahasiswaan</a>
<ul>
<li><a href="#21">Sub Menu 1</a></li>
<li><a href="#22">Sub Menu 2</a></li>
<li><a href="#23">Sub Menu 3</a></li>
<li><a href="#24">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#3">Dosen dan Staf</a>
<ul>
<li><a href="#31">Sub Menu 1</a></li>
<li><a href="#32">Sub Menu 2</a></li>
<li><a href="#33">Sub Menu 3</a></li>
<li><a href="#34">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#4">Pengelolaan Jurnal</a>
<ul>
<li><a href="#41">Sub Menu 1</a></li>
<li><a href="#42">Sub Menu 2</a></li>
<li><a href="#43">Sub Menu 3</a></li>
<li><a href="#44">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#5">Laboratorium</a>
<ul>
<li><a href="#51">Sub Menu 1</a></li>
<li><a href="#52">Sub Menu 2</a></li>
<li><a href="#53">Sub Menu 3</a></li>
<li><a href="#54">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#6">Perkuliahan</a>
<ul>
<li><a href="#61">Sub Menu 1</a></li>
<li><a href="#62">Sub Menu 2</a></li>
<li><a href="#63">Sub Menu 3</a></li>
<li><a href="#64">Sub Menu 4</a></li>
</ul>
</li>

</ul>
<table width="700" border="1">
<tr>
<td colspan="1" align="center">
<img src='logo_undip.jpg' width=130 height=150>
</td>
<td colspan="2" align="center">
<h1>Sistem Informasi Manajemen</h1>
<h3>DEPARTEMEN STATISTIKA<h3>
</td>
</tr>
</table>
</body>

Perbedaan tampilan kedua kode tersebut dapat diamati langsung memanggil program-program
tersebut di bilah browser.

Anda mungkin juga menyukai