1 / 16

Pengenalan HTML - 3

Pengenalan HTML - 3. Image – Hyperlink – Form. HTML – Image. Element IMG (Image) digunakan untuk menampilkan gambar .

dusan
Download Presentation

Pengenalan HTML - 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pengenalan HTML - 3 Image – Hyperlink – Form

  2. HTML – Image • Element IMG (Image) digunakanuntukmenampilkangambar. • Element IMG tidakmempunyai tag penutup, mempunyai attribute align, alt (teksalternatifjikagambartidaktampil), border, height, width, hspace(jarakkosongposisi horizontal), vspace(jarakkosongposisivertikal), src(lokasidarigambardisimpandannamafilenya).

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

  4. HTML - Hyperlink • Element A (Hyperlink) befungsiuntukmenghubungkanke internal ataupuneksternalhalaman web. • Element inimempunyai attribute href, name, dantarget. • Attribute hrefberfungsisebagai hypertext reference yang mempunyainilai URI (uniform resource identifier) yang akanmenghubungkankeeksternalhalaman web.

  5. HTML - Hyperlink • Attribute name berfungsiuntukmenghubungkanketempattujuandalamhalaman web (anchor). • Attribute target berfungsiuntuk 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> Berikutadalhdaftar link yang bisadikunjungi : <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 berfungsiuntukmendefinisikan form interaktif. Element inimempunyai attribute yaituaction, danmethod. • Attribute action berisiaksiterhadap form yang dikirim (URI) dan attribute method berisikanmetode form melakukanprosespengiriman (GET/POST).

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

  9. HTML - Form • Element INPUT berfungsiuntukmendefinisi-kan input yang akandimasukkanpengguna. Element inimempunyai attribute name, size, type, value, checked. • Attribute name mendefinisikannamadari input kontrol form. • Attribute size mendefinisikanukurantekspada input kontrol.

  10. HTML - Form • Attribute type mendefinisikanbentuk-bentuk input kontrol. • Attribute value mendefinisikannilaiawal/reset/submit. • Attribute checked mendefinisikan pilihan terpilih pada type radio/checkbox. • Element ini tidak mempunyai tag penutup danharusberadadidalam 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 berfungsiuntukmendefinisikanopsipilihanpada form kontrol. • Element inimempunyai attribute name, size, multiple (utkbanyakpilihan). • Element iniharusberadadidalam element FORM. Syntax: <selectname="name” size="number” multiple > ..................... </select>

  13. HTML - Form • Element OPTION mendefinisikanopsipilihanpada menu SELECT. Element inimempunyai attribute selecteddanvalue. • Attribute selected opsiterpilihdan attribute value berisikannilai element OPTION. Syntax: <option selectedvalue="number" > ..................... </option>

  14. HTML - Form • Element TEXTAREA berfungsisebagai input kontrol form untukmemasukkantekslebihdarisatubaris. • Element inimempunyai attribute name, cols, rows. • Attribute name mendefinisikannama input kontrol form element textarea. • Attribute cols mendefinisikanjumlahkolomtextarea yang terlihat.

  15. HTML - Form • Attribute rows mendefinisikanjumlahbaristextarea yang terlihat. • Element iniharusberadadidalam element FORM Syntax: <textareaname="name” cols="number” rows="number" > ..................... </textarea>

  16. PerbedaanBeberapa Script • HTML :: Membuathalaman web statis.. • JScript :: Biasanyabisamenampungsebuahvariabel. Misalnyaada 2 buah textbox, daridua textbox tsbdimasukanangka. Ketikaditekantombolmakamunculhasilperhitungandarikeduaangkatersebutdi textbox ketiga. Selainitujugabisamemodifikasitampilan website. (Untuktampilanbiasanyadigunakan CSS). • PHP :: Hampirsamadengan html tapiadatambahanbahwa : Data yang dimasukanmelalui textbox bisadisimpandlm database (JikaditambahMySQL) atauditambahkan VARIABEL sepertipadaJScript.

More Related