Tutorial Membuat Website Sederhana Menggunakan HTML (Untuk Pemula)

Tutorial Membuat Website Sederhana Menggunakan HTML (Untuk Pemula)

Bagi kamu yang baru belajar coding, HTML adalah langkah pertama yang paling mudah dan paling cepat untuk dipahami. Dengan HTML, kamu bisa membuat website sederhana hanya dalam beberapa menit. Tidak perlu software khusus—cukup dengan laptop dan browser seperti Chrome atau Firefox.

Pada artikel ini, kita akan mempelajari cara membuat website sederhana dengan HTML dari awal, lengkap dengan contoh kode dan penjelasannya.

1. Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat struktur website.
HTML bekerja menggunakan tag, yaitu tanda khusus seperti <h1>, <p>, <img>, dan sebagainya.

Contoh sederhana:

<p>Ini adalah paragraf.</p>

2. Alat yang Dibutuhkan

Kamu hanya perlu:

  • Laptop atau komputer
  • Browser (Chrome, Firefox, Edge)
  • Aplikasi teks: Notepad, Notepad++, VSCode, atau Sublime

Tidak perlu internet untuk menjalankan HTML.

3. Membuat File HTML Pertama

Ikuti langkah berikut:

Langkah 1: Buka Notepad atau VSCode

Langkah 2: Ketikkan struktur dasar HTML

Salin kode berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Website Pertama Saya</title>
</head>
<body>

  <h1>Selamat Datang di Website Pertama Saya</h1>
  <p>Ini adalah website yang saya buat menggunakan HTML.</p>

</body>
</html>

Langkah 3: Simpan file

  • Klik Save As
  • Beri nama: index.html
  • Pilih tipe: All Files
  • Simpan di desktop

Langkah 4: Buka di browser

Klik dua kali file index.html. Selamat! Ini website pertamamu.

4. Menambahkan Gambar

Untuk menambahkan gambar, gunakan tag <img>.

Contoh:

<img src="foto.jpg" width="300" alt="Foto Contoh">

Penjelasan:

  • src = lokasi file gambar
  • width = ukuran gambar
  • alt = teks jika gambar gagal dimuat

Pastikan gambar berada di folder yang sama dengan file index.html.

5. Menambahkan Tautan (Link)

Untuk membuat link, gunakan tag <a>.

<a href="https://google.com">Kunjungi Google</a>

Kamu juga bisa membuat link yang membuka tab baru:

<a href="https://google.com" target="_blank">Google</a>

6. Menambahkan Daftar (List)

Ada dua jenis daftar:

a. Ordered List (bernomor)

<ol>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
</ol>

b. Unordered List (bullet)

<ul>
  <li>Koding</li>
  <li>Desain Web</li>
</ul>

7. Membuat Tabel Sederhana

Gunakan kombinasi tag <table>, <tr>, <th>, dan <td>.

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Hobi</th>
  </tr>
  <tr>
    <td>Ani</td>
    <td>Menulis</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>Main Game</td>
  </tr>
</table>

8. Membuat Footer dan Header

Untuk tampilan lebih profesional:

<header>
  <h1>Website Saya</h1>
</header>

<footer>
  <p>Copyright © 2025 - Semua Hak Dilindungi</p>
</footer>

9. Contoh Website Sederhana Lengkap

Berikut contoh website sederhana final yang bisa langsung kamu pakai:

<!DOCTYPE html>
<html>
<head>
  <title>Website Pertama Saya</title>
</head>
<body>

  <header>
    <h1>Selamat Datang di Website Pertama Saya</h1>
    <p>Belajar coding itu mudah dan menyenangkan!</p>
  </header>

  <h2>Tentang Saya</h2>
  <p>Halo! Saya sedang belajar membuat website menggunakan HTML.</p>

  <h2>Foto Saya</h2>
  <img src="foto.jpg" width="250" alt="Foto Saya">

  <h2>Hobi Saya</h2>
  <ul>
    <li>Koding</li>
    <li>Menonton Film</li>
    <li>Membaca Buku</li>
  </ul>

  <h2>Kontak</h2>
  <a href="mailto:emailanda@gmail.com">Email Saya</a>

  <footer>
    <p>© 2025 – Website HTML Pertama Saya</p>
  </footer>

</body>
</html>

Simpan sebagai index.html dan buka di browser.
Website ini bisa dikembangkan lebih lanjut dengan CSS dan JavaScript nanti.

10. Kesimpulan

Membuat website sederhana menggunakan HTML sangat mudah dan bisa dilakukan siapa saja. HTML adalah fondasi utama pembuatan website, dan memahaminya adalah langkah pertama menjadi web developer.

Dengan menguasai HTML, kamu bisa melanjutkan belajar CSS untuk mempercantik tampilan dan JavaScript untuk membuat website interaktif.

Comments

Post a Comment

Popular posts from this blog

Cara Membuat File PDF di HP dan Laptop Tanpa Aplikasi Berat (Panduan Lengkap untuk Pemula)

Cara Membuat File PDF di HP dan Laptop Tanpa Aplikasi Berat (Panduan Lengkap untuk Pemula) File PDF adalah salah satu format dokumen yang paling sering digunakan di berbagai keperluan, mulai dari tugas sekolah, laporan kerja, surat resmi, lamaran pekerjaan, hingga e-book. Keunggulan PDF adalah tampilannya yang rapi dan tidak berubah meskipun dibuka di perangkat berbeda. Banyak orang mengira membuat file PDF itu sulit dan membutuhkan aplikasi rumit. Padahal, Anda bisa membuat PDF dari HP maupun laptop menggunakan berbagai cara yang simple, cepat, dan gratis. Pada artikel ini, Anda akan mempelajari cara membuat file PDF tanpa aplikasi berat , menggunakan: Google Docs Microsoft Word WPS Office SmallPDF ILovePDF Scanner kamera HP Fitur bawaan Android dan iPhone Cocok untuk pelajar, mahasiswa, guru, pekerja kantor, dan siapa pun yang ingin membuat PDF dengan mudah. Apa Itu File PDF dan Mengapa Penting? PDF adalah format dokumen yang dikembangkan oleh Adobe. Do...
Read more

Cara Menghemat Baterai HP Oppo agar Tahan Seharian

Cara Menghemat Baterai HP Oppo agar Tahan Seharian Baterai menjadi salah satu komponen paling penting pada HP Oppo, apalagi bagi pengguna yang aktif menggunakan ponsel untuk media sosial, gaming, dan pekerjaan sehari-hari. Sayangnya, penggunaan yang intensif sering membuat baterai cepat habis, dan hal ini bisa sangat mengganggu. Artikel ini akan membahas berbagai cara menghemat baterai HP Oppo agar daya tahan lebih lama, termasuk tips pengaturan, fitur bawaan, dan trik praktis yang bisa langsung dicoba. 1. Memanfaatkan Fitur Hemat Daya Bawaan Oppo HP Oppo dilengkapi dengan fitur Hemat Daya yang memungkinkan ponsel mengatur penggunaan energi secara otomatis. Cara mengaktifkannya: Buka Pengaturan → Baterai . Pilih Mode Hemat Daya . Aktifkan fitur tersebut dan pilih level penghematan yang diinginkan. Mode Hemat Daya akan membatasi aktivitas aplikasi di background, menurunkan kecerahan layar otomatis, dan mengurangi animasi agar baterai lebih awet. Selain mode hemat daya stand...
Read more

Tips Menggunakan S-Pen di Samsung Terbaru: Maksimalkan Kreativitas dan Produktivitas

Tips Menggunakan S-Pen di Samsung Terbaru: Maksimalkan Kreativitas dan Produktivitas Samsung dikenal dengan inovasi yang memudahkan penggunanya. Salah satu fitur paling ikonik adalah S-Pen , stylus pintar yang hadir di seri Galaxy Note dan Galaxy Ultra terbaru. S-Pen bukan hanya alat untuk menulis, tetapi juga meningkatkan produktivitas, kreativitas, dan efisiensi pengguna. Artikel ini akan membahas tips lengkap menggunakan S-Pen di Samsung terbaru , sehingga setiap pengguna bisa memaksimalkan potensinya. 1. Apa Itu S-Pen? S-Pen adalah stylus yang terintegrasi dengan smartphone Samsung. Berbeda dengan stylus biasa, S-Pen memiliki fitur canggih seperti: Tekanan sensitif untuk menulis dan menggambar. Fungsi remote dengan tombol fisik untuk mengontrol aplikasi. Air Actions yang memungkinkan gesture tanpa menyentuh layar. Integrasi dengan aplikasi Samsung Notes, Air Command, dan lainnya. S-Pen memungkinkan pengalaman menulis dan menggambar lebih natural, mirip menggunakan pena d...
Read more