CSS adalah Cascading stylesheet yang berfungsi untuk mempercantik halaman WEB .
berikut ini adalah contoh layout web tersimple yang saya buat dengan format CSS .
pertama-tama buka page baru di Notepad++ , kita buat style nya dulu , seperti dibawah ini :
#tabel{
border: 1px solid gray;
width: 100%;
height: 900px;
}
#judul{
border: 1px solid gray;
width: 100%;
height: 200px;
vertical-align: top;
text-align:center;
}
#menu{
border: 1px solid gray;
vertical-align: top;
width: 20%;
}
#menu-child{
text-align : center;
vertical-align :top;
font-size: 16pt;
border : 0px solid gray;
margin-top: -15px;
padding-left: 75px;
}
#konten{
border: 1px solid gray;
vertical-align: top;
}
#footer{
border: 1px solid gray;
height: 70px;
text-align : center;
}
Note: ini adalh format tersimple untuk tambahan silahkan tambahkan sendiri accecories yang ingin teman tambahkan , seperti background di Judul, kontent atau footernya .
next ...
simpan di sebuah folder dengan type Cascading Stylesheet Document .
nah sekarang ke tahap panggil--panggilan :D
</html>
<head> <title> Mercy Gayatri Sistem Informasi 1B </title>
<link href ="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<table id ="tabel" >
<tr>
<td colspan ="2" id="judul"> Ini adalah Judul</td>
</tr>
<tr>
<td id ="menu"> Ini adalah menu
<ul id ="menu-child" >
<li> <a href="profil.html"> profil </a> </li>
<li> <a href="home.html"> home</a> </li>
<li> <a href="kontak.html"> kontak </a> </li>
<li> <a href="galeri.html"> galeri</a> </li> </ul>
</td>
<td id ="konten" > ini adalaah halaman home</td>
</tr>
<tr>
<td id ="footer" colspan ="2" > ini adalah footer </td>
</tr>
</table>
</body>
</html>
Note:
-disimpan dengan type .html yaaa :)
-untuk bagian "Menu" , daftar menunya yang bertipe .html , itu harus kalian buat page baru, (buat page baru untuk profil,kontak,dan galeri) dan akan terpanggil otomatis . :))
selamat mencoba :))
berikut ini adalah contoh layout web tersimple yang saya buat dengan format CSS .
pertama-tama buka page baru di Notepad++ , kita buat style nya dulu , seperti dibawah ini :
#tabel{
border: 1px solid gray;
width: 100%;
height: 900px;
}
#judul{
border: 1px solid gray;
width: 100%;
height: 200px;
vertical-align: top;
text-align:center;
}
#menu{
border: 1px solid gray;
vertical-align: top;
width: 20%;
}
#menu-child{
text-align : center;
vertical-align :top;
font-size: 16pt;
border : 0px solid gray;
margin-top: -15px;
padding-left: 75px;
}
#konten{
border: 1px solid gray;
vertical-align: top;
}
#footer{
border: 1px solid gray;
height: 70px;
text-align : center;
}
Note: ini adalh format tersimple untuk tambahan silahkan tambahkan sendiri accecories yang ingin teman tambahkan , seperti background di Judul, kontent atau footernya .
next ...
simpan di sebuah folder dengan type Cascading Stylesheet Document .
nah sekarang ke tahap panggil--panggilan :D
</html>
<head> <title> Mercy Gayatri Sistem Informasi 1B </title>
<link href ="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<table id ="tabel" >
<tr>
<td colspan ="2" id="judul"> Ini adalah Judul</td>
</tr>
<tr>
<td id ="menu"> Ini adalah menu
<ul id ="menu-child" >
<li> <a href="profil.html"> profil </a> </li>
<li> <a href="home.html"> home</a> </li>
<li> <a href="kontak.html"> kontak </a> </li>
<li> <a href="galeri.html"> galeri</a> </li> </ul>
</td>
<td id ="konten" > ini adalaah halaman home</td>
</tr>
<tr>
<td id ="footer" colspan ="2" > ini adalah footer </td>
</tr>
</table>
</body>
</html>
Note:
-disimpan dengan type .html yaaa :)
-untuk bagian "Menu" , daftar menunya yang bertipe .html , itu harus kalian buat page baru, (buat page baru untuk profil,kontak,dan galeri) dan akan terpanggil otomatis . :))
selamat mencoba :))
0 komentar:
Posting Komentar
Added your comment at my blog oke ?
tambahkan komentar kalian di bawah entri ini |di bawah blog barusan...