Pertemuan 02 - HTML XHTML

Preview:

Citation preview

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