Artikel
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.
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.
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.








Wah keren mas terima kasih banyak atas ilmunya
BalasHapusMas mau saya tanya, apakah html bahasa pemrograman? Soalnya ada yang bilang katanya html itu bukan bahasa pemrograman, tapi frontend atau bisa dibilang kerangka website
BalasHapusYa 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