Salam untuk Temen temen Semua
Pada postingan kali ini saya
ingin menjelaskan langkah-langkah membuat sebuah website sederhana yang di
dalamnya disisipi dengan CSS
Mungkin diantara temen-temen
sekalian masih ada yang belum mengerti apa itu CSS.
Sedikit info mengenai CSS
(Cascading Style Sheet) adalah sebuah pemrograman/script yang mengendalikan
beberapa komponen (tag html) dalam sebuah website sehingga tampilan menjadi
lebih menarik
Kembali ke pokok pembicaraan,
langsung saja
Langkah pertama
Buka adobe dreamwever yang telah
anda install
Ke-2
Klik file-new-html
Ke-3
Buatlah konsep web yang akan di
buat, sebagai ontoh di bawah ini
Script .html
<html><head><title>css external</title>
<link rel= "stylesheet" type="text/css" href= "kodecss.css">
<style type="text/css">
#SetyoBamb {
font-family: Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace;
}
</style>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body bgcolor="#000000">
<table width="94%" height="563" align="center">
<tr>
<th height="123" colspan="3"><img src="images/Header.jpg" width="1213" height="116" alt=""/></th>
</tr>
<tr>
<td width="18%" height="432" class="baris-ganjil"><p><img src="images/brum545.gif" width="212" height="254" alt=""/></p>
<p><img src="images/brum1335.gif" width="223" height="210" alt=""/></p>
<p><a href="PROFIL.html">PROFIL</a></p>
<p><a href="kodehtml.html">HOME</a></p>
<p> </p></td>
<td width="82%" colspan="2" class="baris-ganjil"><p align="center"><strong id="SetyoBamb">My Profil<br>
Nama:Bambang Setyo Husodo</strong></p>
<p align="center"><strong>Sekolah:SMK Negeri 1 Baureno<br>
Alamat:Ds.Brangkal Kec.Kepohbaru Kab.Bojonegoro</strong> </p>
<p align="center"><br>
<img width="380" height="214" src="PROFIL_clip_image002.jpg"><br>
<img width="381" height="215" src="PROFIL_clip_image004.jpg"></p>
<p align="center"><img src="images/WIN_20140510_092319 (2).JPG" width="385" height="280" alt=""/></p>
<p align="center"><br>
</p></td>
</tr>
</table>
</body>
</html>
HASILNYA SEPERTI GAMBAR DI BAWAH
INI
Langkah ke 4
Buat file css, sebagai contoh di
bawah ini
Script .css
h1 {
text-decoration:underline; }
.dewi_kunti, .pandhu {
background:yellow;color:red; }
#info_bima { color:green; }
Langkah ke-5
Masukkan file CSS yang telah
dibuat tadi kedalam file html yaitu dengan cara menyisipkan script dibawah ini
diantara tag <head> dan </head>
<link rel=”stylesheet”
type=”text css” href=”nama file css yang telah dibuat”>
Langkah ke-6
Simpan hasil pekerjaan anda
UNTUK LEBIH JELAS HASIL YANG
SUDAH KITA BUAT TADI, SILAHKAN DOWNLOAD DI LINK BERIKUT INI
