Scribd Logo
Unggah

Selamat datang di Scribd!

  • Kelas Xii

    Diunggah oleh

    danielzakwan7
    7 tayangan8 halaman

    Judul Asli

    KELAS XII

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan8 halaman

    Kelas Xii

    Diunggah oleh

    danielzakwan7

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 8

    • APA ITU WEBSITE?

    Website adalah kumpulan halaman web yang terkait satu sama lain dan biasanya dapat diakses
    melalui internet. Setiap halaman web umumnya berisi teks, gambar, video, atau elemen
    interaktif lainnya. Website dirancang untuk memberikan informasi atau layanan kepada
    pengguna melalui browser web.

    1. WEBSITE LOKAL
    Web lokal adalah halaman web atau situs yang hanya dapat diakses dari komputer tempat
    berkas atau source code nya disimpan.

    • TAHAPAN PEMBUATAN WEBSITE SEDERHANA


    I. HTML
    ▪ HTML digunakan untuk membuat struktur dasar dan konten dari halaman website.
    HTML menentukan elemen-elemen dasar seperti judul, paragraph, gambar, tautan,
    formulir dan lainnya.
    Mari membuat HTML:
    1) Buka aplikasi notepad
    2) Copy/ketik kode html(warna biru) ini:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Web Sederhana</title>
    </head>
    <body>
    <h1>Selamat Datang di Halaman Web Sederhana!</h1>
    <p>Ini adalah contoh halaman web menggunakan HTML.</p>
    <p>Terima kasih telah mengunjungi halaman ini.</p>
    </body>
    </html>
    3) Paste code tersebut kedalam notepad
    4) Save as
    Pilih tempat simpan yang mudah dicari
    Beri nama dengan format .html. contoh: Latihan.html
    save as type: all files
    5) Buka folder, cari file tersebut dan open.

    II. CSS
    ▪ CSS digunakan untuk mengatur tata letak dan penataan visual dari elemen-elemen di
    halaman web.
    ▪ CSS digunakan untuk mendesain tampilan halaman website dengan menentukan warna,
    font, margin dan lain-lain.
    ▪ Mari tambahkan code CSS (warna kuning) kedalam kode html(warna biru) tadi:
    ▪ Buka aplikasi notepad tadi dan tambahkan code Berikut ini:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Web Sederhana</title>
    <style>
    body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 20px;
    padding: 20px;
    text-align: center;
    }

    h1 {
    color: #0066cc;
    }

    p{
    font-size: 18px;
    line-height: 1.6;
    color: #666;
    }
    </style>
    </head>
    <body>
    <h1>Selamat Datang di Halaman Web Sederhana!</h1>
    <p>Ini adalah contoh halaman web menggunakan HTML.</p>
    <p>Terima kasih telah mengunjungi halaman ini.</p>
    </body>
    </html>
    Kode warna di CSS:

    LATIHAN DIKELAS:
    1. Selamat datang di halaman web sederhana! diubah menjadi Selamat datang di web
    saya!
    2. Ubah warna background menjadi warna lainnya.
    3. Ubah warna kalimat Terima kasih telah mengunjungi halaman ini menjadi warna
    lainnya.
    4. Ubah warna Ini adalah contoh halaman web menggunakan HTML menjadi warna
    lainnya.
    5. Tulisan Ini adalah contoh halaman web menggunakan HTML diganti menjadi
    Nama saya adalah…
    6. Tulisan Terima kasih telah mengunjungi halaman ini diganti menjadi Saya kelas
    XI TKJ
    Break GAME Jika maka
    I. Menambahkan gambar pada code Sebelumnya, caranya:
    1. Buka filder tempat file tersebut disimpan kemudian klik dan copy bagian ini:

    2. Masukkan code untuk menambahkan gambar (warna hijau) dan copy tempat
    gambar berada dan paste kedalam code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Web Sederhana</title>
    <style>
    body {font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 20px;
    padding: 20px;
    text-align: center; }
    h1 {color: #0066cc; }
    p {font-size: 18px;
    line-height: 1.6;
    color: #666; }
    </style>
    </head>
    <body>
    <h1>Selamat Datang di Halaman Web Sederhana!</h1>
    <p>Ini adalah contoh halaman web menggunakan HTML.</p>
    <p>Terima kasih telah mengunjungi halaman ini.</p>
    <!-- Menambahkan gambar -->
    <img src="D:\smk\HBRG4968.JPG" alt="Gambar ramen">
    </body>
    </html>
    Untuk ukuran gambar bisa tambahkan code:
    <img src="D:\smk\HBRG4968.JPG" alt="ramen" width="300" height="200">

    iii Javascript
    JavaScript adalah bahasa pemrograman yang digunakan untuk membuat
    halaman web lebih interaktif. Ini dijalankan di sisi klien (peramban web)
    dan memungkinkan manipulasi elemen HTML, menanggapi interaksi
    pengguna, dan berkomunikasi dengan server tanpa perlu memuat ulang
    halaman.
    Mari coba tambahkan efek salju:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>Halaman Web Sederhana</title>
    <style>
    body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 20px;
    padding: 20px;
    text-align: center;
    overflow: hidden; /* Mencegah scroll horizontal */
    }

    h1 {
    color: #0066cc;
    }

    p{
    font-size: 18px;
    line-height: 1.6;
    color: #666;
    }

    /* Tambahkan CSS untuk efek salju */


    .snowflake {
    position: absolute;
    font-size: 20px;
    color: #D2B48C;
    user-select: none;
    animation: fall linear infinite;
    }

    @keyframes fall {
    to {
    transform: translateY(100vh);
    }
    }
    </style>
    </head>
    <body>
    <h1>Selamat Datang di Halaman Web Sederhana!</h1>
    <p>Ini adalah contoh halaman web menggunakan HTML.</p>
    <p>Terima kasih telah mengunjungi halaman ini.</p>

    <!-- Menambahkan efek salju dengan JavaScript -->


    <script>
    document.addEventListener("DOMContentLoaded", function () {
    createSnowflakes();
    });

    function createSnowflakes() {
    for (let i = 0; i < 50; i++) {
    createSnowflake();
    }
    }

    function createSnowflake() {
    const snowflake = document.createElement("div");
    snowflake.className = "snowflake";
    snowflake.innerHTML = "❄"; // Unicode snowflake character

    snowflake.style.left = `${Math.random() * 100}vw`;


    snowflake.style.animationDuration = `${Math.random() * 2 +
    1}s`;
    snowflake.style.animationDelay = `${Math.random()}s`;

    document.body.appendChild(snowflake);

    snowflake.addEventListener("animationiteration", () => {
    snowflake.style.left = `${Math.random() * 100}vw`;
    snowflake.style.animationDuration = `${Math.random() * 2 +
    1}s`;
    snowflake.style.animationDelay = `${Math.random()}s`;
    });
    }
    </script>
    <img src="D:\smk\HBRG4968.JPG" alt="ramen" width="300"
    height="200">
    </body>
    </html>

    • Coba ubah warna salju dan ukurannya.

    Anda mungkin juga menyukai