Tugas 4 Cara memasukan biodata di bagian kiri HTML

1.       File format 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"> (sesuaikan dengan nav yang di format CSS)
<div id="garis"><ol><b>Biodata</b></ol></div>
<img src="IMG_3020.jpg" width="200px" height="140px">
<p>
Nama             : Dody Tisna<br/>
Status            : Mahasiswa<br/>
Kewarganegara    : Indonesia<br/>
Tempat tgl lahir : Batam, 7 Oktober 1995<br/>
Hoby             : Photography & Music<br/> </p>
<hr>
<p align="justify">
Seorang mahasiswa konvesi U-Putra Batam ke U-Ibnusina Batam Teknik Informatika.
menyukai dunia photography dan musik, pernah menjuarai beberapa kontes photo dalam katogeri HI(Human Interest).
</p>
</div>


<div id="navkanan"> (sesuaikan dengan navkanan yang di format CSS)
<ul>
  <li><a href="nav.html">Nature</a></li>
  <li><a href="nav.html">Modeling</a></li>
  <li><a href="nav.html">Prewed & wed</a></li>
  <li><a href="nav.html">HI(Human Interest)</a></li>

</ul>
</div>

<div id="section">
<h1>Photography</h1>
<p>
COMING SOON...
</p>

</div>
<div id="tengah"></div>

<div id="footer">
Copyright 2015
</div>
</body>
</html>


2.       File baru format CSS:

#image
{
    background-image:url("Cover.jpg");
                padding-left:0px;
                height:200px;
                width:1247px;

}
#header {
    background-color:dimgray;
    color:White;
    text-align:center;
    padding:3px;
                padding-left:150px;
}
#nav {
    line-height:25px;
    height:730px;
    width:200px;
    float:left;
                padding-top:5px;
} (sesuaikan dengan nav yang di format HTML)


#navkanan {
    line-height:30px;
    height:300px;
    width:200px;
    float:right;
                padding-top:5px;
} (sesuaikan dengan navkanan yang di format HTML)


#section {
    width:350px;
    float:left;
    padding:50px;
}
#footer {
    background-color:Gray;
    color:White;
    text-align:center;
    padding:5px;
                clear:both;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 200px;
    font-weight: bold;
    color: White;
    background-color: dimgray;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: DarkGray;
}

#garis {
width: 200px;
float:left;
background-color:DarkGray;
text-transform: uppercase;
}



3.       Hasil dan jadinya:

Komentar

Posting Komentar