Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Image – Hyperlink – Form

Presentasi serupa


Presentasi berjudul: "Image – Hyperlink – Form"— Transcript presentasi:

1 Image – Hyperlink – Form
Pengenalan HTML - 3 Image – Hyperlink – Form

2 HTML – Image Element IMG (Image) digunakan untuk menampilkan gambar.
Element IMG tidak mempunyai tag penutup, mempunyai attribute align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal), vspace (jarak kosong posisi vertikal), src (lokasi dari gambar disimpan dan nama filenya).

3 HTML – Image Syntax : <img align="left"|"right"|"top"|"middle"|"bottom“ alt="text” border="pixel” width="pixel"|"%” height="pixel"|"%” hspace="pixel” vspace="pixel” src="uri"> Contoh : Menampilkan gambar Image050.jpg dari folder images <html> <head> <title>Tampilkan Gambar</title> </head> <body> <img width="160" height="160" src=“./images/image050.jpg"> </body> </html>

4 HTML - Hyperlink Element A (Hyperlink) befungsi untuk menghubungkan ke internal ataupun eksternal halaman web. Element ini mempunyai attribute href, name, dan target. Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web.

5 HTML - Hyperlink Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru. Syntax : Sintaks: <a href="uri" name="name“ target="_blank"| "parent"|"_top"|"_self“> </a>

6 HTML - Hyperlink Contoh : Membuat link ke Yahoo, Google, STMIK Palangkaraya <html> <head> <title>Dafatr Link</title> </head> <body> Berikut adalh daftar link yang bisa dikunjungi : <ol> <li><a href="http://www.yahoo.com">yahoo</a></li> <li><a href="http://www.google.com">google</a></li> <li><a href="http://www.tienythea.wordpress.com">materi</a></li> </ol> </body> </html>

7 HTML - Form Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisi aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman (GET/POST).

8 HTML - Form Syntax : <form action="action" method="GET"|"POST"> </form>

9 HTML - Form Element INPUT berfungsi untuk mendefinisi-kan input yang akan dimasukkan pengguna. Element ini mempunyai attribute name, size, type, value, checked. Attribute name mendefinisikan nama dari input kontrol form. Attribute size mendefinisikan ukuran teks pada input kontrol.

10 HTML - Form Attribute type mendefinisikan bentuk-bentuk input kontrol.
Attribute value mendefinisikan nilai awal/reset/submit. Attribute checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.

11 HTML - Form Syntax: <input name="name” size="number” type="text"|"checkbox"|"radio"|"submit"|"reset” value="value” checked >

12 HTML - Form Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini mempunyai attribute name, size, multiple (utk banyak pilihan). Element ini harus berada di dalam element FORM. Syntax: <select name="name” size="number” multiple > </select>

13 HTML - Form Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION. Syntax: <option selected value="number" > </option>

14 HTML - Form Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea. Attribute cols mendefinisikan jumlah kolom textarea yang terlihat.

15 HTML - Form Attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM Syntax: <textarea name="name” cols="number” rows="number" > </textarea>

16 Perbedaan Beberapa Script
HTML :: Membuat halaman web statis.. JScript :: Biasanya bisa menampung sebuah variabel. Misalnya ada 2 buah textbox, dari dua textbox tsb di masukan angka. Ketika ditekan tombol maka muncul hasil perhitungan dari kedua angka tersebut di textbox ketiga. Selain itu juga bisa memodifikasi tampilan website. (Untuk tampilan biasanya digunakan CSS). PHP :: Hampirsama dengan html tapi ada tambahan bahwa : Data yang dimasukan melalui textbox bisa disimpan dlm database (Jika ditambah MySQL) atau ditambahkan VARIABEL seperti pada JScript.


Download ppt "Image – Hyperlink – Form"

Presentasi serupa


Iklan oleh Google