cara membuat absensi kelas dengan HTML

Luthfi blc 8/24/2018
A. Pendahuluan

                                                   Assalamualikum wr.wb

     Oke bertemu lagi dengan saya kali ini saya akan membahas bagaimana cara membuat absensi kelas dengan html.

B. Latar belakang

     disini saya akan membuat absensi kelas dengan html

C. Maksud dan tujuan

      ingin tahu bagaimana cara membuat absensi kelas dengan html

D. Alat dan bahan

    *laptop
    *charger laptop
    *sublime text aplikasi

E. Pembahsan

     1. copy code berikut ke aplikasi sublime dan save as dengan format html

       
<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="img.css">
  <title>ABSENSI BRO...</title>
 </head>
 <style type="text/css">
  #footer{
   text-align: center;
   padding: 20px;
   background-color: #181818;
  }
  </style>
 <body>
  <h2 align="center" style="text-indent:50px;">SMK MUHAMMADIYAH 5 MIJEN</h2>
  <h1 style="text-indent:400px;">TEKNIK KOMPUTER DAN JARINGAN</h1>
  <table align="center" rules="rows" margin="1px;">
   <tr>
   </tr>
   <tr>
    <td></td>
   </tr>
  </table>
  <h3><center>ABSENSI KELAS</center></h3>
  <h3><center>SEMESTER GANJIL TAHUN AKADEMIK 2018/2019</center></h3>
  <br />

 <table border="0">
  <tr>
   <td align="justify" style="text-indent:440px;">Program Studi</td>
   <td style="text-indent:20px;">: Teknik Komputer dan jaringan</td>
  <tr>
    <td align="justify" style="text-indent:440px;">Kelas</td>
    <td style="text-indent:20px;">: XI/TKJ</td>
  <tr>
    <td align="justify" style="text-indent:440px;">Nama Kepala sekolah</td>
    <td style="text-indent:20px;">: Malik Arfan S.pd</td>
  </tr>
 </table>
  <br />
  <br />
 <table  width="579" border="2" align="center">
  <tr bgcolor="#181818">
   <th rowspan="2">No</th>
   <th rowspan="2">NAMA</th>
   <th colspan="100">ABSENSI</th>
  </tr>
  <tr bgcolor="#181818">
   <td align="center" width="25">A</td>
   <td align="center" width="25">S</td>
   <td align="center" width="25">I</td>
  </tr>

  <tr align="left">
   <td align="center">1</td>
   <td>YUSUF GUNAWAN</td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="left">
   <td align="center">2</td>
   <td>IRFAN ADI PRATAMA</td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="left">
   <td align="center">3</td>
   <td>NOR AHMAD BAYU FAUZI</td>
   <td></td>
   <td></td>
    <td></td>
  </tr>
  <tr align="left">
   <td align="center">4</td>
   <td>AHMAD THOHRIL LUTHFI</td>
   <td></td>
   <td></td>
    <td></td>
  </tr><tr align="left">
   <td align="center">5</td>
   <td>DANI AHMAD IZZULHAQ</td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="left">
   <td align="center">6</td>
   <td>BINTANG PAMUNGKAS</td>
   <td></td>
   <td></td>
   <td></td>
  </tr><tr align="left">
   <td align="center">7</td>
   <td>NOR ROCHMAN</td>
   <td></td>
   <td></td>
   <td></td>
 </tr>
  <tr align="left">
   <td align="center">8</td>
   <td>AGUNG SULISTYO</td>
   <td></td>
   <td></td>
    <td></td>
  </tr><tr align="left">
   <td align="center">9</td>
   <td>GILANG OKTA ERLANGGA</td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr align="left">
   <td align="center">10</td>
   <td>ABDUL LATIF</td>
   <td></td>
   <td></td>
   <td></td>
 </tr>
 </table>
 <br />
 <table border="0">
  <tr>
   <td style="text-indent:379px;">Keterangan : Absen dikumpulkan diruang guru !!</td>
  </tr>
 </table>

 <br />
 <div id="footer">
 Copyright 2018-All Rights Reserved.
 </div>
 </body>
</html>


2. ini code css nya biuat disampingnya html dengan format css

   body {
background-image: url(ik0.jpg);
background-repeat: no-repeat;
background-size: cover;
color: #00FFFF;
}


3.klik kanan mouse di htmlnya pilih open in browser

4.berikut hasilnya

       


F.  Waktu pelaksanaan

                   6jam

G. referensi

      https://fikom-uit-bk14-putuariana.blogspot.com/2017/01/cara-membuat-absen-kuliah-mengunakna.html 

H. Kesimpulan

      itulah cara gampang membuat absensi kelas

I. Penutup

   oke sekian dari saya , bila ada kesalahan saya minta maaf, semoga bermanfaat

                                                   Wassalamualikum wr.wb

Tags:

Post a Comment

0 Comments

silahkan berkomentar tentang template ini