Home » How To » Cara Membuat Website Sederhana

Cara Membuat Website Sederhana

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat situs web responsif yang akan berfungsi di semua perangkat, PC, laptop, tablet dan ponsel.

Website Responsif Sederhana

<!DOCTYPE html>
<html lang="en">
<head>
<title>Judul Web</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style pada body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 80px;
  text-align: center;
  background: #5F9EA0;
  color: white;
}

/* Tingkatkan ukuran font judul */
.header h1 {
  font-size: 40px;
}

/* Beri gaya bar navigasi atas */
.navbar {
  overflow: hidden;
  background-color: #333;
}

/* Beri style pada tautan bar navigasi */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Tautan rata kanan */
.navbar a.right {
  float: right;
}

/* Ubah warna saat mengarahkan kursor */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Buat dua kolom tidak sama yang terletak di samping satu sama lain * /
/ * Sidebar / kolom kiri */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* gambar, sebagai contoh */
.fakeimg {
  background-color: #483D8B;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Tata letak responsif - jika lebar layar kurang dari 700 piksel, buat dua kolom bertumpuk, bukan bersebelahan */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - ketika layar kurang dari 400px lebarnya, buat link navigasi menumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>A website created by me.</p>
</div>

<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" class="right">Link</a>
</div>

<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg"  style="height:200px;">Gambar disini</div>
    <p>Tulis beberapa teks</p>
    <h3>Teks lain</h3>
    <p>fix me</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Deskripsi title atau jdul</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>teks di sini</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Deskripsi title atau jdul</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>teks di sini</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

Draft Layout

Sebaiknya gambar draf tata letak desain halaman sebelum membuat situs web:

Langkah Pertama – Halaman HTML Dasar

HTML adalah bahasa markup standar untuk membuat situs web dan CSS adalah bahasa yang menjelaskan style dokumen HTML. Kita akan menggabungkan HTML dan CSS untuk membuat halaman web dasar.

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>My Website</h1>
<p>Website buatan sendiri.</p>

</body>
</html>

Penjelasan Kode

  • Deklarasi <!DOCTYPE html>  mendefinisikan dokumen ini menjadi HTML5
  • Elemen<html> adalah elemen root dari halaman HTML
  • Elemen<head> berisi informasi meta tentang dokumen
  • Elemen<title> menentukan judul untuk dokumen
  • Elemen<meta> harus mendefinisikan set karakter menjadi UTF-8
  • Elemen<meta> dengan name = “viewport” membuat situs web terlihat bagus di semua perangkat dan resolusi layar
  • Elemen<style> berisi gaya untuk situs web (tata letak / desain)
  • Elemen<body> berisi konten halaman yang terlihat
  • Elemen<h1> mendefinisikan judul besar
  • Elemen<p> mendefinisikan paragraf

Membuat Halaman Konten

Di dalam elemen <body> pada website yang akan kita pakai, kita akan gunakan “Layout Draft” nya, dan ini beberapa rinciannya:

  • Ada header
  • A danavigation bar
  • Ada main content
  • Ada side content
  • Ada footer

Header

Header biasanya terletak di bagian atas situs web (atau tepat di bawah menu navigasi atas). Ini sering kali berisi logo atau nama situs web:

<div class="header">
  <h1>My Website</h1>
  <p>Website buatan sendiri.</p>
</div>

Kemudian kita akan menggunakan CSS untuk mengatur style headernya:

.header {
  padding: 80px; /*  padding */
  text-align: center; /* teks yang ditengah */
  background: #1abc9c; /* background hijau  */
  color: white; /* warna teks putih */
}

/* Tingkatkan ukuran font dari elemen <h1> */
.header h1 {
  font-size: 40px;
}

Bar Navigasi

Bar navigasi berisi daftar tautan atau untuk membantu pengunjung menavigasi website kita:

<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" class="right">Link</a>
</div>

Gunakan CSS untuk mengatur style bar navigasi:

/* Beri style bar navigasi atas */
.navbar {
  overflow: hidden; /*Sembunyikan overflow */
  background-color: #333; /* warna background gelap */
}

/* Style untuk navigation bar links */
.navbar a {
  float: left; /*Pastikan tautan tetap berdampingan */
  display: block; /* Ubah tampilan untuk memblokir, untuk alasan responsif  */
  color: white; /* Warna teks putih */
  text-align: center; /* Pusatkan teks */
  padding: 14px 20px; /* Tambahkan padding */
  text-decoration: none; /* hapus underline */
}

/* Right-aligned link */
.navbar a.right {
  float: right; /* Layangkan tautan ke kanan */
}

/* Ubah warna saat mengarahkan kursor ke atas */
.navbar a:hover {
  background-color: #ddd; /* Warna latar abu-abu */
  color: black; /*Warna teks hitam*/
}

Konten

Buat tata letak 2 kolom, dibagi menjadi “konten samping” dan “konten utama”.

<div class="row">
  <div class="side">...</div>
  <div class="main">...</div>
</div>

Kita akan menggunakan CSS Flexbox untuk menangani layoutnya:

/* Pastikan ukuran yang tepat */
* {
  box-sizing: border-box;
}

/* Column container */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Buat dua kolom tidak sama yang terletak di samping satu sama lain * /
/ * Sidebar / kolom kiri*/
.side {
  flex: 30%; /* Atur lebar sidebar */
  background-color: #f1f1f1; /* Warna latar abu-abu */
  padding: 20px; /*  padding */
}

/* Main column */
.main {
  flex: 70%; /* Atur lebar konten utama*/
  background-color: white; /* Warna latar belakang putih */
  padding: 20px; /*  padding */
}

Kemudian tambahkan kueri media untuk membuat tata letak(layout) menjadi responsif. Ini akan memastikan bahwa website yang kita buat terlihat bagus di semua perangkat (desktop, laptop, tablet, dan ponsel). Ubah ukuran jendela browser untuk melihat hasilnya.

/* Responsive layout - ketika layar kurang dari 700px lebarnya, buat dua kolom bertumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

/* Responsive layout - ketika layar kurang dari 400px lebarnya, buat link navigasi menumpuk satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

Tip: Untuk membuat jenis tata letak atau layout yang berbeda, cukup ubah lebar flex (tapi pastikan itu menambahkan hingga 100%).

Apa itu ukuran box-sizing?

Box-sizing dapat membuat tiga kota melakukan float secara berdampingan. Namun saat ditambahkan sesuatu untuk memperbesar setiap kotak, kota itu akan rusak. Properti box-sizing dapat kita gunakan untuk memasukkan padding dan border dengan total lebar dan tinggi kotanya utnuk memastikan paddingnya tetap berada di dalam kotak dan tidak rusak.

Footer

Terakhir, kami akan menambahkan footer.

<div class="footer">
  <h2>Footer</h2>
</div>

Dan gaya itu:

.footer {
  padding: 20px; /*  padding */
  text-align: center; /* Pusatkan text*/
  background: #ddd; /* warna background abu */
}

Selamat! Kita telah membangun sebuah website responsif dari awal.

You may also like