Salam untuk sahabat blogger
semua,
Pada postingan kali ini saya
ingin menjelaskan langkah-langkah membuat sebuah website sederhana yang di
dalamnya disisipi dengan CSS
Pasti 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
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled
Document</title>
</head>
<body
background="images/20130103104535612.jpg">
<table width="100%"
border="0">
<tr>
<td height="136" colspan="3"><table
width="100%" border="3
">
<tr>
<td height="136"
colspan="3"><img src="images/ssfr copy.jpg"
width="100%" height="100%" /></td>
</tr>
<tr>
<td width="17%"
rowspan="2"><p><img
src="images/edrfgtbhnjmk.png" width="197"
height="256" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img
src="images/bojonegoro.png" width="200"
height="292" /></p>
<p> </p>
<p> </p></td>
<td width="26%"
height="63"><h1 align="center"><a
href="home.html">Index</a></h1></td>
<td width="57%"><h1
align="center"><a
href="profil.html">Profile</a></h1></td>
</tr>
<tr>
<td height="829"
colspan="2"><h1>
<center>
<p><img
src="images/bima_yogya.jpg" width="400"
height="499" /></p>
<h1
align="left">bima</h1>
<p>
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
Tidak ada komentar:
Posting Komentar