PERHATIAN : Penulis Sekedar Berbagi Pengetahuan melalui tulisan ini. Kiranya bermanfaat Silahkan diBagikan, Namun Harus menyertakan Link sumber
Kunjungi Channel : = > YOUTUBE(Video Menarik), Jangan Lupa Subscribe/Langganan Untuk mendapatkan Video Menarik dan bermanfaat
Kunjungi Channel : = > YOUTUBE(Video Menarik), Jangan Lupa Subscribe/Langganan Untuk mendapatkan Video Menarik dan bermanfaat
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 (maaf sengaja fotonya disensor - Takut ada yg Naksir ). he he. Just Kidding sob :-)
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> |
<td> /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 Kab.Tuban</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>sugengmyid@gmail.com</td>
</tr>
<tr>
<td><b>HOMEPAGE/BLOG</b></td>
<td><div align="center" >:</div></td>
<td> http://www.sugengsis.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>
Atau Download File Lengkapnya=> disini
Anda juga bisa menambakan atribut-atribut html lainya sob agar tampilanya lebih menarik lagi menurut selera anda. Selamat berkreasi dengan HTML.
</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 Kab.Tuban</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>sugengmyid@gmail.com</td>
</tr>
<tr>
<td><b>HOMEPAGE/BLOG</b></td>
<td><div align="center" >:</div></td>
<td> http://www.sugengsis.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>
Atau Download File Lengkapnya=> disini
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.
29 Komentar untuk "Cara Membuat Tabel Biodata Diri Beserta Foto dengan HTML"
asiek :D
ada yg sama dgn e-ktp ngga
ada gan..
Wah makasih ya :) makasih banget!
Same-same. :)
makasih ya ka, atas artikel ini aku jadi lebih mudah mengerjakan tugas sekolah :)
makasih iya gan
ok,, semoga bermanfaat. :)
sama-sama gan :-)
Klo pake div tag bisa gak om?
thanks ya izin copas buat tugas tapi aku ganti beberapa kok
Thanks izin copas gan
terimakasih gan :)
bisa gan, bisa ditambahi css tambah cakep :)
yups.. smg brmanfaat
yoi sob
sama" gan :)
kalo tag untuk mengubah warna font di dalam tabel gimana ya om? saya coba kok gk bisa. warna nya tetep hitam :3
tambahi aja tag font color gan. contoh ini :
<font color="red">Font dengan warna merah</font>
tinggal di edit aja gan susunanya.
monggo di custom saja. :)
agan kalau boleh tau template yang agan pake di website ini apa?
template by kuncidunia gan. searching ja.
cara memasanga foto gmna gan?
Thanks infonya
Sikat Miring :D
gmna bro cara bikin biodata di atas profil
Kk, cara membuat profil desain web gimana ya kak? Tolong kak dibantu