MEMBUAT RANGKAIAN LAMPU STROBO DENGAN ARDUINO

Dalam pembelajaran informatika kelas 12, siswa tidak hanya diajak memahami teori pemrograman, tetapi juga bagaimana ilmu tersebut dapat diterapkan secara nyata dalam kehidupan sehari-hari. Salah satu proyek sederhana namun menarik adalah membuat lampu strobo menggunakan Arduino Uno.

Proyek ini memanfaatkan papan mikrokontroler Arduino Uno yang diprogram untuk mengatur nyala dan padam LED dengan kecepatan tertentu sehingga menghasilkan efek cahaya strobo, mirip dengan yang sering digunakan pada pertunjukan musik atau pencahayaan khusus. Dengan menyusun rangkaian sederhana—menghubungkan LED, dan kabel jumper—serta menuliskan kode program di Arduino IDE, siswa dapat langsung melihat hasil kerjanya dalam bentuk lampu yang berkedip cepat.

Melalui kegiatan ini, siswa belajar menghubungkan logika pemrograman dengan perangkat keras, sekaligus melatih kreativitas dalam merancang variasi kedipan, kecepatan, maupun pola cahaya. Proyek lampu strobo bukan hanya seru untuk dicoba, tetapi juga membuka wawasan siswa tentang bagaimana teknologi embedded system bekerja di dunia nyata.

Skematik Strobo

Script Arduino

int m1 = 2; int m2 = 3; int m3 = 4; int m4 = 5; int m5 = 6; int b1 = 7; int b2 = 8; int b3 = 9; int b4 = 10; int b5 = 11; void setup() { // put your setup code here, to run once: pinMode(m1,OUTPUT); pinMode(m2,OUTPUT); pinMode(m3,OUTPUT); pinMode(m4,OUTPUT); pinMode(m5,OUTPUT); pinMode(b1,OUTPUT); pinMode(b2,OUTPUT); pinMode(b3,OUTPUT); pinMode(b4,OUTPUT); pinMode(b5,OUTPUT); } void loop() { // put your main code here, to run repeatedly: //========================================================================================== Flash Kanan Kiri ============================================= digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,HIGH); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,HIGH); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,HIGH); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); //============================================================================================ digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,HIGH); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,HIGH); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,HIGH); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); //======================================================================== digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,HIGH); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,HIGH); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,HIGH); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); //============================================================================================ digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,HIGH); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,HIGH); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,HIGH); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); //======================================================================================== Running masuk =================================== digitalWrite(m1,HIGH); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,HIGH); digitalWrite(b1,HIGH); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); //============================================================================= Running Keluar ====================================================== digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); //======================================================================================== Running masuk =================================== digitalWrite(m1,HIGH); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,HIGH); digitalWrite(b1,HIGH); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); //============================================================================= Running Keluar ====================================================== digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,HIGH); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,HIGH); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,HIGH); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,HIGH); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,HIGH); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,HIGH); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,HIGH); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,HIGH); delay(100); digitalWrite(m1,LOW); digitalWrite(m2,LOW); digitalWrite(m3,LOW); digitalWrite(m4,LOW); digitalWrite(m5,LOW); digitalWrite(b1,LOW); digitalWrite(b2,LOW); digitalWrite(b3,LOW); digitalWrite(b4,LOW); digitalWrite(b5,LOW); delay(100); }

Read More

BERPIKIR KOMPUTASIONAL KELAS X

Di era digital, kemampuan berpikir komputasional menjadi keterampilan penting yang harus dimiliki siswa. Berpikir komputasional bukan sekadar belajar kode, tetapi bagaimana kita melatih otak untuk menyelesaikan masalah secara logis, sistematis, dan efisien.

Salah satu penerapannya terlihat pada searching dan sorting. Searching mengajarkan kita cara menemukan informasi dengan cepat di tengah banyak data, seperti mencari file di komputer atau kata kunci di mesin pencari. Sedangkan sorting melatih kita mengurutkan data agar lebih mudah dipahami, misalnya mengurutkan nilai siswa dari tertinggi hingga terendah atau mengatur nama berdasarkan abjad.

Konsep lain yang tak kalah penting adalah stack dan queue. Stack bekerja dengan prinsip Last In First Out (LIFO), mirip dengan tumpukan piring—piring terakhir yang ditaruh di atas akan dipakai lebih dulu. Sementara queue menggunakan prinsip First In First Out (FIFO), sama seperti antrean di kasir, di mana siapa yang datang lebih dulu akan dilayani terlebih dahulu.

Melalui pemahaman sederhana ini, siswa tidak hanya belajar algoritma, tetapi juga menanamkan cara berpikir terstruktur dalam menghadapi permasalahan sehari-hari. Inilah inti literasi digital: tidak sekadar menggunakan teknologi, tetapi memahaminya dengan cara berpikir yang cerdas dan kritis.

MATERI PRESENTASI

https://bab2-berpikir-komputasio-ukog58n.gamma.site/

Pengumpulan LKPD hasil literasi digital Berpikir Komputsional

KELAS XA

https://drive.google.com/drive/folders/1l7u1g4i5LO7abm5LnwWvU9TdwyCurz0v?usp=sharing

KELAS XB
https://drive.google.com/drive/folders/1gXB-JvuxhS38xJqohRXD2o14EhQGTr4R?usp=sharing

Read More

SISTEM KOMPUTER KELAS 12 SEMESTER 1 - PENGANTAR ARDUINO

Arduino adalah platform elektronik berbasis mikrokontroler yang dirancang agar mudah digunakan, baik oleh pemula maupun pengembang berpengalaman. Dengan Arduino, kita dapat membuat berbagai proyek interaktif seperti sensor suhu, lampu otomatis, hingga robot sederhana. Keunggulan Arduino terletak pada kemudahan pemrograman dan ketersediaan banyak pustaka (library) yang siap digunakan.

Sebelum mulai membuat program pada papan Arduino, kita perlu menginstal perangkat lunak bernama Arduino IDE (Integrated Development Environment) di komputer. Arduino IDE adalah aplikasi yang digunakan untuk menulis kode, mengompilasi, dan mengunggah program ke papan Arduino.

Cara Instalasi Arduino IDE:

1. Unduh Arduino IDE
   Kunjungi situs resmi Arduino di https://www.arduino.cc/en/software. Pilih versi sesuai sistem operasi yang digunakan (Windows, macOS, atau Linux).

2. Proses Instalasi

   • Untuk Windows: jalankan file installer yang sudah diunduh, lalu ikuti langkah-langkah instalasi dengan menekan tombol Next hingga selesai.

   • Untuk macOS: cukup seret ikon Arduino IDE ke folder Applications.

   • Untuk Linux: ekstrak file yang diunduh, kemudian jalankan file install.sh.

3. Hubungkan Papan Arduino
   Setelah instalasi selesai, sambungkan papan Arduino (misalnya Arduino Uno) ke komputer menggunakan kabel USB.

4. Pengaturan Awal
   Buka Arduino IDE, kemudian pilih jenis papan (Board) dan port USB yang sesuai pada menu Tools.

Setelah semua langkah di atas selesai, Arduino IDE sudah siap digunakan untuk menulis program pertama. Sebagai latihan awal, kita bisa mencoba program sederhana Blink untuk menyalakan dan mematikan LED bawaan pada papan Arduino.

MATERI PRESENTASI

1. Pengenalan Sistem Komputer.

https://docs.google.com/presentation/d/1fS2CBqnP5yI0LvtrR9LowJ9xQjQCQk2T/edit?usp=sharing&ouid=101129253085954039145&rtpof=true&sd=true

2. Pengenalan Arduino - Single Board Computer & Single Board Controller.  

https://docs.google.com/presentation/d/1ns_ZeMdnkCnvUYFwu4X-WhlMBMLH1e1Z/edit?usp=sharing&ouid=101129253085954039145&rtpof=true&sd=true

Read More

Membuat tampilan website sederhana menggunakan kode HTML [Kelas XI]

Hari ini, siswa kelas XI melakukan praktik membuat halaman website sederhana menggunakan bahasa HTML. Kegiatan dimulai dengan mengenal struktur dasar dokumen HTML, mulai dari <html>, <head>, hingga <body>.

Siswa kemudian menambahkan elemen-elemen dasar seperti judul halaman, teks paragraf, gambar, dan tautan. Tujuannya adalah agar mereka memahami bagaimana setiap tag HTML memiliki fungsi tertentu dalam membangun tampilan dan isi halaman.

Melalui praktik ini, siswa belajar bahwa membuat website tidak selalu membutuhkan software canggih. Cukup dengan teks editor sederhana dan browser, mereka sudah bisa menciptakan halaman web sendiri. Semoga keterampilan ini menjadi langkah awal untuk mengembangkan kreativitas dan kemampuan di bidang teknologi.

latihan6.html 

<html> 

<head> 

   <title> .:: SITUSKU ::. </title> 

</head> 

<body bgcolor="#000000" text="#FFFFFF"> 

 <table border="1" align="center" width="80%"> 

     <tr> 

  <td colspan="2" align="center" height="100" bgcolor="#3A2BD1"> 

           <font size="16" face="Arial">SITUSKU.COM </font><br> 

   <hr width="500"> <br> 

<marquee direction="right">Terdepan Dalam Berita dan 

Gosip</marquee> 

  </td> 

     </tr> 

     <tr valign="top"> 

                 <td width="200" height="450" bgcolor="green">

 

Home <br>

<a href=informatika.html>

Informatika</a>

 

</td> 

  <td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b> <br> 

Situsku.Com akan selalu konsisten dengan berita-berita terbaru dari 

segala penjuru Indonesia.<br><br> 

Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip 

artis dan kuliner di Indonesia. 

            </td> 

    </tr> 

 </table> 

</body> 

</html> 

informatika.html

<html> 

<head> 

   <title> .:: SITUSKU ::. </title> 

</head> 

<body bgcolor="#000000" text="#FFFFFF"> 

 <table border="1" align="center" width="80%"> 

     <tr> 

  <td colspan="2" align="center" height="100" bgcolor="#3A2BD1"> 

           <font size="16" face="Arial">SITUSKU.COM </font><br> 

   <hr width="500"> <br> 

<marquee direction="right">Terdepan Dalam Berita dan 

Gosip</marquee> 

  </td> 

     </tr> 

     <tr valign="top"> 

                 <td width="200" height="450" bgcolor="green">

 

<a href=latihan6.html>Home</a> <br>

Informatika

 

 

</td> 

 

  <td bgcolor="#F75454">Halaman Informatika <b><i>

            </td> 

    </tr> 

 </table> 

</body> 

</html>

Ketentuan Pengumpulan Tugas:

Semua file latihan Kode HTML mulai dari file:

Folder 1 berisi:

    - latihan.html

    - latihan2.html

    - latihan3.html

    - latihan4.html

    - latihan5.html

    - latihan6.html

Folder 2 berisi:

    - home.html

    - profile.html

    - gallery.html

    - gambar.jpg

Kedua folder dimasukkan ke dalam satu folder dan diberi nama kemudia upload ke alamat di bawah ini!

KELAS 11A

https://drive.google.com/drive/folders/1aaw5_V3pzaMAzx92uera0wLDHf8s9LEf?usp=sharing

KELAS 11B

https://drive.google.com/drive/folders/1LbNXzrVO8zEBnHGgPupIo-QPbyQHhf1k?usp=sharing

Materi selanjutnya: https://informatikasegar.blogspot.com/2025/09/konfigirasi-xampp-server-kelas-11.html

Read More

LATIHAN MEMBUAT TABEL (HTML) KELAS XI

Kali ini, siswa kelas 11 mempraktikkan cara membuat tabel menggunakan bahasa markup HTML. Tabel adalah elemen penting di halaman web untuk menampilkan data secara terstruktur. Siswa mempelajari tag dasar seperti <table>, <tr> (table row), <th> (table header), dan <td> (table data).

Kami memulai dengan contoh sederhana — membuat tabel daftar nilai mata pelajaran. Langkah demi langkah, siswa mengetikkan kode di editor, menyimpan file dengan ekstensi .html, lalu melihat hasilnya di browser. Dari sini, mereka mulai memahami bagaimana baris dan kolom tersusun, serta bagaimana menambahkan border, menggabungkan sel, atau memberi warna latar menggunakan atribut dan CSS sederhana.

Praktik ini bukan hanya melatih keterampilan teknis, tetapi juga membiasakan siswa untuk berpikir terstruktur dalam menyajikan informasi. Dari tabel nilai, siapa tahu besok mereka bisa membuat tabel jadwal, katalog produk, atau data statistik di situs web mereka sendiri.

<html> 

<head> 

   <title> Latihan Table </title> 

</head> 

<body> 

Tabel 1

 <table border="1" width="500"> 

   <tr> 

      <td align="center">1</td> 

      <td align="center">2</td> 

      <td align="center">3</td> 

  </tr> 

  <tr>

      <td align="center">4</td> 

      <td align="center">5</td> 

      <td align="center">6</td> 

  </tr>

  <tr>

      <td align="center">7</td> 

      <td align="center">8</td>

      <td align="center">9</td>   

  </tr>

</table>

 <p> 

 Hasil Preview kode HTML tabel 1:

1	2	3
4	5	6
7	8	9

 Tabel 2

 <table border="1" width="500"> 

  <tr> 

      <td align="center">1</td> 

      <td colspan="2" align="center">2</td> 

  </tr> 

  <tr>

      <td align="center">3</td> 

      <td align="center">4</td> 

      <td align="center">5</td> 

  </tr>

  <tr>

      <td colspan="2" align="center">6</td> 

      <td align="center">7</td>   

  </tr>

</table> 

<p>

Hasil Preview kode HTML tabel 2:

1	2
3	4	5
6		7

 

Tabel 3

<table border="1" width="500"> 

  <tr> 

      <td colspan="3" align="center">1</td> 

  </tr> 

  <tr>

      <td colspan="2" align="center">2</td> 

      <td align="center">3</td> 

  </tr>

  <tr>

      <td align="center">4</td> 

      <td align="center">5</td>

      <td align="center">6</td>   

  </tr>

</table> 

<p>

Hasil Preview kode HTML tabel 3:

1
2		3
4	5	6

Tabel 4

<table border="1" width="300"> 

  <tr> 

      <td rowspan="2" align="center">1</td> 

      <td align="center">2</td> 

  </tr> 

  <tr>

      <td align="center">3</td> 

  </tr>

</table> 

<p>

Hasil Preview kode HTML tabel 4:

1	2
	3

 

Tabel 5

<table border="1" width="300"> 

  <tr> 

      <td align="center">1</td> 

      <td rowspan="2" align="center">2</td> 

  </tr> 

  <tr>

      <td align="center">3</td> 

  </tr>

</table> 

<p>

Hasil Preview kode HTML tabel 5:

1	2
3

Tabel 6

 <table border="1" width="600"> 

   <tr> 

      <td align="center" width="200">1</td> 

      <td colspan="2" align="center" width="400">2</td> 

   </tr> 

   <tr>

      <td align="center">3</td> 

      <td colspan="2" align="center"> 

  

          <table border="1" width="350">

              <tr>

<td colspan="2" align="center">4</td>

              </tr>

              <tr>

<td align="center">5</td>

<td align="center">6</td>

              </tr>

          </table>

      </td> 

  </tr>

  <tr>

      <td colspan="2" align="center"> 

          <table border="1" width="350">

    <tr>

<td rowspan="2">7</td>

<td align="center">8</td>

    </tr>

    <tr>

<td align="center">9</td>

    </tr>

          </table>

      </td> 

      <td align="center" width="200">10</td>   

  </tr>

  </table> 

Hasil Preview kode HTML tabel 6:

1	2
3	4 5 6
7 8 9		10

</body>

</html>

Read More