CSS:
Merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.
HTML:
Adalah suatu bahasa menggunakan Tag-Tag (Simbol/tanda) tertentu yang nantinya akan di tafsirkan oleh browser.
CONTOH SKRIP CSS:
#image
{
background-image:url("header.jpg");
padding-left:100px;
height:150px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:30px;
background-color:#lightblue;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#4c5f10;
color:white;
clear:both;
text-align:center;
padding:5px;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float:left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #ffffff;
background-color:#98bf21;
text-align: center;
padding : 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
}
CONTOH SKRIP HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="nav.html">Menu1</a></li>
<li><a href="nav.html">Menu2</a></li>
<li><a href="nav.html">Menu3</a></li>
<li><a href="nav.html">Menu4</a></li>
</ul>
</div>
<div id="section">
<h1>Besaran</h1>
<p>
dalam ilmu fisika, panjang, volume, dan, suhu, adalah suatu yang dapat diukur.
</p>
<p>
suatu yang dapat diukur itu disebut dengan besaran.
</p>
</div>
<div id="footer">
Copyright
</div>
</body>
</html>
HASILNYA:
0 komentar:
Posting Komentar