Senin, 02 Juli 2012

Membuat Desain Web Dengan PHP&CSS

18.56    No comments

1. Indeks PHP

<html>
<head>
<link rel="stylesheet" type="text/css" href="css1.css">
<title>WEb Tugas</title>
</head>
<body>
<div id="page">
<div id="header" >
<img src="gambar/putra1.jpg" width="100" height="100" >
<h1>Seputar Bali</h1>
</div>
<div id="isi">
<div class="peta">
<a href ="" target="_blank">Peta Bali</a>
<a href ="" target="_blank">Biografi</a>
<a href ="" target="_blank">Kuliner Bali</a>
<a href ="" target="_blank">Kesenian Bali</a>
<a href ="" target="_blank">Foto Bali</a>
<a href ="" target="_blank">Geografi</a>
</div>
<div id="sidebar">
<b>Info Wisata yang Ada di Bali</b>
<div class="sidebar">
<ol><li><a href ="" target="_blank"><b>Uluwatu</b></a></li>
<li><a href ="" target="_blank"><b>Tanah Lot</b><a></li>
<li><a href ="" target="_blank"><b>Kuta</b></a></li>
<li><a href ="" target="_blank"><b>Tapak Siring</b></li>
<li><a href ="" target="_blank"><b>Sanggeh</b><a></li>
<li><a href ="" target="_blank"><b>Sanur</b></a></li>
<li><a href ="" target="_blank"><b>Nusa Dua</b></a></li>
<li><a href ="" target="_blank"><b>Bajro Sandi</b></a></li></ol>
</div>
</div>
<div id="sidebar">
<b>Info Lain Seputar Bali</b>
<div class="sidebar">
<ul><li><a href ="" target="_blank"><b>Travel</b></a></li>
<li><a href ="" target="_blank"><b>Restaurant</b></a></li>
<li><a href ="" target="_blank"><b>Hotel</b></a></li>
<li><a href ="" target="_blank"><b>Diskotik</b><a></li></ul>
</div>
</div>
</div>
<div id="footer">
<b>By Putra Kencana</b>
</div>
</div>
</div>
</body>
</html>


2. Indeks PHP
body
{
background :black;
margin: 0px;
padding : 0px;
}

#page
{
background : white;
margin  : 10px 100px 10px 100px;
padding : 5px 5px 5px 5px;
height : 900px;
}

#header
{
background : url(gambar/gambar1.jpg);
margin : 0px 5px 0px 5px;
padding : 15px 5px 5px 5px;
height : 100px;
color : red;
}
img
{
float : right;
margin-top : 3px;
margin-right : 3px;
margin-left : 3px;
margin-bottom: 10px;
height : 100px;
width : 100px;
}
h1
{
text-align : center;
font-size : 48px;
font-family : curlz mt;
margin : 10px;
color : red ;
}

ol
{
color : red;
}
#isi
{
background : url(gambar/puji.jpg);
margin : 5px 5px 5px 5px;
padding : 5px 5px 5px 5px;
height : 700px;
}

.peta a
{
margin-left : 10px;
margin-top : 10px;
height: 20px;
float : right;
width :100px;
background : white;
text-align : center;
color : red;
font-family : algerian;
padding :2px 2px 2px 2px;
font-size : 12px;
}
ul
{
color : blue;
}
#sidebar
{
border-radius : 10px;
background : url(gambar/sunset.JPG);
margin : 5px 690px 5px 5px;
padding : 15px 5px 5px 5px;
height : 300px;
text-align : center;
color : red;
font-size : 25px;
font-family : monotype corsiva;
}
.sidebar  
{
text-align : left;
font-size : 20px;
padding : 5px;
margin :10px;
background : black;
}
#content
{
margin-left:100px;
margin-top:40px;
margin-right :5px;
float : right;
padding :0;
background : white;
border : 1px solid;
}

#footer
{
text-align : center;
color : red;
font-size : 50px;
font-family : algerian;
margin : 15px 5px 5px 5px;
padding :5px 5px 5px 5px;
background : blue;
height : 50px;
}
a
{
color : yellow;

Penjelasan :
1. CSS adalah Cascading Style Sheets yaitu untuk menyediakan style yang dipakai untuk mengatur bagian-bagian dalam HTML.
2. Id adalah  Berguna untuk mengatur elemen yang mempunyai ID tertentu.
3. Class adalah Digunakan untuk mengatur suatu bagian dari tag, tetapi hanya pada tag tertentu saja.
4. Margin adalah
5. Padding adalah
6. Border adalah
7. Border-rounded adalah

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)