Cherong's ritrovo: Maret 2013

Maret 21, 2013

Membuat Table dan Form Sederhana Di HTML

Kali ini saya akan menunjukan cara membuat from dan table pada desain HTML serta cara menampilkan checkbox, radio button serta penimputan passsword.

<html>
<body>
    <form>
        silakan masukan data pribadi anda : <br />
        <table border="10"> 
        <tr>
        <td>
        nama :</td><td> <input type ="text" name ="txtnama"> </td></tr>
        <tr>
        <td>alamat :</td><td> <input type="text" name ="txtalamat" size="50"></td></tr>
        <tr>
        <td>masukan password anda :</td><td> <input type="password" maxlength="6"></td></tr>
        <tr>
        <td>
        hobby anda (boleh lebih dari satu) :</td><td>
        <input type ="checkbox" name="hobby" value ="baca">membaca
        <input type ="checkbox" name="hobby" value ="Oraga">olahraga
        <input type ="checkbox" name="hobby" value ="nonton">menonton
        </td></tr>
<tr>
        <td> jenis kelamin :</td>
<td><input type ="radio" name="jk" value ="pria"> laki-laki <input type ="radio" name="jk" value ="wanita"> perempuan</td>
</tr>
<tr>
<td>
<HR>
<input type ="submit" value="kirim">
<input type ="reset" value="hapus"></td></tr>
</table>
</form>
</body>
</html>

Keterangannya:

huruf yang saya warnai adalah cara menambahkan TextBox, Radio Button dan Checkbox kedalam sebuah tampilan HTML
Sedangkan untuk warna yang biru jika button kirim di tekan maka kita akan menerima pemberitahuan simpan Password saat melakukan Login sebuah Akun.

Maret 20, 2013

Element - Element HTML

Dalam Pemrograman HTML tidak lepas dari pilihan element agar tampilannya menarik maupun pemrograman kita dapat berjalan dengan semestinya.

Maka dari itu tidak ada salahnya untuk mengetahui beberapa elemen yang mungkin dapat membantu anda yang sedang melakukan pemrograman HTML.

Berikut adalah beberapa element yang mungkin dapat bermanfaat.

ELEMEN DASAR

<HTML></HTML> (terdapat pada awal dan akhir dari file HTML)

<TITLE></TITLE> (harus selalu terdapat pada mukadimah)

<HEAD></HEAD> (Mukadima/Header; keterangan umum, seperti judul dsb.)

<BODY></BODY> (isi dari halaman HTML)

ANCANGAN STRUKTURAL

<H?></H?> (Heading/Kepala )

<H? ALIGN=LEFT|CENTER|RIGHT></H?> (Penataan (Align) Kepala )

<DIV></DIV> (Bagian (Division))

<DIV ALIGN=LEFT|RIGHT|CENTER></DIV> (Penataan Bagian)

<BLOCKQUOTE></BLOCKQUOTE> (Kutipan Blok /Block Quote; tampilan dengan jeda
terhadap batas pinggir)

<EM></EM> ( Penekanan (Emphasis; umumnya huruf miring)

<STRONG></STRONG> ( Penguatan (Strong Emphasis; umumnya huruf tebal)

<CITE></CITE> (Kutipan singkat / Citation; umumnya huruf miring)

<CODE></CODE> (Code - untuk source code listings)

<SAMP></SAMP> (Sample Output/ Contoh Keluaran )

<KBD></KBD> (Keyboard Input; Masukan Papan Ketik)

<VAR></VAR> (Variable)

<DFN></DFN> (Definition - jarang dipakai)

<ADDRESS></ADDRESS> (Alamat Pengaran)

<BIG></BIG> (Huruf ukuran Besar)

<SMALL></SMALL> (Huruf Ukuran Kecil)

FORMAT TAMPILAN

<B></B> (Bold)

<I></I> (Italic)

<U></U> (Underline - jarang digunakan)

<STRIKE></STRIKE> (Strikeout /Huruf Coret)

<S></S> (Strikeout)

<SUB></SUB> (Subscript/Huruf Geser Bawah)

<SUP></SUP> (Superscript/Huruf Geser Atas)

<TT></TT> (Typewriter - huruf berjarak tetap/Huruf Mesin Ketik)

<PRE></PRE> (Pra-format Preformatted/Menampilkan dengan jarak
pra-format)

<PRE WIDTH=?></PRE> (mengatur jarak huruf kebawah)

<CENTER></CENTER> (Center - Rata Tengah ; berlaku untuk teks maupun
gambar)

<BLINK></BLINK> (Blinking - Huruf Kedip; tag terlucu sampai kini)

<FONT SIZE=?></FONT> (Ukuran Huruf ; boleh diisi dari 1 sampai 7)

<FONT SIZE="+|-?"></FONT> (Rubah Ukuran Huruf)

<BASEFONT SIZE=?> (Basis Ukuran Huruf; Boleh diisi 1 sampai 7; ukuran
standard/default=3)

<FONT COLOR="#$$$$$$"></FONT> (Warna Huruf)

<FONT FACE="***"></FONT> (Pilih Jenis Huruf)

<MULTICOL COLS=?></MULTICOL> (Teks Multi Kolom

<MULTICOL GUTTER="10 pixels"></MULTICOL> (Jarak Batas Kolom)

<MULTICOL WIDTH=?></MULTICOL> (Lebar Kolom)

<SPACER> (Celah (Spacer)

<SPACER TYPE=horizontal| vertical|block> (Jenis Cela)

<SPACER SIZE=?> (Ukuran Celah)

<SPACER WIDTH=? HEIGHT=?> (Dimensi Celah)

<SPACER ALIGN=left|right|center> (Penataan Celah)

Keterangan :

"?" dapat diisi dengan angka dengan format "3" atau sebagainya
"horizontal| vertical" block dapat dipilh salah satunya
"left|right|center" dapat dipilh salah satunya
"#$$$$$$" dapat diisi dengan Format "#ff99666" dan dapat di ganti.

Semoga Berguna

Maret 19, 2013

Saya mengamsumsi anda sudah cukup mengenal keywords pada program HTML seperti <tag>, <a href>, <p> ,<br>, <frameset>,<frame> <header>, <footer> dan anda sudah cukup mengetahui tentang fungsinya tersebut sehingga memudahkan dalam mebuat program ini....

Berikut saya akan membuat contoh web sederhana yang mungkin membantu anda.
contoh webesite yang akan saya berikan modelnya seperti ini

Tetapi sebulum anda membuatnya anda sebaiknya sudah memiliki beberapa desain web sederhananya sehingga membantu agar desain ini berjalan.

Berikut adalah kodingnya beserta penjelasan singkatnya

<!DOCTYPE HTML>
<html lang=en>
<head>
<title>Simplistic HTML5</title>
<meta charset=utf-8>
<style>
body { width:500px; margin:auto;
}
header, nav, article, footer { display:block;
}
header { width:500px; background-color:#FF9966; text-align:center; margin:auto;
}
nav { float:left; width:25%; background-color: #FF9966; margin-bottom:10px;
}
article { float:right; width:70%; background-color:#FF9966; margin-bottom:10px;
}
footer { clear:both; background-color:#FF9966; text-align:center;
}
h2 { font-size:large; font-weight:bold; margin-top:0; margin-bottom:0;
}
</style>
</head>
<body>
<header>
<h1>header goes here</h1>
</header>
<nav>
<ul>

<li><a href="page-one.html" >Page One</a></li>
<li><a href="page-two.html" >Page Two</a></li>
<li><a href="index.html" >Home page</a></li>

</ul>
</nav>
<article>
<h2>Article</h2>
Are you illiterate? Write today for free course.
</article>
<article>
<h2>Another Article</h2>
Stock up for Christmas. Limited to one per family.
</article>
<footer>
Footer. Perhaps for a copyright statement
</footer>
</body>
</html>

<!DOCTIPE HTML> merupakan bahasa programan untuk HTML5 jika yang anda pelajari masih versi XHTML maka anda cukup menghapusnya dan tidak perlu menulisnya
<html lang=en> Ini merupakan pemerograman menggunakan bahasa inggris jika anda ingin mengganti dalam bahasa lain bisa di liat di sini
untuk yang saya coret anda bisa menggantinya dengan nama desain anda sendiri yang telah anda miliki.

Silakan Mencoba.... Tinggalkan Komen jika blum jelas....