Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML

ali ini kita akan membuat website statis sederhana, kenapa statis? Karena ketika selesai dalam pembuatannya maka konten website yang sudah kita masukan tidak bisa di ubah lagi alias fixed. Loh’, kalo gitu ngga bisa update isi website donk?? Kata siapa tidak bisa, update konten atau isi website tetap bisa di lakukan hanya saja caranya berbeda dengan website dinamis.

Website dinamis memiliki halaman khusus untuk Admin agar dapat mengelola konten-konten website-nya, halaman-halaman ini biasa kita kenal dengan istilah CMS (Content Management System) seperti WordPress, Joomla, Drupal, dll. merupakan salah satu dari sekian banyak aplikasi CMS berbasis web.

Berbeda dengan website dinamis, maka website statis tidak memiliki halaman admin sehingga untuk update konten atau isi website harus di ubah langsung dari skrip nya atau biasa di sebut dengan Hard-Coding.

Pada tutorial kali ini penulis sengaja berbagi ilmu bagaimana cara membuat website statis sebagai dasar kalian terutama untuk pemula. Untuk membuat website pertama kalian harus paham dulu dengan kode HTML dan CSS.

HTML atau Hypertext Markup Language merupakan bahasa pemrograman yang menjadi standar untuk pembuatan website entah itu website statis atau dinamis. Sedangkan CSS atau Cascading Style Sheet sendiri secara tidak langsung merupakan bagian dari HTML yang fungsi utamanya yaitu untuk mengkustomisasi elemen-eleman pada HTML.

Jadi secara garis besar kita membuat struktur atau bagan website menggunakan HTML, setelah jadi kita tinggal mendisain tampilan layout-nya dengan CSS menjadi sedemikian rupa sehingga tampilan website menjadi lebih menarik dan berkarakter.

Pada tutorial ini kita tidak belajar elemen-elemen HTML atau CSS secara mendalam, tapi kalian bisa merujuk ke W3School sebagai referensi.

Okeh, kita langsung saja untuk membuat website statis sederhana silahkan ikuti langkah-lengkah berikut.

1. Desain Layout Website

Untuk membuat sebuah website pastikan kita buat dulu Layout atau bagannya, biasanya penulis membuat Layout website di kertas tulis, Ms Paint, atau di Adobe Photoshop.

Contoh gambar Layout di atas merupakan contoh layout yang masih baku karena belum kita tentukan section mana yang akan di jadikan Header, Main Body dan Footer, oleh karena itu harus kita tentukan dulu section-section mana yang akan merangkap untuk ketiga elemen tersebut. Berikut contoh gambar yang sudah di tentukan section-nya :

Kenapa kita harus menentukan HEADER, MAIN BODY dan FOOTER?

Kalian pasti pernah akses beberapa website yang menarik seperti website Gaswad.Com, saat kalian beralih dari artikel satu ke artikel yang lain atau membuka halaman satu lalu beralih ke halaman lainnya tentu kalian memperhatikan bahwa LOGO, NAVIGASI atau FOOTER dari website tersebut tidak pernah berubah alias tetap sama, itu karena elemen-elemen yang di khususkan untuk section HEADER, SIDEBAR atau FOOTER merupakan elemen yang fixed atau tidak berubah isi kontennya.

Sedangkan section MAIN BODY di khususkan untuk elemen-elemen yang kontennya selalu berubah-ubah, mengapa berubah-ubah karena konten atau isi artikelnya dinamis atau tidak sama, seperti pada halaman artikel dimana halaman artikel isi kontennya selalu berbeda-beda.

2. ‎Hard Coding Layout Website

Setelah kalian selesai menentukan layout, sekarang kita mulai penulisan kode website-nya. Silahkan ikuti langkah-langkah berikut :

Buat file HTML dengan nama ‘index.html‘ lalu masukan kode HTML standar sebagai berikut :
<html>
<head>

<title>WEBSITE PERDANA SAYA</title>
</head>
<body>

</body>
</html>
Kode di atas merupakan kode standar HTML dan wajib di gunakan jika kalian ingin membuat website. Perlu di perhatikan, setiap tag HTML harus ada tag pembuka (Misal : <html>; <header>; <footer>) dan tag penutup (Misal : </html>; </header>; </footer>).
- Berikut contoh penulisan kode HTML yang SALAH :
  <body>
  
  
  <main>
  <div>
  </main>
  </div>
  
  </body>
- Berikut contoh penulisan kode HTML yang BENAR :
  <body>
  
  
  <main>
  <div></div>
  </main>
  
  </body>
Selanjutnya kita merujuk kembali pada Layout website yang sudah kita buat diatas dimana pada Layout tersebut ada 3 section, yaitu section HEADER, MAIN BODY dan FOOTER, silahkan kalian masukan ketiga section tersebut ke dalam tag <body>.
<body>

<header> 
</header>
<main> 
</main>
<footer> 
</footer>
</body>
Section sudah kita tambahkan, sekarang kita lebih mendalam lagi, jika kalian perhatikan di gambar Layout untuk section HEADER terdapat 2 elemen (LOGO dan NAVIGASI), MAIN BODY 2 elemen (KONTEN dan SIDEBAR), lalu FOOTER tidak memiliki elemen. Silahkan kalian masukan elemen-elemen tersebut ke section-nya masing-masing.
<body>

<header> 
<div>LOGO</div>
<div>NAVIGASI</div>
</header>
<main> 
<div>KONTEN</div>
<div>SIDEBAR</div>
</main>
<footer> 
<div>FOOTER</div>
</footer>
</body>
Selesai, sampai sini kalian sudah berhasil membuat struktur HTML untuk website kalian, silahkan kalian simpan perubahan yang sudah kalian buat tadi dan sekarang coba kalian buka file index.html di Browser yang kalian pakai maka kurang lebih tampilannya akan seperti ini :

Kok’, tampilannya ngga sesuai dengan Layout-nya gan? Secara kasat mata memang belum terlihat seperti pada Layout karena kita belum melakukan Styling Layout, namun secara struktur HTML sudah sesuai.

3. ‎Styling Layout dengan CSS

Selanjutnya kita akan melakukan Styling Layout CSS agar penampakannya sama dengan Layout yang sudah kita buat sebelumnya. Silahkan ikuti langkah-langkah berikut :

Silahkan kalian buat file CSS dengan nama ‘layout.css‘ lalu simpan file tersebut ke dalam folder yang sama dengan file index.html yang kalian buat tadi.
Setelah selesai silahkan kalian buka kembali file index.html tadi lalu tambahkan kode berikut ke dalam tag <head>.
<link rel="stylesheet" href="layout.css" />
Kode di atas akan me-load file layout.css seketika file index.html di buka atau di akses.
Tambahkan class ke dalam tag dari elemen-elemen yang kalian buat sebelumnya karena pemrograman CSS hanya bisa memanggil ID atau Class yang sudah di definisikan ke dalam elemen.
<body>

<header> 
<div class="logo">LOGO</div>
<div class="navigasi">NAVIGASI</div>
</header>
<main> 
<div class="konten">KONTEN</div>
<div class="sidebar">SIDEBAR</div>
</main>
<footer> 
<div class="footer">FOOTER</div>
</footer>
</body>
Untuk nama class kalian bebas menentukan sendiri namanya.
Selanjutnya silahkan kalian buka file *.CSS yang sudah kalian buat tadi lalu definisikan kembali nama-nama class pada elemen-elemen HTML sebelumnya di file *.CSS. Berikut format penulisannya :
.logo {}
.navigasi {}
.konten {}
.sidebar {}
.footer {}
Setiap nama class yang kalian definisikan ke dalam file *.CSS harus di mulai dengan simbol ‘titik‘ ( . ) di depan nama class-nya, kalau kalian menggunakan ID pada element HTML (id = “nama_id”), maka penulisan di file *.CSS harus di mulai dengan simbol ‘pagar‘ ( # ).
Sedangkan tanda ‘kurawal‘ setelah penulisan nama class pada file *.CSS adalah tempat dimana kita akan menaruh kode CSS di dalamnya.
Terakhir tinggal kalian masukan kode-kode CSS berikut untuk tiap-tiap class tersebut agar membentuk tampilan atau Layout seperti pada gambar Layout yang sudah kita buat sebelumnya.
body {
width: 960px; /*set lebar body website*/
margin: 30px auto; /*set posisi body (auto; left; right; center)*/
}
main {
display: flex;
}
.logo,
.navigasi,
.konten,
.sidebar,
.footer {
margin-bottom: 5px;
padding: 15px 0;
}
.logo {
width: 100%;
height: auto;
background: #99D9EA;
text-align: center;
}
.navigasi {
width: 100%;
height: auto;
background: #99D9EA;
text-align: center;
}
.konten {
width: 70%;
background: #EFE4B0;
}
.sidebar {
width: 30%;
background: #FD7E00;
}
.footer {
width: 100%;
background: #C3C3C3;
text-align: center;
}

Sekarang tugas kalian ialah mengisi konten-konten pada elemen-elemen HTML tadi agar benar-benar sesuai dengan Layout yang kalian buat. Sedangkan untuk referensi kode-kode CSS bisa merujuk ke link berikut agar memudahkan kalian memahami bahasa pemrograman CSS.
- https://www.w3schools.com/css/

Pembuatan website statis sudah selesai. Selamat! Kalian sudah berhasil maju satu langkah untuk menjadi seorang Web Programmer.

Bagaimana? Ngga sulit khan? Nggalah, gampang itu mah’, orang cuma gitu-gitu doank yang penting jangan berenti untuk belajar dan berusaha dan tetap merujuk ke W3School sebagai referensi kalian mengenai elemen-elemen yang terdapat di dalam HTML dan CSS.

Hasil akhir pembuatan website :

Source code :

Download source code

Sekian artikel kali ini,