Upload
vuhuong
View
310
Download
7
Embed Size (px)
Citation preview
Pengembangan Web
Ramos Somya, S.Kom., M.Cs.
HTML Form & CSS
HTML Form Kegunaan:
Memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang disediakan
Memperoleh feed back dari user
Menggunakan tag: <form> … </form>
Form Element:
Method: menentukan bagaimana data dikirim ke server.
Action: menentukan lokasi dari script yang akanmemproses data dari form.
Jenis-Jenis Form Inputan
TEXT
PASSWORD
RADIO button
CHECKBOX
COMBO BOX
TEXTAREA
HTML Input Elemen
Text : digunakan user untuk menginputkan huruf, kalimat atau angka dalam form.
<form>
First name:
<input type="text" name="firstname“>
<br>
Last name:
<input type="text" name="lastname">
</form>
...
Radio Button: digunakan untuk memilih satu dari
beberapa pilihan.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
... CheckBox: digunakan untuk memilih satu atau
beberapa pilihan dalam form.<form>I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form>
Submit Button
<form name="input" action=“save.php" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
HTML Form & Tabel
CSS (Cascading Style Sheet)
Cascading Style Sheets (CSS) adalah suatu teknologi yang
digunakan untuk memperindah halaman website (situs),
dengan CSS kita dapat dengan mudah mengubah
keseluruhan warna dan tampilan yg ada di situs kita
sekaligus memformat ulang situs kita.
Kelebihan CSS
Memisahkan desain dengan konten halaman web.
Mengatur desain seefisien mungkin.
Jika kitai ngin mengubah suatu tema halaman web, cukup
modifikasi pada css saja.
Satu CSS dapat digunakan banyak halaman web.
Kekurangan CSS
Tampilan pada browser berbeda-beda.
Kadang ada browser yang tidak support CSS.
Menggunakan tag:
<style> ...... </style>
Format CSS
Sebuah style sheet terdiri dari beberapa aturan (rules).
Masing-masing aturan terdiri dari satu atau lebih selektor
(selector) dan sebuah blok deklarasi (declaration block).
Sebuah blok deklarasi terdiri dari beberapa deklarasi
yang dipisahkan oleh titik koma (;). Masing-masing
deklarasi terdiri dari property, titik dua (:) dan nilai
(value).
Contoh
Contoh
Selector: class dan id
Terdapat dua type paragraph dalam suatu dokumen: satu
paragraf rata kanan, dan paragraf yang lain rata tengah.
...
Pendefinisian style untuk elemen HTML dapat dilakukan
dengan selector id. Selektor ID didefinisikan sebagai #.
Contoh:
Aturan style berikut akan menyesuaikan elemen yang
mempunyai sebuah atribut id dengan nilai “hijau”.
<font id=“green”>Warna Hijau</font>
Penulisan CSS
Dapat digunakan secara internal, eksternal maupun
inline (langsung ditulis dalam tag HTML).
CSS eksternal menggunakan ekstensi *.css
Dianjurkan untuk menggunakan CSS eksternal.
CSS Internal
CSS Eksternal
CSS Inline
Tugas Take Home
Halaman New Phonebook
Halaman View Phonebook
Halaman Edit & Hapus Phonebook
Ketentuan
Kerjakan dengan HTML dan CSS.
Kerjakan 1 kelompok maksimal 4 mahasiswa.
Dikumpulkan ke email [email protected] paling
lambat hari Rabu, 19 Februari 2014 pukul 12.00 WIB.
Subject email:TGS<spasi>2<spasi>PW<spasi>kelas
contoh:TGS 2 PW A
Nama file:TGS_PW_2_Kelas_NIMKETUA.rar
contoh:TGS_PW_2_A_672014001.rar
Subject email dan nama file yang dikirimkan harus sesuai
ketentuan, jika tidak sesuai maka tidak akan dinilai.
Jangan Lupa:
Tuliskan NIM anggota kelompok
pada bagian “Contact Me” di web
yang dibuat.
ramos672006005.wordpress.com
Terima Kasih