Blogger Jateng
Home / Tutorial

Membangun Situs Web HTML Sederhana

Membangun Situs Web HTML Sederhana - Situs web HTML sederhana adalah langkah pertama yang bagus untuk pengembangan web. Hal ini memberi Anda dasar untuk memahami bagaimana situs web ditata dan ditampilkan. Di sini, kami akan memandu Anda dalam membuat situs web HTML dasar selangkah demi selangkah.

Memahami HTML

HTML (HyperText Markup Language): HTML adalah bahasa standar yang Anda gunakan untuk mendesain halaman web. Bahasa ini terdiri dari tag-tag yang digunakan untuk mendefinisikan struktur dan konten halaman web. Judul, paragraf, gambar, dan tautan adalah beberapa dari elemen-elemen ini.

sumber: coder-coder.com

Struktur Dasar HTML

Struktur dasar dari setiap dokumen HTML adalah sebagai berikut:

<!DOCTYPE html>

<html>

<head>

    <title>Your Website Title</title>

</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>This is a simple HTML website.</p>

</body>

</html>

  • <!DOCTYPE html>: Mendeklarasikan dokumen sebagai file HTML5.
  • <html>: Elemen akar yang membungkus semua konten.
  • <head>: Berisi metadata, seperti judul dan tautan ke lembar gaya atau skrip.
  • <body>: Mencakup konten situs web yang terlihat. 

Menyiapkan Ruang Kerja Anda

Saat membangun situs web Anda, Anda akan membutuhkan editor teks dan peramban web. Beberapa editor teks yang populer adalah Visual Studio Code, Sublime Text, dan Notepad++. Untuk panduan ini, kita akan menggunakan editor teks dasar.
  • Buka Editor Teks: Buka editor teks apa pun yang Anda inginkan.
  • Beri nama File Baru: Simpan sebagai ekstensi. html (misalnya, index.html).
  • Mulai Pengkodean: Ketika menulis dan menguji kode, kode tidak akan benar-benar berjalan sampai Anda mulai melakukan pengkodean.

Menambahkan Konten

Judul dan Paragraf

Judul dan paragraf membantu mengatur konten:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text providing information.</p>
  • <h1> hingga <h6>: Judul, dengan <h1> menjadi yang terbesar dan <h6> yang terkecil.
  • <p>: Mewakili paragraf teks.

Gambar

Untuk menyisipkan gambar, gunakan tag:

<img src="image.jpg" alt="Description of image">
  • src: menyematkan file gambar.
  • alt: Menjelaskan gambar untuk aksesibilitas dan ketika gambar gagal dimuat.

Tautan

Tautan digunakan untuk menavigasi pengguna ke halaman atau situs web lain:

<a href="https://example.com">Visit Example</a>
  • href: URL tujuan.
  • Semua yang berada di antara kedua tag inilah yang menjadi tautan yang dapat diklik.

Daftar

Ada dua jenis daftar yang dapat digunakan oleh HTML: 

<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>
  • <ul>: Untuk membuat daftar tidak berurutan (bullet).
  • <ol>:  Daftar terurut (angka).
  • <li>: Mewakili item daftar.

Menata Situs Web Anda

Untuk mempercantik tampilan situs web Anda, Anda dapat menggunakan CSS (Cascading Style Sheets). Tambahkan bagian <style> di dalam <head>:

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 20px;
    }
    h1 {
        color: blue;
    }
    p {
        color: gray;
    }
</style>

Menguji Situs Web Anda

  1. Simpan file index.html Anda.
  2. Buka dengan mengeklik dua kali pada file tersebut, atau menyeretnya ke dalam peramban web.
  3. Pastikan konten ditampilkan seperti yang diinginkan.

Memperluas Situs Web Anda

Setelah Anda membuat halaman HTML sederhana, Anda dapat:

  • Menambahkan lebih banyak halaman: Membuat file HTML tambahan dan menautkannya.
  • Menggunakan CSS Eksternal: Menata gaya dalam file terpisah.
  • JavaScript: Untuk membuat situs Anda interaktif. 
  • Hosting Situs Web Anda: Gunakan platform seperti GitHub Pages atau Netlify untuk membuat situs web Anda dapat diakses secara online.

Kesimpulan

Membangun situs web HTML sederhana adalah pengalaman yang memberdayakan dan bermanfaat. Ini merupakan dasar untuk pengembangan web yang lebih maju dan membuka pintu ke berbagai kemungkinan kreatif. Mulailah bereksperimen, dan Anda akan segera membuat situs web yang lebih kompleks dan dinamis.