Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
FORM Kegunaan Form : memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. memperoleh informasi pembelian secara online memperoleh feedback dari user mengenai website anda.
2
Element Form Untuk membuat form : <form> … </form>
3
HTML Input Element - Button
Atribut : type, value, onclick. <html> <head> <title>Contoh Button</title> <script language="JavaScript"> function kirim_form () {window.alert ("Form telah sukses dikirim"); window.open (" } </script> </head> <body> <form> Klik tombol dibawah ini.<br> <input type="button" value="Kirim Form" onclick="kirim_form()"> </form> </body> </html>
4
HTML Input Element - Text
Untuk memasukkan data. Atribut : type, name, size, maxlength, value. <body> <form action="info.htm" method="post"> Nama : <input type="text" name="nama" size="20"> <br> Hobby : <input type="text" name="hobby" size="20"> <input type="submit" value="kirim"> <input type="reset" value="kosongkan"> </form> </body>
5
HTML Input Element - CheckBox
Atribut : Type, Name, Checked. <body> <form> Buah yang anda sukai : <br> <input type="checkbox" name="anggur" checked> Anggur <br> <input type="checkbox" name="jeruk"> Jeruk <br> <input type="checkbox" name="melon"> Melon <br> </form> </body>
6
HTML Input Element - Radio
Atribut : Type, name, value, checked. <body> <form> Jenis Kelamin : <br> <input type="radio" name="sex" value="p" checked> Pria <br> <input type="radio" name="sex“ value="w"> Wanita <br> </form> </body>
7
HTML Input Element - TextArea
Atribut : cols, rows, name, size. <body> <form> Komentar anda : <br> <textarea name="komentar" rows="5" cols="40"> </textarea> </form> </body>
8
HTML Input Element - Combo
Perintah : tag <select> <form> Musik yang paling anda sukai : <br> <select name="musik"> <option value="Jazz"> Jazz <option value="Rock"> Rock <option value="Pop"> Pop <option value="Lain2"> Lain </select> </form>
9
HTML Input Element – List Box
Hampir sama dengan combo, tambahan : size=“jml_yg_ditampilkan” <form> Musik yang paling anda sukai : <br> <select name="musik" size="2"> <option value="Jazz" selected> Jazz <option value="Rock"> Rock <option value="Pop"> Pop <option value="Lain2"> Lain </select> </form>
10
<html> <head> <title> Form Layout dan Desain</title> </head> <body bgcolor=cyan> <h2>Multiple Form</h2> <!-- tag berikut untuk form pertama --> <form action="tempat.html" method="post"> Silahkan pilih ukuran yang diinginkan!<br> <input name="size" type="radio" value="sm"> Small <input name="size" type="radio" value="md"> Medium <input name="size" type="radio" value="lg"> Large <input name="size" type="radio" value="x"> X-Large <input name="size" type="radio" value="xx">XX-Large <p> <input type="submit" value="Kirim data ini!"> </form> <img src="bingkai.gif" />
11
<!-- tag berikut untuk form 2 -->
<form action="atas.html" method="get"> <table> <tr><td>Nama:</td> <td><input type="text" name="nama" size="50"></td></tr> <tr><td> </td> <td><input type="text" name=" " size="50"></td></tr> <tr><td>Alamat:</td> <td><input type="text" name="alamat1" size="30"></td></tr> <tr><td></td><td><input type="text" name="alamat2" size="30"></td></tr> <tr><td>Kota:</td><td><input type="text" name="kota" size="50"></td></tr> <tr><td>Kode Pos:</td> <td><input type="text" name="kdpos" size="10"></td></tr> </table> </form> <p><input type="submit" value="Kirim data ini!">
12
<!-- tag berikut untuk form 3 -->
<form action="atas1.html" method="post"> <fieldset> <legend>Komentar anda disini</legend> Silahkan anda tulis komentar disini!<br> <textarea name="isi" rows="8" cols="50" tabindex="20"></textarea> </fieldset> </form> <input type="submit" value="Kirim"><input type="reset" value="Batal"> </body> </html>
13
CASCADING STYLE SHEETS
Feature untuk membuat dynamic HTML. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template) Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru) Support ke semua browser.
14
Aturan Penulisan CSS Nilai untuk property tidak boleh dalam tanda petik. contoh : color : green; Nama property bersifat case sensitive. color : green; property : color value : green
15
Cara Penggunaan External Style Sheet Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”> <link, merupakan tag pembuka diakhiri dengan tanda “>” rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet type=“text/css”, file yang dipanggil berupa css href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
16
Contoh External Style Sheet
Contoh script efek.css body { color: green; background: white; font-family : arial; } <HTML> <HEAD> <TITLE>centranet</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> </HEAD> <BODY> <H1>PENS ITS</H1> <P> PENS ITS adalah kampus teknik yang concern ke bidang elektro </BODY> </HTML>
17
Cara Penggunaan – Cont.1 Internal Style Sheet Bentuk umum :
<HTML> <HEAD> <TITLE>centranet</TITLE> <STYLE type="text/css"> body { color: white; background: green; font-family : arial; } </STYLE> </HEAD> <BODY> <H1>Zefnet</H1> <P>Zefnet adalah sebuah web Developer dan Linux Center </BODY> </HTML> Internal Style Sheet Bentuk umum : <style type=“text/css”> …definisi style… </style>
18
Cara Penggunaan – Cont.2 Inline Style sheet <HTML> <HEAD>
<TITLE>centranet</TITLE> </HEAD> <BODY style="color: white; background: green; font-family : arial;“ > <H1>ZEFNET</H1> <P>ZEFNET adalah sebuah web Developer dan Linux Center </BODY> </HTML>
Presentasi serupa
