XHTML Part 1. Wahyu Catur Wibowo Amalia Zahra

Transkripsi

1 XHTML Part 1 Wahyu Catur Wibowo Amalia Zahra wibowo@cs.ui.ac.id

2 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) jika elemen isinya kosong, maka elemen tersebut harus diterminasi <b> Isi Elemen </b> <br/><hr /> ( c) susunan elemen tidak boleh ada saling silang antara satu elemen dengan elemen yang lain.

3 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:

4 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>

5 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>

6 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).

7 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>.

8 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 />.

9 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

10 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

11 Struktur Dokumen HTML

12 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" " TRANSITIONAL <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

13 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.

14 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>

15 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

16 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:

17

18 File dan Ekstensi.html (atau.htm).txt HTML document, berisi teks dan instruksi mark up 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.png.jpeg atau.jpg Format GIF pada citra (image) Format PNG pada citra (image) File citra yang disimpan terkode menggunakan pengkodean jpeg..xpm.xbm.mpeg atau.mpg atau.mpe Format X-Pixmap (colour) pada citra Format X-Bitmap (black&white) pada citra. File video yang disimpan terkode menggunakan pengkodean mpeg.avi.qt File video dalam format AVI (Microsoft) 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

19 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>

20 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" />

21 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

22 Meta <META NAME="author" CONTENT="Wahyu Catur Wibowo"> <META NAME="keywords" CONTENT="html web url"> <META NAME="editor" CONTENT="WCW HTML Editor">

23 Title Elemen TITLE digunakan untuk memberi title pada halaman. Title akan muncul dalam TAB peramban

24 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.

25 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>

26 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

27 Format Teks Tag <b> <i> <u> <sup> <sub> <del> <small> <strong> <ins> <mark> Deskripsi Membuat tampilan bold Membuat tampilan italics Membuat tampilan underlined Membuat tampilan superscript Membuat tampilan subscript Membuat tanda hapus Membuat tampilan teks dengan ukuran lebih kecil Membuat tampilan teks yang penting Memberi tanda sisip pada teks memberi tanda (highlight) pada teks

28 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 x 2 y<sub>2</sup> akan tampil sebagai y 2

29 Format Teks Lain Tag <code> <kbd> <samp> Deskripsi Menampilkan font untuk baris program komputer Menampilkan font keyboard Menampilkan font untuk contoh program komputer <var> <pre> Menampilkan font untuk pendefinisian variable Menampilkan preformatted text

30 <code> jumlah = 0 ; </code> while (i < 100) jumlah += i++ ; Akan menghasilkan:

31 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=" link ke w3schools</a>

32 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.

33

34 Komentar Tag komentar digunakan untuk menyisipkan komentar pada file HTML. Komentar dituliskan di dalam tanda . Komentar tidak ditampilkan oleh peramban. <! komentar di sini-->

35 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>

36 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 />.

37 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=" /> <img src="imgs/jembatan-cinta.jpg " />

38 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: 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

39 Src lokal src="jembatan-cinta.jpg" src="imgs/ jembatan-cinta.jpg" Keterangan Citra berada di tempat yang sama dengan file.html Citra berada di direktori imgs src="../ jembatan-cinta.jpg" src="../imgs/ jembatan-cinta.jpg" 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.

40 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

41 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.