HTML Modul 2 Membuat Biodata Dengan Tabel
Panduanilkom - Kali ini panduanilkom akan membahas lanjutan HTML Modul 2 Membuat Biodata Dengan Tabel yang sederhana. karena banyak yang membutuhkan para pembaca contoh bagaimana membuat biodata dengan menggunakan tabel serta di tambah dengan memasukan data poto pribadi.
Pertama terlebih dahulu anda buka Notepad atau Notepad ++ dan ketikan kode di bawah ini :
Code
-----------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Judul</title>
</head>
<body bgcolor="#7CFC00">
<table border="3" style="border-collapse:collapse"width="100%" cellpadding="6"
bordercolor="red"
<tr>
<td width="20%">
<!-- ini tabel foto -->
<table border="3" style="border-collapse:collapse"width="100%"
cellpadding="50"bordercolor="red"
<tr>
<td align="center"><img border="3" height="400" width="300" src="Nama_Photo"></td>
</tr>
</table>
<p></p> <!-- untuk memberi jarak -->
<!--Ini tabel Menu -->
<table border="3" style="border-collapse"width="100%"
cellpadding="8" bordercolor="red">
<tr>
<td><a href="Nama Link.html"> Riwayat Pendidikan </a>
<td><a href="Nama Link.html"> Hobby </a>
</td>
</tr>
</table>
</td>
<!-- ini untuk kolom 2 tabel utama -->
<td valign="top"><p align="center"><marquee behavior="center"><B>PROFIL LENGKAP PEMILIK</B><p></marquee>
<table style="width:600px;" border="3" align="center">
<cellpadding="8" bordercolor="red">
<tr>
<th>Biodata</th>
<th>Keterangan</th>
</tr>
<td align="left">Nama Lengkap</td><td align="left">Nama Anda</td>
<tr>
<td align="left">Tempat/Tanggal Lahir </td><td align="left">Garut, 01 November 1996</td>
<tr>
<td align="left">Jenis Kelamin </td><td align="left">Laki-Laki</td>
<tr>
<td align="left">Alamat </td><td align="left">Kp.Ciledug</td>
<tr>
<td align="left">RT/RW</td><td align="left">001/004</td>
<tr>
<td align="left">Desa </td><td align="left">Panggalih</td>
<tr>
<td align="left">Kecamatan </td><td align="left">Cisewu</td>
<tr>
<td align="left">Agama </td><td align="left">Islam</td>
<tr>
<td align="left">Status </td><td align="left">Belum Menikah</td>
<tr>
<td align="left">Pekerjaan </td><td align="left">Mahasiswa</td>
<tr>
<td align="left">Kewarganegaraan</td><td align="left">WNI</td>
</table>
</td>
</tr>
</table>
<table cellspacing="3" align="left" cellpadding="0">
<tr>
<td align="center" width="150" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<a href="Link.html" style="font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block"><span style="color: #FFFFFF">Back To Home</span></a>
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
Anda Simpan code tersebut dengan membuat folder baru dan simpan. setelah itu anda juga bisa membuat link yang di hubungkan dengan link yang diatas, yang diberi warna merah sesuaikan dengan link yang anda mau masukan. Misalkan anda mau masukan gambar yakni dengan format "nama gambar.jpg" atau "png,gif,jpeg" format tersebut tergantung pada nama file nya. jika mau menghubungkan dengan link html lainnya maka anda gunakan "nama link.html" dan seterusnya tapi ingat kamu harus menyimpan semua file tersebut dalam satu folder yang sama.
Pantengin selalu @Panduanilkom selanjutnya akan membahas materi yang berkaitan dengan teknologi /IT
Pertama terlebih dahulu anda buka Notepad atau Notepad ++ dan ketikan kode di bawah ini :
Code
-----------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Judul</title>
</head>
<body bgcolor="#7CFC00">
<table border="3" style="border-collapse:collapse"width="100%" cellpadding="6"
bordercolor="red"
<tr>
<td width="20%">
<!-- ini tabel foto -->
<table border="3" style="border-collapse:collapse"width="100%"
cellpadding="50"bordercolor="red"
<tr>
<td align="center"><img border="3" height="400" width="300" src="Nama_Photo"></td>
</tr>
</table>
<p></p> <!-- untuk memberi jarak -->
<!--Ini tabel Menu -->
<table border="3" style="border-collapse"width="100%"
cellpadding="8" bordercolor="red">
<tr>
<td><a href="Nama Link.html"> Riwayat Pendidikan </a>
<td><a href="Nama Link.html"> Hobby </a>
</td>
</tr>
</table>
</td>
<!-- ini untuk kolom 2 tabel utama -->
<td valign="top"><p align="center"><marquee behavior="center"><B>PROFIL LENGKAP PEMILIK</B><p></marquee>
<table style="width:600px;" border="3" align="center">
<cellpadding="8" bordercolor="red">
<tr>
<th>Biodata</th>
<th>Keterangan</th>
</tr>
<td align="left">Nama Lengkap</td><td align="left">Nama Anda</td>
<tr>
<td align="left">Tempat/Tanggal Lahir </td><td align="left">Garut, 01 November 1996</td>
<tr>
<td align="left">Jenis Kelamin </td><td align="left">Laki-Laki</td>
<tr>
<td align="left">Alamat </td><td align="left">Kp.Ciledug</td>
<tr>
<td align="left">RT/RW</td><td align="left">001/004</td>
<tr>
<td align="left">Desa </td><td align="left">Panggalih</td>
<tr>
<td align="left">Kecamatan </td><td align="left">Cisewu</td>
<tr>
<td align="left">Agama </td><td align="left">Islam</td>
<tr>
<td align="left">Status </td><td align="left">Belum Menikah</td>
<tr>
<td align="left">Pekerjaan </td><td align="left">Mahasiswa</td>
<tr>
<td align="left">Kewarganegaraan</td><td align="left">WNI</td>
</table>
</td>
</tr>
</table>
<table cellspacing="3" align="left" cellpadding="0">
<tr>
<td align="center" width="150" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<a href="Link.html" style="font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block"><span style="color: #FFFFFF">Back To Home</span></a>
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
Anda Simpan code tersebut dengan membuat folder baru dan simpan. setelah itu anda juga bisa membuat link yang di hubungkan dengan link yang diatas, yang diberi warna merah sesuaikan dengan link yang anda mau masukan. Misalkan anda mau masukan gambar yakni dengan format "nama gambar.jpg" atau "png,gif,jpeg" format tersebut tergantung pada nama file nya. jika mau menghubungkan dengan link html lainnya maka anda gunakan "nama link.html" dan seterusnya tapi ingat kamu harus menyimpan semua file tersebut dalam satu folder yang sama.
Baca Juga : HTML Modul 1 Membuat Halaman Profil WebsiteSemoga berhasil . Selamat Mencoba.
Pantengin selalu @Panduanilkom selanjutnya akan membahas materi yang berkaitan dengan teknologi /IT
bermanfaat sob
ReplyDeletetes
Delete