Menghubungkan file CSS
pada luar file HTML
Pada tugas 2 untuk membuat desain web kita
menggunakan CSS yang berada pada dalam tag HTML akan tetapi pada tugas 3 ini
kita akan menggunakan tag CSS pada luar HTML yang akan dihubungkan menggunakan link rel yang dituliskan pada tag
HTML agar saling berhubungan.
Untuk menghubungkan HTML dengan CSS kita akan
menggunakan link rel seperti berikut :
<link rel="stylesheet"
type="text/css" href="style.css">
Sebelum menghubungkan link rel terlebih dahulu
kita harus membuat file CSS sebagai pengatur pada web seperti berikut:
#image{
height:150px;
}
#header{
background-color:#48D1CC;
text-align:center;
color:white;
padding:5px;
}
#nav{
line-height:30px;
background-color:#20B2AA;
height:500px;
width:220px;
float:left;
padding:5px;
}
#section{
width:300px;
float:left;
padding:10px;
color:GREY;
}
#gbr{
width:200px;
float:left;
padding:10px;
color:GREY;
}
#footer{
background-color:#48D1CC;
color:WHITE;
clear:both;
text-align:center;
padding:5px;
}
ul{
list-style-type:none;
margin:0;
padding:5px;
overflow:hidden;
}
a:link,
a:visited
{
width:250px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bff21;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#87CEFA;
}
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>
<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="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= "section">
<h1>News...</h1>
<p>Children’s
Information
We
believe it is important to provide added protection for children online. We
encourage parents and guardians to spend time online with their children to
observe, participate in and/or monitor and guide their online activity.This web
does not knowingly collect any personally identifiable information from
children under the age of 13. If a parent or guardian believes that has in its
database the personally-identifiable information of a child under the age of
13, please contact us immediately (using the contact in the first paragraph)
and we will use our best efforts to promptly remove such information from our
records.
</p>
</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 !!!
0 komentar:
Posting Komentar