{"id":7,"date":"2026-01-20T08:00:00","date_gmt":"2026-01-20T08:00:00","guid":{"rendered":"https:\/\/asfini.com\/index.php\/2026\/05\/31\/belajar-html-dari-nol-cara-membuat-website-pertamamu\/"},"modified":"2026-05-31T12:29:35","modified_gmt":"2026-05-31T12:29:35","slug":"20-januari-2026","status":"publish","type":"post","link":"https:\/\/asfini.com\/index.php\/2026\/01\/20\/20-januari-2026\/","title":{"rendered":"Pengalaman Pertamaku Bikin Website Pakai HTML"},"content":{"rendered":"\n

Masih ingat banget waktu pertama kali buka Notepad, nulis beberapa baris kode, terus buka hasilnya di browser. Waktu muncul tulisan “Halo, ini website pertamaku!” di layar \u2014 rasanya luar biasa. Padahal cuma teks biasa, tapi bangga banget!<\/p>\n\n\n\n

HTML itu singkatan dari HyperText Markup Language<\/strong>. Ini bukan bahasa pemrograman yang “beneran” \u2014 lebih ke bahasa untuk nyusun struktur halaman web. Tapi ini adalah pintu pertama yang harus kamu lewatin kalau mau jadi web developer.<\/p>\n\n\n\n

Kode Pertama yang Aku Tulis<\/h2>\n\n\n\n

Ini persis kode pertama yang aku ketik waktu kelas X:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n  <head>\n    <title>Website Pertamaku<\/title>\n  <\/head>\n  <body>\n    <h1>Halo, ini website pertamaku!<\/h1>\n    <p>Aku baru belajar HTML dan ini keren banget.<\/p>\n  <\/body>\n<\/html><\/pre>\n\n\n\n
Simpel banget kan? Tapi dari sini aku mulai ngerti cara kerja sebuah halaman web. Setiap tag punya fungsinya sendiri-sendiri.<\/p>\n\n\n\n
Tag HTML yang Sering Aku Pakai<\/h2>\n\n\n\n
  • <h1> sampai <h6><\/strong> \u2014 buat judul, makin besar angkanya makin kecil tulisannya<\/li>
  • <p><\/strong> \u2014 buat paragraf teks biasa<\/li>
  • <a href=””><\/strong> \u2014 buat link yang bisa diklik<\/li>
  • <img src=””><\/strong> \u2014 buat nampilin gambar<\/li>
  • <div><\/strong> \u2014 buat ngelompokkan elemen, ini paling sering aku pakai<\/li><\/ul>\n\n\n\n
    Kesalahan yang Sering Aku Buat Waktu Baru Mulai<\/h2>\n\n\n\n
    Waktu awal belajar, aku sering lupa nutup tag. Misalnya nulis <p><\/code> tapi lupa <\/p><\/code> di akhir. Hasilnya tampilan jadi berantakan dan bingung sendiri nyarinya. Sekarang udah reflek sih, tapi dulu itu yang paling sering bikin frustrasi.<\/p>\n\n\n\n
    Satu hal lagi \u2014 aku saranin pakai VS Code<\/strong> dari awal. Gratis, ada highlighting warna untuk setiap tag, dan kalau lupa nutup tag biasanya langsung ketahuan. Jauh lebih enak dari Notepad biasa.<\/p>\n\n\n\n
    Langkah Selanjutnya Setelah HTML<\/h2>\n\n\n\n
    Setelah lumayan lancar HTML, aku langsung lanjut belajar CSS buat bikin tampilannya lebih bagus. Karena jujur aja, HTML polos itu tampilannnya membosankan banget haha. Tapi perjalanan itu yang bikin seru \u2014 step by step, makin lama makin keren hasilnya.<\/p>\n\n\n\n
    Kalau kamu baru mulai, jangan takut salah. Website pertamamu mungkin jelek \u2014 website pertamaku juga jelek. Yang penting mulai dulu!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Masih ingat banget waktu pertama kali buka Notepad, nulis beberapa baris kode, terus buka hasilnya di browser. Waktu muncul tulisan “Halo, ini website pertamaku!” di layar \u2014 rasanya luar biasa. Padahal cuma teks biasa, tapi bangga banget! HTML itu singkatan dari HyperText Markup Language. Ini bukan bahasa pemrograman yang “beneran” \u2014 lebih ke bahasa untuk […]<\/p>\n","protected":false},"author":1,"featured_media":40,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":2,"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/posts\/7\/revisions\/29"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/media\/40"}],"wp:attachment":[{"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asfini.com\/index.php\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}