540 likes | 821 Views
Web Programming. HTML. Outline. Element HTML Basic Tag HTML Format HTML Entiti HTML Links HTML Frame HTML Table HTML List HTML Form HTML Image HTML Background HTML. Outline. Element HTML Basic Tag HTML Format HTML Entiti HTML Links HTML Frame HTML Table HTML List HTML
E N D
Web Programming HTML
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Empty HTML element • <br/> • <img> • <frame>
Example <html> <body><p>This is my first paragraph</p></body> </html> Nested Element
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Basic Tag • HTML Headings • HTML Paragraph • HTML Links • HTML Images
HTML Headings • Menggunakan tag <h1> sampai <h6> <h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
HTML Paragraph • Menggunakan tag <p> <p>This is a paragraph</p><p>This is another paragraph</p>
HTML Links • Menggunakan tag <a> <a href="http://www.w3schools.com">This is a link</a>
HTML Images • Menggunakan tag <img> <img src="constr4.gif" width="144" height="50" />
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Format HTML • Text Formatting • Computer Output Tags • Citation, Quotation, dan Definition Tags
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Links HTML • Hyperlinks • Anchor
Hyperlinks • Menunjuk ke sebuah resource di web • Resource bisa berupa: halaman html, gambar, suara, film, dsb <a href=“url”>Link text</a>
Anchor • Menunjuk ke bagian dari halaman HTML • Biasanya untuk penulisan daftar isi Penandaan <a name=“bab1”>Bab 1. Pendahuluan</a> Dari halaman yang sama <a href=“#bab1”>Lihat Bab 1</a> Dari halaman yang berbeda <a href=“http://nama.server.com/nama.html#bab1”>Lihat Bab 1</a>
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Frame HTML • Pros • Bisa menampilkan lebih dari 1 halaman web pada browser window yang sama • Setiap halaman web disebut frame, dan tiap frame bersifat independen • Cons • Halaman web yang harus dimaintain lebih banyak • Sulit untuk nge-print keseluruhan halaman web
Example <frameset frameborder=0 cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset>
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
My Table My Table Table HTML Caption Table heading Table data Table row
Example <table width="100%" border="1"> <caption>My Table</caption> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table>
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
List HTML • Ordered List • Unordered List • Definition List
Ordered List • Numbered List • Letters List • Lowercase Letters List • Roman Number List
Unordered List • Disc bullet list • Circle bullet list • Square bullet list
Definition List • Bukan list item • List yang berisi istilah-istilah dan definisinya
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Form HTML • Memungkinkan user untuk memberikan input • Berupa: • Textfield • Password textfiled • Text area • Radio button • Check box • Drop down box
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Image HTML <img src=“namafile.gif” alt=“gambar bebek”>
Outline • Element HTML • Basic Tag HTML • Format HTML • Entiti HTML • Links HTML • Frame HTML • Table HTML • List HTML • Form HTML • Image HTML • Background HTML
Background HTML • Menggunakan attribut background <table height="100" width="150" background="http://www.tizag.com/pics/htmlT/background.jpg" > <tr> <td>This table has a background image</td> </tr> </table>