Tugas 3 Menghubungkan file CSS pada luar file HTML
CSS itu singkatan dari Cascading Style Sheets yang artinya sebuah bahasa pemrograman web untuk mengendalikan komponen sehingga lebih terstruktur. CSS
untuk memperbagus website agar terlihat indah dan tersetruktur rapih.
Biasanya CSS ini digunakan para desainer desainer web/web development.
Tentu saja banyak orang memakai bahasa pemrograman ini, dengan
menggunakan HTML + CSS saja website anda sudah terlihat menarik dan
elegant.
CSS dapat mengendalikan struktur Body, Warna Tabel, Warna
Tulisan, Warna Hyperlink, Warna Mouse over, Membuat header, Spasi antar
paragraph, Margin, Padding dll masih banyak lagi yang lain.
Untuk membuat HTML dan CSS anda harus membuat
coding untuk menyambungkan HTML dan CSS tersebut. mari kita praktekan!..
<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
{
background-image:url("12.jpg");
padding-left:100px;
height:100px;
}
#header {
background-image:12.jpg;
background-color:cyan;
color:white;
text-align:center;
padding-left:150px;
}
#tugas3{
line-height:80px;
height:300px;
width:130px;
float:left;
padding:5px;
}
#section {
text-align:left ;
width:1000px;
float:left;
padding:10px;
}
#footer {
background-color:black;
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: 120px;
font-weight: cyan;
color: white;
background-color: black ;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color:blue ;
}
{
background-image:url("12.jpg");
padding-left:100px;
height:100px;
}
#header {
background-image:12.jpg;
background-color:cyan;
color:white;
text-align:center;
padding-left:150px;
}
#tugas3{
line-height:80px;
height:300px;
width:130px;
float:left;
padding:5px;
}
#section {
text-align:left ;
width:1000px;
float:left;
padding:10px;
}
#footer {
background-color:black;
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: 120px;
font-weight: cyan;
color: white;
background-color: black ;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color:blue ;
}
Setelah itu kita simpan file CSS tersebut dengan
nama style.css untuk dihubungkan
menggunakan link rel.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<body BGcolor="cyan">
<div id="image">
</div>
<div id="img12">
<ul>
<li><a href="tugas3.html"><font color = "red">Home</a></font></li>
<li><a href="photo.html">Photo</a></li>
<li><a href="contact.html">Contacts</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div id="tugas3">
<ul>
<li><a href ="Moscow.html"> Moscow</a> </li>
<li><a href ="Abudhabi.html"> Abudhabi</a> </li>
<li><a href ="Sydney.html"> Sydney</a> </li>
<li><a href ="London.html">London</a></li>
</div>
</ul>
</div>
<div id="section">
<img src = "glowing-world-map-wallpaper.png" width="1100px" height="400px">
</div>
<div id="footer">
Copyright © Ridwan
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<body BGcolor="cyan">
<div id="image">
</div>
<div id="img12">
<ul>
<li><a href="tugas3.html"><font color = "red">Home</a></font></li>
<li><a href="photo.html">Photo</a></li>
<li><a href="contact.html">Contacts</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div id="tugas3">
<ul>
<li><a href ="Moscow.html"> Moscow</a> </li>
<li><a href ="Abudhabi.html"> Abudhabi</a> </li>
<li><a href ="Sydney.html"> Sydney</a> </li>
<li><a href ="London.html">London</a></li>
</div>
</ul>
</div>
<div id="section">
<img src = "glowing-world-map-wallpaper.png" width="1100px" height="400px">
</div>
<div id="footer">
Copyright © Ridwan
</div>
</body>
</html>
Hasilnya, tabel seperti di bawah ini
Download Tugas
0 komentar:
Posting Komentar