pertemuan 02 - html xhtml
TRANSCRIPT
Pemrograman Web
Pertemuan 2
HTML & XHTML
Antonius RC
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
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
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)
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
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!
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
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
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>
Tag Dasar HTML
• <html>
– <head>
• <meta>
• <script>
• <style>• <style>
– </head>
– <body>
• <tag-tag lain>
– </body>
• </html>
Semantic Language for
marking up text
Judul Resepnya
Daftar bahan yang dibutuhkan
Langkah-langkah memasakLangkah-langkah memasak
Simpan dengan nama file ikanasinpedas.html
Tidak seperti yang kita harapkan ??
Creating HTML Document
• 3 parts of HTML Document: HTML Version,
Head & Body
Resep Ikan Asin Pedas akan kita taruh di bagian ini
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">
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">
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">
HTML 5
• <!DOCTYPE html><html><body>
<h1>My First Heading</h1><h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
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.
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.
XHTML DTD
• The DTDs are:
– XHTML 1.0 Strict
– XHTML 1.0 Transitional
– XHTML 1.0 Frameset– XHTML 1.0 Frameset
– XHTML 1.1
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
W3C XHTML Validation Service
http://validator.w3.org/
W3C XHTML Validation Service
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
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" />
Another HTML Element
HTML Script element
• <script type="text/javascript">
document.write("Hello World!");
</script>
• <noscript>Sorry, your browser does not support
JavaScript!</noscript>
Elemen HTML text umum
Header
• Six headers ( header elements)
- h1 through h6
Paragraph
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
ANCHOR
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”>
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
UL dan OL lainnya
Text manipulation
Contoh Marking up Text
Judul resepnya, tampilkan sebagai header
Sub-judul, bagian bahan-bahan
Daftar bahan yang dibutuhkan
Result in Browser
Marking up Text
Image
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)
<table>
Penyusun sebuah tabel:
Header (judul untuk setiap kolom) � <thead>Body (berisi data) � <tbody>Footer (ringkasan) � <tfoot>
<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>
Contoh table
Tags inside table
<form>
<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"
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
Text and password
Radio and Check
Form Submit
Web basic color
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
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>
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>
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
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
HTML 5 new tag
<<headerheader>>
<<navnav>>
<<articlearticle>>
<<asideaside>>
<footer><footer>
<<timetime>>
<<figurefigure>><<figurefigure>>
<<legendlegend>><<metermeter>>
<<sectionsection>><h1><h1>
<h1><h1>
<h1><h1>
HTML 5 new media
Video
Audio
New input type
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" />
Video example
Audio example
HTML 5 examples
• http://upmarquees.com/
• http://www.thejumperweb.co.uk
• http://www.reebok.com.br/
NEXT WEEK: CSS