Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Pemrograman Web HTML (5) Form CSS Andy Haryoko, ST
Upload : indocafein.wordpress.com
2
FORM (1) Form digunakan untuk mengumpulkan informasi dari user. Untuk membuat form digunakan tag <FORM>…</FORM>. <BODY> <FORM METHOD=”POST/GET” ACTION=”” NAME=”FORM_1”> </FORM> </BODY> Atribut METHOD berfungsi untuk menentukan cara mengirimkan data yang dimasukkan user ke server. Ada 2 cara yang dapat dipakai yaitu GET dan POST atribut ACTION berisi lokasi ke mana data form tsb akan dikirimkan. Atribut NAME berisi nama form tsb.
3
FORM (2) TEXTFIELD adalah satu baris tunggal yang digunakan untuk memasukkan data berupa teks maupun angka. <INPUT TYPE=”TEXT” SIZE=25 VALUE=”KETIK NAMA ANDA”>
4
FORM (3) PASSWORD FIELD Prinsip kerjanya sama dengan TEXTFIELD, hanya saja karakter yang diketikkan diganti dengan karakter *****. <INPUT TYPE=”PASSWORD”>
5
FORM (4) TEXTAREA Digunakan untuk memasukkan beberapa baris text yang dapat digulung naik atau turun. <TEXTAREA COLS=40 ROWS=5 NAME=”KOMENTAR”>
6
FORM (5) CHECKBOX Digunakan untuk membuat kotak pilihan
<INPUT TYPE=”CHECKBOX” NAME=”PILIHAN1”>SEPAKBOLA RADIO BUTTON Kegunaannya sama dengan checkbox hanya saja bentuknya lingkaran. <INPUT TYPE=”RADIO” NAME=”GROUP1”>BULU TANGKIS
7
FORM (6) DROP DOWN MENU Digunakan untuk membuat daftar menu. Untuk membuatnya digunakan tag <SELECT> dan daftar pilihan menggunakan <OPTION> <SELECT NAME=”MENU”> <OPTION VALUE=”SEPAKBOLA”>FOOTBALL</OPTION> <OPTION VALUE=”BULU TANGKIS”>BADMINTON</OPTION> <OPTION VALUE=”TENIS”>TENIS</OPTION> </SELECT>
8
FORM (7) SUBMIT BUTTON Mengirimkan data yang dimasukkan melalui form oleh pembaca ke server. <INPUT TYPE=”TEXT” VALUE=”MASUKKAN NIM ANDA”> <INPUT TYPE=”SUBMIT” VALUE=”KIRIM”> RESET BUTTON Membatalkan data yang telah diketik di form sehinnga form menjadi kosong. <INPUT TYPE=”RESET” VALUE=”CANCEL”>
9
PENGENALAN CSS CSS = Cascading Style Sheet
Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.
10
MEMBUAT CSS CARA PERTAMA :
mengetikkan langsung dalam tag html sebagai atribut . <body> <b style = “color : blue”> teks tebal dan biru </b> </body>
11
CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”> ……… style definitions ……… </style> </head>
12
Selector { property1 : value1 ;
Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector. Selector { property1 : value1 ; property2 : value2;…. propertyN : valueN ; }
15
CARA KETIGA : Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css Memanggil file css dalam html dengan tag link yang diletakkan dalam tag head. <head> <link rel=“stylesheet” type=“text/css” href=“namafile.css”/> </head>
17
Contoh : <style type=“text/css” >
hr { color : red ; height : 5px ; width : 50%; } </style> Keterangan : Tag adalah style Atribut adalah type=“text/css” Selector adalah hr Property adalah color, height, width Value adalah red, 5px, 50%
18
ID SELECTOR dan CLASS ID selector didefenisikan sendiri
ID selector diawali tanda # ( octothorpe) CLASS diawali dengan tanda titik ( . )
Presentasi serupa
