Cara Membuat Website Pertama Hanya dengan HTML dan CSS

Membuat website pertama sering kali terdengar sulit bagi pemula, padahal sebenarnya bisa dimulai dengan sangat sederhana. Tanpa perlu framework atau bahasa pemrograman kompleks, hanya dengan HTML dan CSS, kamu sudah bisa membuat website pribadi yang rapi dan menarik. HTML akan menjadi fondasi untuk struktur konten, sedangkan CSS bertugas mempercantik tampilan.

Artikel ini akan membimbing langkah demi langkah cara membuat website pertama menggunakan HTML dan CSS, mulai dari menyiapkan file, menulis struktur dasar, memberi gaya dengan CSS, hingga menghasilkan halaman web yang terlihat profesional.

baca juga:contoh soal standar deviasi

Menyiapkan Lingkungan Kerja

Untuk membuat website dengan HTML dan CSS, kamu hanya memerlukan dua hal sederhana:

Teks editor → seperti Notepad, VS Code, Sublime Text, atau Atom.
Browser → Google Chrome, Mozilla Firefox, atau Edge untuk membuka hasilnya.

Buat sebuah folder dengan nama misalnya website-pertama. Di dalamnya, buat dua file:

index.html → untuk struktur HTML.
style.css → untuk mengatur tampilan dengan CSS.

Struktur Dasar HTML

Setiap halaman web memiliki struktur dasar berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Pertama Saya</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Selamat Datang di Website Saya</h1>
  </header>
  
  <nav>
    <a href="#about">Tentang</a> |
    <a href="#portfolio">Portofolio</a> |
    <a href="#contact">Kontak</a>
  </nav>
  
  <section id="about">
    <h2>Tentang Saya</h2>
    <p>Halo! Nama saya Andi, dan saya sedang belajar membuat website pertama saya dengan HTML dan CSS.</p>
  </section>
  
  <section id="portfolio">
    <h2>Portofolio</h2>
    <ul>
      <li>Proyek 1: Website Profil</li>
      <li>Proyek 2: Blog Sederhana</li>
      <li>Proyek 3: Landing Page Produk</li>
    </ul>
  </section>
  
  <section id="contact">
    <h2>Kontak</h2>
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <input type="submit" value="Kirim">
    </form>
  </section>
  
  <footer>
    <p>&copy; 2025 Website Pertama Andi</p>
  </footer>
</body>
</html>

Kode di atas sudah cukup untuk membuat website sederhana dengan bagian header, navigasi, konten utama, dan footer.

Menghubungkan CSS dengan HTML

Di dalam file index.html, kita sudah menambahkan:

<link rel="stylesheet" href="style.css">

Artinya, setiap gaya yang kita tulis di style.css akan langsung diterapkan ke halaman HTML.

Dasar CSS untuk Website Pertama

Buka file style.css lalu tambahkan kode berikut:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
}

header {
  background-color: #4CAF50;
  color: white;
  padding: 20px 0;
  text-align: center;
}

nav {
  background: #333;
  padding: 10px;
  text-align: center;
}

nav a {
  color: white;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #FFD700;
}

section {
  padding: 20px;
}

footer {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}

Penjelasan:

Body → mengatur font, margin, padding, warna latar, dan warna teks.
Header → membuat area judul dengan background hijau dan teks putih.
Nav → membuat menu navigasi dengan warna hitam, link putih, dan efek hover.
Section → memberi padding agar konten tidak terlalu rapat.
Footer → membuat bagian bawah halaman dengan warna konsisten.

Menambahkan Gambar

Agar website lebih hidup, tambahkan gambar profil di bagian Tentang Saya.

<section id="about">
  <h2>Tentang Saya</h2>
  <img src="profil.jpg" alt="Foto Profil" width="150">
  <p>Halo! Nama saya Andi, dan saya sedang belajar membuat website pertama saya dengan HTML dan CSS.</p>
</section>

Lalu, di CSS bisa ditambahkan:

img {
  border-radius: 50%;
  display: block;
  margin: 10px auto;
}

Dengan begitu, gambar akan berbentuk lingkaran dan berada di tengah halaman.

Membuat Layout Lebih Menarik

CSS juga bisa digunakan untuk membuat layout lebih modern dengan flexbox. Misalnya, untuk menampilkan portofolio sebagai grid:

#portfolio ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

#portfolio li {
  background: white;
  padding: 15px;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Hasilnya, daftar proyek akan tampil rapi dalam bentuk kotak.

Menambahkan Responsivitas

Agar website terlihat bagus di layar HP maupun laptop, gunakan media query dalam CSS.

@media (max-width: 600px) {
  nav a {
    display: block;
    margin: 10px 0;
  }

  #portfolio ul {
    flex-direction: column;
    align-items: center;
  }
}

Dengan aturan ini, jika layar lebih kecil dari 600px (seperti di smartphone), menu navigasi berubah jadi vertikal, dan portofolio ditampilkan satu per satu.

baca juga:Pernyataan Sikap Sivitas Akademika Universitas Teknokrat Indonesia Terkait Aksi Massa dan Kondisi Bangsa Indonesia Terkini

Website Pertama Siap Online

Setelah membuat file index.html dan style.css, kamu sudah memiliki sebuah website sederhana yang terdiri dari header, menu navigasi, konten utama, portofolio, form kontak, dan footer. Walaupun sederhana, website ini sudah rapi, enak dilihat, dan bisa diakses lewat browser.

Kelebihannya, kamu membangun semuanya dari nol hanya dengan HTML dan CSS, tanpa framework. Dari sini, kamu bisa melanjutkan dengan menambahkan JavaScript untuk interaktivitas, atau menghubungkannya dengan backend seperti PHP dan database MySQL.

penulis:mudho firudin