Tugas 3 Cara mengelink format CSS ke HTML

1.      File berformat HTML:

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css"> (simpan dalam satu folder dengan file cssnya)
</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>London</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.London sakmenika ibukotaning saka negari ingrris.London iku kuto sing paling padet ing inggris,
kanthi dadi area panggo 13 juta manungsa.
</p>
<p>
standing on 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">
copyright torrent.com
</div>

</body>
</html>


2.      File baru berformat CSS:
#image
{
            background-image:url("kotak.jpg");
            padding-left:100px;
            height:150px;
}
#header {
            background-color:#98bf21;
            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:#4c5f10;
            color:Red;
            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;
}

3.      Hasil dan jadinya


Komentar