Sunday, November 2, 2025

Tugas Daring: Membuat Website Pribadi Sederhana dengan Android

 

Tujuan Pembelajaran

  • Siswa memahami konsep dasar web statis (HTML & CSS).

  • Siswa mampu membuat halaman web pribadi sederhana menggunakan perangkat Android.

Alat yang Dibutuhkan

Semua bisa diunduh gratis di Play Store:

  1. Acode – editor HTML & CSS terbaik untuk Android.
    🔗 Alternatif: Spck Editor, Dcoder, atau QuickEdit.

  2. Canva (opsional) – untuk membuat banner/gambar profil.

  3. Browser (Chrome / Firefox) – untuk melihat hasil website.

Langkah-Langkah Pengerjaan

Langkah 1 – Buka Aplikasi Acode

  • Buat file baru:
    👉 index.html

  • Ketikkan kode berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Website Pribadiku</title>
  <style>
    body {font-family: Arial; background-color: #f0f0f0; text-align: center;}
    h1 {color: #2c3e50;}
    img {width: 150px; border-radius: 50%;}
    p {color: #555;}
    .box {background: white; padding: 20px; margin: 20px; border-radius: 10px;}
  </style>
</head>
<body>
  <div class="box">
    <h1>Halo, Saya [Nama Kamu]</h1>
    <img src="foto.jpg" alt="Foto Profil">
    <p>Saya siswa SMK yang suka belajar membuat website!</p>
    <h3>Hobi Saya:</h3>
    <ul>
      <li>Ngoding</li>
      <li>Desain</li>
      <li>Game Edukasi</li>
    </ul>
    <p>Kontak saya: <a href="mailto:emailkamu@gmail.com">emailkamu@gmail.com</a></p>
  </div>
</body>
</html>

Ganti bagian teks sesuai identitas masing-masing.

Langkah 2 – Tambahkan Foto

  • Simpan foto profil di folder yang sama dengan file HTML (nama file: foto.jpg).

Langkah 3 – Lihat Hasilnya

  • Klik tombol ▶️ Run/Preview di Acode.

  • Website pribadi kamu langsung tampil di browser Android!

Langkah 4 – Kirimkan ke Guru

Siswa bisa:

  • Screenshot tampilan websitenya, atau

  • Kirim file index.html melalui Google Classroom / WhatsApp / Drive.

🧩 Tantangan Tambahan (Opsional)

  1. Tambahkan warna latar dan font berbeda.

  2. Buat link ke akun media sosial.

  3. Tambahkan foto galeri atau tabel data diri.

Silahkan mengirim kan tugas di Link dibawah ini :
tugas dikumpulkan di link


 


at

5 comments:

Subscribe to: Post Comments (Atom)

Tugas Daring: Membuat Website Pribadi Sederhana dengan Android

  Tujuan Pembelajaran Siswa memahami konsep dasar web statis (HTML & CSS) . Siswa mampu membuat halaman web pribadi sederhana meng...