Website Using Html Css And Javascript With Source Code

Website Using Html Css And Javascript With Source Code

5 min read Jun 18, 2024
Website Using Html Css And Javascript With Source Code

Membuat Website Sederhana dengan HTML, CSS, dan JavaScript

Artikel ini akan memandu Anda dalam membuat sebuah website sederhana menggunakan HTML, CSS, dan JavaScript. Kita akan membangun sebuah halaman web dengan elemen-elemen dasar, menambahkan gaya dengan CSS, dan menambahkan interaktivitas dengan JavaScript.

1. Struktur HTML

Pertama-tama, kita akan membuat struktur HTML dasar untuk halaman web kita. Buat sebuah file baru dengan nama index.html dan masukkan kode berikut:




  Website Sederhana
  



  

Selamat Datang di Website Sederhana

Ini adalah contoh website sederhana yang dibangun dengan HTML, CSS, dan JavaScript.

Kode ini mendefinisikan struktur dasar sebuah halaman web:

  • <!DOCTYPE html>: Deklarasi tipe dokumen yang menginformasikan browser bahwa ini adalah halaman HTML.
  • <html>: Tag pembuka dan penutup untuk seluruh dokumen HTML.
  • <head>: Elemen yang berisi metadata tentang halaman, seperti judul, tautan ke file CSS, dan lain sebagainya.
  • <title>: Judul yang akan ditampilkan di tab browser.
  • <link>: Menghubungkan file CSS eksternal (style.css) ke halaman HTML.
  • <body>: Elemen yang berisi konten halaman web yang terlihat oleh pengguna.
  • <h1>: Tag untuk judul utama halaman.
  • <p>: Tag untuk paragraf teks.
  • <script>: Elemen untuk menghubungkan file JavaScript eksternal (script.js) ke halaman HTML.

2. Styling dengan CSS

Selanjutnya, kita akan menambahkan gaya ke halaman web kita menggunakan CSS. Buat sebuah file baru dengan nama style.css dan masukkan kode berikut:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  color: #555;
  line-height: 1.6;
}

Kode CSS ini mendefinisikan gaya dasar untuk elemen body, h1, dan p:

  • body: Menentukan font, margin, padding, dan warna latar belakang untuk seluruh halaman.
  • h1: Menentukan warna dan penjajaran teks untuk judul utama.
  • p: Menentukan warna dan tinggi baris untuk paragraf teks.

3. Interaktivitas dengan JavaScript

Terakhir, kita akan menambahkan interaktivitas ke halaman web kita menggunakan JavaScript. Buat sebuah file baru dengan nama script.js dan masukkan kode berikut:

const button = document.createElement('button');
button.textContent = 'Klik Saya!';

button.addEventListener('click', () => {
  alert('Anda telah mengklik tombol!');
});

document.body.appendChild(button);

Kode JavaScript ini:

  • const button = document.createElement('button');: Membuat elemen tombol baru.
  • button.textContent = 'Klik Saya!';: Menambahkan teks "Klik Saya!" ke tombol.
  • button.addEventListener('click', () => { ... });: Menambahkan event listener ke tombol yang akan dijalankan ketika tombol diklik.
  • document.body.appendChild(button);: Menambahkan tombol ke halaman web.

4. Menjalankan Website

Setelah Anda membuat ketiga file tersebut (index.html, style.css, dan script.js), Anda dapat membuka file index.html di browser web Anda untuk melihat hasil website sederhana yang telah Anda buat.

Kesimpulan

Dalam tutorial ini, Anda telah mempelajari cara membuat website sederhana menggunakan HTML, CSS, dan JavaScript. Anda telah belajar tentang struktur HTML, styling dengan CSS, dan menambahkan interaktivitas dengan JavaScript. Ini hanyalah contoh sederhana, dan Anda dapat terus menambahkan fitur-fitur baru ke website Anda dengan menggunakan lebih banyak elemen HTML, CSS, dan JavaScript.