Penulisan elemen XHTML dikatakan well-formed apabila: (a) dalam elemen tersebut terdapat tag awal dan Isi Elemen tag penutup yang sesuai; (b) jika elemen isinya kosong, maka elemen tersebut harus diterminasi ( 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
Belajar XHTML
Belajar
XHTML TautanTautan 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 . Tag menunjukkan bahwa dokumen ini adalah dokumen XHTML
Struktur Dokumen HTML
Struktur Dokumen HTML
merupakan processing instruction bagi peramban. Deklarasi DOCTYE menunjukkan versi dari HTML yang digunakan.
HTML 4.01
STRICT
TRANSITIONAL
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:
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 ...
Tag kosong (Empty) harus ditulis dengan menempatkan karakter slash (/) tambahan. Tag kosong seperti atau harus dituliskan sebagai dan .
End tag harus selalu ada. Penulisan seperti:
..... teks...
..... teks lagi...
harus dituliskan sebagai:
..... teks...
..... teks lagi...
Aturan dalam XHTML
Atribut harus memiliki nilai. Pada HTML kita dapat memiliki atribut tanpa nilai seperti: Dalam XHTML, instruksi di atas harus dituliskan sebagai:
Nilai atribut harus dituliskan dalam tanda petik (quoted). Pada HTML kita dapat menuliskan nilai atribut seperti berikut: Pada XHTML, instruksi di atas harus dituliskan sebagai:
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. 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.
akan ditampilkan dengan huruf lebih besar dari pada markup
. Begitu seterusnya sehingga
akan menampilkan teks dengan ukuran terkecil
Format Teks Tag
Deskripsi
Membuat tampilan bold
Membuat tampilan italics
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
Memberi tanda sisip pada teks
<mark>
memberi tanda (highlight) pada teks
Contoh Format Teks
Teks Bold akan tampil sebagai Teks Bold
Teks Italics akan tampil sebagai Teks Italics
Teks Underlined akan tampil sebagai Teks Underlined
<del>Teks Hapus akan tampil sebagai Teks Hapus
x<sup>2 akan tampil sebagai x2
y<sub>2 akan tampil sebagai y2
Format Teks Lain Tag
Deskripsi
Menampilkan font untuk baris program komputer
Menampilkan font keyboard
<samp>
Menampilkan font untuk contoh program komputer
Menampilkan font untuk pendefinisian variable
<pre>
Menampilkan preformatted text
jumlah = 0 ;
while (i < 100) jumlah += i++ ; 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: Ini link ke w3schools
Atribut
Nama atribut yang dapat digunakan pada elemen HTML apapun
Attribute Description Class id style
title
Menunjukkan class dari suatu elemen. Class akan dibahas pada Bab III tentang Style Sheet. Memberikan id yang berbeda untuk suatu elemen. Menjelaskan style CSS inline pada elemen. Style CSS inline akan dibahas pula di Bab III tentang Style Sheet. 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.
Paragraf
Elemen p digunakan untuk menampilkan Paragraf
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.
Citra (Image/Picture/Graphics)
Ada tiga hal yang umumnya dilakukan oleh pengunjung situs web, yaitu: 1. Membaca 2. Melihat
isi halaman web
citra ilustrasi, dan
3. Berinteraksi
Citra dicantumkan ke halaman web dengan menggunakan tag .
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:
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 src="jembatan-cinta.jpg"
src="imgs/ jembatan-cinta.jpg"
src="../ jembatan-cinta.jpg"
src="../imgs/ jembatan-cinta.jpg"
Keterangan Citra berada di tempat yang sama dengan file .html Citra berada di direktori imgs
Citra berada di folder sebelumnya dari tempat di mana file .html berada. 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.
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.
