Langsung ke konten utama

Apa itu HTML dan CSS? dan cara membangun web sederhana


    


 Panduan Lengkap: Cara Menggunakan HTML & CSS untuk Membangun Web Sederhana


    1. Pengenalan HTML dan CSS

    Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat struktur halaman web.
HTML menentukan apa saja isi dari sebuah halaman, seperti:

  • Judul,

  • Paragraf,

  • Gambar,

  • Tabel,

  • Tautan (link),

  • dan bagian lain dari website.

    Ibaratnya, HTML adalah kerangka (tulang) dari sebuah rumah.


    Apa itu CSS?

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan gaya dari halaman HTML.
Dengan CSS, kamu bisa mengatur:

  • Warna teks dan latar belakang,

  • Jenis dan ukuran huruf,

  • Letak gambar,

  • Jarak antar elemen,

  • dan efek tampilan lainnya.

    CSS ibarat cat dan dekorasi rumah — membuat tampilan lebih menarik.


    2. Peralatan yang Diperlukan

Kamu hanya butuh dua hal untuk mulai belajar membuat website:

  1. Teks Editor — tempat menulis kode HTML & CSS
    Contoh:

    • Notepad (Windows)

    • VS Code (Visual Studio Code) — paling disarankan

    • Sublime Text

  2. Web Browser — untuk melihat hasilnya
    Contoh: Chrome, Edge, Firefox, Safari.


    3. Struktur Dasar HTML

Setiap file HTML selalu diawali dengan struktur seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

Penjelasan:

  • <html> → pembuka halaman HTML.

  • <head> → berisi informasi seperti judul dan link ke file CSS.

  • <body> → tempat semua isi web ditampilkan (teks, gambar, tombol, dsb).

  • <h1> → judul besar.

  • <p> → paragraf.

Simpan file ini dengan nama index.html, lalu buka di browser.
Kamu sudah berhasil membuat web pertamamu 🎉

    

    4. Menambahkan Gaya dengan CSS

Buat file baru dengan nama style.css di folder yang sama, lalu isi seperti ini:

body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    color: #007bff;
}

p {
    font-size: 18px;
}

Kemudian, sambungkan file CSS ke HTML dengan menambahkan baris ini di dalam <head>:

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

Sekarang halaman web-mu akan berubah tampilan — warna, huruf, dan gaya teks lebih menarik!


    5. Elemen-Elemen Dasar HTML yang Wajib Diketahui

Elemen Fungsi
<h1> sampai <h6> Judul (heading), dari besar ke kecil
<p> Paragraf
<a href="url"> Membuat tautan (link)
<img src="gambar.jpg"> Menampilkan gambar
<ul> dan <li> Daftar bullet
<ol> dan <li> Daftar bernomor
<div> Pembungkus elemen (bagian)
<span> Pembungkus teks kecil
<table> Membuat tabel
<form> Membuat form input (misalnya kontak)

    

    6. Struktur Web Sederhana

Biasanya website sederhana memiliki 5 bagian utama:

  1. Header → berisi nama web dan menu navigasi

  2. Banner / Hero Section → bagian utama yang menarik perhatian

  3. Konten Utama → isi utama dari halaman (artikel, deskripsi, dll)

  4. Gallery / Portfolio → menampilkan gambar atau proyek

  5. Footer → bagian bawah berisi kontak atau hak cipta

    

    7. Contoh Struktur Web Sederhana

Berikut contoh isi yang bisa kamu buat:

  • Bagian Header berisi nama website dan menu: Beranda, Tentang Saya, Blog, Gallery, Kontak Saya.

  • Bagian Utama menampilkan ucapan selamat datang dan sedikit deskripsi tentang tujuan blogmu.

  • Tambahkan beberapa artikel pendek atau informasi singkat di bagian tengah.

  • Di Gallery, tampilkan foto atau karya hasil proyekmu.

  • Di Footer, tuliskan kontak (email, sosial media, hak cipta).

    

    8. Menambahkan Gambar

Untuk menambahkan gambar:

  1. Simpan gambar dalam folder yang sama dengan file HTML.

  2. Tulis seperti ini:
    <img src="gambar.jpg" alt="Deskripsi Gambar">

  3. Gunakan CSS agar ukuran gambar proporsional dan rapi.


    9. Membuat Navigasi (Menu Web)

Kamu bisa membuat menu seperti ini:

  • Beranda

  • Tentang Saya

  • Blog

  • Gallery

  • Kontak

Setiap menu mengarah ke halaman lain. Misalnya:

  • index.html → Beranda

  • tentang.html → Tentang Saya

  • blog.html → Blog

  • gallery.html → Gallery

  • kontak.html → Kontak

Buat file terpisah untuk tiap halaman dan isi dengan konten yang sesuai.


    10. Menambahkan Form Kontak

Formulir digunakan agar pengunjung bisa mengirim pesan.
Kamu bisa membuat form dengan kolom:

  • Nama

  • Email

  • Pesan

Pesan ini bisa diarahkan ke email atau layanan pihak ketiga seperti Formspree atau Google Form.


    11. Menyimpan dan Menjalankan Website

  1. Simpan semua file di satu folder (misalnya: WebsiteSaya).

  2. Buka file index.html dengan browser.

  3. Jika tampil dengan baik — selamat! Website-mu sudah berjalan secara lokal.

  4. Jika ingin menayangkannya ke internet, kamu bisa:

    • Mengunggah ke GitHub Pages (gratis), atau

    • Menggunakan Blogger, Netlify, 000webhost, atau Hostinger.


    12. Tips Tambahan untuk Pemula

    Gunakan struktur folder yang rapi
Contoh:

WebsiteSaya/
│
├── index.html
├── tentang.html
├── blog.html
├── gallery.html
├── kontak.html
└── css/
    └── style.css
└── images/
    └── fotoku.jpg

    Selalu uji hasilmu di browser setelah membuat perubahan.
    Gunakan warna yang lembut agar pengunjung nyaman membaca.
    Gunakan font yang mudah dibaca, seperti Arial atau Open Sans.
    Pelajari dasar responsive design agar tampilan web bagus di HP.

    

    13. Kesimpulan

Membangun website sederhana tidaklah sulit.
Kamu hanya butuh:

  • Memahami struktur HTML,

  • Menambahkan CSS untuk mempercantik tampilan,

  • Dan menyusun konten yang menarik serta informatif.

Dengan latihan rutin, kamu bisa mengembangkan web pribadi, portofolio, bahkan blog profesional!

Komentar

Posting Komentar

© 2020 Erik blog

Blogger template by Open Themes.