.png)
Cara menggabungkan Css dan html
Note : #text berwarna merah merupakan penjelasan. tidak usah di copy
Sebelum melanjutkan saya akan menerangkan mengapa Css digabungkan ke Html.
jika kita membuat html, kita tidak bisa membuat menu hingga mengatur warna pada web. maka disinilah Css berperan. silahkan lihat tutor sederhana saya :
jika kita membuat html, kita tidak bisa membuat menu hingga mengatur warna pada web. maka disinilah Css berperan. silahkan lihat tutor sederhana saya :
gambar diatas merupakan html tanpa menggunakan css, terlihat suram dan susunannya tidak menarik. berikut kode html dari gambar diatas sebelum digabungkan menggunakan css :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="xx">
</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="algoritmaII.html">Algoritma</a><li>
<li><a href="Flowchart.html">Flowchart</a><li>
<li><a href="Pseudocode.html">Pseudocode</a><li>
<li><a href="Deskripsi.html">Deskripsi</a><li>
</ul>
</div>
<br>
<div id="selection">
<h1><center>Algoritma</center></h1>
<p>Algoritma adalah Sistim kerja komputer memiliki brainware, hardware, dan software.</p>
<p>Tanpa salah satu dari ketiga sistim tersebut, komputer tidak akan berguna. Kita akan lebih fokus pada software komputer.</p>
</div>
<div id="footer">
Copyright © AnggiNugraha
</div>
</body>
</html>
selanjutnya kita buat file css menggunakan notepad++ :
#image
{
background-image:url("OP.jpg"); <"OP.jpg ganti sesuai gambar yg ada di folder kamu
padding-left:2380px;
height:300px;
}
#header{
background-color:#DC143C; #ganti warna sesukamu , klik disini untuk melihat kodenya.
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav{
line-height:30px;
height:300px;
width:130px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:#DC143C;
color:white;
text-align:center;
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: #FFF0F5;
background-color: #DC143C;
text-align: center;
padding: 5px;
text-decoration:none;
text-transform: uppercase;
}
a:hover, a:active{
background-color: #FFEBCD;
}
Save css yang kamu buat , misalnya "style.css" .
lalu kita kembali ke file sebelum dimasukkan css..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="xx.css"> # ganti xx dengan file css yg kamu buat tadi
</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="algoritmaII.html">Algoritma</a><li>
<li><a href="Flowchart.html">Flowchart</a><li>
<li><a href="Pseudocode.html">Pseudocode</a><li>
<li><a href="Deskripsi.html">Deskripsi</a><li>
</ul>
</div>
<br>
<div id="selection">
<h1><center>Algoritma</center></h1>
<p>Algoritma adalah Sistim kerja komputer memiliki brainware, hardware, dan software.</p>
<p>Tanpa salah satu dari ketiga sistim tersebut, komputer tidak akan berguna. Kita akan lebih fokus pada software komputer.</p>
</div>
<div id="footer">
Copyright © AnggiNugraha
</div>
</body>
</html>
Maka hasilnya akan seperti ini :
-650-80.JPG)
0 komentar: