Tugas 02

Iskandar Setiadi 16511303 1. Jelaskan fungsi tag-tag HTML berikut (dan kapan digunakan) a, link, script, form, dan br Pilih 7 dan jelaskan fungsi tag-tag HTML berikut (dan kapan digunakan) div, input, span, img, ol, textarea, ul, label, select, li, p, blockquote, option 2. Jelaskan perbedaan HTML dan XHTML serta penggunaannya 3. Jelaskan macam-macam doctypes dan perbedaan serta penggunaannya 4. Silahkan buka ajaxonly.php dengan ajax. HINT 1. Liat source code untuk link navigasi di sebelah kiri (Lihat Profil, TUGAS, Upload Tugas, dll) 2. Cara cara menggunakan javascript langsung pada browser 5. (Opsional) Buat halaman info pribadi diri anda dengan spesifikasi 1 file HTML dan 1 file CSS yang terpisah

Jawab: 1.
Nama tag Fungsi dan kapan digunakan Attribute ini biasanya digunakan untuk link atau hyperlink. Biasanya digunakan untuk menghubungkan ke dokumen lain maupun membuat bookmark didalam sebuah dokumen. Biasanya tag ini diikuti oleh href, yang menunjukkan link target. Dalam kondisi standar, tulisan yang menggunakan tag ini akan digaris-bawahi dengan default warna biru. Tag ini digunakan untuk men-define hubungan antara dokumen dengan file eksternalnya. Umumnya tag ini digunakan untuk menghubungkan antara file HTML dengan file CSS nya. Selain itu, tag ini juga dapat digunakan untuk menghubungkan file HTML dengan file-file versi terdahulunya maupun versi lain dari dokumen tersebut. Attribute yang biasa digunakan adalah rel, type, dan href. Tag script biasanya digunakan untuk men-define script yang ingin digunakan, salah satu script yang paling sering digunakan adalah javascript. Ada beberapa cara dalam penggunaan script, seperti dengan menuliskan isi script secara langsung maupun menghubungkannya dengan sumber lain. Jika script menggunakan sumber lain (src), maka isi dari bagian script harus kosong. Contoh

<a href=http://arc.itb.ac.id/> Google </a>

Link

Script

<script type="text/javascript"> document.write("Hello ARC!") </script>

CAKRU ARC 2012

<link rel="stylesheet" type="text/css" href="test.css" />

Tugas 02
Iskandar Setiadi 16511303
Biasanya script digunakan untuk memanipulasi gambar, maupun melakukan validasi data. Tag ini biasanya digunakan untuk membuat sebuah tampilan HTML yang berfungsi untuk menerima input dari user. Menggunakan tag form, sebuah halaman HTML akan mengirimkan data masukkan user ke server. Selain itu, tag ini berfungsi sebagai wadah untuk menvalidasi maupun memproses masukkan user. Cara pengiriman file ke server, maupun spesifikasi character encoding merupakan bagian pemrosesan dari form. Tag Br merupakan salah satu tag yang paling umum dipakai dalam HTML. Tag ini berfungsi seperti tombol enter, yaitu untuk line-break (menambah baris baru). Tag ini merupakan salah satu tag yang berdiri sendiri. Artinya, tag ini tidak membutuhkan tag awal seperti tagtag HTML lainnya. Br sendiri memiliki fungsi yang berbeda dengan p (pembuatan paragraph baru). Tag ini biasanya digunakan untuk menerima masukkan dari user. Field dari input dapat bervariasi, tergantung attribut tipe yang didefinisikan creator. Sebagai contoh, input masukkan dapat berupa textbox, checklist, maupun command button. Biasanya input diintegrasikan dengan database pada server, yang merespon masukkanmasukkan dari user. Tag span ini biasanya digunakan untuk memodifikasi elemen-elemen dalam sebuah bagian dari dokumen (misalnya paragraf). Tag ini berfungsi untuk mempartisi bagian-bagian dari sebuah dokumen menjadi bagian yang lebih kecil (ketika kita ingin mengaplikasikan style/ modifikasi tertentu pada elemen tertentu saja). Selain itu, kita juga dapat mengintegrasikan bagian dalam span dengan script lain seperti Javascript. Ol adalah singkatan dari Ordered List. Tag ini digunakan untuk membuat list dari suatu data tertentu. Jenis data yang ada dapat di list secara numerik maupun alphabetik. Untuk tipe-tipenya, kita dapat mendefinisikannya terlebih dahulu seperti ol type=1 untuk numerik, ol type=a untuk alphabetik lowercase, dll. Salah satu perbedaan Old an Ul (Unordered List) adalah Ul menyusun data dengan bullets, dll. Fungsi dari tag label adalah untuk mendefinisikan label yang digunakan sebagai elemen input / masukkan user. Sebagai contoh, dalam memilih jenis kelamin, user pasti hanya memasukkan satu dari dua pilihan, yaitu male / female (sebagai contoh). Salah satu kegunaan dari label adalah, untuk memilih input dari user, user dapat menggunakan mouse dalam mengklik pilihan tanpa perlu mengetik secara lengkap apakah dia memilih male atau female. Tag ini digunakan untuk membuat sebuah list data secara drop-down (disusun kebawah). Salah satu <form action="form_input.asp" method="get"> First name: <input type="text" name="fname" /> <input type="submit" value="Submit" /> </form>

Form

Br

Hello ARC!<br />

Input

First name: <input type="text" name="fname" /> <input type="submit" value="Submit" />

Span

<p> <span style =color:red> asa </span> </p>

Ol

<ol> <li> ARC </li> <li> Oprek </li> </ol>

Label

<label for=male>Male</label>

Select

<select> <option value = ARC>

CAKRU ARC 2012

Tugas 02
Iskandar Setiadi 16511303
kegunaan dari tag ini adalah menerima masukkan data dari user berupa option, yang sudah dispesifikasi oleh creator. Salah satu keuntungan dalam menggunakan select adalah server dapat menerima data yang memiliki sifat kualitatif secara kuantitatif, karena dispesifikan pada pilihan / option tertentu. Tag ini sesuai dengan namanya, digunakan untuk membuat tag dari quote tertentu. Biasanya teks yang diberikan tag ini akan mendapatkan identasi secara langsung. Tag ini digunakan untuk mempermudah creator dalam membedakan/mempartisi dokumen asli dengan quote yang digunakan. Tag ini digunakan untuk mendefinisikan option yang digunakan dalam menerima masukkan user. Biasanya tag ini diintegrasikan kedalam elemen dari tag select. Jika kita memiliki banyak option, kita juga dapat menggunakan tag <optgroup> untuk menggabungkan elemen-elemen option kedalam suatu grup data tertentu. ARC </option> <option value = PLO> PLO </option> </select>

Blockquote

<blockquote> Test Quote doang </blockquote>

option

<select> <option value = ARC> ARC </option> <option value = PLO> PLO </option> </select>

2. HTML (Hypertext Markup Language) dan XHTML (eXtensible Hypertext Markup Language) memiliki beberapa perbedaan. XHTML merupakan salah satu pengembangan dari bahasa HTML (Current Version : XHTML 1 dan HTML 5). Pada XHTML, aturan-aturan penulisan bahasa seperti tag harus mengikuti aturan yang berlaku, sedangkan pada HTML, tag yang tidak sesuai dengan aturan yang berlaku hanya akan diabaikan (halaman tetap dapat diakses). Salah satu keuntungan XHTML adalah, bahasa yang digunakan lebih terstruktur sehingga memudahkan semua orang selain pembuat untuk memodifikasi maupun memahaminya. Oleh karena XHTML lebih terstruktur dengan baik, tampilan-tampilan yang berbeda-beda di setiap browser ketika menggunakan HTML, dapat dibuat seragam dengan mendefinisikan module XHTML terlebih dahulu. Dalam penggunaannya, XHTML mementingkan Case Sensitive sedangkan HTML tidak. Sebagai contoh, tag <BR> yang dapat dioperasikan dalam HTML, tidak bisa digunakan dalam XHTML, melainkan harus mengikuti format <br/>. 3. Doctype digunakan untuk mengindikasikan versi dokumen HTML yang digunakan sehingga validator dapat mengecek sesuai syntax doctype yang berlaku. CAKRU ARC 2012 a. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> : HTML 4.01 Strict

b. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> : HTML 4.01 Transitional

c. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd"> : HTML 4.01 Frameset

d. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> : XHTML 1.0 Strict

Tugas 02
Iskandar Setiadi 16511303 e. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" f.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> : XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> : XHTML 1.0 Frameset

Enam contoh diatas (masing-masing 3 untuk HTML dan XHTML), adalah doctype yang paling sering digunakan. Pada kenyataannya, masih banyak versi-versi lainnya seperti format penulisan untuk HTML 3.2
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 3.2 Final//EN">,

namun secara umum kita dapat membagi menjadi 3 versi, yaitu Strict, Transitional (loose), dan Frameset. Pada versi Strict, elemen-elemen dari HTML versi lama yang sudah diperbaharui, attributes, serta frame tidak dapat digunakan. Hal ini bertujuan agar halaman HTML yang dibuat dapat diakses dengan tampilan yang sama menggunakan berbagai versi web browser. Versi Transitional, memiliki fitur-fitur dasar seperti Strict, dengan menambahkan fitur-fitur baru seperti presentational attributes tanpa framework. Salah satu keuntungan menggunakan Strict adalah browser-browser dipaksa untuk melakukan kompilasi dalam keadaan HTML/XHTML paling standar, sehingga pengeditan-pengeditan dalam elemen-elemennya dapat dilakukan dalam interface yang lebih luas ruang lingkupnya. Sedangkan versi Frameset, sesuai dengan namanya, adalah versi doctype yang memungkinkan pengguna untuk menggunakan frame dalam pembuatannya.

4. Dengan mengetikkan javascript:ajaxpage("ajaxonly.php","contentarea") pada URL : Semua soal berikut adalah soal benar salah, tambahkan penjelasan singkat yang mendukung jawaban anda. a. Output dari <div id="hello" class='red'> sama dengan output dari <div id='hello' class="red"> Benar, karena HTML dapat menggunakan tanda kutip dua maupun kutip satu dalam pembacaan bahasanya. CAKRU ARC 2012 b. Nama ID dapat digunakan sebagai nama class, misal (<div id="multi" class="multi">) dan dapat di set sebagai aturan style yang berbeda Benar, karena id dan class merupakan dua elemen berbeda (class didefinisikan dengan . Sedangkan id didefiniskan dengan # ). c. ID dapat digunakan di beberapa tag, sedangkan Class hanya bisa digunakan oleh tag tertentu saja Salah, karena ID hanya dapat digunakan di tag tertentu sedangkan Class dapat digunakan berkali-kali dalam sebuah file HTML.

Tugas 02
Iskandar Setiadi 16511303 d. Pada CSS selector bisa merupakan tag, bukan ID atau Class Salah, karena Selector hanya dapat menjadi tag pada HTML, atau defined ID dan Class pada CSS. e. Pada selector CSS, kita bisa membuat aturan untuk tag / ID tertentu yang memiliki class tertentu saja Benar, karena Selector CSS dapat ditambahkan dengan aturan @external classname, yang hanya bekerja pada tag dengan class yang spesifik. f. Output dari <span style="text-color:red">asa</span> adalah text "asa" berwarna hitam Benar, karena syntax yang benar seharusnya <span style =color:red> asa </span> agar text menjadi berwarna merah.

g. File CSS dan Javascript bisa dibuat dan dibaca dengan normal dengan menyimpannya dalam PHP Salah, namun tidak menutup kemungkinan CSS dan Javascript dapat dibaca menggunakan PHP, walaupun menggunakan script/syntax maupun manipulasi tertentu. h. CSS murni tidak dapat digunakan untuk membuat animasi Salah, animasi menggunakan CSS ada yang dapat dibuat tanpa perlu menggunakan Javascript (untuk animasi dasar seperti slidein) [untuk versi CSS 3] i. Attribute pada tag, misal <a href="">, bisa diset sesuai keinginan kita tanpa harus mengikuti aturan, misal <a ifclicked="" superstyle=""> Salah, karena jika kita mendifinisikannya tidak sesuai aturan, maka command tersebut akan dilewati oleh compiler browser dan tidak akan terjadi perubahan / efek apapun. Kita bisa merubah style scrollbar tanpa menggunakan javascript Benar, karena kita dapat menggunakan setidaknya 2 cara dalam mengubah style scrollbar, yaitu dengan javascript atau/dan CSS.

j.

k. Kita bisa merubah tampilan pointer mouse tanpa menggunakan javascript Benar, sebagai contoh, kita dapat menggunakan syntax a:hover {cursor: crosshair} untuk mengubah bentuk kursor ketika mouse-over menjadi berbentuk cross. 5. File HTML Arc Tugas Kedua dan CSS test terlampir. CAKRU ARC 2012