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.
Jalan file html tersebut akan muncul seperti gambar 3 sbb :
« Baca Selengkapnya »
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.
Sunday, May 4, 2014
Aplikasi Sederhana Simpan Edit Delete dan Refresh basis Java dengan Neatbean
Maaf sobat om-bali, lama banget gak posting,,ya karena sibuk kuliah dan kerja juga, nah sekarang saya sedikit share ya sobat. salah satu tugas dari dosen dalam mata kuliah PBO II.
Dalam Program berbasis java ini, saya coba membuat aplikasi sederhana dengan database memakai mysql. sob, bs lihat view program.
Aplikasi ini masih sederhana dan bisa ditambahkan.
file lengkap download disini.
« Baca Selengkapnya »
Dalam Program berbasis java ini, saya coba membuat aplikasi sederhana dengan database memakai mysql. sob, bs lihat view program.
Aplikasi ini masih sederhana dan bisa ditambahkan.
file lengkap download disini.
Subscribe to:
Posts (Atom)