Pada artikel sebelumnya, saya sudah membahas cara membuat website dengan 4 CMS terpopuler di dunia. Kali ini, kita akan mempelajari 8 langkah membuat website dengan HTML.

Bagi yang belum tahu, HTML (Hypertext Markup Language) adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di browser internet.

Singkatnya, HTML merupakan bahasa pemrograman yang digunakan untuk membuat tampilan kerangka halaman website.

8 Langkah Cara Membuat Website dengan HTML

Buat kamu yang sudah penasaran ingin membuka peluang usaha melalui website bisnis online atau website personal, ikuti langkah-langkah berikut ini.

1. Install Alat yang Diperlukan

Ketika kita ingin membuat website, terutama dengan HTML, ada beberapa tools (alat) yang harus diinstal terlebih dahulu. Berikut ini beberapa alat tersebut.

  • Browser: Alat yang digunakan untuk membuka halaman website kamu, seperti Chrome dan Firefox.
  • Notepad++: Alat untuk menulis kerangka HTML bila kamu adalah pengguna sistem operasi Windows.
  • Sublime Text: Alat untuk menulis keranga HTML bila amu adalah pengguna sistem operasi MacOS karena Notepad++ tidak bisa dipakai di MacOS.
  • XAMPP: Platform server web yang banyak digunakan untuk membantu programmer dalam membuat dan menguji program di web server lokal. XAMPP digunakan ketika website yang akan kamu bangun membutuhkan koneksi ke database.

Silahkan instal terlebih dahulu salah satu dari 4 alat di atas sesuai dengan sistem operasi yang dipakai dan spesifikasi dari website yang ingin dibuat.

4 alat tersebut bisa menjadi aplikasi yang harus ada di laptop bila kamu ingin belajar membuat website dan beberapa bahasa pemrograman lainnya.

2. Pelajari Apa itu HTML dan CSS

Membuat website tidak hanya sekedar membutuhkan HTML. Kita membutuhan bahasa markah dan pemrograman lain agar website tersebut terbangun dengan baik.

Sebagai bahasa yang digunakan untuk membuat kerangka halaman website, HTML membutuhan bahasa lain agar kerangka tersebut dapat ditampilkan dengan tampilan yang lebih menarik. Inilah alasannya kenapa kita membutuhan CSS.

CSS (Cascading Style Sheet) adalah bahasa markah yang digunakan untuk mempercantik kerangka halaman website yang sebelumnya dibuat menggunakan HTML.

Penggambarannya kurang lebih dapat dilihat melalui gambar di bawah ini. Halaman website yang dibuat tanpa CSS akan terlihat kurang menarik karena tanpa ada warna dan pengaturan layout yang lainnya.

website sebelum dan sesudah pakai css
Foto: Browser London

3. Siapkan Desain Website yang Akan Dibuat

Sudah siap dengan alat yang dibutuhkan dan tahu apa itu HTML dan cara kerjanya bersama CSS, kini saatnya kita menyiapkan desain dari website yang akan dibuat.

Ada banyak template desain website bisnis, desain website portofolio yang ada di internet, seperti yang ada di Themeforest, 99designs, dan dribbble. Kamu bisa memilihnya dari sana.

Tapi, kalau kamu memang ingin membuat tampilan sendiri, kamu bisa mengandalkan berbagai macam aplikasi membuat mockup website yang ada di internet, seperti Figma dan Balsamiq Cloud.

Pada artikel cara membuat website dengan HTML kali ini, saya akan menggunakan desain web di bawah ini. Sederhana dan cukup untuk mempelajari berbagai source code penting dalam HTML & CSS.

contoh belajar cara membuat website dengan html di dibalikmeja

4. Buat Folder Baru dengan Nama Proyek Websitemu

Sudah menemukan desain website yang akan dibuat? Bagus! Sekarang saatnya membuat website dengan HTML.

Pertama-tama, saya membuat folder baru di dalam laptop. Memberinya nama sesuai dengan nama proyek/website yang akan dibuat.

Tidak ada masalah dimanapun folder ini saya simpan. Tapi, ketika kita ingin menggunakan XAMPP, maka folder tersebut harus disimpan di dalam direktori “htdocs”.

5. Buat File Utama dalam Membuat Website

Setidaknya ada 2 file utama yang harus dibuat pertama kali ketika ingin membuat website, file tersebut umumnya diberi nama “index.html” dan “style.css”.

Buat File Utama dalam Membuat Website - cara membuat website dengan html

File “index.html” dibuat untuk menyimpan kumpulan baris kode HTML. Sedangkan “style.css” akan digunakan untuk menyimpan kumpulan baris kode CSS.

Kenapa harus diberi nama index.html? Karena, file tersebut akan dibaca untuk pertama oleh browser, sehingga tanpa nama file dibelakangnya, saya bisa melihat website tersebut hanya dengan nama foldernya, seperti “https://www.lusiana-dbm/”.

kenapa harus pakai index - cara membuat website dengan html

Sedangkan, untuk file CSS bisa dibuat dengan nama yang lebih custom. Tergantung kemauan dari kita sendiri.

6. Masukkan Kerangka Inti HTML

Sampai disini, saatnya kita memasukkan kerangka inti dari ratusan baris kode HTML. Beberapa kerangka inti tersebut antara lain:

  • <!DOCTYPE html>: Berfungsi untuk mendeklarasikan kepada komputer bahwa kita akan menuliskan perintah dalam kode HTML.
  • <html>: Tag yang berfungsi untuk memulai dan mengakhiri dokumen dalam kode HTML.
  • <head>: Tag yang berisi metadata seperti judul tab, deskripsi, dan lain-lain.
  • <title>: Judul dari website.
  • <body>: Berisi konten utama dari website.

Kerangka di atas bisa disebut sebagai “tag”. Dari kerangka inti tersebut, kita bisa membuat kerangka seperti gambar berikut ini.

<!DOCTYPE html>
<html>
<head>

  <title>Cara Membuat Website dengan HTML - dibalikmeja.com</title>

</head>
<body>



</body>
</html>

Sebagai tambahan, saya membuat beberapa tampilan custom untuk menampilkan beberapa gambar, teks, dan navigasi pada website yang sedang saya buat.

<!DOCTYPE html>
<html>
<head>

  <title>Cara Membuat Website dengan HTML - dibalikmeja.com</title>

</head>
<body>


  <h1>Belajar Cara Membuat Website dengan HTML</h1>
  <p>Bersama Lusiana Haryanti</p>



  <a href="#">Beranda</a>
  <a href="#">Tentang Saya</a>
  <a href="#">Hubungi Saya</a>



      <h2>Bagaimana Tentang Saya?</h2>
      <h5>Lusiana Haryanti</h5>
      Image
      <p>Saya adalah ...</p>
      <p>Lusiana Haryanti - UI/UX Enthusiast yang memiliki passion di dunia bisnis startup</p>


      <h2>Bagaimana Cara Menghubungi Saya?</h2>
      <h5>Kontak Saya</h5>
      Image
      <p>Hubungi saya ...</p>
      <p>Melalui kolom komentar yang ada di dibalikmeja.com</p>



  <h2>Footer</h2>


</body>
</html>

Hasil tampilan dari baris kode yang sudah saya buat di atas akan menampilkan website seperti berikut ini.

hasil membuat website dengan html sebelum menggunakan css

Tampilan tersebut masih benar-benar kaku dan membutuhan file CSS untuk membuatnya lebih menarik lagi. Hal ini bisa saya lakukan dengan langkah ke-7.

7. Percantik Halaman Web dengan CSS

Layout HTML di atas tentu masih belum menarik untuk dilihat dan belum sesuai dengan apa yang sudah saya gambarkan pada studi kasus sebelumnya.

Agar layout tersebut bisa dibuat dengan lebih menarik dan sesuai desain, maka saya membutuhkan kumpulan baris kode CSS.

Namun, saya harus memastikan terlebih dahulu file “style.css” sudah dipanggil oleh file “index.html” dalam tag <head>. Kemudian, menambahkan class ataupun id sebagai pembeda antara tag satu dengan tag lain serta elemen satu dengan elemen lain.

Sehingga, kode HTML di dalam index.html akan berbentuk seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Cara Membuat Website dengan HTML - dibalikmeja.com</title>

</head>
<body>

<div class="header">
  <h1>Belajar Cara Membuat Website dengan HTML</h1>
  <p>Bersama Lusiana Haryanti</p>
</div>

<div class="topnav">
  <a href="#">Beranda</a>
  <a href="#">Tentang Saya</a>
  <a href="#">Hubungi Saya</a>
</div>

<div class="row">
    <div class="card">
      <h2>Bagaimana Tentang Saya?</h2>
      <h5>Lusiana Haryanti</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Saya adalah ...</p>
      <p>Lusiana Haryanti - UI/UX Enthusiast yang memiliki passion di dunia bisnis startup</p>
    </div>
    <div class="card">
      <h2>Bagaimana Cara Menghubungi Saya?</h2>
      <h5>Kontak Saya</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Hubungi saya ...</p>
      <p>Melalui kolom komentar yang ada di dibalikmeja.com</p>
    </div>
</div>

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

</body>
</html>

Untuk merubahnya menjadi desain seperti studi kasus saya, maka saya memerlukan kode seperti berikut ini.

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

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

8. Buka Website di Browser dan Lihat Hasilnya

Sampai ke tahap ini, website kita sudah berhasil sesuai dengan contoh dari desain studi kasus yang sudah ditujunkan di atas.

Mari kita buka file index.html tersebut di halaman browser seperti berikut ini.

hasil akhir cara membuat website dengan html bersama lusiana haryanti

Kreasikan kembali tampilan ini sesuai dengan keinginan kamu. Jangan khawatir dengan tampilan yang kurang menarik untuk saat ini. Karena, website tersebut hanya bisa diakses oleh kamu melalui laptop yang kamu gunakan.

Bila semua kreatifitasmu sudah tertuliskan di dalam barisan kode itu kemudian kamu ingin websitenya bisa dipublikasikan dan dapat diakses secara online, maka ikuti langkah-langkah selanjutnya.

Bagaimana Agar Website Bisa Diakses Publik Secara Online?

Buat kamu yang merasa websitenya sudah sesuai dan ingin go-public, ikutilah langkah-langkah di bawah ini.

  1. Beli domain di berbagai penyedia domain di Indonesia. Sekaligus hostingnya. Satu domain seharga Rp190.000,- dan satu bulan hosting umumnya seharga Rp50.000,-.
  2. Upload folder proyek kamu ke cpanel dari tempat kamu membeli hosting.
  3. Tempatkan folder tersebut di folder “public_html”.

Atau ikuti dokumentasi dari masing-masing penyedia layanan hosting kamu yaaaa :). Masing-masing penyedia hosting pasti punya dokumentasinya, kok.

Daftar Situs Belajar HTML & CSS Gratis dan Lengkap

Kalau kamu masih merasa belum siap untuk mempubliasikan websitenya karena tampilan dari HTML & CSS yang sudah dibuat masih berantakan, marilah kita belajar lebih dalam lagi tentangnya.

Beberapa situs yang biasa saya gunakan untuk belajar HTML & CSS di internet antara lain:

  • W3schools
  • CodeAcademy
  • Codeavengers
  • Codeschool
  • Htmlandcssbook

Penutup

Itu dia tahapan cara membuat website dengan HTML dari pengalaman yang pernah saya lakukan. Jika ada tahapan yang menurut kamu masih kurang sesuai atau sulit untuk dilakukan, silahkan tinggalkan komentar kamu di bawah.

Kunci dari selama membuat web dengan HTML, ya sudah pasti kita harus memperkuat ilmu dari HTML dan CSS. Selanjutnya, agar bisa membuat website yang lebih profesional, kamu bisa mempelajari bahasa pemrograman yang lainnya.

Author

I'm UI/UX Enthusiast who passionate about startup business things

Write A Comment