membuat sebuah biodata dalam layout menggunakan HTML dan CSS,
yang kebetulan ni merupakan tugas campus
Sebelum membuat sebuah Biodata alangkah baiknya teman-teman mempersiapkan text editor yang akan memudahkan dalam pengerjaan sepert Notepad++
Disini kita akan membuat 2 file HTML dan 2 file CSS
membuat HTML nya terlebih dahulu
silhakan salin script berikut :
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="robi.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="navkanan">
<ul>
<li><a href="nav.html">BIODATA</a></li>
</ul>
<ul>
<p>
<img src="messineymar.jpg" width=150px height=150px>
<P>Nama: Robi Alben</P>
<P>Alamat: Sekupang Batam</P>
<P>Kota asal: Bengkulu</P>
<P>Ttl: Bengkulu-08-01-1988</P>
<P>Hoby : playingFutsal<P>
</p>
</ul>
</div>
<div id="sectionkanan">
<h1>BARCALONA FC </h1>
<font color=red>Real Madrid dan Barcelona bukan hanya bersaing di lapangan. Di luar lapangan pun mereka saling beradu. Ketika berurusan dengan pemain paling penting di planet ini, Barcelona dan Real Madrid sering memiliki target bintang yang sama pada daftar incaran mereka.
perogram adalah kumpulan pernyataan komputer dalam program adalah algoritma. program di tulis dengan menggunakan bahasa program jadi bisa di sebut bahawa program adalah suatu implementasi dari bahasa program. algoritma merupakan jantung ilmu informatika.
</color>
</h2>
</div>
<div id="footer">
<bgcolor="red">copyright_robby.albhent@gmail.com
</div>
</body>
</html>
simpan script tersebut ke file yang anda ingin kan dengan type HTML ( . html)
Terus membuat CSS nya lagi
silhakan salin script berikut :
#image
{
background-image:url("fcb.jpg");
padding-left:100px;
height:150px;
}
#header{
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:28px;
height:300px;
width:130px;
float:right;
padding:5px;
}
#section{
width : 300px;
float : center;
padding-left : 100px;
}
#footer1{
background-color:#4c5f10;
clear:both;
text-align:center;
padding:5px;
}
#nav1 {
line-height:28px;
width:130px;
height:300px;
color:white;
text-align:center;
float:left;
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;
}
simpan script CSS nya ke folder yang sama dengan HTML di atas dengan type CSS ( . css)
HASIL DARI GABUNGAN SCRIPT HTML & CSS DI ATAS :
Posting Komentar