BELAJAR MEMBUAT WEBSITE HTML SEDERHANA DENGAN NOTEPAD! BONUS TEMPLATE

Membuat website sederhana menggunakan HTML adalah langkah awal yang bagus untuk belajar pengembangan web. HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat struktur halaman web. Dalam tutorial ini, kita akan belajar cara membuat website sederhana dengan menggunakan Notepad, editor teks bawaan Windows.

Langkah 1: Membuka Notepad

Klik tombol Start di pojok kiri bawah layar.
Ketik Notepad di kolom pencarian.
Klik Notepad untuk membuka editor teks.

Langkah 2: Menulis Kode HTML Dasar

Setelah Notepad terbuka, ketikkan kode HTML berikut:

<!DOCTYPE html>

<head>

<title>Website Sederhana</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

margin: 0;

padding: 0;

}

header {

background-color: #4CAF50;

color: white;

padding: 10px 0;

text-align: center;

}

main {

margin: 20px;

}

footer {

background-color: #4CAF50;

color: white;

text-align: center;

padding: 10px 0;

position: fixed;

width: 100%;

bottom: 0;

}

</style>

</head>

<body>

<h1>Selamat Datang di Website Sederhana</h1>

</header>

<main>

<p>Ini adalah contoh website sederhana yang dibuat menggunakan HTML dan CSS.</p>

</main>

</footer>

</body>

</html>

Langkah 3: Menyimpan File

Klik File di pojok kiri atas Notepad, kemudian pilih Save As.
Pilih lokasi penyimpanan yang diinginkan, misalnya di desktop.
Di kotak dialog yang muncul, ketik nama file dengan ekstensi .html, misalnya index.html.
Pada bagian Save as type, pilih All Files.
Klik Save.

Langkah 4: Membuka File di Browser

Buka lokasi tempat Anda menyimpan file index.html.
Klik kanan pada file tersebut dan pilih Open with.
Pilih browser yang ingin Anda gunakan, misalnya Google Chrome, Firefox, atau Microsoft Edge.

Penjelasan Kode

<!DOCTYPE html>: Mendeklarasikan tipe dokumen HTML5.
<html>: Tag pembuka untuk elemen HTML.
<head>: Bagian yang berisi metadata tentang dokumen.
<meta charset="UTF-8">: Menetapkan karakter encoding untuk dokumen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengatur viewport agar responsif di perangkat mobile.
<title>: Menentukan judul halaman yang akan muncul di tab browser.
<style>: Bagian yang berisi CSS untuk mengatur tampilan elemen HTML.
<body>: Bagian utama yang berisi konten yang akan ditampilkan di halaman web.
<header>, <main>, <footer>: Elemen HTML5 untuk mengatur struktur konten halaman.

Menambahkan Elemen Tambahan

Anda dapat menambahkan lebih banyak elemen ke dalam website Anda sesuai keinginan. Berikut beberapa elemen HTML dasar yang bisa Anda gunakan:

<h1>, <h2>, <h3>: Heading atau judul dengan ukuran berbeda.
<p>: Paragraf teks.
<a href="url">: Tautan ke halaman lain atau sumber eksternal.
<img src="url" alt="deskripsi">: Menyisipkan gambar.
<ul>, <ol>: Daftar tidak berurutan (bullet points) dan daftar berurutan (nomor).
<li>: Elemen daftar.

Berikut adalah contoh penambahan elemen:

<main>

<h2>Tentang Kami</h2>

<p>Website ini dibuat untuk memberikan contoh sederhana bagaimana membuat website menggunakan HTML.</p>

<h2>Kontak</h2>

<p>Anda dapat menghubungi kami melalui email: <a href="mailto:info@websederhana.com">info@websederhana.com</a></p>

<h2>Galeri</h2>

</main>

Untuk hasilnya bisa klik di sini di sini! Template gratis!

Kesimpulan

Membuat website sederhana dengan HTML menggunakan Notepad adalah langkah pertama yang baik dalam mempelajari dasar-dasar pengembangan web. Dengan memahami struktur dasar HTML dan CSS, Anda dapat mulai membuat dan memodifikasi website sesuai keinginan Anda. Selamat mencoba!