Tif 12B

Teknik Informatika 12B UNIROW Tuban-Jawa Timur

Cara Membuat Tabel Biodata Diri Beserta Foto dengan HTML

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
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 :-)

Membuat Tabel Biodata Diri Beserta Foto dengan HTML

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>  /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
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.



Previous
Next Post »
29 Komentar untuk "Cara Membuat Tabel Biodata Diri Beserta Foto dengan HTML"

Wah makasih ya :) makasih banget!

makasih ya ka, atas artikel ini aku jadi lebih mudah mengerjakan tugas sekolah :)

thanks ya izin copas buat tugas tapi aku ganti beberapa kok

bisa gan, bisa ditambahi css tambah cakep :)

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?

This comment has been removed by the author. - Hapus

template by kuncidunia gan. searching ja.

cara memasanga foto gmna gan?

This comment has been removed by the author. - Hapus

gmna bro cara bikin biodata di atas profil

Kk, cara membuat profil desain web gimana ya kak? Tolong kak dibantu

Terima Kasih Sudah Berkomentar
 
Copyright © 2012 - Sekarang Tif 12B - All Rights Reserved
Template By Kuncidunia