MemBuat Kerangka Website Sederhana Dengan Tag HTML 5 & CSS 3
Assalamuallaikum wr.wb Teman,, Hallo kali ini saya MRP Akan Memberikan Tutorial Sederhana tentang WEBSITE menggunakan tag-tag HTML 5 ,,, oke kita langsung saja ke TKP :D heheehe..
Langkah yang pertama : buat struktur html nya dan kasih link css nya disini saya Mengkasih kn nama nya ( hampa.css )
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
</body>
</html>
Langkah ke-2 : kita akan membuat header Ketikkan kodenya di dalam body
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
<header>
<p> <a href="">MRP </a></p>
<div id= gambar>
<a href="" title="Facebook"><img src="facebook.png"></a><br>
<a href="" title="Twitter"><img src="twitter.png"></a><br>
<a href="" title="Rss"><img src="rss.png"></a><br>
</div>
</header>
</body>
</html>
nahh di situ <header> </header> termasuk dalam HTML 5 ,, okee lalu kita ketik CSS nya
header{
background-color: #0000A0;
width: 100%;
height: 100px;
}
p a{
color: #0B39F4;
font-size: 90px;
text-decoration: none;
}
p a:hover{
color: #000080;
text-decoration: none;
}
body{
margin: 0;
padding: 0;
}
langkah ke- 3: kita akan membuat content dan sidebar ;
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
<header>
<p> <a href="">MRP </a></p>
<div id= gambar>
<a href="" title="Facebook"><img src="facebook.png"></a><br>
<a href="" title="Twitter"><img src="twitter.png"></a><br>
<a href="" title="Rss"><img src="rss.png"></a><br>
</div>
</header>
<div class="container">
<section class="sidebar">
</section>
</div>
nah di situ <div class="container"> </div> termasuk dalam HTML 5 dan juga <section class="sidebar">
</section> juga termasuk dalam HTML 5
Assalamuallaikum wr.wb Teman,, Hallo kali ini saya MRP Akan Memberikan Tutorial Sederhana tentang WEBSITE menggunakan tag-tag HTML 5 ,,, oke kita langsung saja ke TKP :D heheehe..<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
</body>
</html>
Langkah ke-2 : kita akan membuat header Ketikkan kodenya di dalam body
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
<header>
<p> <a href="">MRP </a></p>
<div id= gambar>
<a href="" title="Facebook"><img src="facebook.png"></a><br>
<a href="" title="Twitter"><img src="twitter.png"></a><br>
<a href="" title="Rss"><img src="rss.png"></a><br>
</div>
</header>
</body>
</html>
nahh di situ <header> </header> termasuk dalam HTML 5 ,, okee lalu kita ketik CSS nya
header{
background-color: #0000A0;
width: 100%;
height: 100px;
}
p a{
color: #0B39F4;
font-size: 90px;
text-decoration: none;
}
p a:hover{
color: #000080;
text-decoration: none;
}
body{
margin: 0;
padding: 0;
}
langkah ke- 3: kita akan membuat content dan sidebar ;
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
<header>
<p> <a href="">MRP </a></p>
<div id= gambar>
<a href="" title="Facebook"><img src="facebook.png"></a><br>
<a href="" title="Twitter"><img src="twitter.png"></a><br>
<a href="" title="Rss"><img src="rss.png"></a><br>
</div>
</header>
<div class="container">
<section class="sidebar">
</section>
</div>
nah di situ <div class="container"> </div> termasuk dalam HTML 5 dan juga <section class="sidebar">
oke sekarang kita masukkan CSS nya ;
.container{
width: 90%;
height: 80%;
background-color: #8080C0;
margin: 0 auto;
}
.sidebar{
background-color: #000;
margin: 0 auto;
width: 20%;
height: 100%;
float: left;
}
langkah 4 : kita akan membuat Footer
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
<header>
<p> <a href="">MRP </a></p>
<div id= gambar>
<a href="" title="Facebook"><img src="facebook.png"></a><br>
<a href="" title="Twitter"><img src="twitter.png"></a><br>
<a href="" title="Rss"><img src="rss.png"></a><br>
</div>
</header>
<div class="container">
<section class="sidebar">
</section>
</div>
<footer>
<footer>
</body>
</html>
nah disitu <footer> <footer> termasuk dalam HTML 5 oke dan sekarang kita masukkan css nya
footer{
margin: 0 auto;
background-color: #0000A0;
width: 100%;
height: 30%;
}
nah maka akan menjadi seperti ini ;
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
</body>
</html>
Langkah ke-2 : kita akan membuat header Ketikkan kodenya di dalam body
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
<header>
<p> <a href="">MRP </a></p>
<div id= gambar>
<a href="" title="Facebook"><img src="facebook.png"></a><br>
<a href="" title="Twitter"><img src="twitter.png"></a><br>
<a href="" title="Rss"><img src="rss.png"></a><br>
</div>
</header>
</body>
</html>
nahh di situ <header> </header> termasuk dalam HTML 5 ,, okee lalu kita ketik CSS nya
header{
background-color: #0000A0;
width: 100%;
height: 100px;
}
p a{
color: #0B39F4;
font-size: 90px;
text-decoration: none;
}
p a:hover{
color: #000080;
text-decoration: none;
}
body{
margin: 0;
padding: 0;
}
langkah ke- 3: kita akan membuat content dan sidebar ;
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
<header>
<p> <a href="">MRP </a></p>
<div id= gambar>
<a href="" title="Facebook"><img src="facebook.png"></a><br>
<a href="" title="Twitter"><img src="twitter.png"></a><br>
<a href="" title="Rss"><img src="rss.png"></a><br>
</div>
</header>
<div class="container">
<section class="sidebar">
</section>
</div>
nah di situ <div class="container"> </div> termasuk dalam HTML 5 dan juga <section class="sidebar">
oke sekarang kita masukkan CSS nya ;
.container{
width: 90%;
height: 80%;
background-color: #8080C0;
margin: 0 auto;
}
.sidebar{
background-color: #000;
margin: 0 auto;
width: 20%;
height: 100%;
float: left;
}
langkah 4 : kita akan membuat Footer
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="hampa.css">
</head>
<body>
<header>
<p> <a href="">MRP </a></p>
<div id= gambar>
<a href="" title="Facebook"><img src="facebook.png"></a><br>
<a href="" title="Twitter"><img src="twitter.png"></a><br>
<a href="" title="Rss"><img src="rss.png"></a><br>
</div>
</header>
<div class="container">
<section class="sidebar">
</section>
</div>
<footer>
<footer>
</body>
</html>
nah disitu <footer> <footer> termasuk dalam HTML 5 oke dan sekarang kita masukkan css nya
footer{
margin: 0 auto;
background-color: #0000A0;
width: 100%;
height: 30%;
}
nah maka akan menjadi seperti ini ;
