Friday, October 31, 2014

Belajar HTML dengan Notepad membuat Biodata Diri

Kali ini penulis mencoba membagi beberapa hasil kerja yang mana juga sebagai tugas yang mesti dikerjakan. ini salah satu contoh membuat web html dengan notepad sederhana. mungkin sangat sederhana. bagi pemula sangatlah perlu belajar bahasa Html sebelum ke pemograman yang lebih tingi. nah, mari kita liat coding html untuk sebuah biodata diri .

 1. Pertama buat di notepad  dgn nama file home.html dan copy kode dibawah.

<html>
<head> <title>WEB DESIGN BIODATA</title>
<br>
<br>
<body >

 <h1>
<center>
<font face="Bradley Hand ITC" color="Black" fontsize="4">Perancangan Web with HTML</font>
<br>
<font face="Bradley Hand ITC" color="Black" fontsize="4">"Biodata Diri"</font>
<br>
<img><img src = "logo.png" width = "150 px" height = "150" > </img>
</center>
</h1>

 <h2>
<center>
<font face = "Comic Sans MS" Color = "Grey" size = "big" > <a href ="biodata.html"> |Biodata Diri| </a> </h2>
<br>
<br>
</h2>

 <h3>
<center>
<blink> <font face = "Comic Sans MS" Color = "Red" Font Size = "small" > Created by :</blink> </h3>
<center>
<blink> <font face = "Comic Sans MS" Color = "Red" Font Size = "small" > I KOMANG BUDI GUNAWAN </blink> </h3><br>
<center>
<blink> <font face = "Comic Sans MS" Color = "Red" Font Size = "small" > 120010012 </blink> </h3><br>
</center>
</head>
</h3>

 <br>
<br>
<footer>
<marquee> <font face = "Calibri" Color = "Brown" Font Size = "small"> Presented by om-bali.blogspot.com </marquee>
 </footer>
</html>

 jika dijalankan akan menampilkan spt gambar 1 dibawah.

                 gambar 1

 2. Selanjutnya buat di notepad juga dgn namam biodata.html, silakan copy html dibawah dan simpan file tersebut.

 <html>
<head>
<title>TABEL BIODATA</title>

 <style type="text/css">
th{
background-color:Blue;
color:white;
}
</style>

 <style type="text/css">
td{
background-color:cyan;
color:red;
}
</style>

 <style type="text/css">
.baris-ganjil{
background-color:yellow;
color:blue;
}
</style>

 </head>
<center>
 <body style="background-image:url(background.jpg)">
 <h1>BIODATA DIRI : </h1>
 <table style="width:600px;" border="1" align="center">

    <tr style="background-color:RED">
   <th>BIODATA</th>
   <th>KETERANGAN</th>
  </tr>
  <tr>
  <td>Nama</td><td style="text-align:left">I KOMANG BUDI GUNAWAN</td>
  </tr>
  <tr>
  <td class="baris-ganjil">NO HP</td><td class="baris-ganjil" style="text-align:left">081999340669</td>
  </tr>
  <tr>
  <td>Nim</td><td style="text-align:left">120010012</td>
  </tr>
  <tr>
  <td class="baris-ganjil" >Jurusan</td><td class="baris-ganjil" style="text-align:left">SISTEM KOMPUTER</td>
  </tr>
  <tr>
  <td>Jenjang</td><td style="text-align:left">S1</td>
  </tr>
  <tr>
  <td class="baris-ganjil" >Jenis Kelamin</td><td class="baris-ganjil" style="text-align:left">Laki-laki</td>
  </tr>
  <tr>
  <td>Status</td><td style="text-align:left">Belum Menikah</td>
  </tr>
  <tr>
  <td class="baris-ganjil" >Agama</td><td class="baris-ganjil" style="text-align:left">HINDU</td>
  <tr>
  <tr>
  <td>TTL</td><td style="text-align:left">BUDENG, 15 SEPTEMBER 1987</td>
  <tr>
  <tr>
  <td class="baris-ganjil" >Golongan Darah</td><td class="baris-ganjil" style="text-align:left"> O </td>
  <tr>
  <tr>
  <td>Tinggi / Berat Badan</td><td style="text-align:left"> 175 cm / 69 Kg </td>
  <tr>
  <tr>
  <td class="baris-ganjil" >Email </td><td class="baris-ganjil" style="text-align:left">budigunawan87@gmail.com</td>
  <tr>
  <td>Alamat Domisili</td><td style="text-align:left">Jl Gurami No 48 Ds Budeng Kec Negara Kab Bali</td>
  </tr>
  <tr>
  <td class="baris-ganjil" >Alamat Sekarang</td><td  class="baris-ganjil"style="text-align:left">Jl Tukad Pancoran IV No 12 Panjer Denpasar </td>
  </tr>
  <tr>
  <td>Pekerjaan</td><td style="text-align:left">Manager Marketing & Gourmet</td>
  </tr>
  <tr>
  <td class="baris-ganjil" >Photo</td><td class="baris-ganjil" style="text-align:left"><img><img src = "budi2.jpg" width = "100 px" height = "150" > </img></td>
  </tr>
  <tr>
  <td>Riwayat</td><td style="text-align:left"><a href ="detail.html"> |DETAIL| </a></td>
  </tr>
  <tr style="text-align:right;background-color:#FFCB68;font-weight:bold">
  </tr>
 <table>
 <a href ="home.html"> |Back to Home | </a>
</center>
   </body>
<footer>
<marquee> <font face = "Calibri" Color = "Brown" Font Size = "small"> Presented by om-bali.blogspot.com </marquee>
 </footer>

  </html>

 Dan jalankan file html tersebut akan menampilakn spt gambar 2.
                                gambar 2

3. Untuk selanjutnya menampailkan detail, buat file di notepad dengan nama file detail.html dan copy kode html dibawang dan simpan.

<html>
<head>
<title>DAFTAR RIWAYAT HIDUP </title>
</head>
<center>
 <body style="background-image:url(background.jpg)">
 <h1>RIWAYAT HIDUP : </h1>
 <table style="width:600px;" border="1" align="center">

   <tr style="background-color:ORANGE">
   <th>BIODATA</th>
   <th>KETERANGAN</th>
  </tr>
  <tr>
  <td COLSPAN ="2" style="background-color:cyan" COLOR:red>RIWAYAT PENDIDIKAN</td>
  </tr>
  <tr>
  <td COLSPAN ="2" style=COLOR:red>FORMAL</td>
  </tr>
  <tr>
  <td>1993-1999</td><td style="text-align:left">SD NEGERI 1 BUDENG, NEGARA , Jembrana-Bali</td>
  </tr>
  <tr>
  <td>1999-2002</td><td style="text-align:left">SMP NEGERI 1 NEGARA,  Jembrana - Bali </td>
  </tr>
  <tr>
  <td>2002-2005</td><td style="text-align:left">SMA NEGERI 1 NEGARA, Jembrana - Bali-Jurusan IPA </td>
  </tr>
  <tr>
  <td>2005-2006</td><td style="text-align:left">Wearnes Education Centre - BALI </td>
  </tr>
  <tr>
  <td>2012-Sekarang</td><td style="text-align:left">STIMIK STIKOM BALI</td>
  </tr>
  <tr>
  <td COLSPAN ="2" style=COLOR:red>NON FORMAL</td>
  </tr>
  <tr>
  <td COLSPAN ="2" > *Workshop Search Engine Optimize</td>
  <tr>
  <td COLSPAN ="2" > *Pelatihan Leardership</td>
  </tr>
  <tr>
  <td COLSPAN ="2" style=COLOR:red >KEMAMPUAN</td>
  </tr>
  <tr>
  <td>AKADEMIK</td><td style="text-align:left">Pemecahan permasalahan krusial, penilaian kritis, konseptualitas, dan keterampilan Maupun kemampuan operational motivator untuk mencapai sasaran hasil dan fleksibilitas</td>
  </tr>
  <tr>
  <td>Bahasa</td><td style="text-align:left">LANCAR - BAHASA INDONESIA | DASAR - BAHASA INGGRIS </td>
  </tr>
  <tr>
  <td>Komunikasi</td>
  <td style="text-align:left"><ul>
<li>Kemampuan berbicara dan menulis</li>
<li>Kemampuan menjalin hubungan dengan orang lain</li>
<li>Kemampuan berorganisasi</li>
<li>Kemampuan untuk meloby dan menjalin hubungan baik dengan institusi</li>
</ul>
  </td>
  </tr>

  <tr>
  <td COLSPAN ="2" style="background-color:cyan" COLOR:red>PENGALAMAN KERJA</td>
  </tr>
  <tr>
  <td COLSPAN ="2" style=COLOR:red >2006 - February 2012 : Bekerja di PT. Hardys Retailindo </td>
  </tr>
  <tr>

 <tr>
  <td>Posisi</td>
  <td style="text-align:left"><ul>
<li>Head Branch Outlet Hardys Sanur Divisi Gourmet( 2011-2012)</li>
<li>Head Branch Outlet Hardys Sanur ( 2011-2012 )</li>
<li>Deputy Head Branch Outlet Hardys Nusa Dua ( 2009-2011 )</li>
<li>Head Divisi IT, LP, Operasional Supermarket</li>
</ul>
  </td>
  </tr>
  <tr>
  <td COLSPAN ="2" style=COLOR:red >2012-Sekarang : Bekerja di PT. Karya Nirmala Utama</td>
  </tr>
  <tr>

  <tr>
  <td>Posisi</td>
  <td style="text-align:left"><ul>
<li>Manager marketing dan Gourmet</li>
</ul>
  </td>
  </tr>

  <td>KTP</td><td style="text-align:left"><img><img src = "ktp.jpg" width = "200 px" height = "150" > </img></td>
  </tr>
  <tr style="text-align:right;background-color:#FFCB68;font-weight:bold">
  </tr>
 <table>
 <a href ="biodata.html"> | BACK | </a> <a href ="home.html"> | HOME | </a>
 </center>

   </body>
<footer>
<marquee> <font face = "Calibri" Color = "Brown" Font Size = "small"> Presented by om-bali.blogspot.com </marquee>
 </footer>
</html>

 Jalan file html tersebut akan muncul seperti gambar 3 sbb :

                         gambar 3.

Selanjutnya bisa di gunakan biodata diatas, klik link Back untuk kembali dan link Home untuk kembali ke halaman awal. penulis berharap banyak masukkan karena banyak hal kurang dan perlu penyermpurnaan.
Posted by at
Labels:

16 comments:

  1. UnknownSeptember 17, 2016 at 7:44 PM

    thanks ilmunya

    ReplyDelete
  2. Tugas Bahasa ArabSeptember 30, 2016 at 9:14 AM

    mksh om ilmunya

    ReplyDelete
  3. UnknownOctober 2, 2016 at 3:43 AM

    cara ngeeliat hasilnya gimana ya?

    ReplyDelete
  4. UnknownOctober 19, 2016 at 10:50 PM

    suksme ilmunya bli komang,salam dari STMIK DIPANEGARA MAKASSAR

    ReplyDelete
  5. Aulia nurul fikriDecember 20, 2016 at 10:12 PM

    makasih m ilmunya

    ReplyDelete
  6. UnknownJanuary 3, 2017 at 9:03 AM

    trimakasih info nya sangat bermanfaat :) My blog

    ReplyDelete
  7. uzank ysMarch 14, 2017 at 2:40 AM

    nuhun Kang ilmunya... hoyong diajar tapitos kolot abdina

    ReplyDelete
  8. UnknownMay 16, 2017 at 7:07 AM

    makasih ilmunya.... bermanfaat...

    ReplyDelete
  9. inoue orihimeAugust 23, 2017 at 9:42 AM

    This comment has been removed by the author.

    ReplyDelete
  10. web dsignSeptember 4, 2017 at 5:50 AM

    terimakasih

    ReplyDelete
  11. vaiyboraOctober 28, 2017 at 6:50 PM

    The blog are the best that is extremely useful to keep.

    หนังออนไลน์

    ReplyDelete
  12. UnknownDecember 13, 2017 at 10:10 AM

    mantap gan

    http://blog.binadarma.ac.id/ay_ranius

    ReplyDelete
  13. UnknownDecember 16, 2017 at 11:44 PM

    terimakasih. Sangat membantu skali
    Jangan lupa kunjungi blog saya

    ReplyDelete
  14. anonimApril 1, 2018 at 1:11 AM

    kenapa saat klik back to home atau sebaiknya tidak mau, apakah ada yang salah ?

    ReplyDelete
  15. UnknownMay 28, 2018 at 10:03 PM

    cara tulis html dimana ya ? masih awam nih,suruh unduh xampp nah terus gimana lagi ya

    ReplyDelete

Subscribe to: Post Comments (Atom)