Cara Membuat Absen Dengan HTML Dan CSS

Oleh -
Membuat Absen Dengan HTML & CSS

Cara Membuat Absen dengan HTML Dan CSS

Pasti kalian sudah tau bentuk absen pada umunya itu seperti apa. Kali ini saya akan memberikan tutorial bagaimana cara membuat Absen dengan HTML dan CSS.
waktu di HTML Part 4 kalian sudah belajar bagaimana cara membuat tabel. Dan berikut adalah Codingnya :

<!DOCTYPE html>
<html>
<head>
<style>

div.a {text-align: center;}


body {background-color:gray;}

td { font-weight: bold;
       text-shadow: 1px 1px 3px;
       color: red;
       background-color: deepskyblue;}



table {border: 7px solid red;}

</style>
</head>

<body>
<div class="a">
<table border="10"cellpadding="5">
<tr>
<th colspan="3" style="color:red; background-color: yellow;"> Masukan Nama Jurusan </th>
<th rowspan="2" bgcolor="orange"> Check </th>
</tr>
<tr>
<th style="color:red; background-color:lime;"> Nama </th>
<th style="color:red; background-color:lime;"> Kelas </th>
<th style="color:red; background-color:lime;"> Jurusan </th>
</tr>
<tr>
<td> <b> ? </td> 
<td align="center"><b> ? </td>
<td><b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<th colspan="3" style="color:red; background-color: yellow;"> Masukan Nama Jurusan </th>
<th rowspan="2" bgcolor="orange"> Check </th>
</tr>
<tr>
<th style="color:red; background-color:lime;"> Nama </th>
<th style="color:red; background-color:lime;"> Kelas </th>
<th style="color:red; background-color:lime;"> Jurusan </th>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ?  </td>
<td align="center"> <b> ? </td>
<td align="center"><b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"><b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b>? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ?</td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"><b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
</table>
</body>
</html>

Hasil :


Cara Membuat Absen Dengan HTML Dan CSS


Kalian bisa mengubah tanda tanya menjadi nama kalian atau teman kalian dan nama jurusan bisa di ubah sesuai dengan jurusan kalian masing - masing.
Lokasi: Cikarang, Bekasi, Jawa Barat, Indonesia
Hai perkenalkan nama saya Pilip Mulyadi. Saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ.

Comments

Post a Comment

Popular posts from this blog

Cara membuat kalkulator dengan HTML dan CSS

Oleh -
Image
Cara Membuat Kalkulator       Hai teman-teman perkenalkan nama saya Pilip Mulyadi, saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ atau yang disebut dengan (Teknik Komputer dan jaringan). Saya suka sekali dengan web desain dan pada kesempatan kali ini saya akan memberikan sebuah materi yang berisi tentang HTML dan CSS. Semoga dengan ilmu yang saya bagikan kepada kalian semua bermanfaat.      Ok teman - teman di kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat kalkulator. Kita sudah tahu bagaimana bentuk dari sebuah kalkulator. Kalkulator ini bisa berfungsi seperti kalkulator pada umumnya. Untuk membuat kalkulator di html, kalian harus menyediakan editor teks/Notepad dan simpan dengan format html. Daripada kalian penasaran coding htmlnya seperti apa, berikut dibawah inilah codingnya : <html> <head> <style> body { background-color: gray;} div.a {text-align: center;} div.b {text-align: left;} .ckr { w...
Read more

Cara Download Aplikasi Atau Game Berbayar Menjadi Gratis

Oleh -
Image
Cara Menginstal Game Berbayar Menjadi Gratis Dalam kehidupan sehari - hari pasti kalian sudah mengetahui apa itu aplikasi. Aplikasi adalah suatu perangkat lunak (software) atau sebuah program komputer yang beroprasi pada sistem tertentu yang diciptakan dan dikembangkan untuk melakukan perintah tertentu. Pada umumnya aplikasi atau game dapat kalian temukan di Play Store atau App Store, tetapi beberapa dari aplikasi tersebut terdapat aplikasi yang harus melakukan pembayaran terlebih dahulu sebelum penginstalan dan kalian sangat menginginkan aplikasi atau game tersebut tetapi aplikasi tersebut berbayar dan pasti kalian tidak ingin mengeluarkan uang hanya untuk membeli sebuah aplikasi atau game. Ok pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara menginstal game yang berbayar menjadi gratis, tetapi ada beberapa aplikasi atau game yang tidak bisa di gratiskan contohnya seperti game Minecraft Original dari Play Store saya sudah mencobanya berkali - kali dan tidak berhasi...
Read more