Baik langsung saja Pertama kita buat halaman Header Berikut codingnya:
<html>
<head>
<title> header </title>
</head>
<div class="header"
<header> <h1> <center> Welcome To My Website </h1> </header> <center>
<head>
<meta charset="utf-8">
<title>Header<title>
<style type="text/css">
::selection { background-color: #00CC99; color: white
::-moz-selection { background-color: #78cac7; color: blue; }
body {
background-color: #00CC99
margin: 40px;
font: 13px/20px normal Helvetica, Algerian, sans-serif;
color: #4F5155;
}
hasil dari coding di atas atau halaman header:
<html>
<head>
<title> menu </title>
</head>
<div class="menu-wrap">
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Profil</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</div>
</html>
berikut hasil coding menu tadi.
kemudian kita lanjutkan untuk membuat halaman footer berikut codingnya:
<html>
<head>
<title> footer</title>
</head>
<footer class="mbr-section mbr-section--relative mbr-section--fixed-size" id="footer1-2" style="background-color: #003333;">
<div class="mbr-section__container container">
<div class="mbr-footer mbr-footer--wysiwyg row">
<div class="col-sm-12">
<font color="white"> <p class="mbr-footer__copyright">Copyright © 2016 By : Ahmad didipu</a></p>
</font>
</div>
</div>
</div>
</html>
hasil tampilan halaman footer:
berikut coding untuk menggabungkan semua halaman yang kita buat tadi.
<head>
<title>Latihan</title>
</head>
<div class="header">
<header> <h1> <center> Welcome To My Website </h1> </header> <center>
<head>
<meta charset="utf-8">
<title>Header</title>
<style type="text/css">
::selection { background-color: #00CC99; color: white; }
::-moz-selection { background-color: #66CCCC; color: white; }
body {
background-color: #66CCCC;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: #00CC99;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}
code {
font-family: Consolas, Monaco, Courier New, Courier, monospace;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
#body {
margin: 0 15px 0 15px;
}
p.footer {
text-align: right;
font-size: 11px;
border-top: 1px solid #f0f0f0;
line-height: 32px;
padding: 0 10px 0 10px;
margin: 20px 0 0 0;
}
#container {
margin: 10px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 8px #D0D0D0;
}
</style>
<div class="menu-wrap">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<h2> Pada Pertemuan kali kami semester 4 mendapat tugas dari dosen pengampu matakuliah Pemrograman Web II untuk membuat layout <i> header, content, menu dan footer </i> dari sebuah website menggunakan Ci<ul>(CodeIgniter)</ul>
</h2>
<footer class="mbr-section mbr-section--relative mbr-section--fixed-size" id="footer1-2" style="background-color: #003333;">
<div class="mbr-section__container container">
<div class="mbr-footer mbr-footer--wysiwyg row">
<div class="col-sm-12">
<font color="white"> <p class="mbr-footer__copyright">Copyright © 2016 By : Ahmad didipu</a></p>
</font>
</div>
</div>
</div>
</html>
inilah hasil akhir dari penggabungan Header,menu dan footer:
terimah kasih Sudah mengunjungi Blog ini.
:D:D:D:D
Tidak ada komentar:
Posting Komentar