APA ITU HTML DAN CSS
HTML dan CSS
sebenarnya adalah bahasa keseharian para pengguna internet. Halaman
yang tampil dalam browser ketika kita berselancar itu adalah
pengembangan dari kedua bahasa tersebut, yaitu bahasa ‘markup‘ (HTML) dan bahasa ‘stylesheet‘ (CSS),
Jika
kita coba analogikan kedua bahasa tersebut sebagai sebuah bangunan, HTML itu
adalah struktur dasar dari bangunan, dan CSS yang kemudian bertugas menata agar
struktur bangunan tersebut tertata dengan baik dan mempercantiknya.
nah ini dia contoh sederhana untuk kita para pemula
berikut codingnya dengan notepad
<!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">Menu 1</a></li>
<li><a href="nav.html">Menu 2</a></li>
<li><a href="nav.html">Menu 3</a></li>
<li><a href="nav.html">Menu 4</a></li>
</ul>
</div>
<div id="section">
<h1>MDIS</h1>
<p>
london is the capital city of england. it is the most populous city in the united kingdom,
with a metropolitan area of over 13 milion inhabitants.
</p>
<p>
standingon the river thames,london has been major settlement for two millennia,
its history going back to its founding by the romans, who named it londinium
</p>
</div>
<div id ="footer">
<marquee><font face="Batang"> <color="#009900"> Copyright © Nur Fharid</font></marquee>
</div>
</body>
</html>
berikut css yaaaaa.!
#image
{
background-image:url("lighthouse.jpg");
padding-left:100px;
height:150px;
}
#header
{
background-color:#f8ce39;
color:red;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav
{
line-height:30px;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer
{
background-color:#700399;
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: #f8ce39;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,
a:active {
background-color: #7A99LA;
Dan inilah hasilnya
gimana mau mencoba silahkan.:)
Tidak ada komentar:
Posting Komentar