Membuat Website Sederhana dengan HTML dan CSS
Halo semuanya, pada kesempatan kali ini aku mau membagikan tips cara mudah membuat website. Sebelum memberi kalian tipsnya pastikan kalian sudah menginstall beberapa aplikasi pendukung, yakni: Visual Studio Code. untuk link downloadnya silahkan klik download visual studio code. Setelah terinstall dengan benar, kalian tinggal membuka dan menginstall beberapa extension, seperti :
1. Live server
2. HTML CS support
lalu, copy lah code berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
lalu save dengan nama home.html. setelah itu download pula bootstrap yakni css yang digunakan untuk mempermudah kita dalam mendesign web kita pada link berikut, download bootstrap. lalu extract file tersebut dan jadikan satu folder dengan file home.html yang akan kita buat. Lalu pada bagian <head> tambahkan code seperti ini :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="travel.css">
setelah itu, code akan berubah menjadi seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
untuk membuat header web tuliskan code seperti berikut :
<div class="header"></div>
lalu tuliskan konten yang ada di tengah-tengah antara tanda kurung. Lalu buat file baru bernama style.css lalu tuliskan kode berikut :
.header{
font-family: 'Lucida Handwriting', Verdana, cursive;
color: black;
box-sizing: border-box;
display: block;
width: 100%;
transform: translateY(0);
will-change: transform;
transition: transform .4s;
z-index: 102;
position: relative;
top: 0;
left: 0;
}
setelah itu pada home.html di bagian <head> berikan kode berikut :
<link rel="stylesheet" href="style.css">
untuk membuat konten pada body berikan kode berikut :
<div class="wrapper">
<section>
(isi konten)
</section>
</div>
lalu tulis pada style.css kode berikut :
.wrapper{
width: auto;
margin: auto;
position: relative;
}
section {
margin: auto;
display: flex;
margin-bottom: 200px;
}
dan jika ingin berganti halaman, kalian hanya perlu menambah <section>(isi Konten)</section>
dalam <div class="wrapper"> tadi. lalu untuk mebuat footer kalian perlu menuliskan kode berikut pada home.html:
<footer>
<div class="footer">
<div class="footer-section">
(isi konten)
</div>
</div>
</footer>
lalu tuliskan juga kode berikut pada style.css :
.footer {
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
margin: auto;
background-color: rgb(61, 61, 61);
}
.footer-section {
width: 20%;
margin: 0 auto;
color: rgb(240, 239, 239);
}
Nah, gimana? mudah bukan? jika kalian ingin lihat hasil lengkap web sederhana yang saya buat
.png)
Komentar
Posting Komentar