Hy guys , Welcome to my blog

Rabu, 26 Maret 2014

Contoh membuat CV dengan HTML

Contoh membuat CV dengan HTML

Dipertemuan kemarin pada mata kuliah pemrograman web saya disuruh membuat CV dengan html. Nah, untuk kali ini saya ingin membagikan apa yang sudah saya dapatkan meskipun hanya sedikit.

Kali ini saya membuat CV html dengan menggunakan notepad++. Saya akan membuat CV sederhana yang berisikan identitas pribadi dan riwayat pendidikan. Berikut adalah contoh tag htmlnya :

<html>
<head>
<title>Tugas Pemrograman Web</title>
</head>
<body style= "background-color:pink">
<div style="background-color:pink">
<form action="" method="post">
<h1 align="left">Biodata Pribadi</h1>
<hr>
<table border="0">
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type="text" name="Nama" size="35" value="Nur Asri Setyo Wardani" /></td>
</tr>

<tr>
<td>Nama Panggilan</td>
<td>:</td>
<td><input type="text" name="Alamat" size="35" value="Asri" /></td>
</tr>


<tr>
<td>Tempat Tanggal Lahir</td>
<td>:</td>
<td><input type="text" name="Alamat" size="35" value="Sragen , 15 April 1996" /></td>
</tr>

<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="radio" name="Kelamin" value="Laki-laki" />
Laki-Laki
<input type="radio" name="Kelamin" value="Perempuan" />
Perempuan</td>
</tr>

<tr>
<td>Agama</td>
<td>:</td>
<td><select name="select">
<option>Islam</option>
<option>Kristen Protestan</option>
<option>Kristen Khatolik</option>
<option>Hindu</option>
<option>Budha</option>
</td>
</tr>
<tr>
<td valign="top">Alamat</td>
<td valign="top">:</td>
<td valign="top"><textarea cols="25" rows="5">Karanglegi RT.01/06 . Tangkil . Sragen . Jawa Tengah</textarea></td>
</tr>

<tr>
<td valign="top">Riwayat Pendidikan Formal</td>
<td valign="top">:</td>
<td valign="top"><textarea cols="25" rows="5">TK Pertiwi Tangkil , Sragen
SDN Tangkil 1 Sragen
SMP Muhammadiyah 1 Sragen
SMA Muhammadiyah 1 Sragen</textarea></td>
</tr>

<tr>
<td valign="top">Riwayat Pendidikan Nonformal</td>
<td valign="top">:</td>
<td valign="top"><textarea cols="25" rows="5">Kursus di LPIKOM Center
</textarea></td>
</tr>

<tr>
<td>Hobi</td>
<td>:</td>
<td><input type="checkbox" name="Olahraga" value="olahraga" />
olahraga
<input type="checkbox" name="Membaca" value="Membaca" />
Membaca
<input type="checkbox" name="komputer" value="Komputer" />
Komputer
<input type="checkbox" name="Musik" value="Musik" />
Musik
<input type="checkbox" name="Lain-lain" value="Lain-Lain" />
Lain-Lain</td>
</tr>
<tr>
<td valign="top">Motto</td>
<td valign="top">:</td>
<td valign="top"><textarea cols="25" rows="5">Isikan motto anda disini</textarea></td>
</tr>
<tr>
<td colspan="2"></td>
<td><input type="reset" name="reset" /><input type="submit" name="Submit" /></td>
</tr>
</table>
</form>
<body>
</body>
</html>



Hasilnya seperti ini :





          Hasil diatas belum terlalu sempurna karena belum lengkap dan saya juga masih belajar membuatnya J
Diposting oleh Unknown di 08.09 0 komentar

Cara membuat HTML dengan Notepad++

Cara Membuat HTML dengan Notepad++

Untuk belajar membuat HTML tidak harus ada software dreamweaver atau yang lainnya, kita bisa menggunakan notepad dan web browser. Untuk HTML editor kita bisa menggunakan notepad , dan untuk browser bisa menggunakan Mozilla Firefox yang sudah ada di computer atau laptop.

Di notepad untuk memasukkan tag HTML , dan di browser untuk melihat hasil halaman HTML itu sendiri. Nah , sekarang kita mulai caranya :

1.     Buka aplikasi notepad pada computer atau laptop anda
2.     Ketikan kode atau tag HTMLnya , misalkan :

<html>
<head>
<title>Tugas Pemrograman Web</title>
</head>
<body style= "background-color :pink">
<div style= "background-color :white" align="center"><h1>CURICULUM VITAE</h1>
</div>
<div style="margin-left:150;">
<h2>Identitas Pribadi</h2>
<table width="500">
<tr>
<td>Nama </td>
<td> : Nur Asri Setyo Wardani </td>
<td rowspan="6" height="100">
</td></tr>
<tr>
<td>Tempat, tanggal lahir </td>
<td> : Sragen, 15 April 1996 </td>
</tr>
<tr>
<td>Jenis Kelamin   </td>
<td> : Perempuan </td>
</tr>
<tr>
<td>Agama </td>
<td> : Islam </td>
</tr>
<tr>
<td>Alamat </td>
<td> : Karanglegi RT.01/06 , Tangkil , Sragen , Jateng</td>
</tr>
<tr>
<td>Email </td>
<td> : Asrisetyawardani@gmail.com</td>
</tr>
</table>
<h2>Riwayat Pendidikan</h2>
<ul>
<li>Pendidikan Formal</li>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="450">
<tr>
<td><b>Tingkatan Pendidikan<b/></td>
<td><b>LULUS</b></td>
</tr>
<tr>
<td>TK Pertiwi</td>
<td>2002</td>
</tr>
<tr>
<td>SDN Tangkil 1</td>
<td>2007</td>
</tr>
<tr>
<td>SMP Muh 1 Sragen</td>
<td>2010</td>
</tr>
<tr>
<td>SMA Muh 1 Sragen</td>
<td>2013</td>
</tr>
<tr>
<td>STMIK AMIKOM Yogyakarta</td>
<td>Masih dalam perkuliahan semester 2</td>
</tr>
</table>
<br/>
</body>
</html>




3.     Save file yang sudah dibuat. Simpan file dengan nama coba.html jangan tambahkan tanda petik (“) , jika ditambahkan tanda petik maka file yang tersimpan akan menjadi file dengan ekstension “txt”.



4.     Jika sudah tutup aplikasi notepad lalu buka file yang sudah disimpan tadi. Dibuka dengan double kill.



5.     Jika file yang disimpan tadi sudah benar file tersebut otomatis akan dibuka dengan menggunakan aplikasi yang ada dikomputer atau laptop anda seperti Mozilla Firefox. Dan tampilannya akan seperti diatas.



6.     Nah, hasilnya akan seperti pada gambar diatas itu.



Semoga tutorial diatas bisa membantu J
Diposting oleh Unknown di 08.07 0 komentar

Selasa, 18 Maret 2014

Membuat Tabel Form

Membuat Tabel dan Form

          Form adalah cara untuk mendapatkan umpan balik dari pengunjung ke situs web yang diawali dan diakhiri dengan tag <form> dan </form>. Field-field yang digunakan untuk menentukan ukuran dan jenis dari masing-masing input field.
          Elemen dalam form :
ü Input : Menentukan informasi dari user interface
ü Checked : Untuk checkboxes dan radio button , atribut ini dapat diset ke TRUE atau FALSE.
ü Maxlength : Menetukan jumlah maksimum lebar karakter yang mana dapat dimasukkan ke dalam suatu textbox.
ü Name : Menentukan nama dari form control.

Scriptnya :

<html>
<head>
<title>Membuat table dan form<title/>
</head>
<body>
<form action=”#” method=”post”>
Username <Input  type=”text” name=”username”><text><br/>
Password <Input type=”password” name=”password”><br/>
<Input type=”submit” value=”Login”> | <input type=”reset” value=”batal”>
</form>
</body>
</html>

          Jika sudah jadi hasil tabelnya kemungkinan tidak akan rapi, jadi harus ditambahkan seperti dibawah ini :

<html>
<head>
<title> table dan form<title/>
</head>
<body>
<table border=”1” align=”center”>
<tr> <!—baris -->
<td width=”91”>Username</td>      <!—kolom -->
<td width=”9”>:</td>
<td width=”200”> <input type=”text” name=”username”> </td>
</tr>
<tr>
<td width=”91”>password</td>
<td width=”9”>:</td>
<td width=”200><input type=”password” name=”password”></td>
</tr>
</table>
</body>
</html>

          Lalu :

<html>
<head>
<title> table dan form<title/>
</head>
<body>
<table border=”1” align=”center”>
<tr> <!—baris -->
<td width=”91”>Username</td>      <!—kolom -->
<td width=”9”>:</td>
<td width=”200”> <input type=”text” name=”username”> </td>
</tr>
<tr>
<td width=”91”>password</td>
<td width=”9”>:</td>
<td width=”200><input type=”password” name=”password”></td>
</tr>
<tr>
<td align=”center” colspan=”3”>
<input type=”submit” value=”Login”> | <input type=”reset” value=”batal”>
</td>
</table>
</body>
</html>

          Selanjutnya :


<html>
<head>
<title> table dan form<title/>
</head>
<body>
<form action=”#” method=”post”>
<table border=”0” align=”center”>
<tr> <!—baris -->
<td width=”91”>Username</td>      <!—kolom -->
<td width=”9”>:</td>
<td width=”200”> <input type=”text” name=”username”> </td>
</tr>
<tr>
<td width=”91”>password</td>
<td width=”9”>:</td>
<td width=”200><input type=”password” name=”password”></td>
</tr>
<tr>
<td align=”center” colspan=”3”>
<input type=”submit” value=”Login”> | <input type=”reset” value=”batal”>
</td>
</table>
</body>
</html>

          Keterangan:

ü Didalam <table>…</table> masih bisa diberi keterangan tinggi dan lebar juga, cukup memberi nilai pada height dan width.
ü <td align=”center”>  untuk teks rata tengah
ü <strong>…</strong> untuk teks menjadi cetak tebal
ü Tag <input> untuk menentukan sebuah field input
ü Text pada input untuk membuat text field
ü Password untuk membuat teks field rahasia
ü Submit untuk button



Kurang lebihnya seperti itu , Terimakasih J
Diposting oleh Unknown di 03.32 0 komentar

Kamis, 13 Maret 2014

MEMPELAJARI WEB HTML

MEMPELAJARI WEB HTML

Pengertian html :

HTML adalah suatu bahasa yang digunakan untuk mendiskripsikan halaman web. HTML merupakan singkatan dari Hyper Text Markup Language. HTML bukan merupakan bahasa pemrograman. HTML menggunakan markup tags untuk mendiskripsikan halamn web.
          Hypertext artinya kata atau frase tertulis non-sekuensial yang memiliki percabangan dengan bermacam-macam pilihan yang akan menjadikan bacaan yang lebih menarik pada layar interaktif. Markup Language adalah bahasa yang mengkombinasikan antara teks (Hypertext) dengan informasi yang hendak ditampilkan.
          Sedangkan pengertian HTML menurut istilah merupakan bahasa yang bersifat statis yang digunakan sebagai standart pembangunan web, berfungsi untuk menampilkan tampilan wujud yang terintegrasi dan ditulis dalam format ASCII. Bahasa ini bermula dari SGML (Standard Generalized Markup Language) yang biasa digunakan di dunia penerbitan dan percetakan. Bahasa ini pertama kali dibuat oleh Caillau TIM dengan Berners-lee rober.

<html> ini merupakan pembuka jika kita membuat HTML
<head> ini merupakan tanda bahwa kita sudah memulai membuat dokumen
<title>Asri Wardani (HTML)</title> ini merupakan judul dari HTML yang kita buat
</p> ini merupakan spasi baris
</head> ini merupakan penutup dari dokumen yang kita buat

<h1 align=”center”>Welcome to my HTML
Rumus diatas merupakan header yang jenis ukuran hurufnya paling besar (h1) dan terletak dirata tengah (center). Header ini bertuliskan “Welcome to my HTML”

</body text=”purple” bgcolor=”Red”>
ini merupakan isi dari dokumen yang maksudnya adalah warna tulisan dokumen adalah ungu dan latar belakang dokumen adalah merah.

§  Kode memasukan gambar atau foto dengan html :
<img style=”
Width: 100px;
Height:120px;”src=”URL GAMBAR ATAU FOTO”>

Keterangan :
Img style          : Kode untuk sebuah gambar html
Widht              : Lebar dari gambar yang akan kita masukan
Height              : Tinggi dari gambar yang akan kita masukan
Src                   : Pencarian lokasi gambar atau foto yang akan dimasukan

§  Cara membuat tulisan berjalan (Marquee):
Marquee adalah tulisan atau angka yang dibuat agar bisa berjalan dan mempercantik tampilan blog.
<marquee>TEXT YANG BERGERAK</marquee>

§  Kode marquee untuk mengatur lebar teks:
Kode width=”angka lebar” berguna untuk mengatur lebar dari kode yang akan berjalan. Bisa diatur 50% untuk setengah bidang saja, atau 25% untuk serempat bidang teks berjalan saja.
Contohnya:
<marquee width=”50%”>LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG</marquee>

§  Kode marquee untuk memberi link pada teks:
Kode dasarnya seperti ini :
Onmouseover=”this.stop()”onmouseout=”this.start()”
Contoh kodenya :
<marqueeout=”this.start()”><a href=http://amikom.ac.id/index.php/mhs/biodata>bioku</a>

§  Kode marquee memberi teks saat mouse berada di atas teks:
<marquee title=”pesan”>Tulisan Disini</marquee>

§  Kode marquee untuk mengatur arah teks bergerak:
Kode direction=”left/right/up/down” berguna untuk mengatur arah pergerakan teks.
Contoh kodenya:
<marquee direction=”left”>TEKS AKAN BERGERAK KE KIRI</marquee>

§  Kode marquee untuk mengatur teks berhenti jika dilintasi mouse:
Kode dasar untuk mengatur teks agar berhenti jika disorot mouse yaitu:
Onmouse=”this.stop()”onmouse=”this.start()



===== Semoga Bermanfaat J =====
Diposting oleh Unknown di 10.20 0 komentar