Ok setelah pada artikel sebelumnya kita telah mempelajari tentang cara membuat background html full screen , kali ini kita akan mecoba membuat web dengan html yang tentunya pada artikel ini web yang akan kita buat masih bersifat statis dan masih cukup sederhana. Untuk pengerjaan script website html kali ini kita akan menggunakan sedikit scribt css yang akan kita gunakan untuk mempercantik tampilan halaman html. Namun tenang saja bagi kalian yang masih cukup baru di dunia programming ,kalian akan cukup mudah untuk memahami tutorial ini karena memang contoh coding html website yang saya berikan pada tutorial ini saya tujukan untuk pemula didunia programming web. Perlu diingat lagi tutorial ini bertujuan untuk membuat sebuah tampilan website statis yang tentunya isi dari website ini masih bersifat statis tidak seperti wordpress ataupun blogger karena pada website ini kita belum menggunakan database untuk menyimpan data informasi yang akan kita tampilkan.
Cara Membuat Web Dengan Html
Untuk membuat web sederhana dengan html dan css pada tutorial berikut ini tools yang perlu kita siapkan adalah sebuah text editor yang dapat anda download secara gratis dalam laptop atau pc anda . Anda dapat menggunakan text editor seperti notepad++ , sublime text atau visual studio code namun saya lebih menyarankan menggunakan visual studio code karena akan memudah kalian dalam proses coding. Untuk layout tampilan halaman web sederhana yang akan kita buat adalah seperti pada gambar berikut ini :
Dari gambar layout diatas kita akan membagi tampilan kedalam beberapa bagian diantaranya bagian navigation, header ,content ,sidebar dan yang terakhir adalah footer. Pada bagian navigation tampilan web sederhana yang kita buat nantinya akan berisi menu dari halaman website sedangkan pada bagian header akan berisi gambar yang akan kita jadikan background . Pada bagian content , sidebar, dan footer nantinya cuma akan kita beri warna saja belum kita beri isinya seperti pada layout pada gambar diatas.
Setelah kalian mengerti serta memahami layout dari halaman web sederhana yang akan kita buat langsung saja kita mencoba untuk mempraktikkanya.
Langkah-langkah Membuat Web Dengan Html
lPastikan kalian telah menginstall text editor pada pc atau laptop kalian , setelah itu buat sebuah folder baru pada laptop atau pc kalian . Letakkan image yang akan kalian gunakan sebagai banner kedalam folder tersebut. Kemudian Buat sebuah file dengan nama index.html didalam folder yang telah kalian buat tadi seperti pada gambar dibawah ini :
Buka file index.html dengan menggunakan text editor kalian kemudian isikan contoh coding html website berikut ke file index.html pada text editor kalian :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<!-- bagian navigation menu -->
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
</ul>
</nav>
<!-- bagian navigation menu -->
<!-- membuat banner pada header -->
<div class="jumbotron">
<h1>HEADER</h1>
</div>
<!-- membuat banner pada header -->
</header>
<div class="content">
<!-- bagian content -->
<div class="main-content">
<h1>CONTENT</h1>
</div>
<!-- bagian content -->
<!-- bagian sidebar -->
<div class="sidebar">
<h1>SIDEBAR</h1>
</div>
<!-- bagian sidebar -->
</div>
<!-- bagian footer -->
<footer>
<h1>FOOTER</h1>
</footer>
<!-- bagian footer -->
</body>
</html>
Simpan dan kemudian buat sebuah file baru yang berada pada satu folder dengan file index.html dan beri nama style.css seperti pada gambar berikut ini :
Buka file style.css menggunakan text editor kalian kemudian copykan script berikut ke dalam file style.css melalui text editor kalian :
body{
padding: 0;
margin: 0;
}
nav{
/*-- mengatur jarak padding navigation menu --*/
padding: 10px 50px;
}
nav ul{
/*-- mengatur display menu dengan menggunakan flexbox --*/
/*-- secara default tampilan akan seperti coloum atau kesamping --*/
display: flex;
/*-- mengatur posisi menu agar berada disisi kanan --*/
justify-content: flex-end;
}
nav ul li{
/*-- mengatur margin top&bottom = 0 , margin right&left=20px*/
margin: 0 20px;
/*-- menghilangkan linkaran hitam pada tag list --*/
list-style-type: none;
/*-- mengatur ukuran huruf */
font-size: 20px;
}
/*-- . menunjukkan nama kelas --*/
.jumbotron{
/*-- sudah saya jelaskan pada artikel saya sebelumnya tentang : --*/
/*-- https://kodekreasi.com/tutorial-html-cara-membuat-background-html-full-screen/ --*/
background-image: url('./background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 60vh;
text-align: center;
padding-top: 50px;
margin-top: 0px;
}
.content{
/*--membuat tampilan content dan sidebar dalam satu baris --*/
display: flex;
}
.main-content{
/* mengatur lebar kolom content */
width: 70%;
/*-- mengatur teks agar berada ditengah-tengah --*/
text-align: center;
/*-- mengatur padding bagian atas content --*/
padding-top: 50px;
/*-- mengatur warna background--*/
background-color: cyan;
/*-- mengatur tinggi tampilan content --*/
height: 90vh;
}
.sidebar{
/* mengatur lebar kolom sidebar */
width: 30%;
/*-- mengatur posisi text agar berada ditengah --*/
text-align: center;
/*-- mengatur padding bagian atas --*/
padding-top: 50px;
/*-- mengatur warna background --*/
background-color: red;
/*-- mengatur tinggi tampilan sidebar --*/
height: 90vh;
}
footer{
/*-- mengatur posisi text agar berada ditengah --*/
text-align: center;
/*-- mengatur warna background --*/
background-color: slategrey;
/*-- mengatur margin footer --*/
margin: 0px;
/*-- mengatur padding footer --*/
padding: 20px;
}
Terakhir jalankan scribt index.html dengan cara klik kanan file index.html 2kali maka halaman website yang telah kalian buat akan tertampil di browser kalian.
Sekian artikel saya kali ini tentang cara membuat web dengan html bagi pemula jangan lupa baca artikel saya yang lain di kodekreasi.com .
Incoming search therms :
- contoh coding html website
- cara membuat web dengan html
- script website html
- tampilan web sederhana
