Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membangun website bukanlah proses yang rumit seperti yang mungkin kamu bayangkan, terutama jika kamu menggunakan HTML, CSS, dan JavaScript. Dalam artikel ini, kita akan membahas cara membuat web sederhana dengan menggabungkan ketiganya. Langkah-langkah yang akan kita bahas akan membantu kamu dengan mudah memahami dasar-dasar pembuatan website.
Sebelum memulai, kamu akan memerlukan beberapa hal. Pertama, kamu akan memerlukan text editor seperti Sublime Text, Atom, atau Visual Studio Code. Kedua, pastikan kamu memiliki pengetahuan dasar HTML, CSS, dan JavaScript. Jika belum, ada banyak tutorial online gratis yang dapat membantu kamu memulainya.
Pertama-tama, kita perlu membuat struktur dasar HTML. Ini akan menjadi kerangka dari website kita. Buat file baru dengan nama “index.html” dan tambahkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Website Sederhana</title>
</head>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
</html>Setelah kamu membuat struktur HTML, selanjutnya adalah CSS. Kamu dapat menambahkan kode CSS kedalam file HTML anda dengan menggunakan tag <style> di dalam <head>. Namun, lebih disarankan untuk membuat file CSS terpisah.
Buat file baru dengan nama “styles.css” dan tambahkan kode berikut:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav {
background-color: #ddd;
padding: 10px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}Jangan lupa untuk menyertakan file CSS ke dalam file HTML kamu dengan link di bagian <head>. Tambahkan kode berikut untuk melakukannya:
<head>
<title>Website Sederhana</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Setelah struktur dan desain selesai, kamu bisa mulai menambahkan fungsionalitas ke website dengan JavaScript. Misalnya, kamu bisa membuat animasi, interaksi, atau bahkan game.
Buat file baru dengan nama “main.js” dan tambahkan kode berikut untuk membuat waktu sekarang muncul di footer:
let date = new Date();
document.querySelector('footer').innerText = 'Hak Cipta ' + date.getFullYear();Jangan lupa untuk memasukkan file JavaScript ini ke dalam file HTML kamu dengan script di bagian paling bawah dari <body>. Tambahkan kode berikut untuk melakukannya:
<body>
<!--...-->
<script src="main.js"></script>
</body>Sekarang kamu sudah tahu cara membuat web sederhana menggunakan HTML, CSS, dan JavaScript. Jangan berhenti di sini, terus belajar dan eksplorasi lebih banyak tentang pembuatan website agar kamu bisa membuat website yang lebih kompleks dan menarik. Selamat mencoba!
Link terkait: