pertemuan 02 - html xhtml
TRANSCRIPT
![Page 1: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/1.jpg)
Pemrograman Web
Pertemuan 2
HTML & XHTML
Antonius RC
![Page 2: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/2.jpg)
Web Hosting
• Project harus diupload ke https://phpfog.com
• Daftar di https://phpfog.com/signup
• Buat nama domain sesuai nomor kelompok:
– Cth: http://satu.phpfogapp.com– Cth: http://satu.phpfogapp.com
– Cth: http://sepuluh.phpfogapp.com
![Page 3: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/3.jpg)
Tutorial Penggunaan PHPFog
• Setelah daftar, login
• Pilih app yang diinginkan untuk dikonfigurasi
• Download GIT for Windows: http://git-scm.com/download/winscm.com/download/win
• Create a new SSH key:
– http://docs.phpfog.com/getting-started/ssh
• Add SSH Key to PHPFog
• Get Source Code dengan Clone GIT
– Ex: git clone git@:antoniusrc.phpfogapp.com
![Page 4: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/4.jpg)
Tutorial (2)
• Jika sudah clone masuk ke folder hasil clone
– Misal: folder antoniusrc.phpfogapp.com
• Taruh semua file yang akan diupload di folder
tersebuttersebut
• Upload dengan cara:
– git add “<namafile>” atau git add . (untuk all files)
– git commit –m “<komentar-commit>”
– git push (untuk upload ke server file yg berubah)
![Page 5: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/5.jpg)
Origins and Evolution of HTML
• HTML = HyperText Markup Language• HTML is using general layout of documents that could be
displayed by a wide variety of computers by using hyperlink
• Recent versions:• Recent versions:– HTML 4.0 – 1997– HTML 4.01 - 1999– XHTML 1.0 – 2000– XHTML 1.1 – 2001– HTML 5 – 2012– XHTML5 - 2013
Saya bernama Anton yang mengajar di UKDW
![Page 6: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/6.jpg)
Advantages of HTML• HTML document is easy to
build– HTML is multi platform & free
– HTML is W3C standard
– Hyper-Media is supported
– Text based systems
– There are some specialized
structures
– HTML 5 is awesome!
![Page 7: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/7.jpg)
Arsitektur HTML
• HTML bersifat client side
• HTML di parsing oleh browser– Error terdapat di browser
• Kode HTML dapat dilihat oleh pengguna
• HTML berformat file text biasa sesuai dengan • HTML berformat file text biasa sesuai dengan encodingnya
• Browser akan menginterpretasikan kode-kode HTML sesuai dengan enginenya masing-masing– Kadang masing-masing browser punya interpretasi
berbeda-beda
![Page 8: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/8.jpg)
HTML Basic Syntax
• Elements are defined by tags (markers)
– Tag format:
• Opening tag: <html>
• Closing tag: </html>• Closing tag: </html>
• Not all tags have content• The extension is .htm or .html
• HTML is not case sensitive
• You can comment a tag– Browsers ignore comments, unrecognizable tags, line breaks,
multiple spaces, and tabs
![Page 9: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/9.jpg)
Element and attribute
� The element content is everything between the start and the end tag
� HTML elements can have attributes� Most HTML elements can have attributes
� Attributes provide additional information about an elementelement
� Attributes are always specified in the start tag� Attributes come in name/value pairs like: name="value“
� Contoh elemen: <h1>Judul</h1>� Contoh atribut: <table border=“0” ></table> dan <img
src=“a.jpg” ></img>
![Page 10: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/10.jpg)
Tag Dasar HTML
• <html>
– <head>
• <meta>
• <script>
• <style>• <style>
– </head>
– <body>
• <tag-tag lain>
– </body>
• </html>
![Page 11: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/11.jpg)
Semantic Language for
marking up text
![Page 12: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/12.jpg)
Judul Resepnya
Daftar bahan yang dibutuhkan
Langkah-langkah memasakLangkah-langkah memasak
![Page 13: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/13.jpg)
Simpan dengan nama file ikanasinpedas.html
![Page 14: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/14.jpg)
Tidak seperti yang kita harapkan ??
![Page 15: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/15.jpg)
Creating HTML Document
• 3 parts of HTML Document: HTML Version,
Head & Body
Resep Ikan Asin Pedas akan kita taruh di bagian ini
![Page 16: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/16.jpg)
Informasi Versi dan DTD HTML 4
• DTD (Document Type Definition) -> sebuah file yang
mendefinisikan semua tag yang valid pada HTML
• HTML 4.01 Strict DTD :
– This DTD contains all HTML elements and attributes, but
DOES NOT INCLUDE presentational or deprecatedDOES NOT INCLUDE presentational or deprecated
elements (like font).
– Framesets are NOT ALLOWED.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
![Page 17: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/17.jpg)
Informasi Versi dan DTD HTML 4
• HTML 4.01 Transitional DTD : Semua tag (kecuali tag-tag
untuk frames) dalam spesifikasi HTML 4.01 yg termasuk
tag-tag yang menurut spesifikasi “sebaiknya tidak dipakai
lagi” tetap bisa dipakai dengan DTD kedua ini.
• This deprecated elements (like font) can be used.
• DTD contains all HTML elements and attributes, • DTD contains all HTML elements and attributes,
INCLUDING presentational and Framesets are NOT
ALLOWED.
<!DOCTYPE HTML PUBLIC "-//
W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
![Page 18: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/18.jpg)
Informasi Versi dan DTD HTML 4
• HTML 4.01 Frameset DTD : DTD ini sama dengan
Transitional DTD ditambah tag-tag untuk frame
• Inilah DTD yang paling umum
• This DTD is equal to HTML 4.01 Transitional, but
allows the use of frameset content.allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//
W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/ frameset.dtd">
![Page 19: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/19.jpg)
HTML 5
• <!DOCTYPE html><html><body>
<h1>My First Heading</h1><h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
![Page 20: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/20.jpg)
Perbedaan DOCTYPE
<!DOCTYPE> is not an HTML tag. It is an information (a declaration) to the browser about what version the HTML is written in.
![Page 21: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/21.jpg)
XHTML
• Extensible Hyper Text Markup Language
• Merupakan bahasa HTML sebagai aplikasi
XML
• Menuruti aturan XML
• Dokumen XHTML sepenuhnya didukung
semua program yang bisa membaca, menulis,
atau mengedit dokumen XML yang sah.
• XML mendukung penambahan tag baru
dengan relatif mudah.
![Page 22: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/22.jpg)
XHTML DTD
• The DTDs are:
– XHTML 1.0 Strict
– XHTML 1.0 Transitional
– XHTML 1.0 Frameset– XHTML 1.0 Frameset
– XHTML 1.1
![Page 23: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/23.jpg)
HTML vs XHTML ?
• Perbedaan utama pada aturan penulisan yang
lebih ketat pada XHTML
– Tag pembuka harus ada tag penutup
– Setiap atribut harus memiliki nilai (tidak boleh– Setiap atribut harus memiliki nilai (tidak boleh
kosong)
– Elemen dan atribut harus ditulis dengan huruf
kecil
– XHTML case sensitive, sedangkan HTML tidak case
sensitive
![Page 24: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/24.jpg)
W3C XHTML Validation Service
http://validator.w3.org/
![Page 25: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/25.jpg)
W3C XHTML Validation Service
![Page 26: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/26.jpg)
HTML Head
• The following tags can be added to the head section: <title>, <meta>, <script>, and <style>.
• Title: HTML title on browser
• Style: used to define style information for an HTML document
• Style: used to define style information for an HTML document
• Script: used to define client side scripting language
• Meta: used to specified information about data of HTML page
![Page 27: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/27.jpg)
metametametameta Elements
• Tidak terlihat dari tampilan
• Memberikan informasi dari dokumen
– Attribute name• Mengetahui type dari meta element
• “keywords” ( name = “keywords” )– Kata yang digunakan untuk pencarian bila user mencari dengan
search enginesearch engine
• “description” ( name = “description” )– Deskripsi dari situs
– Attribute content• Menyediakan information search engine yang digunakan
pada catalog pages
• <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
• <meta name="keywords" content="HTML, CSS, XML" />
![Page 28: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/28.jpg)
Another HTML Element
![Page 29: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/29.jpg)
HTML Script element
• <script type="text/javascript">
document.write("Hello World!");
</script>
• <noscript>Sorry, your browser does not support
JavaScript!</noscript>
![Page 30: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/30.jpg)
Elemen HTML text umum
![Page 31: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/31.jpg)
Header
• Six headers ( header elements)
- h1 through h6
![Page 32: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/32.jpg)
Paragraph
![Page 33: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/33.jpg)
Linking
• Hyperlink
- Menghubungkan ke halaman HTML yang lain atau image atau email
- Link dapat berupa teks maupun image
- Dibuat menggunakan tag a (anchor) element
• Attribute href• Attribute href
- Mendefinisikan alamat dari halaman yang dilink
- <a href=“coba.pdf”>File PDF</a>
• Link ke e-mail addresses menggunakan mailto: URL
![Page 34: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/34.jpg)
ANCHOR
![Page 35: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/35.jpg)
Images
• Tiga format yang paling popular• Graphics Interchange Format (GIF)
• Joint Photographic Experts Group (JPEG)
• Portable Network Graphics (PNG)
• img element
– src attribute– src attribute
• Lokasi dari file imagenya
– width dan height
– Title: Judul gambar
– Alt : Alternatif teks
• <img src=“coba.jpg” title=“gambar coba”>
![Page 36: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/36.jpg)
LIST : Unordered & Ordered
• Unordered list element ul– Membuat daftar non angka
– Berupa bullet (lingkaran dan kotak)
– li (list item)
• Ordered lists (ol)• Ordered lists (ol)
– Membuat daftar berupa urutan angka
– 1,2,3 atau I,II,III, atau i,ii,iii
![Page 37: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/37.jpg)
UL dan OL lainnya
![Page 38: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/38.jpg)
Text manipulation
![Page 39: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/39.jpg)
Contoh Marking up Text
Judul resepnya, tampilkan sebagai header
Sub-judul, bagian bahan-bahan
Daftar bahan yang dibutuhkan
![Page 40: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/40.jpg)
Result in Browser
![Page 41: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/41.jpg)
Marking up Text
![Page 42: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/42.jpg)
![Page 43: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/43.jpg)
Image
![Page 44: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/44.jpg)
![Page 45: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/45.jpg)
Basic HTML Tables
• Pengorganisasian data ke dalam baris dan kolom
• table element
– Attribute border• Lebar pembatas table dalam pixels
– Head section (header cell, didefinisikan dengan theadelement)element)
• Mengandung informasi header seperti column name
• tr element (mendefinisikan baris)
• th element (mendefinisikan kolom pada head section)
– Data cells (didefinisikan dengan tr dan td element)
![Page 46: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/46.jpg)
<table>
Penyusun sebuah tabel:
Header (judul untuk setiap kolom) � <thead>Body (berisi data) � <tbody>Footer (ringkasan) � <tfoot>
![Page 47: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/47.jpg)
<table>
No. Penerbangan Asal Tujuan Berangkat Sampai Maskapai
221211 Yogyakarta (JOG) Jakarta
(HLP)
07:00 WIB 08:00 WIB Kakaktua
Airlines221211
Head<thead>
Satu baris data <tr>Satu kolom
<td>
![Page 48: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/48.jpg)
![Page 49: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/49.jpg)
Contoh table
![Page 50: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/50.jpg)
Tags inside table
![Page 51: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/51.jpg)
<form>
![Page 52: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/52.jpg)
<form>
<form method=“POST” action=“proses.php”POST/GET
… input here (textbox, checkbox, combobox , etc…)
</form>
ENCTYPE = "multipart/form-data" | "application/x-www-form-urlencoded"
![Page 53: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/53.jpg)
HTML Forms
• Element textarea
– Menggunakan multiline text box (text area)
– Attribute rows• Menentukan jumlah baris
– Attribute cols• Menentukan jumlah kolom
• Element “password”Element – Inputan berupa password
• Element checkbox– Memungkinkan pengguna untuk memilih dari kelompok
• Element select
– Menyediakan drop-down list dari items
![Page 54: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/54.jpg)
Text and password
![Page 55: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/55.jpg)
Radio and Check
![Page 56: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/56.jpg)
Form Submit
![Page 57: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/57.jpg)
Web basic color
![Page 58: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/58.jpg)
Jenis Element pada HTML
• Block Element– Takes up the full width available , with a new line
before and after
• Inline Element• Inline Element– Takes up only as much as it needs, and does not force
new lines
• Not displayed Element– Some tags like <meta>, <style>, <script> are not
visible
![Page 59: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/59.jpg)
Block Elements
• <div> � general purpose box
• <h1>…<h6> � heading
• <p> � paragraph
• <ul>, <ol>, <dl> � unordered list, ordered list, • <ul>, <ol>, <dl> � unordered list, ordered list,
definition list
• <li>, <dt>, <dd> � list item, definition list
terms, definition list definitions
• <table>, <blockquote>, <pre>, <form>
![Page 60: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/60.jpg)
Inline Elements
• <span> � all purpose inline element
• <a> � anchor, used for links
• <strong> � like bold, <b>
• <em> � emphasis, replaces <i> (italic) tag• <em> � emphasis, replaces <i> (italic) tag
• <img /> � image
• <br/> � line break, text carries on the next line
• <input> � textbox, button, radiobutton, etc
• <abbr>, <acronym>
![Page 61: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/61.jpg)
HTML 5
• New features should be based on HTML, CSS,
DOM, and JavaScript
• Reduce the need for external plugins (like Flash/Applet)
• Better error handling
• More markup to replace scripting
• HTML5 should be device independent
• The development process should be visible to the public
![Page 62: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/62.jpg)
New features include:
• Semantic elements: header, footer,
section, article, others.
• canvas for drawing
– paths of rectangles, arcs, lines, images – paths of rectangles, arcs, lines, images
– mouse events
• localStorage (like cookies)
• audio & video elements
– including drawing video on canvas
![Page 63: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/63.jpg)
HTML 5 new tag
![Page 64: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/64.jpg)
<<headerheader>>
<<navnav>>
<<articlearticle>>
<<asideaside>>
<footer><footer>
![Page 65: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/65.jpg)
<<timetime>>
<<figurefigure>><<figurefigure>>
<<legendlegend>><<metermeter>>
![Page 66: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/66.jpg)
<<sectionsection>><h1><h1>
<h1><h1>
<h1><h1>
![Page 67: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/67.jpg)
HTML 5 new media
Video
Audio
![Page 68: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/68.jpg)
New input type
![Page 69: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/69.jpg)
Contoh-contoh
• E-mail: <input type="email" name="user_email" />
• Homepage: <input type="url" name="user_url" />
• Points: <input type="number" name="points" min="1"
max="10" />
• Range: <input type="range" name="points" min="1"
max="10" />
• Date: <input type="date" name="user_date" />
• Color: <input type="color" name="user_color" />
![Page 70: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/70.jpg)
Video example
![Page 71: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/71.jpg)
Audio example
![Page 72: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/72.jpg)
HTML 5 examples
• http://upmarquees.com/
• http://www.thejumperweb.co.uk
• http://www.reebok.com.br/
![Page 73: Pertemuan 02 - HTML XHTML](https://reader033.vdocuments.site/reader033/viewer/2022050812/5880a5441a28abf9488b6b9d/html5/thumbnails/73.jpg)
NEXT WEEK: CSS