XHTML Part 1
Wahyu Catur Wibowo Amalia Zahra [email protected] 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 silang antara 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 dokumen yang mendefinisikan dan mengatur elemen dan atribut yang valid untuk suatu versi HTML atau XML.
Dokumen HTML yang mengikuti semua kaidah pada suatu DTD yang dideklarasikan dalam processing instruction disebut sebagai dokumen yang valid.
Jika ada kaidah yang tidak terpenuhi, maka
dokumen HTML tersebut dinyatakan sebagai
dokumen 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 antara dokumen ini dengan dokumen yang lain.
META – Berisi informasi meta.
TITLE – Judul (Title) dari dokumen. Semua dokumen harus memiliki title.
STYLE – Instruksi Stylesheet yang dituliskan dengan bahasa penulisan stylesheet. Instruksi stylesheet menegaskan
tentang cara penampilan dokumen.
SCRIPT – Instruksi program dalam bahasa script. Program script dapat berinteraksi dengan dokumen. Contoh
program 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
Class Menunjukkan class dari suatu elemen. Class akan dibahas pada Bab III tentang Style Sheet.
id Memberikan id yang berbeda untuk suatu elemen.
style Menjelaskan style CSS inline pada elemen. Style CSS inline akan dibahas pula di Bab III tentang Style Sheet.
title Memberi 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.
