Selasa, 02 Oktober 2012

Contoh Script profile dalam HTML

kali ini saya akan membahas tentang trik HTML dalam pembuatan profile pada suatu web. Untuk belajar anda dapat menggunakan program HTML seperti Ms FrontPage, Dreamweaver atau Text Editor (Notepad), sesuai dengan selera anda masing-masing. Namun untuk tutorial ini akan diajarkan dengan menggunakan teks editor yang simpel yaitu Notepad, jika anda ingin teks editor yang lebih interaktif anda bisa menggunakan Notepad++.


ini contoh preview buatan saya
atau bila kurang jelas bisa di lihat di My Profile

ini contoh script nya

<html>
<head>
<title>evanbook</title>
<link rel="shortcut icon" href="http://evan-tkj-smkn1-jakarta.blogspot.com/favicon.ico" />
</head>
<body background="http://lh3.ggpht.com/_Kwwy9VyLMKw/S3qEjinawHI/AAAAAAAACyo/bCTpV-05YKw/bk_body.jpg"><br>


<center>
    
    <a href="#"><img src="http://imageshack.us/a/img171/9391/headerdmo.png" title="welcome to my home page"></a><br><br>
        
        
  <table width="860" border="none" bordercolor="#666666" background="http://imageshack.us/a/img195/4607/60033688.png">
        <tr>
<td colspan="2"><font color="#666666" size="21">
&nbsp;&nbsp;&nbsp;Welcome !</font></td>
</tr>
<tr>
<td width="200" height="213" align="center"><p><br>
 </p>
 <br>
 <p><a href="http://evan-tkj-smkn1-jakarta.blogspot.com/" style="text-decoration:none" target="i1" title="go to home">Home</a><br><br>
   <a href="#" style="text-decoration:none" target="i1" title="go to profile"> Profile</a><br><br>
   <a href="https://plus.google.com/105947161051256710832/posts" style="text-decoration:none" target="i1" title="go to contact me"> Contact Me</a><br><br>
   <a href="mailto:reza.boanerges@gmail.com?Subject=Hello%20Evan" style="text-decoration:none" title="contact me by e-mail">Send Me Mail</a></p>
 <p><br>
     </p></td>
        <td width="650" height="38" rowspan="2">
        <table width="542" height="433" border="none">
   <tr>
     <td height="28" colspan="2"><h2><font color="#666666">PROFILE</font></h2></td>
   </tr>
   <tr>
     <td width="201" height="399" align="right">
      <p>Nama Lengkap : </p>
       <p>Nama Panggilan : </p>
       <p>Sekolah : </p>
       <p>Kelas : </p>
       <p>Absen : </p>
       <p>NIS : </p>
       <p>NISN : </p>
       <p>No STTB : </p>
       <p>Jenis Kelamin       : </p>
       <p>Tanggal Lahir : </p></td>
     <td width="331"> <p>Devangga Reza Suksmana</p>
       <p>Evan</p>
       <p>1 Vocational High International School Boedi Oetomo</p>
       <p>XII Komputer 1</p>
       <p>22</p>
       <p>201016031</p>
       <p>9950942488</p>
       <p>DN - 01 DI 0001361</p>
       <p>Laki - laki</p>
       <p>4 April 1995</p></td>
   </tr>
   </table>
        </td>
</tr>
        <tr>
        <td height="251"><center>
          <a href="http://www.smkn1jakarta.net/"><img src="http://imageshack.us/a/img341/1425/bdtq.png"></a>
        </center></td>
        </tr>
        <tr>
        <td height="91" colspan="2" align="center"><font color="silver">     
        Copyright <a href="http://evan-tkj-smkn1-jakarta.blogspot.com/" title="evanbook" style="text-decoration:none">Laptop si Evan</a><br>
        Brought to you by <a href="http://www.facebook.com/devangga.reza" title="Facebook page" target="_blank" style="text-decoration:none">Devangga R Suksmana </a></font></td>
        </tr>
 </table>
</center>
</body>
</html>

perlu diketahui semua yang saya tuliskan di sini boleh di copy atau edit sesuka anda karna blog ini memang untuk proses pembelajaran.
untuk script yang berwarna merah silahkan diganti dengan gambar favorit anda.
dan untuk script yang berwarna kuning silahkan diganti dengan biodata anda.
jika ada bagian yang sulit dimengerti, bisa hubungi saya melalui e-mail ataupun jejaring sosial.
terimakasih semoga membantu.

3 komentar:

  1. Kak aku mau nanya bagaimana cara mengganti nama asal sekolah yang ada di atas logo sekolah itu kak.?

    BalasHapus
    Balasan
    1. ya tinggal di apus aja asal sekolah yang lama dan diganti menjadi asal sekola yang baru

      Hapus

 
| Laptop si Evan | Laptop si Evan | Laptop si Evan | Laptop si Evan | Laptop si Evan | Laptop si Evan | Laptop si Evan | Laptop si Evan | Laptop si Evan | Laptop si Evan |