Membuat Kartu Nama Digital: Cerita Kocak Belajar HTML Pertama Kali

Posted on August 30, 2025 by  with No comments

 

 

Ada satu momen yang sampai sekarang masih bikin aku ketawa sendiri kalau mengingatnya: pertama kali belajar HTML. Bayangin aja, aku yang dulu cuma tahu buka browser buat nonton video kucing di YouTube, tiba-tiba kepikiran: "Eh, kayaknya keren deh kalau bisa bikin website sendiri."

Nah, project pertama yang aku coba bukan bikin e-commerce, bukan bikin blog pribadi, tapi… kartu nama digital.
Kedengarannya sederhana banget, kan? Tapi percayalah, di balik kartu nama digital itu tersimpan cerita jungkir balik penuh drama.

Kenapa Kartu Nama Digital?

Jadi ceritanya waktu itu aku sering diminta tuker-tukeran kontak. Kadang pakai WhatsApp, kadang email, kadang malah cuma ditulis di kertas kecil yang akhirnya hilang di saku.
Aku mikir:
"Kenapa nggak sekalian bikin kartu nama digital aja? Tinggal kasih link ke orang, beres."

Itulah momen aku nekat buka laptop, buka VS Code, terus ngetik sesuatu yang bahkan aku belum ngerti artinya:

<!DOCTYPE html>
<html>
  <head>
    <title>Kartu Nama Digital</title>
  </head>
  <body>
    <h1>Halo, saya Budi</h1>
    <p>Seorang pejuang kopi yang kebetulan suka ngoding.</p>
  </body>
</html>

Saat itu rasanya kayak nemu harta karun. Baru nulis <h1> aja aku udah merasa kayak hacker di film-film Hollywood.

Drama Foto Profil

Namanya juga kartu nama, pasti butuh foto dong.
Masalahnya, waktu itu aku nggak punya foto formal. Foto di KTP? Aduh, mukanya mirip tahanan habis diinterogasi.
Akhirnya aku pilih foto paling lumayan dari HP: lagi megang gelas kopi, senyum-senyum nggak jelas.

Kodenya kira-kira gini:

<img src="foto-budi.jpg" alt="Foto Budi ganteng lagi minum kopi" width="200">

Tapi karena aku salah naro file fotonya, yang muncul di browser bukan fotoku, tapi ikon gambar rusak.
Aku panik, langsung googling: “kenapa gambar nggak muncul di HTML?”
Ternyata simpel banget: aku taruh file foto-budi.jpg di folder lain. 🤦‍♂️

Begitu fotonya muncul, aku senyum-senyum sendiri.
Padahal kalau dipikir-pikir, isinya cuma muka aku dan teks “Halo, saya Budi.” Tapi rasanya kayak aku baru meluncurkan startup miliaran dolar.

Menambahkan Kontak

Setelah ada nama dan foto, saatnya menambahkan kontak.
Waktu itu aku nulis:

<p>Email: budi@example.com</p>
<p>WhatsApp: +62 812 3456 7890</p>

Lalu aku mikir: “Kalau cuma teks gini kan nggak asik. Enaknya dikasih link biar bisa langsung klik.”

Akhirnya aku belajar pakai <a>:

<a href="mailto:budi@example.com">Email Saya</a><br>
<a href="https://wa.me/6281234567890">Chat WhatsApp</a>

Nah, begitu aku klik link WhatsApp, langsung kebuka aplikasi WA. Waktu itu aku teriak kecil:
"WOI, KEREN BANGET!!!"

Padahal… itu fitur biasa. Tapi untuk pemula kayak aku, itu udah luar biasa.

Kesalahan Konyol yang Tak Terlupakan

Belajar HTML memang penuh kenangan lucu. Salah satunya waktu aku pengen bikin link ke Instagram.
Kodenya aku tulis begini:

<a href="htttp://instagram.com/budi_ganteng">Instagram</a>

Coba perhatiin: ada 3 huruf 't' di http.
Alhasil, setiap kali aku klik, malah muncul error “Page Not Found.”

Aku sampai 2 jam mikirin, “Apa Instagramnya lagi down ya?”
Padahal salah ketik doang.

Kartu Nama Digital Versi Pertama

Setelah jungkir balik belajar <h1>, <p>, <img>, dan <a>, akhirnya lahirlah kartu nama digital versi pertama. Isinya kira-kira gini:

<!DOCTYPE html>
<html>
  <head>
    <title>Kartu Nama Digital Budi</title>
  </head>
  <body>
    <h1>Halo, saya Budi</h1>
    <img src="foto-budi.jpg" alt="Foto Budi" width="200">
    <p>Seorang pejuang kopi yang suka ngoding HTML.</p>
    <a href="mailto:budi@example.com">Email Saya</a><br>
    <a href="https://wa.me/6281234567890">Chat WhatsApp</a><br>
    <a href="https://instagram.com/budi_ganteng">Instagram</a>
  </body>
</html>

Pas aku buka di browser, hasilnya emang sederhana banget.
Tapi hati ini rasanya kayak baru bikin startup unicorn.

Apa yang Aku Pelajari

Dari project receh ini, aku belajar banyak hal:

  1. HTML itu logis.
    Tag <h1> buat judul, <p> buat paragraf, <img> buat gambar, <a> buat link.
    Simple tapi powerful.

  2. Kesalahan itu guru terbaik.
    Dari typo htttp, salah folder gambar, sampai lupa nutup tag, semua bikin aku lebih paham.

  3. Project kecil bisa bikin semangat.
    Jangan remehkan project “kartu nama digital”.
    Karena dari sinilah aku jadi ketagihan ngulik HTML, CSS, sampai JavaScript.

Kenapa Harus Coba Juga?

Kalau kamu baru mulai belajar HTML, aku saranin coba bikin kartu nama digital juga.
Kenapa?

  • Mudah. Kamu cuma butuh 4 tag dasar: <h1>, <p>, <img>, <a>.

  • Berguna. Bisa dipakai beneran buat kenalan atau personal branding.

  • Menyenangkan. Ada rasa bangga pas pertama kali buka file HTML buatan sendiri.

Sekarang, setiap kali aku ngasih link ke kartu nama digital versiku, aku senyum-senyum sendiri. Bukan karena tampilannya keren, tapi karena di balik halaman sederhana itu ada perjalanan penuh keringat, kopi, dan typo memalukan.

Dan percaya deh, dari project kecil kayak gini, kamu bisa buka jalan menuju dunia web development yang luas banget.
Siapa tahu, dari kartu nama digital, nanti kamu bikin portofolio, blog, sampai startup beneran.

Jadi… tunggu apa lagi?
Buka laptop, ketik <h1>Halo, saya…</h1>, terus bikin kartu nama digital pertamamu.
Siapa tahu beberapa tahun ke depan, itu jadi cerita lucu yang bisa kamu kenang sambil senyum-senyum kayak aku sekarang. 

0 Comments:

Post a Comment

Subscribe to: Post Comments (Atom)