Langsung ke konten utama

Membuat Website Biodata Diri Sederhana 1

Artikel

Rabu, 1 Oktober 2025

Membuat Website Biodata Diri Sederhana 1

Ilustrasi pembuatan website menggunakan frontend HTML

Halo semuanya sobat Seputar Dunia IT, kali ini saya akan membagikan ilmu untuk para pemula yang ingin memulai membuat website atau yang biasa kita katakan Web Development. Banyak yang mengira bahwa coding itu susah, memang bisa dibilang susah tapi itu tergantung kalian, kalau memang kalian sudah interest di bidang IT dan ingin terus mencari tahu Seputar IT maka kalian akan bisa.


Kali ini, saya akan menjelaskan apa itu Web Development dan apa saja yang dilakukannya. Web Development adalah programmer yang mengurusi atau membuat sebuah website yang biasa kita temukan di browser. Lalu, bahasa pemrograman apa saja yang digunakan seorang Web Development? Untuk website yang sederhana, mereka biasanya menggunakan JavaScript. Apa itu JavaScript? Nanti akan saya jelaskan di artikel setelahnya.


Ada 3 teknologi yang dipakai untuk membuat sebuah website sederhana, misalnya untuk menampilkan CV atau Curriculum Vitae. Yaitu HTML, CSS, dan JavaScript. Apakah semuanya termasuk bahasa pemrograman? Sebenarnya yang termasuk bahasa pemrograman hanyalah JavaScript. Lalu, kalau HTML dan CSS itu apa? HTML adalah kerangka website yang biasa disebut frontend, sedangkan CSS adalah style dari website tersebut untuk penampilan yang menarik, seperti tema, warna, border, dan sebagainya. Kali ini, kita akan belajar frontend saja terlebih dahulu.


Kita akan praktek membuat website sederhana untuk menampilkan CV saja terlebih dahulu. Untuk itu kita memerlukan sebuah aplikasi code editor, bisa pakai Notepad atau yang paling saya sarankan untuk pemula adalah Visual Studio Code. Silakan juga siapkan browser yang biasa kalian pakai. Kalian bisa download VSCode dari https://code.visualstudio.com/Download lalu pilih sesuai OS kalian masing-masing (Windows, macOS, atau Linux). Kalau sudah, silakan buat folder baru di Documents (File Explorer) dan namai foldernya belajar-web-development.


Kalau sudah, silakan buka VSCode lalu pilih Open Folder, pilih folder yang kalian buat tadi. Setelah itu buat file baru di New File dengan nama index.html. Ketik tanda "!" lalu tekan Enter, maka kalian sudah bisa mulai membuat kerangka dasar. Di dalamnya ada tag bernama <body></body>. Misalkan kita mau mengetik Hello World, caranya ketik h1 lalu tekan Tab. Itu akan membuat sebuah tag bernama <h1></h1> atau heading 1.

Ilustrasi tag heading 1

Kita bisa menambahkan teks Hello World di dalam tag <h1></h1>. Setelah itu, untuk melihat websitenya kita bisa pergi ke Extensions (atau tekan Ctrl+Shift+X), lalu cari ekstensi bernama Live Server dan install. Setelah terpasang, nanti di bagian pojok kanan bawah ada tombol Go Live. Itu digunakan untuk menjalankan website di localhost.

Ilustrasi menyalakan live server

Setelah itu, website kalian akan otomatis berjalan sebagai localhost di browser, dan akan muncul tulisan Hello World yang sudah kalian ketik tadi. Itu baru pengenalan cara membuat kerangka website. Sekarang kita ganti teks Hello World tadi menjadi Curriculum Vitae, lalu buat tag baru lagi di bawah <h1> yaitu tag <img src="" alt="">. Fungsi tag img adalah untuk menampilkan foto di website. Setelah itu, kalian bisa membuat folder baru bernama assets, lalu di dalamnya ada folder images dan icons.

Ilustrasi struktur folder

Setelah membuat folder, silakan taruh foto kalian di dalam folder images, lalu tambahkan di tag img tadi menjadi: <img src="assets/images/fotokalian.png" alt="image"> Setelah itu, hasilnya akan tampil seperti foto di bawah.

Ilustrasi tampilan website yang sudah ditampilkan foto profil

Sudah, tapi kenapa fotonya besar sekali? Ini tergantung ukuran foto kalian, apakah besar atau kecil. Kebetulan foto saya besar. Untuk mengatur ukuran foto agar tidak terlalu besar maupun kecil, kalian bisa menambahkan atribut style di dalam tag img setelah alt="image" <img src="assets/images/fotokalian.png" alt="image" style="width: 300px; height: 300px;"> Kalau fotonya portrait maupun landscape, bisa disesuaikan ukurannya pada width dan height. Disarankan menggunakan resolusi berbentuk kotak agar lebih rapi.

Ilustrasi foto website yang diperbaiki

Jika sudah, kalian bisa mengetik script untuk membuat biodata, seperti contoh pada gambar di bawah. tag <ul></ul> dan <li></li> untuk membuat sebuah list kebawah.

Ilustrasi untuk membuat list biodata

Setelah kalian mengetik script tadi maka tampilan di website nya akan seperti foto di bawah.

Ilustrasi tampilan biodata diri di website

Cukup sekian dari saya, untuk penjelasan styling atau CSS ada di artikel "Membuat Website Biodata Diri Sederhana 2" selanjutnya. Sampai jumpa di artikel selanjutnya!











Komentar

  1. Wah keren mas terima kasih banyak atas ilmunya

    BalasHapus
  2. Mas mau saya tanya, apakah html bahasa pemrograman? Soalnya ada yang bilang katanya html itu bukan bahasa pemrograman, tapi frontend atau bisa dibilang kerangka website

    BalasHapus
    Balasan
    1. Ya HTML itu bukan bahasa pemrograman, tapi frontend atau kerang ka web. Banyak orang yang belum tau kalo HTML itu bukan bahasa pemrograman, kalau bahasa pemrograman itu contohnya JS, PHP, C++, C, dsb...

      Hapus

Posting Komentar

Postingan populer dari blog ini

Cara Aman Dan Benar Mengakses Dark Web

  Artikel Jumat, 3 Oktober 2025 Cara Aman Dan Benar Mengakses Dark Web Ilustrasi salah satu website gateway untuk masuk ke dalam dark web Halo sobat Seputar Dunia IT! Kali ini saya akan membagikan cara atau tips aman untuk mengakses dark web. Sebelumnya saya akan menjelaskan terlebih dahulu jenis-jenis website mulai dari surface web, deep web, dark web, dan lain sebagainya. Struktur website dari yang mudah dijangkau sampai yang susah dijangkau atau harus menggunakan TOR Dari struktur foto berikut, kita bisa melihat bahwa surface web itu contoh nya seperti Google, Bing, Reddit, Intagram, dan lain sebagainya. Lalu Deep web adalah informasi dan konten yang tidak terindeks oleh mesin pencari biasa, seperti basis data akademis, portal perbankan online, kotak masuk email, dan intranet perusahaan. Sedangkan dark web   itu sudah tidak bisa diakses sembarang hanya dengan browser seperti yang biasa kita pakai seperti Brave, Chrome, Firefox, danlain sebagainya, hanya bisa menggunaka...

Cara Hack Password Windows 7, 8, 10, dan 11

Artikel Kamis, 2 Oktober 2025 Cara Hack Password Windows 7, 8, 10, dan 11 Ilustrasi Password Halo sobat Seputar Dunia IT! Kembali lagi bersama saya, kali ini saya akan membagikan cara hack password Windows 7, 8, 10, bahkan 11. Pertama tama sebelum saya jelaskan, saya minta agar kalian bijak dalam pemakaian ilmu ini, karena kalau disalah gunakan saya tidak bertanggung jawab atas perbuatannya karena saya sudah mengingatkan terlebih dahulu sebelumnya. Oke, disini kita memerlukan 5 benda: PC atau laptop kalian PC atau laptop target Flashdisk minimal 30an GB File HBCD_PE_x64.iso Aplikasi Ventoy Silahkan kalian download ISO file nya disini  atau dari website resmi www.hirensbootcd.org . Setelah itu silahkan download aplikasi Ventoy untuk membuat boot di flashdisk kalian di website resmi ventoy www.ventoy.net . Setelah itu kalian bisa ekstrak terlebih dahulu aplikasi Ventoy nya lalu jalankan aplikasi Ventoy nya Ilustrasi tampilan aplikasi Ventoy Setelah itu, kalian bisa colokkan flashdisk...