Materi Kelas XII - Smart Algorithm

Dasar Pemrograman Web (HTML)

🤔 Pernahkah kamu bertanya bagaimana website seperti Google atau Facebook dibuat?
Semua website di dunia dibangun menggunakan tiga teknologi utama: HTML, CSS, dan JavaScript. Di Kelas XII, kamu akan mempelajari ketiganya dan membuat website portofolio sendiri!

Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web. HTML menentukan struktur dan konten dari sebuah halaman web.

Analogi sederhana: Jika website adalah sebuah rumah, maka HTML adalah kerangka dan dinding-nya. CSS adalah cat dan dekorasi, sedangkan JavaScript adalah listrik dan sistem otomatis.

Struktur Dasar HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang</h1>
    <p>Ini adalah paragraf pertama.</p>
</body>
</html>
        

Tag HTML yang Sering Digunakan

<h1>

Heading (h1-h6)

Judul dan subjudul halaman

<p>

Paragraph

Teks paragraf konten

<a>

Anchor/Link

Tautan ke halaman lain

<img>

Image

Menampilkan gambar

Live HTML Editor - Coba Sendiri!

📝 Kode HTML

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertamaku</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Nama: [Nama Kamu]</p>
    <p>Kelas: XII IPA/IPA</p>
    <p>Sekolah: SMA Negeri 1 Cluring</p>
</body>
</html>

🖥️ Preview Website

Klik "Preview HTML" untuk melihat hasil...

💡 Tips Penting: Setiap tag HTML harus ditutup (kecuali tag kosong seperti <img> dan <br>). Gunakan indentasi agar kode mudah dibaca. Selalu test di browser!

📚 Konteks Lokal: Kamu bisa membuat website profil sekolah, galeri foto wisata Banyuwangi, atau portofolio pribadi sebagai proyek akhir!

Kuis Modul 1: HTML Dasar

5 Soal • 100 Poin

Skor Anda

0

/ 100 poin

1 Kepanjangan dari HTML adalah?

AHigh Text Making Language BHyperText Markup Language CHyper Transfer Markup Language DHome Tool Markup Language

2 Tag untuk membuat judul terbesar adalah?

A<h1> B<head> C<header> D<h6>

3 Tag untuk membuat link adalah?

A<link> B<href> C<a> D<url>

4 Tag yang benar untuk menampilkan gambar adalah?

A<image> B<pic> C<img src> D<img src="gambar.jpg">

5 Bagian HTML yang berisi konten yang terlihat di browser adalah?

A<body> B<head> C<html> D<meta>

CSS Styling

🤔 Mengapa website terlihat berbeda-beda padahal sama-sama menggunakan HTML?
Jawabannya adalah CSS (Cascading Style Sheets)! CSS bertanggung jawab untuk menghias dan mempercantik tampilan website.

Apa itu CSS?

CSS adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan layout halaman web. CSS mengontrol warna, font, ukuran, posisi, dan animasi.

Analogi: Jika HTML adalah kerangka rumah, CSS adalah cat, wallpaper, furnitur, dan dekorasi yang membuat rumah terlihat indah!

Sintaks Dasar CSS

selector {
    property: value;
}

// Contoh:
h1 {
    color: blue;
    font-size: 24px;
}

.class-name {
    background: #f0f0f0;
}

#id-name {
    border: 1px solid black;
}
        

Live CSS Editor - Styling

📝 Kode HTML + CSS

<style>
    h1 {
        color: #ef4444;
        text-align: center;
        font-family: Arial, sans-serif;
    }
    p {
        color: #475569;
        font-size: 18px;
        line-height: 1.6;
    }
    .box {
        background: #f1f5f9;
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;
    }
</style>

<h1>Website SMA N 1 Cluring</h1>
<div class="box">
    <p>Selamat datang di website sekolah kami.</p>
    <p>Berlokasi di Jalan H. Huzaini, Benculuk – Cluring</p>
</div>

🖥️ Preview Website

Klik "Preview CSS" untuk melihat hasil...

Kuis Modul 2: CSS

5 Soal • 100 Poin

Skor Anda

0

/ 100 poin

1 Kepanjangan dari CSS adalah?

AComputer Style Sheets BCreative Style System CCascading Style Sheets DColorful Style Sheets

2 Property CSS untuk mengubah warna teks adalah?

Acolor Btext-color Cfont-color Dforeground

3 Selector CSS untuk class diawali dengan simbol?

A# B. C@ D$

4 Property untuk mengatur ukuran font adalah?

Atext-size Bfont-weight Csize Dfont-size

5 CSS dapat ditambahkan ke HTML dengan cara?

AInline, Internal, External BCopy-Paste CImport saja DJavaScript

JavaScript - Interaktivitas Web

🤔 Bagaimana website bisa merespon klik, menampilkan animasi, atau memproses data?
Semua itu berkat JavaScript! JavaScript adalah bahasa pemrograman yang membuat website menjadi interaktif dan dinamis.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang berjalan di browser. JavaScript memungkinkan website untuk merespon interaksi pengguna, memanipulasi konten, dan berkomunikasi dengan server.

Analogi: Jika HTML adalah kerangka dan CSS adalah dekorasi, JavaScript adalah otak dan sistem saraf yang membuat website "hidup" dan bisa berinteraksi!

Sintaks Dasar JavaScript

// Variabel
let nama = "Budi";
const usia = 17;

// Fungsi
function sapa() {
    alert("Halo, " + nama);
}

// Event Handler
document.getElementById("tombol").addEventListener("click", sapa);

// Manipulasi DOM
document.getElementById("teks").innerHTML = "Teks baru!";
        

Live JavaScript Editor

📝 Kode JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Demo</title>
</head>
<body>
    <h1 id="judul">Selamat Datang</h1>
    <button onclick="ubahWarna()">Ubah Warna</button>
    <button onclick="ubahTeks()">Ubah Teks</button>
    
    <script>
        function ubahWarna() {
            document.getElementById("judul").style.color = "red";
        }
        
        function ubahTeks() {
            document.getElementById("judul").innerHTML = "Halo SMA N 1 Cluring!";
        }
    </script>
</body>
</html>

🖥️ Preview Website

Klik "Jalankan JS" untuk melihat hasil...

Kuis Modul 3: JavaScript

5 Soal • 100 Poin

Skor Anda

0

/ 100 poin

1 JavaScript digunakan untuk?

AStruktur halaman BInteraktivitas website CStyling tampilan DDatabase

2 Kata kunci untuk membuat variabel yang bisa diubah adalah?

Alet Bconst Cvar Dfixed

3 Fungsi untuk menampilkan alert adalah?

Ashow() Bdisplay() Calert() Dmessage()

4 Event untuk mendeteksi klik mouse adalah?

AonMouse BonClick CmouseClick Dclick

5 DOM dalam JavaScript adalah singkatan dari?

ADocument Object Model BData Object Model CDocument Orientation Mode DDigital Object Memory

Integrasi HTML, CSS & JavaScript

🎯 Saatnya menggabungkan semua pengetahuanmu!
Di modul ini, kamu akan belajar bagaimana menggabungkan HTML, CSS, dan JavaScript untuk membuat website yang lengkap dan fungsional.

Struktur Proyek Web Lengkap

// Struktur Folder:
proyek-website/
├── index.html      (Struktur)
├── style.css       (Tampilan)
├── script.js       (Interaktivitas)
└── images/         (Asset gambar)

// HTML dengan CSS & JS External:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Konten HTML -->
    <script src="script.js"></script>
</body>
</html>
        

Live Editor - Website Lengkap

📝 Kode Lengkap (HTML+CSS+JS)

<!DOCTYPE html>
<html>
<head>
    <title>Website SMA N 1 Cluring</title>
    <style>
        body { font-family: Arial; padding: 20px; }
        h1 { color: #ef4444; text-align: center; }
        .info { background: #f1f5f9; padding: 20px; border-radius: 8px; }
        button { background: #10b981; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #059669; }
    </style>
</head>
<body>
    <h1>Selamat Datang</h1>
    <div class="info">
        <p id="teks">SMA Negeri 1 Cluring - Banyuwangi</p>
        <button onclick="ubahTeks()">Klik Saya</button>
    </div>
    <script>
        function ubahTeks() {
            document.getElementById("teks").innerHTML = "Terima kasih telah berkunjung!";
        }
    </script>
</body>
</html>

🖥️ Preview Website

Klik "Preview Website" untuk melihat hasil...

Kuis Modul 4: Integrasi

5 Soal • 100 Poin

Skor Anda

0

/ 100 poin

1 Tag untuk menghubungkan file CSS external adalah?

A<link rel="stylesheet"> B<css> C<style src> D<import>

2 Tag untuk menghubungkan file JavaScript external adalah?

A<js> B<script src> C<javascript> D<link js>

3 Urutan loading yang benar adalah?

AJS → CSS → HTML BCSS → JS → HTML CHTML → CSS → JS DHTML → JS → CSS

4 File JavaScript biasanya disimpan dengan ekstensi?

A.html B.css C.txt D.js

5 Tempat terbaik meletakkan script JS adalah?

ASebelum </body> BDi <head> CDi <html> DDi file terpisah saja

Proyek Akhir & Persiapan Uji Kompetensi

🎉 Selamat! Kamu telah mencapai modul terakhir!
Di modul ini, kamu akan membuat proyek website lengkap sebagai tugas akhir dan mempersiapkan diri untuk uji kompetensi.

Tugas Proyek Akhir

Buatlah website portofolio pribadi dengan ketentuan:

✅ Minimal 3 halaman (Home, About, Contact)
✅ Menggunakan HTML, CSS, dan JavaScript
✅ Responsive (bisa dibuka di HP dan laptop)
✅ Konten tentang diri sendiri atau sekolah
✅ Minimal 1 fitur interaktif (tombol, form, animasi)

Contoh Struktur Proyek

// Folder Proyek:
portofolio-saya/
├── index.html        (Halaman Utama)
├── about.html        (Tentang Saya)
├── contact.html      (Kontak)
├── style.css         (CSS untuk semua halaman)
├── script.js         (JavaScript interaktif)
└── images/           (Foto profil, dll)
        

Live Editor - Proyek Portofolio

📝 Template Portofolio

<!DOCTYPE html>
<html>
<head>
    <title>Portofolio Saya</title>
    <style>
        body { font-family: Arial; margin: 0; padding: 0; }
        header { background: #ef4444; color: white; padding: 20px; text-align: center; }
        nav { background: #f1f5f9; padding: 10px; text-align: center; }
        nav a { margin: 0 15px; color: #0f172a; text-decoration: none; }
        .content { padding: 40px 20px; max-width: 800px; margin: 0 auto; }
        footer { background: #1e293b; color: white; text-align: center; padding: 20px; margin-top: 40px; }
    </style>
</head>
<body>
    <header>
        <h1>[Nama Kamu]</h1>
        <p>Siswa SMA Negeri 1 Cluring</p>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    <div class="content">
        <h2>Selamat Datang</h2>
        <p>Ini adalah website portofolio saya.</p>
    </div>
    <footer>
        <p>© 2024 - SMA N 1 Cluring</p>
    </footer>
</body>
</html>

🖥️ Preview Portofolio

Klik "Preview Portofolio" untuk melihat hasil...

Kuis Modul 5: Proyek Akhir

5 Soal • 100 Poin

Skor Anda

0

/ 100 poin

1 Minimal jumlah halaman untuk proyek akhir adalah?

A1 halaman B2 halaman C3 halaman D5 halaman

2 Teknologi yang wajib digunakan dalam proyek adalah?

AHTML, CSS, JavaScript BPython saja CPHP saja DDatabase

3 Responsive design berarti?

ACepat loading BBisa dibuka di berbagai device CBanyak animasi DWarna-warni

4 File CSS sebaiknya disimpan?

ADi HTML BDi JavaScript CDi database DFile terpisah .css

5 Tag HTML untuk navigasi adalah?

A<nav> B<navigation> C<menu> D<links>

🎉 Selamat!

Anda telah menyelesaikan semua modul Kelas XII dengan total skor 0/500

Ke Kelas XI Ke Beranda