Cara Membuat HTML di Notepad: Langkah Mudah untuk Pemula
Irhan Hisyam Dwi Nugroho
•
28 March 2025
•
721
Cara membuat HTML di Notepad sangat mudah dan cocok untuk pemula. Cukup dengan Notepad, kamu sudah bisa menulis kode HTML dasar tanpa memerlukan software tambahan. Ini adalah cara yang ideal untuk mulai belajar HTML.
MinDi akan memandu kamu melalui setiap langkah, mulai dari membuka Notepad hingga menulis kode HTML pertama. Dengan begitu, kamu bisa langsung melihat hasil kerjamu di browser dan memahami bagaimana struktur HTML bekerja.
Yuk, mari kita mulai dengan langkah pertama untuk membuat halaman web sederhana di Notepad!
Apa Itu HTML dan Notepad?
HTML, atau HyperText Markup Language, adalah bahasa dasar yang digunakan untuk membuat struktur halaman web.
HTML terdiri dari berbagai elemen yang menentukan bagaimana konten web ditampilkan, seperti teks, gambar, dan tautan.
Sedangkan, Notepad adalah editor teks sederhana yang ada di setiap komputer Windows dan dapat digunakan untuk menulis kode HTML tanpa perlu aplikasi khusus.
Meskipun Notepad terkesan sederhana, ia sangat efektif untuk memulai belajar HTML, karena tidak ada gangguan dari fitur kompleks dan bisa langsung digunakan tanpa instalasi tambahan.
Baca juga : Panduan Memilih Bootcamp Front-End Development Terbaik 2025
Langkah-langkah Membuat HTML di Notepad
Sumber: Canva
Untuk memulai membuat halaman web di Notepad, ikuti langkah-langkah mudah berikut ini. MinDi akan memandu kamu melalui setiap proses, mulai dari menulis kode HTML hingga melihat hasilnya di browser.
1. Buka Notepad
Langkah pertama adalah membuka aplikasi Notepad di komputer kamu. Caranya, cukup klik ikon Start di Windows, ketik “Notepad”, lalu klik aplikasi yang muncul.
Notepad adalah editor teks sederhana yang bisa digunakan untuk menulis kode HTML tanpa fitur yang mengganggu.
2. Mulai Menulis Kode HTML
Setelah Notepad terbuka, kamu bisa mulai menulis kode HTML dasar. Kode HTML dimulai dengan tag pembuka <!DOCTYPE html> yang menunjukkan bahwa ini adalah dokumen HTML5. Berikut adalah contoh kode dasar yang bisa kamu coba:
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halaman Pertama</title> </head> <body> <h1>Selamat Datang di Halaman Web Pertama!</h1> <p>Ini adalah contoh halaman HTML sederhana yang dibuat di Notepad.</p> </body> </html> |
3. Simpan File dengan Ekstensi .html
Setelah menulis kode, kamu perlu menyimpan file dengan ekstensi .html agar bisa dibuka di browser.
Caranya, pilih File > Save As di Notepad, lalu pilih All Files di dropdown “Save as type”, dan beri nama file dengan akhiran .html (misalnya: halaman_pertama.html).
4. Buka File HTML di Browser
Setelah menyimpan file, cari file yang sudah disimpan dan klik dua kali untuk membuka file tersebut di browser. Browser akan menampilkan halaman HTML yang kamu buat.
Jika semuanya berjalan dengan baik, kamu akan melihat tampilan seperti yang ditulis di kode.
5. Modifikasi Kode dan Simpan Kembali
Untuk mengubah halaman, kamu bisa kembali ke Notepad dan mengedit kode HTML. Cukup simpan kembali file yang sama dan muat ulang halaman di browser untuk melihat perubahan. Misalnya, kamu bisa mengganti teks dalam tag <h1> atau menambah gambar.
6. Eksplorasi dengan Menambahkan Elemen HTML Lain
Untuk memperkaya halaman web, kamu bisa menambahkan elemen HTML lainnya seperti gambar, tautan, atau daftar. Misalnya, untuk menambahkan gambar, gunakan tag <img>, seperti berikut:
<img src="gambar.jpg" alt="Gambar Halaman"> |
Baca juga : Panduan Lengkap Belajar Web Developer untuk Pemula
Struktur Dasar HTML
Sumber: Canva
Struktur dasar HTML adalah fondasi setiap halaman web yang kamu buat, termasuk saat cara membuat HTML di Notepad. Berikut adalah contoh struktur dasar HTML yang harus kamu ketahui untuk memulai:
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Judul Halaman</title> </head> <body> <h1>Ini adalah Judul Halaman</h1> <p>Selamat datang di halaman web pertama kamu!</p> </body> </html> |
Struktur HTML dimulai dengan deklarasi <!DOCTYPE html>, yang memberi tahu browser bahwa ini adalah dokumen HTML5. Kemudian, elemen <html> menjadi pembungkus utama untuk seluruh halaman web, diikuti dengan atribut lang="id" untuk menunjukkan bahwa bahasa halaman ini adalah bahasa Indonesia.
Bagian <head> berisi informasi metadata tentang halaman, seperti karakter set dengan <meta charset="UTF-8">, pengaturan viewport untuk desain responsif dengan <meta name="viewport" content="width=device-width, initial-scale=1.0">, dan judul halaman yang ditampilkan di tab browser dengan tag <title>.
Sedangkan bagian <body> adalah tempat semua konten yang terlihat oleh pengguna ditempatkan, seperti teks, gambar, dan tautan.
Struktur dasar ini harus ada di setiap halaman HTML untuk memastikan halaman tampil dengan benar di browser.
Baca juga : Panduan Lengkap Roadmap Web Developer untuk Pemula
Cara Menampilkan File HTML di Browser
Sumber: Canva
Setelah kamu membuat file HTML di Notepad, langkah selanjutnya adalah menampilkan hasilnya di browser. Berikut adalah cara mudah untuk melihat halaman web yang telah kamu buat dengan mengikuti langkah-langkah berikut.
1. Simpan File HTML dengan Ekstensi .html
Pastikan file yang kamu buat di Notepad disimpan dengan ekstensi .html. Misalnya, jika kamu memberi nama file halaman_pertama, simpan sebagai halaman_pertama.html.
Ini sangat penting agar browser dapat mengenali file sebagai dokumen HTML yang dapat dibuka.
2. Buka File HTML di Browser
Setelah file HTML disimpan, cukup cari file tersebut di komputer kamu, lalu klik dua kali untuk membukanya.
Secara otomatis, file HTML akan terbuka di browser default yang kamu gunakan, seperti Chrome atau Firefox. Ini adalah cara mudah untuk melihat hasil dari cara membuat HTML di Notepad yang telah kamu buat.
3. Gunakan Fitur Drag and Drop di Browser
Alternatif lain untuk membuka file HTML adalah dengan menggunakan fitur drag and drop. Cukup seret file HTML yang telah kamu simpan dan jatuhkan ke dalam jendela browser.
Browser akan langsung memuat file tersebut, dan kamu bisa melihat tampilan halaman web yang sudah kamu buat di Notepad.
Baca juga : Tutorial Tailwind React JS: Setup, Styling, dan Contoh
Yuk, Ikuti Bootcamp Web Development di Dibimbing.id!
Setelah memahami cara membuat HTML di Notepad, saatnya mengembangkan keterampilanmu lebih jauh di dunia pengembangan web! Yuk, ikuti Bootcamp Web Development di dibimbing.id!
Di sini, kamu akan mempelajari HTML, CSS, JavaScript, dan banyak lagi untuk menciptakan website profesional. Dapatkan pembelajaran langsung dari mentor berpengalaman dengan kurikulum yang aplikatif dan praktis.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia web development semakin terbuka lebar!
Daftar sekarang di sini dan mulai perjalananmu untuk menjadi Web Developer profesional! #BimbingSampeJadi
Referensi
- How To Create and View a Website on Your Computer [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
