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
Element HTML Start tag
Content
End tag
This is a paragraph
This is a link
HTML Element Syntax • HTML element diawali dengan start tag • HTML element diakhiri dengan end tag • Isi element adalah semua yang berada diantara start tag dan end tag • Beberapa HTML element tidak memiliki content • Beberapa HTML element tidak memiliki end tag
• Empty HTML element –
–
![]()
–
Example
This is my first paragraph
Nested Element
Start tag
Content
End tag
This is my first paragraph
This is my first paragraph
This is my first paragraph
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
sampai
This is a heading
This is a heading
This is a heading
HTML Paragraph • Menggunakan tag
This is a paragraph
This is another paragraph
HTML Links • Menggunakan tag
This is a link
HTML Images • Menggunakan tag
![]()
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
Text Formatting Tag
Fungsi
Bold text
Big text
<em>
Emphasized text
Italic text
<small>
Small text
<strong> Strong text <sub>
Subscript text
<sup>
Superscript text
Inserted text
<del>
Deleted text
Computer Output Tags Tag
Fungsi
Computer code text
Keyboard text
<samp>
Sample computer code
Teletype text
Variable
<pre>
Preformatted text
Citation, Quotation, dan Definition Tags Tag
Fungsi
Abbreviation
Acronym
Alamat
Text direction
Long quotation
Short quotation
Citation
Definition term
Outline • • • • • • • • • • •
Element HTML Basic Tag HTML Format HTML Entiti HTML Links HTML Frame HTML Table HTML List HTML Form HTML Image HTML Background HTML
Entiti HTML Hasil
Deskripsi
Entity Name
Entity Number
Non-breaking space
<
Less than
<
<
>
Greater than
>
>
&
Ampersand
&
&
¢
Cent
¢
¢
£
Pound
£
£
¥
Yen
¥
¥
€
Euro
€
€
§
Section
§
§
©
Copyright
©
©
®
Registered trademark
®
®
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
Link text
Anchor • Menunjuk ke bagian dari halaman HTML • Biasanya untuk penulisan daftar isi Penandaan Bab 1. Pendahuluan Dari halaman yang sama Lihat Bab 1 Dari halaman yang berbeda
Lihat Bab 1
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
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
Table HTML Caption Table heading
Table data
Table row
Example My Table | ISBN | Title | Price |
| 3476896 | My first HTML | $53 |
| 2489604 | My first CSS | $47 |
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
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 | This table has a background image |
Fin
