Tugas 4 Menambahkan biodata pada file HTML
kali ini di tugas 4 kita akan menambahkan biodata pada sisi kiri web dan akan memindahkan navigasi ke sisi kanan web seperti berikut :
Sebelum menambahkan biodata kita terlebih dahulu
harus menambahkan dan merubah beberapa tag pada file CSS seperti berikut:
#bio{
background-color:#ffffff;
color:black ;
height:500px;
width:180px;
float:left;
padding:5px;
text-align:left;
}
#nav{
line-height:30px;
background-color:ffffff;
height:500px;
width:220px;
float:right;
padding:5px;
}
Setelah membuat file CSS kita akan membuat file
HTML dan akan menghubungkan kedua file tersebut seperti berikut :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
<img src="asd.jpg" height="140px" width="1300px">
</div>
<div id="header">
<ul>
<a href ="home.html">Home</a> | <a href ="news.html">News</a> | <a href ="contact.html">Contact</a> | <a href ="about.html">About</a>
</ul>
</div>
</ul>
<div id="bio">
<ul>
<li><center><b>Biodata</b></center></li>
</ul>
<center><img src="_DSC0125.jpg" height="140px" width="130 px"/></center>
<p>
Nama:Muhammad Ridwan
Pekerjaan:Mahasiswa
Negara:Indonesia
Alamat:Bengkong
Hoby:Futsal</p>
<hr>
<p>Saya adalah seorang mahasiswa informatika di salah satu perguruan tinggi di batam.</p>
</div>
<div id="nav">
<ul>
<li><a href ="Sydney.html">Sydney </li></a></li>
<li><a href ="Moscow.html">Moscow</a></li>
<li><a href ="London.html">London</a></li>
<li><a href ="Abudhabi.html">Abu Dhabi</a></li>
</ul>
</div>
<div id= "section">
<h1>Home...</h1>
<p>
Banyak kota kota yang indah diluar negri yg bisa kita kunjungi
</p>
</div>
<div id ="footer">
copyright© Rid 1.com
</div>
</font>
</body>
</html>
Hasilnya, tabel seperti di bawah ini
Download Tugas
#bio{
background-color:#ffffff;
color:black ;
height:500px;
width:180px;
float:left;
padding:5px;
text-align:left;
}
#nav{
line-height:30px;
background-color:ffffff;
height:500px;
width:220px;
float:right;
padding:5px;
}
Pastikan pada #bio “ float = left ” dan pada
#nav “ float = right ”,
Setelah itu kita simpan file CSS tersebut dengan
nama style.css untuk dihubungkan
menggunakan link rel.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
<img src="asd.jpg" height="140px" width="1300px">
</div>
<div id="header">
<ul>
<a href ="home.html">Home</a> | <a href ="news.html">News</a> | <a href ="contact.html">Contact</a> | <a href ="about.html">About</a>
</ul>
</div>
</ul>
<div id="bio">
<ul>
<li><center><b>Biodata</b></center></li>
</ul>
<center><img src="_DSC0125.jpg" height="140px" width="130 px"/></center>
<p>
Nama:Muhammad Ridwan
Pekerjaan:Mahasiswa
Negara:Indonesia
Alamat:Bengkong
Hoby:Futsal</p>
<hr>
<p>Saya adalah seorang mahasiswa informatika di salah satu perguruan tinggi di batam.</p>
</div>
<div id="nav">
<ul>
<li><a href ="Sydney.html">Sydney </li></a></li>
<li><a href ="Moscow.html">Moscow</a></li>
<li><a href ="London.html">London</a></li>
<li><a href ="Abudhabi.html">Abu Dhabi</a></li>
</ul>
</div>
<div id= "section">
<h1>Home...</h1>
<p>
Banyak kota kota yang indah diluar negri yg bisa kita kunjungi
</p>
</div>
<div id ="footer">
copyright© Rid 1.com
</div>
</font>
</body>
</html>
Hasilnya, tabel seperti di bawah ini
Download Tugas
0 komentar:
Posting Komentar