Berikut ini adalah contoh sebuah halaman HTML yang menggunakan sebuah CSS.
File CSS saya beri nama mystyle.css dan di dalam file tsb saya pakai 4 buah file gambar yaitu :
File CSS saya beri nama mystyle.css dan di dalam file tsb saya pakai 4 buah file gambar yaitu :
Letakkan ke-4 file gambar tersebut ke dalam 1 foler yg bernama images.
Setelah file CSS-nya jadi berikutnya anda buat file HTML-nya, kalau di sini saya kasih nama contoh.html
Untuk sementara isi dari file HTML anda samakan dengan contoh.html, jika sudah paham maka silahkan ditambahkan beberapa format yang anda inginkan.
Jika sudah maka silahkan dicoba melihat hasilnya melalui browser.
Setelah file CSS-nya jadi berikutnya anda buat file HTML-nya, kalau di sini saya kasih nama contoh.html
Untuk sementara isi dari file HTML anda samakan dengan contoh.html, jika sudah paham maka silahkan ditambahkan beberapa format yang anda inginkan.
Jika sudah maka silahkan dicoba melihat hasilnya melalui browser.
Selamat mencoba ...
Berikut ini adalah contoh file CSS yang saya kasih nama "mystyle.css"
------------------------------------------------------------------------
@charset "utf-8";
#latar {
background: #eeeeee;
margin: 0px;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
color: #FFFF00;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #FF0000;
}
isi {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.header {
background: url(images/header.png);
height: 80px;
padding-top: 16px;
padding-left: 30px;
}
.menu {
background: #000000;
height: 30px;
}
.menu li {
width: 140px;
list-style: none;
float: left;
color: #CCCCCC;
font: 14px/30px Arial, Helvetica, sans-serif;
text-align: center;
text-transform: uppercase;
}
.menu li a {
text-decoration: none;
color: #CCCCCC;
display: block;
}
.menu li a:hover {
background: #eeeeee;
color: #0000FF;
font-weight: bold;
}
.container {
width: 700px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.content-atas {
background: url(images/content-atas.png) no-repeat;
height: 20px;
}
.content-tengah {
background:url(images/content-tengah.png) repeat-y;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
text-align: justify;
}
.content-bawah {
background:url(images/content-bawah.png) no-repeat;
height: 30px;
}
------------------------------------------------------------------------
Dan berikut adalah tag html dari file contoh.html
------------------------------------------------------------------------
<html>
<head>
<title>Contoh halaman yang menggunakan CSS</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body id="latar">
<div class="header">
<h1>Virtual Komputer BLOG</h1>
</div>
<div class="menu">
<li><a href="#">Home Page</a></li>
<li><a href="#">Daftar Barang</a></li>
<li><a href="#">Member Area</a></li>
<li><a href="#">Pembayaran</a></li>
<li><a href="#">Info Promosi</a></li>
</div>
<div class="container">
<div class="content-atas"></div>
<div class="content-tengah">
<h2>Contoh CSS Sederhana</h2>
<br>
<isi>
<p>Berikut ini adalah contoh sebuah halaman HTML yang menggunakan sebuah CSS.</p>
File CSS saya beri nama <strong>mystyle.css</strong> dan di dalam file tersebut saya menggunakan 4 buah file gambar yaitu :<br>
1. content-atas.png<br>
2. content-bawah.png<br>
3. content-tengah.png<br>
4. header.png<br>
<p>Letakkan ke-4 file gambar tersebut ke dalam 1 foler yg bernama images</p>
<hr>
<p>Setelah file CSS-nya jadi berikutnya anda buat file HTML-nya, kalau di sini saya kasih nama <strong>contoh.html</strong><br>
Untuk sementara isi dari file HTML anda samakan dengan <strong>contoh.html</strong>, jika sudah paham maka silahkan ditambahkan beberapa format yang anda inginkan.
</p>
Jika sudah maka silahkan dicoba melihat hasilnya melalui browser.
<p>Selamat mencoba ...</p>
</isi>
</div>
<div class="content-bawah"></div>
</div>
</body>
</html>
------------------------------------------------------------------------
0 komentar:
Posting Komentar