PEMBUATAN WEBSITE

-

 PEMBUATAN WEBSITE


💻 Materi : Pembuatan Website (Pengembangan Website)

Mapel: Koding dan Kecerdasan Artifisial

Kelas: X SMK

🔹 A. ​​Pengantar Pembuatan Website

1. Apa itu Website?

Website adalah kumpulan halaman yang berisi informasi dalam bentuk teks, gambar, audio, video, dan elemen lainnya yang saling terhubung melalui hyperlink dan dapat diakses menggunakan browser melalui jaringan internet.

Contoh website:

  • Informasi : kompas.com, detik.com

  • Pendidikan : kemdikbud.go.id

  • E-commerce : tokopedia.com, shopee.co.id

  • Media sosial : facebook.com, instagram.com

2. Komponen Utama Website

Sebuah situs web terdiri dari tiga komponen utama:

KomponenPenjelasan
Bagian DepanBagian tampilan yang dilihat oleh pengguna (antarmuka pengguna). Dibuat dengan HTML, CSS, dan JavaScript.
Bagian BelakangBagian yang mengatur logika, penyimpanan data, dan interaksi dengan server. Menggunakan bahasa seperti PHP, Python, Node.js, dll.
Basis DataTempat penyimpanan data seperti pengguna, produk, artikel, dll. Menggunakan MySQL, PostgreSQL, MongoDB, dsb.

🔹 B. Tahapan Pembuatan Website

1. Perencanaan (Planning)

Menentukan tujuan situs web, target pengguna, dan jenis konten yang akan disajikan.
Contoh:
Tujuan membuat website sekolah → menampilkan profil, informasi jurusan, dan berita sekolah.

2. Perancangan (Design)

Merancang tampilan menggunakan wireframe dan menentukan warna, tata letak, serta elemen UI.
Alat bantu: Figma, Canva, Adobe XD.

3. Pembuatan (Development)

Proses pengkodean website menggunakan bahasa pemrograman seperti:

  • HTML (Hypertext Markup Language) → struktur konten

  • CSS (Cascading Style Sheets) → desain dan gaya tampilan

  • JavaScript → interaksi dan dinamika

  • PHP / Python / Node.js → server logika dan koneksi database

4. Pengujian (Testing)

Menguji apakah website berjalan baik di berbagai perangkat dan browser.

5. Publikasi (Deployment)

Website diunggah ke web hosting dan dihubungkan dengan domain agar dapat diakses oleh publik.
Contoh domain:www.smkn1gantiwarno.sch.id

🔹 C. Struktur Dasar Website

Struktur folder dalam pembuatan website sederhana:

project-website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
└── images/
    └── logo.png

🔹 D. Bahasa Pemrograman Website

1. HTML (Bahasa Markup Hiperteks)

HTML digunakan untuk membuat struktur dan isi dari halaman web.

📘 Contoh Kode HTML Dasar:

<!DOCTYPE html>
<html>
<head>
    <title>Website Sekolah SMKN 1 Gantiwarno</title>
</head>
<body>
    <h1>Selamat Datang di SMKN 1 Gantiwarno</h1>
    <p>Website ini berisi informasi seputar sekolah kami.</p>
    <a href="profil.html">Lihat Profil Sekolah</a>
</body>
</html>

🧩 Penjelasan:

  • <h1>→ judul utama

  • <p>→ paragraf

  • <a>→ link menuju halaman lain

2. CSS (Cascading Style Sheets)

CSS digunakan untuk mengatur tampilan (warna, posisi, ukuran, font).

📘 Contoh Kode CSS:

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    text-align: center;
}

h1 {
    color: #007bff;
}

p {
    color: #333;
}

🧩 Penjelasan:

  • background-color→ warna latar

  • font-family→ jenis huruf

  • color→ warna teks

3. JavaScript

Digunakan untuk menambah interaktivitas pada website.

📘 Contoh Kode JavaScript:

<button onclick="tampilkanPesan()">Klik Saya!</button>

<script>
function tampilkanPesan() {
    alert("Selamat datang di Website SMKN 1 Gantiwarno!");
}
</script>

🧩 Penjelasan:

  • onclick→ perintah saat tombol diklik

  • alert()→ menampilkan pesan pop-up

🔹 E. Membuat Website Sederhana (Contoh Lengkap)

🎯 Tujuan:

Membuat profil website sekolah sederhana.

📁 Struktur File:

index.html
style.css
script.js
images/logo.png

🧠 Kode Lengkap:

1. Berkas:index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SMKN 1 Gantiwarno</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="images/logo.png" alt="Logo Sekolah" class="logo">
        <h1>SMKN 1 Gantiwarno</h1>
        <nav>
            <a href="#">Beranda</a>
            <a href="#">Profil</a>
            <a href="#">Jurusan</a>
            <a href="#">Kontak</a>
        </nav>
    </header>

    <section class="hero">
        <h2>Selamat Datang di Website Resmi</h2>
        <p>Membangun generasi berprestasi, berkarakter, dan berdaya saing tinggi.</p>
        <button onclick="tampilkanPesan()">Hubungi Kami</button>
    </section>

    <footer>
        <p>&copy; 2025 SMKN 1 Gantiwarno. Semua Hak Dilindungi.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

2. Berkas:style.css

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #eef2f3;
}

header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
}

.logo {
    width: 80px;
}

nav a {
    color: white;
    margin: 10px;
    text-decoration: none;
    font-weight: bold;
}

.hero {
    padding: 50px;
    background: white;
    text-align: center;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 15px;
}

3. Berkas:script.js

function tampilkanPesan() {
    alert("Terima kasih telah mengunjungi SMKN 1 Gantiwarno!");
}

🔹 F. Hosting dan Domain

Agar website dapat diakses secara online, kita membutuhkan:

  1. Domain → Alamat website (contoh: smkn1gantiwarno.sch.id)

  2. Hosting → Tempat menyimpan file website di internet.
    Contoh layanan gratis:

  • Halaman GitHub

  • Netlify

  • Bebas Tak Terbatas

Langkah umum:

  1. Upload file ke hosting

  2. koneksi dengan domain

  3. Uji akses website

🔹 G. Integrasi AI dalam Website (Kecerdasan Buatan)

Penerapan AI sederhana dalam website dapat dilakukan untuk menambah fitur cerdas, misalnya:

  • Chatbot sekolah untuk menjawab pertanyaan siswa

  • Rekomendasi wilayah berdasarkan minat siswa

  • Pendeteksi emosi pengguna melalui analisis teks

📘 Contoh AI sederhana dengan JavaScript:

function rekomendasiJurusan(nilai) {
    if (nilai >= 85) {
        return "Rekomendasi: Rekayasa Perangkat Lunak (RPL)";
    } else if (nilai >= 70) {
        return "Rekomendasi: Multimedia (MM)";
    } else {
        return "Rekomendasi: Teknik Komputer dan Jaringan (TKJ)";
    }
}

alert(rekomendasiJurusan(80));

🔹 H. Evaluasi Pembelajaran

Latihan:

  1. tiga bayangan komponen utama dalam pembuatan website!

  2. Apa perbedaan antara front-end dan back-end?

  3. Menjelaskan fungsi CSS dalam website!

  4. Buat halaman web sederhana yang menampilkan biodata kalian.

  5. Menjelaskan contoh penerapan AI pada website sekolah!

🔹 I. Kesimpulan

Pembuatan website merupakan keterampilan penting di era digital. Dengan memahami HTML, CSS, dan JavaScript, siswa dapat membangun website yang informatif dan menarik. Integrasi AI menjadikan website lebih cerdas , interaktif , dan berdaya guna .


Komentar

Posting Komentar

Postingan populer dari blog ini

📸 Aplikasi Fotografi dan Videografi dalam Informatika

-
  1. Pengertian Fotografi adalah seni dan teknik mengambil gambar menggunakan kamera digital maupun analog, yang kemudian dapat diproses dan disimpan dalam format digital. Videografi adalah teknik merekam gambar bergerak (video) menggunakan kamera, kemudian diolah menjadi karya visual yang dapat digunakan untuk berbagai keperluan. Dalam Informatika , fotografi dan videografi dipelajari bukan hanya sebagai seni, tetapi juga sebagai pemanfaatan teknologi digital untuk menghasilkan, mengedit, menyimpan, dan menyebarkan karya visual. 2. Peran Fotografi dan Videografi dalam Informatika Sebagai Media Komunikasi Visual Menyampaikan pesan secara efektif melalui gambar dan video. Sebagai Data Digital Foto dan video adalah bentuk data yang bisa disimpan, diolah, dan dianalisis. Sebagai Konten Kreatif Digunakan dalam multimedia, presentasi, aplikasi, dan media sosial. Sebagai Sarana Dokumentasi Mendokumentasikan kegiatan, produk, maupun proyek. ...
Baca selengkapnya

🎬📸 Penjabaran Fotografi dan Videografi

-
  📸 1. Komposisi dalam Fotografi Komposisinya adalah cara menyusun atau menata objek dalam bingkai foto agar terlihat menarik, seimbang, dan memiliki makna. Beberapa teknik komposisi dasar: A. Aturan Sepertiga (Rule of Thirds) Foto dibagi menjadi 9 bagian sama besar dengan dua garis horizontal dan dua garis vertikal. Objek utama sebaiknya Ditempatkan pada garis atau titik potong tersebut. Fungsi: membuat foto lebih dinamis, tidak monoton, dan enak dipandang. Contoh: saat memotret orang, letakkan mata pada salah satu titik potong. b. Pembingkaian (Framing) Menggunakan elemen di sekitar objek untuk “membingkai” subjek utama. Bisa berupa jendela, pintu, gemerisik pohon, atau bayangan. Fungsi: menonjolkan objek, memberikan kedalaman, dan menarik perhatian mata. C. Garis Utama (Garis Utama) Menggunakan garis nyata atau imajiner untuk mengarahkan mata penonton ke objek utama. Garis bisa berupa jalan, pagar, jembatan, sungai, atau cahaya. Fungsi: men...
Baca selengkapnya

SISTEM KOMPUTASI

-
Gambar
 SISTEM KOMPUTASI Peta Konsep Sistem Komputasi : Sistem Komputasi adalah sekumpulan komponen yang saling berinteraksi untuk memproses data menjadi informasi yang berguna. Sistem ini mencakup perangkat keras, perangkat lunak, data, dan jaringan yang bekerja bersama untuk menjalankan berbagai tugas komputasi. Berikut penjelasan komponennya: Hardware (Perangkat Keras) Merupakan komponen fisik komputer seperti CPU, RAM, hard disk, monitor, dan perangkat input-output yang digunakan untuk menjalankan proses komputasi. Software (Perangkat Lunak) adalah program atau instruksi yang mengatur cara kerja perangkat keras, meliputi sistem operasi (misalnya Windows, Linux) dan aplikasi (misalnya Microsoft Word, Photoshop). Organisasi Data Menyangkut cara data disimpan, diatur, dan dikelola agar mudah diakses serta diolah menjadi informasi yang bermanfaat. Jaringan (Network) beberapa pengkodean sistem komputer agar dapat saling bertukar data dan sumber daya, baik secara lokal...
Baca selengkapnya