Rabu, 06 Mei 2015
Menambahkan biodata
pada file HTML
Tak jauh berbeda dengan tugas 3, 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:#20B2AA;
color:white;
height:500px;
width:180px;
float:left;
padding:5px;
text-align:left;
}
.bulat{
border-radius:100em;
opacity:10px;
border:2px
solid #ffffff;
width:160px;
height:160px;
}
#nav{
line-height:30px;
background-color:#20B2AA;
height:500px;
width:220px;
float:right;
padding:5px;
}
Pastikan pada #bio “ float = left ” dan pada
#nav “ float = right ”, sedangkan .bulat berguna sebagai pengaturan pada gambar
agar terlihat bulat.
Setelah itu kita simpan file CSS tersebut dengan
nama style.css untuk dihubungkan
menggunakan link rel.
Setelah membuat file CSS kita akan membuat file
HTML dan akan menghubungkan kedua file tersebut seperti berikut :
<html>
<title>Home</title>
<head>
<link
rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<font
face="century gothic">
<div
id="image">
<img
src="Indonesia.png" height="200px"
width="1000px">
</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
class="bulat" src="rama.jpg" /></center>
<p>
Nama:Rama
Aditia
Pekerjaan:Mahasiswa
Negara:Indonesia
Alamat:Tanjung
Uma
Hoby:-</p>
<hr>
<p>Saya
adalah seorang mahasiswa informatika di salah satu perguruan tinggi di
batam.</p>
</div>
<div
id= "section">
<h1>Home...</h1>
<p>Indonesia
kaya akan keindahan alam yang menakjubkan. Keindahan laut, pegunungan, alam dan
budaya yang sangat beraneka ragam.
Banyak
tempat wisata yang indah di Indonesia.</p>
<p>Tak
perlu jauh-jauh ke luar negeri untuk menghabiskan waktu liburan dan menikmati
keindahan alam, cukup keliling Indonesia. Akan ada banyak tempat wisata
yang
menakjubkan, yang tidak kalah dengan tempat wisata di luar negeri.
</p>
</div>
<div
id="nav">
<ul>
<li><a
href ="RAP.html">Raja Ampat Papua</a></li>
<li><a
href ="BALI.html">Pulau Bali</a></li>
<li><a
href ="BNK.html">Bunaken</a></li>
<li><a
href ="YKG.html">Yogyakarta</a></li>
<li><a
href ="LBK.html">Lombok</a></li>
<li><a
href ="BRM.html">Bromo</a></li>
<li><a
href ="KMD.html">Komodo</a></li>
<li><a
href ="TOB.html">Danau Toba</a></li>
<li><a
href ="WTB.html">Wakatobi</a></li>
<li><a
href ="TRJ.html">Toraja</a></li>
</ul>
</div>
<div
id ="footer">
copyright©
3Idiot.com
</div>
</font>
</body>
</html>
Hasilnya,
browser akan menampilkan seperti berikut ini :
Akan lebih bagus jika kita menambahkan banyak
file html pada website tersebut.
Demikian terimakasih !!!
Download Disini !!!
