Pada kesempatan kali ini saya akan sedikit berbagi tentang tutorial membuat footer sederhana menggunakan html pada file PHP.
1.Latar Belakang
Keadaan footer dalam suatu web atau aplikasi merupakan hal yang fleksibel ada atau tidaknya tergantung dari kebutuhan dan penggunaan aplikasi atau program tersebut. lebi sering digunakannya dan dibuatnya footer merupakan sebagai bagian yang digunakan untuk menyampaikan informasi dari program atau aplikasi tersebut.
2.Tujuan
Untuk membuat footer yang sederhana
3.Alat dan bahan
- File CSS
- File HTML
Langkah pertama, kita harus siapkan file bootstrapnya apabila sudah ada atau download terlebih dahulu disini.
File bootstrap diletakan satu folder dengan file footer
Kemudian buat file diberi nama footer.html
Selanjutnya tulis script dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FOOTER</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="background-color:#171717; color:white; text-align: center;"><h1>LOREM IPSUM</h1>
<hr style="background-color: #4E4E4E;">
<a href="#"><img class="image" border="0" title="#" src="image/f.png" width="40px" height="40px" ></a>
<a href="#"><img class="image" border="0"title="#" src="image/ig.png" width="40px" height="40px"></a>
<a href="#"><img class="image" border="0"title="#" src="image/gp.png" width="40px" height="40px"></a>
<a href="#"><img class="image" border="0"title="#" src="image/tw.png" width="40px" height="40px"></a>
<a href="#"><img class="image" border="0"title="#" src="image/y.png" width="40px" height="40px"></a>
<br>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<hr style="background-color: #4E4E4E;">
Copyright © 2017 Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>
Kalau sudah save file tersebut (ctrl+s)
Hasilnya akan muncul seperti dibawah ini
Dari hasil yang diatas anda bisa menambahkan judul, media sosial maupun keterangan-keterangan mengenai aplikasi yang anda buat.
Keterangan :
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>, digunakan untuk memanggil file bootstrap.
<div class="container-fluid">, digunakan untuk isi agar full atau penuh.
<div class="row">
<div class="col-sm-12>, menambahkan kolom anda dapat memasukan sesuai keinginan anda 12 merupakan untuk tampilan penuhnya.
KESIMPULAN
Dengan menggunakan bootstrap, tampilan website bisa responsive.
REFERENSI
https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Sekian Terimakasih
Wassalamualaikum wr.wb
EmoticonEmoticon