Cara Membuat Tabel Biodata Diri Beserta Foto dengan HTML
Tugas pertama mata kuliah Pemrogaman Web 1 dapat tugas nich sob yaitu
Membuat Biodata Diri dengan HTML. oke setelah kita tahu pada postingan
sebelumnya yaitu Dasar Pemrogaman Web (HTML) dan Juga Mengerti akan Tag-Tag HTML
kali ini kita akan mempraktekkan dari tag-tag HTML yg telah kita
pelajari sebelumnya. Tugasnya disuruh Membuat Biodata Diri dengan HTML.
Lah... kita kreasikan dengan tabel beserta foto profil kita za sob. biar
terlihat rapi meski cuma dasar membuat tabel html yg masih statis.
Kurang Lebihnya nanti yang akan kita buat Tabel biodata dengan HTML
tampilanya seperti ini dr yg telah dibuat oleh penulis.
Tabel (table) pada HTML
Sekilas tentang tabel.Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table 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 pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Cara membuat tabel.
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Setelah kita tahu tentang Tabel (table) Pada HTML, nich sob script dr tampilan Tabel Biodata Diri saya Beserta Foto yg diatas dengan HTML:
<html>
<head>
<title>SUGENG SISWANTO</title>
</head>
<body>
<marquee>------------------------->Halaman Web Sederhana ini Merupakan <b>"Tugas 1"</b>... Mata Kuliah <b>"Pemrogaman Web"</b><----------------------------- </marquee>
<table width="520" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#339900" bgcolor="violet">
<tr bgcolor="silver">
<th colspan="3" height="65">
<p>DATA BIODATA SAYA</p>
</th>
</tr>
<tr>
<td width="153"><b>NAMA</b></td>
<td width="23"><div align="center" >:</div></td>
<td width="326"> SUGENG SISWANTO </td>
</tr>
<tr>
<td><b>NPM</b></td>
<td><div align="center" >:</div></td>
<td> 1412110152</td>
</tr>
<tr>
<td><b>ANGKATAN</b></td>
<td><div align="center" >:</div></td>
<td> 2011/B</td>
</tr>
<tr>
<td><b>TTL</b></td>
<td><div align="center" >:</div></td>
<td> TUBAN,14-11-1993</td>
</tr>
<tr>
<td><b>ALAMAT</b></td>
<td><div align="center" >:</div></td>
<td> Ds. Pugoh Kec. Bancar</td>
</tr>
<tr>
<td height="175"><b>RIWAYAT PENDIDIKAN </b></td>
<td><div align="center" >:</div></td>
<td><p> A.PENDIDIKAN FORMAL </p>
<table width="284" align="center" bordercolor="#000000">
<tr>
<td > i . SD/MI </td>
<td >:</td>
<td > SDN 1 PUGOH </td>
</tr>
<tr>
<td > ii . SMP/MTS </td>
<td >:</td>
<td > SMPN 1 BANCAR </td>
</tr>
<tr>
<td > iii . SMA/SMK </td>
<td >:</td>
<td > SMAN 1 JATIROGO</td>
</tr>
</table>
<p > B. NON FORMAL : DEWAN AMBALAN, OSIS</p>
</td>
</tr>
<tr>
<td><b>EMAIL</b></td>
<td><div align="center" >:</div></td>
<td>sugengsiiswanto@gmail.com</td>
</tr>
<tr>
<td><b>HOMEPAGE/BLOG</b></td>
<td><div align="center" >:</div></td>
<td> http://www.sugengsiiswanto.blogspot.com</td>
</tr>
<tr>
<td><b>HOBBY</b></td>
<td><div align="center" >:</div></td>
<td> Jalan-Jalan Di Rumah Maya</td>
</tr>
<tr bgcolor="silver">
<td height="23" colspan="3"><p><hr></p>
</td>
</tr>
<tr>
<td><b>DESKRIPSI PRIBADI</b></td>
<td align="center">:</td>
<td> Simple, Nice, Kindly</td>
</tr>
<tr>
<td><b>FOTO PROFIL </b></td>
<td align="center">:</td>
<td><div align="center"><img src="sugeng siswanto.png" alt="Sugeng Siswanto" width="250" height="200"></div></td>
</tr>
</table>
</body>
</html>
NB : Jikalau script tsb. berguna buat tugas anda silahkan di copy paste, jangan Lupa dipelajari za sob jangan asal copas aja. okay.. :-) Kreasikan dengan imajinasi anda, misal warna backgroudnya diganti, bordernya ditebelin atau ditipisin, dan lain"nya. Dan perlu diingat untuk Isi dari Nama, Npm, dst diganti yakh.. bisa-bisa klho ndak anda ganti nanti malahan saia jd terkenal dah dimana-mana . he he he :-) Lebay dikit # Just Kidding sob.
Anda juga bisa menambakan atribut-atribut html lainya sob agar tampilanya lebih menarik lagi menurut selera anda. Selamat berkreasi dengan HTML.
Tidak ada komentar:
Posting Komentar