Beranda Tutorial [ Tutorial ] Membuat Table Dan Membuat Animasi Di Notepad

[ Tutorial ] Membuat Table Dan Membuat Animasi Di Notepad

03.34
A+ A- Print Email
Tutorial yang saya berikan kali ini mengenai edit mengedit, yang saya post kali ini tutorial membuat tabel nilai seperti nilai ujian gitu deh, dan membuat animasi untuk mempercantik tampilannya. Tabel sangat diperlukan  kita untuk menampilkan data-data berbentuk kolom. Dulu sebelum adanya CSS, tabel digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengolahan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

HTML banyak sekali digunakan untuk menyusun objek, gambar, tulisan, layout, bidang ruang, tampilan halaman dan masih banyak yang lainnya. Apabila Anda sedang mempelajari pemrograman web dengan PHP, maka tidak akan terlepas dari HTML dan database. Dari database tersebut, tentu berbentuk sebuah tabel. Oleh karena itu sangat penting bagi kita mengetahui kode yang merupakan elemen pemasangan sebuah tabel.

Yang mau saya praktekan kali ini adalah cara membuat tabel nilai, berikut ini adalah contoh pemasangan dari tabel nilai. Sebelum kita ke tutorial pembuatannya, ada baiknya Anda mengetahui perintah kode-kode yang berhubungan dengan tabel :

<table> : digunakan untuk tanda awal pembuatan tabel.
<tr> : digunakan sebagai tanda baris awal, tr ini singkatan dari table row
<th> : digunakan untuk membuat tampilan kolom header tabel, sedangkan th singkatan dari table head
<td> : digunakan untuk menyusun kolom data, td adalah singkatan dari table data
INFO :
- Jangan lupa anda akhiri tag tersebut dengan tanda slash </
- Contoh penggunaannya <table> diakhiri dengan </table>

Atribut pendukung table lainnya:
align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk membuat tebal garis
border-color : untuk memberikan tebal garis menjadi bewarna
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak setiap cell
bgcolor : untuk memberikan warna pada background
background : untuk mengatur latar gambar
rowspan : jumlah garis yang memotong beberapa baris
colspan : jumlah garis yang memotong beberapa kolom
Berikut ini adalah contoh yang sudah saya edit dengan saya berikan animasi sedikit didalamnya :D

Table Nilai

Membuat Table di Notepad

Berikut ini adalah kode html yang sudah saya buat untuk Anda belajar sendiri :
<html>
<head>
<title> My Tutorial LOSTCIPS.COM </title>
</head>
<body text="#FF1493">
<center><p><a href="Project2.html" title="Disain HTML By AFRIZA"><h1> Created By LOSTCIPS.COM </h1></a></p></center>
<marquee align="center" behavior="alternate"><b> Welcome To Tutorial Lostcips.com </b></marquee>
<table align="center" width="750" border="1" cellspacing="0" cellpadding="5">
<tr>
<th height="40" rowspan="2" bgcolor="Orange"> Nomer </th>
<th height="40" rowspan="2" bgcolor="Orange"> Nama </th>
<th height="40" rowspan="2" bgcolor="Orange"> Kelas </th>
<th width="250" colspan="4" height="41" bgcolor="Orange"> Nilai </th>
</tr>
<tr>
<td align="center"> PAI </td>
<td align="center"> Tikom </td>
<td align="center"> Produktif </td>
<td align="center"> KWH </td>
<td align="center"> B.Inggris </td>
<td align="center"> IPS </td>
<td align="center"> Fisika </td>
<td align="center"> Kimia </td>
</tr>
<tr>
<td align="center"> 1 </td>
<td align="center"> Afriza </td>
<td align="center"> XI TKJ B </td>
<td align="center"> 100 </td>
<td align="center"> 100 </td>
</tr>
<tr>
<td align="center"> 2 </td>
<td align="center"> Aldi </td>
<td align="center"> XI TKJ B </td>
<td align="center"> 0 </td>
<td align="center"> 0 </td>
</tr>
<tr>
<td align="center"> 3 </td>
<td align="center"> Rehan </td>
<td align="center"> XI TKJ B </td>
<td align="center"> 0 </td>
<td align="center"> 0 </td>
</tr>
<tr>
<td align="center"> 4 </td>
<td align="center"> Sarip </td>
<td align="center"> XI TKJ B </td>
<td align="center"> 0 </td>
<td align="center"> 0 </td>
</tr>
<tr>
<td align="center"> 5 </td>
<td align="center"> Adit </td>
<td align="center"> XI TKJ B </td>
<td align="center"> 0 </td>
<td align="center"> 0 </td>
</tr>
<tr>
<td align="center"> 6 </td>
<td align="center"> Eji </td>
<td align="center"> XI TKJ B </td>
<td align="center"> 0 </td>
<td align="center"> 0 </td>
</tr>
<tr>
<td align="center"> 7 </td>
<td align="center"> Warno </td>
<td align="center"> XI TKJ B </td>
<td align="center"> 0 </td>
<td align="center"> 0 </td>
</tr>
</table>
<p> Thanks To Mbah Google </p>
<p align="right"> Thanks To LOSTCIPS.COM </p>
</body>
</html>
INFO :
-  Contoh ini ada beberapa yang saya hapus, karna saya ingin Anda membuat dengan kemampuan Anda sendiri dan tidak hasil dari copas atau Copy Paste :D.
- Anda juga bisa mengganti kata-kata seperti nama, nomer, dan kelas sesuai dengan keinginan Anda.

Membuat Animasi di HTML

Untuk penambahan animasi yang saya pakai seperti gambar di atas Anda hanya cukup memberikan kode animasi yang anda inginkan di html yang Anda buat, berikut adalah kode animasi yang saya pakai :
Champion

Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.lostcips.com/" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002068C.gif" title="Click to get more." /></a><small><center><a href="http://christiantatelu.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
Menangis
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.lostcips.com/" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020461.gif" title="Click to get more." /></a><small><center><a href="http://christiantatelu.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
Pintu
Script:
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.lostcips.com/" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203D1.gif" title="Click to get more." /></a><small><center><a href="http://christiantatelu.blogspot.com" target="_blank">Animasi Blog</a></center></small></div>
Jika Anda rasa sudah cukup bagus dan rapih, Anda bisa Save hasil karya Anda dengan cara File > Save. Atau bisa juga dengan cara memencet CTRL+S dengan fotmat .html, Contoh : Project1.html.

Saya harap Anda menghargai karya saya ini dengan cara share artikel ini kepada teman Anda di media social seperti Facebook, Twitter, dan lain sebagainya. Demikian cara pembuatan table kali ini semoga bermanfaat bagi kalian semua.
Label:

Posting Komentar

Langganan: Posting Komentar (Atom)
[blogger]

Author Name

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.