Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

Cara Membuat Kartu Nama dengan Tabel Keren

Dunia Programming - Pada kesempatan kali ini saya akan membagikan sedikit penjelasan bagaimana cara membuat Kartu nama dengan sayang mudah hanya dengan menggunakan Tabel saja. oke sebelum kita masuk ke pembahasan cara membuat kartu nama dengan dengan tabel, alangkah baiknya kalian baca terlebih dahulu artikel dibawah ini.

Cara Membuat Kartu Nama dengan Tabel Keren
Cara Membuat Kartu Nama dengan Tabel Keren


Baca Juga :

Setelah kalian membaca artikel tersebut, pastinya kalian akan memahami source code, dan cara yang sata buat, cara ini cukup simpel sekali, saya cuman menggunakan beberapa style css sebagai pemanis, selebihnya saya banyak menggunakan gambar.

Dan berikut tampilan yang sudah saya buat

Membuat Kartu Nama dengan Tabel Keren
Membuat Kartu Nama dengan Tabel Keren

Keren bukan.?, Lalu bagaimana cara membuat gambar tersebut menjadi timbul.?

Baca Juga :

tanpa perlu basa-basi lagi, langsung saja kita mulia tutorialnya.

Membuat Kartu Nama dengan Tabel Keren


1). Buat folder dengan nama bebas, misalkan NamaKu
2). Setelah itu buka sublime text 3, kemudian buka folder yang sudah kalian buat
3). Buat file dengan nama index.html, kenapa kok index.html.? kok bukan yang lain, karena nama index.html akan dibaca terlebih dahulu oleh google daripada file-file yang lain, makanya, buat kalian yang baru menginjak ke bahasa pemrograman web, biasakan file utama beri nama index.html
4). Kemudian copy source code dibawah ini

<!DOCTYPE html>
<html>
<head>
 <title>Kartu Nama</title>
 <style type="text/css">
  body {
   font-family: Arial;
  }
  td {
   padding: 10px;
  }
  table {
   margin: auto;
   margin-top: 90px;
  }
 </style>
</head>
<body bgcolor="#181a1c">
 <table border="0" width="600" cellpadding="0" cellspacing="0">
  <tr>
   <th colspan="3"><img src="Header.png" width="100%"></th>
  </tr>
  <tr bgcolor="#e7e7e7">
   <td width="150">Nama Lengkap</td>
   <td width="250">Muhammad Tajuddin</td>
   <td rowspan="4"><img src="FotoMu.jpg" width="200"></td>
  </tr>
  <tr bgcolor="#e7e7e7">
   <td>Hobby</td>
   <td>Ngoding, Al Banjari, Trip</td>
  </tr>
  <tr bgcolor="#e7e7e7">
   <td>Pekerjaan</td>
   <td>Programmer</td>
  </tr>
  <tr bgcolor="#e7e7e7">
   <td>Lulusan</td>
   <td>SMK Negeri 1 Kota Pasuruan</td>
  </tr>
  <tr bgcolor="#19bd9b">
   <td colspan="3" align="center">Created By : <a href="https://www.duniaprogramming.net">Dunia Programming</a></td>
  </tr>
 </table>
</body>
</html>

Setelah source code dibawa ini kalian copy, silahkan buka file index.html kalian dan lihat hasilnya.
"Lho min, kok headernya tidak muncul min.?"
Nah lihat baris berikut :

<tr>
 <th colspan="3"><img src="Header.png" width="100%"></th>
</tr>

baris tersebut menjelaskan bahwa sistem memanggil gambar, bukan text, maka dari itu, sebelumnya kalian buat dulu headernya di photoshop dengan ukuran 600x100 pixel, untuk cara membuatnya bisa kalian baca tutorial yang sudah saya sebutkan diatas.

Bagaimana.? sangat mudah bukan.? buat kalian yang masih belum faham, silahkan sesi pertanyaan terbuka lebar buat kalian yang ingin bertanya-tanya.

Post a Comment for "Cara Membuat Kartu Nama dengan Tabel Keren"

Berlangganan via Email