xhtml part 1 - wcw.cs.ui.ac.idwcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/xhtml-p1.pdf · memposisikan...
TRANSCRIPT
XHTML Part 1
Wahyu Catur Wibowo
Amalia Zahra
http://wcw.cs.ui.ac.id
Well-formed
XHTML mengadopsi well-formness dari XML
Penulisan elemen XHTML dikatakan well-formed apabila:
(a) dalam elemen tersebut terdapat tag awal dan tag penutup yang sesuai;
<b> Isi Elemen </b>
(b) jika elemen isinya kosong, maka elemen tersebut harus diterminasi
<br/><hr />
( c) susunan elemen tidak boleh ada saling silangantara satu elemen dengan elemen yang lain.
Markup
Markup pada HTML adalah Markup Presentasi
Markup merupakan instruksi kepada peramban
Instruksi HTML sering disebut sebagai TAG
Tag digunakan untuk menandai bagian tertentu dari teks dan bersama-sama
dengan isinya disebut sebagai element:
Contoh Elemen HTML
Element Start Tag Isi End Tag
<p>Belajar XHTML</p> <p> Belajar
XHTML
</p>
<a href='index.html'>Tautan</a> <a href='index.html> Tautan </a>
Reserved Characters
Karena sebagian karakter digunakan sebagai tag, maka
karakter tersebut disebut sebagai reserved characters dan
diberi kode secara khusus sebagai entiti:
< sebagai representasi karakter <,
> sebagai representasi karakter >, dan
& sebagai representasi karakter &.
Sebagai contoh, untuk menghasilkan tampilan “Saya Belajar
<html>” pada peramban maka harus dituliskan sebagai “Saya
Belajar <html>”
Situs Web
Kita melakukan kunjungan ke situs web dengan
mengetikkan alamat Uniform Resource Locator (URL) dari
situs tersebut.
Webserver pada situs akan mencari halaman pertama dari
situs untuk ditampilkan.
Halaman pertama disebut sebagai Home Page dari situs.
Nama file yang menyimpan halaman pertama dapat diatur
pada webserver. Umumnya file tersebut bernama
index.html atau default.htm (nama baku yang diberikan
oleh webserver Apache dan Internet Information Service).
Markup
Membuat halaman dengan XHTML adalah melakukan
markup pada teks yang akan ditampilkan.
Markup dilakukan dengan pemberian Tag untuk
memformat presentasi. Tag terdiri dari tag awal (start
tag) berupa nama tag yang diapit oleh tanda < dan > dan
tag penutup berupa nama tag yang diapit oleh tanda </
dan >.
Misalkan nama tag untuk menampilkan teks dalam format
heading (huruf besar dan bold) adalah h2. Dengan
demikian, teks “JUDUL” yang akan ditampilkan sebagai
heading akan di-markup menjadi <h2>JUDUL</h2>.
Markup Elemen Kosong
Sejumah markup dilakukan pada teks kosong (tidak ada
isinya), misalnya untuk menampilkan garis atau untuk
memposisikan cursor pada baris selanjutnya.
Markup pada element kosong tidak ditutup dengan
menggunakan tag penutup, akan tetapi langsung ditutup
pada tag awal dengan format pengapit akhir />.
Jika instruksi untuk memposisikan cursor ke baris
berikutnya adalah br, maka penulisannya adalah <br />.
Jika instruksi untuk menampilkan garis adalah hr
(horizontal rule), maka penulisannya adalah <hr />.
Atribut
Sejumlah elemen dapat memiliki atribut tambahan.
Atribut ini akan diproses oleh interpreter pada peramban. Elemen <a href='index.html'>Tautan</a>
memiliki tag a (anchor) yang memiliki atribut href yang
bernilai 'index.html'. Atribut href adalah atribut yang
menunjukkan nama dokumen di mana dokumen ini
bertaut.
Atribut hanya ada pada start tag, tidak ada atribut pada
end tag
Struktur Dokumen HTML
Dokumen XHTML tersusun atas tiga bagian:
Processing Instruction,
HEAD dan
BODY.
HEAD dan BODY diletakkan di dalam tag <html>. Tag <html>
menunjukkan bahwa dokumen ini adalah dokumen XHTML
Struktur Dokumen HTML
Struktur Dokumen HTML
<!DOCTYPE html> merupakan processing instruction bagi
peramban. Deklarasi DOCTYE menunjukkan versi dari
HTML yang digunakan.
HTML 4.01
STRICT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
TRANSITIONAL<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Document Type Definition (DTD) adalah dokumenyang mendefinisikan dan mengatur elemen danatribut yang valid untuk suatu versi HTML atauXML.
Dokumen HTML yang mengikuti semua kaidahpada suatu DTD yang dideklarasikan dalamprocessing instruction disebut sebagai dokumenyang valid.
Jika ada kaidah yang tidak terpenuhi, makadokumen HTML tersebut dinyatakan sebagaidokumen yang tidak valid.
Berbeda dengan XHTML yang didasarkan pada
SGML, HTML 5 tidak didasarkan pada SGML dan
oleh kerana itu HTML 5 tidak memerlukan DTD.
Pada HTML 5, digunakan Processing Instruction
sebagai berikut:
<!DOCTYPE html>
Mengapa Doctype?
Mengapa kita harus menggunakan DOCTYPE?
Peramban bekerja dengan dua moda, yaitu
moda standart dan
moda sembarang (quirk).
Mendeklarasikan DOCTYPE akan membuat peramban akan bekerja
pada moda standart. Dengan moda standart, maka tampilan halaman
kita pada berbagai peramban akan sama.
Apabila DOCTYPE tidak dideklarasikan, maka peramban akan bekerja
pada moda sembarang di mana perlakuan berbeda akan ditemukan
pada peramban yang berbeda-beda sehingga membuat tampilan
menjadi tergantung pada jenis peramban yang digunakan
HEAD & BODY (lotion)
Bagian head berisi informasi yang tidak akan ditampilkan pada peramban.
Bagian body berisi isi dari dokumen yang akan ditampilkan.
Tag untuk head, seperti title dan meta tidak boleh ditempatkan di bagian
body. Begitu pula sebaliknya. Berikut ini adalah contoh sebuah halaman web:
File dan Ekstensi.html (atau .htm) HTML document, berisi teks dan instruksi mark up
.txt File teks tanpa format. Peramban akan menampilkan file sebagai
kumpulan teks dan peramban tidak akan memproses instruksi mark up
yang ada. Peramban umumnya akan memperlakukan file dengan
ekstensi yang tidak dikenal sebagai file teks.
.gif Format GIF pada citra (image)
.png Format PNG pada citra (image)
.jpeg atau .jpg File citra yang disimpan terkode menggunakan pengkodean jpeg.
.xpm Format X-Pixmap (colour) pada citra
.xbm Format X-Bitmap (black&white) pada citra.
.mpeg atau .mpg atau .mpe File video yang disimpan terkode menggunakan pengkodean mpeg
.avi File video dalam format AVI (Microsoft)
.qt File video dalam format QuickTime-format (Macintosh)
.au File suara yang dikode dengan pengkodean aiff
.Z File dalam bentuk termampatkan (terkompresi) dengan menggunakan
kompresi adaptive Lempel-Ziv. Program kompresi atau de-kompresi
ini lajim ditemui di sistem operasi UNIX
.gz File dalam bentuk termampatkan (terkompresi) dengan menggunakan
kompresi GNU gzip. Program kompresi atau de-kompresi ini dapat
ditemui di sistem operasi UNIX, Windows, mau pun Macintosh
Aturan dalam XHTML Semua nama tag dan atribut harus ditulis dalam huruf kecil. Penulisan
<A HREF="tentang_saya.html">...</A>
harus diganti ke dalam huruf kecil menjadi
<a href="tentang_saya.html">...</a>
Tag kosong (Empty) harus ditulis dengan menempatkan karakter slash (/) tambahan. Tag kosong seperti <b> atau <hr> harus dituliskan sebagai <br /> dan<hr />.
End tag harus selalu ada. Penulisan seperti:
<p> ..... teks...
<p> ..... teks lagi...
harus dituliskan sebagai:
<p> ..... teks... </p>
<p> ..... teks lagi...</p>
Aturan dalam XHTML
Atribut harus memiliki nilai. Pada HTML kita dapat memiliki atribut tanpa
nilai seperti:
<hr size="2" noshade>
Dalam XHTML, instruksi di atas harus dituliskan sebagai:
<hr size="2" noshade="noshade" />
Nilai atribut harus dituliskan dalam tanda petik (quoted). Pada HTML kita
dapat menuliskan nilai atribut seperti berikut:
<hr size=2>
Pada XHTML, instruksi di atas harus dituliskan sebagai:
<hr size="2" />
HEAD
LINK – Mendefinisikan hubungan hypertext antaradokumen ini dengan dokumen yang lain.
META – Berisi informasi meta.
TITLE – Judul (Title) dari dokumen. Semua dokumenharus memiliki title.
STYLE – Instruksi Stylesheet yang dituliskan dengan bahasapenulisan stylesheet. Instruksi stylesheet menegaskantentang cara penampilan dokumen.
SCRIPT – Instruksi program dalam bahasa script. Program script dapat berinteraksi dengan dokumen. Contohprogram script adalah Java Script dan VBScript
Meta
<META NAME="author" CONTENT="Wahyu Catur Wibowo">
<META NAME="keywords" CONTENT="html web url">
<META NAME="editor" CONTENT="WCW HTML Editor">
Title
Elemen TITLE digunakan untuk memberi title pada halaman. Title akan
muncul dalam TAB peramban
Link
Digunakan untuk menunjukkan tautan ke sumberdaya
eksternal di luar laman.
<link rel="stylesheet" type="text/css" href="style.css">
Menunjukkan bahwa halaman HTML akan menggunakan
sumberdaya berupa css stylesheet yang terletak di
dokumen yang bernama style.css.
SCRIPT
SCRIPT pada HEAD digunakan untuk mendefinisikan
sejumah program dalam bahasa script seperti Java Script.
Program dalam bahasa script digunakan untuk memberi
interkasi dinamis pada halaman web. Program dalam
SCRIPT disebut sebagai client-side program karena isi
program ini akan dikirim ke pengguna (client) untuk
diproses oleh peramban yang digunakan client.
<script type="text/javascript" src="prototype.js"></script>
Heading
Heading dinyatakan dengan menggunakan
tag <h1> sampai dengan <h6>. Teks
dengan tag <h1> akan ditampilkan dengan
huruf lebih besar dari pada markup <h2>.
Begitu seterusnya sehingga <h6> akan
menampilkan teks dengan ukuran terkecil
Format Teks
Tag Deskripsi
<b> Membuat tampilan bold
<i> Membuat tampilan italics
<u> Membuat tampilan underlined
<sup> Membuat tampilan superscript
<sub> Membuat tampilan subscript
<del> Membuat tanda hapus
<small> Membuat tampilan teks dengan ukuran lebih kecil
<strong> Membuat tampilan teks yang penting
<ins> Memberi tanda sisip pada teks
<mark> memberi tanda (highlight) pada teks
Contoh Format Teks
<b>Teks Bold</b> akan tampil sebagai Teks Bold
<i>Teks Italics</i> akan tampil sebagai Teks Italics
<u>Teks Underlined</u> akan tampil sebagai Teks
Underlined
<del>Teks Hapus</del> akan tampil sebagai Teks Hapus
x<sup>2</sup> akan tampil sebagai x2
y<sub>2</sup> akan tampil sebagai y2
Format Teks Lain
Tag Deskripsi
<code> Menampilkan font untuk baris program komputer
<kbd> Menampilkan font keyboard
<samp> Menampilkan font untuk contoh program komputer
<var> Menampilkan font untuk pendefinisian variable
<pre> Menampilkan preformatted text
<code> jumlah = 0 ;
while (i < 100) jumlah += i++ ;
</code>
Akan menghasilkan:
Atribut
Elemen HTML dapat memiliki sejumlah informasi
tambahan. Sebagai contoh, elemen font dapat memiliki
informasi tambahan berupa jenis font, ukuran font, atau
warna font. Informasi tambahan pada elemen HTML
disebut sebagai attribute. Attribut selalu dituliskan pada
start tag dan memiliki pola penulisan sebagai berikut:
Nama_attribut="nilai"
Contoh:
<a href="http://www.w3schools.com">Ini link ke w3schools</a>
Atribut
Nama atribut yang dapat digunakan pada elemen HTML
apapun
Attribute Description
ClassMenunjukkan class dari suatu elemen. Class akan dibahas pada Bab
III tentang Style Sheet.
id Memberikan id yang berbeda untuk suatu elemen.
styleMenjelaskan style CSS inline pada elemen. Style CSS inline akan
dibahas pula di Bab III tentang Style Sheet.
titleMemberi informasi tambahan pada suatu elemen dan ditampilkan
dalam bentuk tool tip.
Komentar
Tag komentar digunakan untuk menyisipkan komentar
pada file HTML. Komentar dituliskan di dalam tanda <!--
-->. Komentar tidak ditampilkan oleh peramban.
<!—komentar di sini-->
Paragraf
Elemen p digunakan untuk menampilkan Paragraf
<p> Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
Citra (Image/Picture/Graphics)
Ada tiga hal yang umumnya dilakukan oleh pengunjung
situs web, yaitu:
1. Membaca isi halaman web
2. Melihat citra ilustrasi, dan
3. Berinteraksi
Citra dicantumkan ke halaman web dengan menggunakan
tag <img />.
Citra: Atribut src
Atribut src digunakan untuk menspesifikasikan file sumber
dari citra. Nilai atribut dari src adalah URL dari file citra
yang menunjukkan lokasi direktori di mana file citra
disimpan
Contoh:
<img src="http://wcw.cs.ui.ac.id/publik/jembatan-
cinta.jpg" />
<img src="imgs/jembatan-cinta.jpg " />
URL
Source dari citra dapat berupa URL lokal atau URL global.
URL lokal menunjukkan bahwa sumber dari citra berada di
situs web kita sendiri atau berada di server kita sendiri.
URL global menunjukkan bahwa sumber citra disimpan di
tempat lain, bisa di server lain, atau di domain web yang
berbeda.
Global: http://wcw.cs.ui.ac.id/jembatan-cinta.jpg
Lokal: imgs/jembatan-cinta.jpg
URL lokal dituliskan relatif terhadap lokasi halaman web
yang sedang ditampilkan. Misalkan lokasi file berada di
tempat yang sama dengan halaman web, maka URL lokal
dari citra cukup dengan menyebut nama file itu saja
Src lokal Keterangan
src="jembatan-cinta.jpg"Citra berada di tempat yang sama dengan file
.html
src="imgs/ jembatan-cinta.jpg" Citra berada di direktori imgs
src="../ jembatan-cinta.jpg"Citra berada di folder sebelumnya dari
tempat di mana file .html berada.
src="../imgs/ jembatan-cinta.jpg"Citra berada di folder imgs yang berada
sebelum tempat di mana file .html berada.
Atribut Height dan Width
Lebar dan tinggi citra yang tampil dapat diatur dengan
menggunakan atribut Width dan Height. Jika tidak ada
satuan pada nilai height dan width, maka satuan yang
digunakan adalah pixel.
<img src="jembatan-cinta.jpg" height="100" width="250" />
Penggunaan height dan width secara bersamaan dapat
mengakibatkan perubahan geometri citra apabila ukuran
yang kita spesifikasian tidak proporsonal
Tips
Untuk menampilkan citra perlu diperhatikan hal berikut:
1. Selalu mengusahakan rasio panjang yang lebar yang
sama dengan ukuran aslinya. Perbedaan rasio akan
mengakibatkan citra menjadi tidak proporsional.
2. Selalu menggunakan skala yang lebih kecil atau sama
dengan ukuran aslinya. Skala yang lebih besar akan
mengakibatkan penurunan kualitas citra yang tampil.