Scribd Logo
Upload

Welcome to Scribd!

  • Pengenalan XHTML

    Uploaded by

    Boy Hedy
    26 views17 pages

    Original Title

    Pengenalan Xhtml

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    26 views17 pages

    Pengenalan XHTML

    Uploaded by

    Boy Hedy

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 17

    Pengenalan XHTML

    Teknik Informatika UNIVERSITAS LANGLANGBUANA BANDUNG

    Pengenalan XHTML
    Apa itu XHTML?

    XHTML singkatan dari Extensible Hypertext Markup Language XHTML hampir identik dengan HTML 4.01 XHTML adalah versi yang lebih ketat dan bersih dari HTML XHTML adalah HTML didefinisikan sebagai aplikasi XML XHTML merupakan Rekomendasi W3C (World Wide Web Consortium)

    Penulisan XHTML?
    Elemen XHTML harus benar bersarang Elemen XHTML harus selalu tertutup XHTML harus dalam huruf kecil Dokumen XHTML harus memiliki satu root elemen

    Contoh Penulisan
    <html> <head> ... </head> <body> <p>Membuat website dengan <b>XHTML</b></p> </body> </html>

    Beberapa Aturan Sintaks XHTML Lainnya


    Nama atribut harus dalam huruf kecil Nilai atribut harus dikutip Atribut minimisasi dilarang Atribut menggantikan nama atribut XHTML DTD mendefinisikan elemen wajib

    Pelajaran 1 Struktur Halaman Bukalah text editor anda dan ketik kode berikut, sama persis seperti yang ditunjukkan di bawah ini. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Page01</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <h1>My first webpage</h1> <p>At last, I am a web developer!</p> </body> </html> Simpan halaman dengan nama page01.html. Perlu diketahui bahwa beberapa teks editor, seperti Windows Notepad, secara otomatis akan menuliskan dokumen .txt untuk nama file. Anda perlu berhati-hati untuk ini, tetapi biasanya Anda dapat menghindarinya dengan membungkus nama file dalam tanda kutip ganda, seperti ini:
    "page01.html"

    Buka browser web Anda, dan browse ke page01.html pada sistem lokal Anda. Anda harus melihat di browser Anda sebagai berikut:

    Penjelasan <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Baris ini memberitahu browser apa yang membentuk halaman yang akan diambil. Browser harus merender halaman sesuai dengan aturan yang diberikan dalam Document Type Definition.

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> HTML elemen adalah salah satu mekanisme yang menginformasikan kepada browser bahwa dokumen mengandung HTML, dan bahwa ini versi khusus dokumen akan disajikan dalam bahasa Inggris. <head> Dokumen berisi elemen metadata, yang adalah informasi tentang isi halaman browser. Anda tidak boleh meletakkan salah satu dari teks untuk halaman anda di bagian ini. <title>Page01</title> Baris ini memberikan nama halaman. Judul biasanya ditampilkan dalam judul bar viewport (jendela browser). <meta http-equiv="Content-Type" content="text/html; charset=iso-88591" /> Elemen meta ini memberikan informasi mengenai pengkodean karakter yang digunakan untuk teks dokumen, dan juga jenis file tersebut. </head> Dalam XHTML, semua elemen harus memiliki tag penutup. Ketika tidak ada tag penutup khusus, ruang diikuti oleh forward-slash "/" digunakan, seperti akhir meta baris dalam contoh. <body> Sisa halaman tertutup di dalam body elemen. Isi atau content dari halaman website yang ingin anda tampilkan ditulis pada bagian ini. <h1> My first webpage </ h1> Ini adalah baris judul pertama dari teks yang akan terlihat. Unsur <h1> atau header ini digunakan untuk mewakili paling penting dari 6 standar pos. Kebanyakan browser mewakili judul dalam huruf tebal untuk membedakan mereka dari sisa teks, tetapi itu adalah pentingnya setiap pos yang paling signifikan. <p> At last, I am a web developer!</ p> Sebagian besar teks pada sebagian besar halaman web berada dalam p atau paragraf elemen. Baik h1 dan p elemen menghasilkan satu baris setelah tag penutup. </ body> </ html>

    Tag penutupan dari dokumen XHTML.

    Pelajaran 2 Heading / Judul secara rinci Anda dapat menggunakan pos untuk membagi bagian teks. Versi XHTML menentukan enam tingkat pos, h1 sampai h6 dengan h1 memiliki yang paling penting. Idealnya, pos harus digunakan dalam urutan yang selalu penting. Sebagai contoh, Anda mungkin memiliki satu atau lebih h3 elemen-elemen yang sub-judul dari sebuah h2 elemen. Mari kita kembali ke contoh. Tambahkan baris kode berikut ke body dokumen yang Anda buat dalam pelajaran pertama:
    <body> <h1>My first webpage</h1> <p>At last, I am a web developer!</p> <h6>Low importance heading</h6> <h5>A little more important than the last heading</h5> <h4>Relatively important now</h4> <h3>A bit more important</h3> <h2>This heading is very important</h2> <h1>The most important heading ever!</h1> </body>

    Simpan dokumen dengan nama page02.html dan kemudian melihat file dalam browser web Anda. Anda akan melihat sesuatu yang sedikit seperti ini:

    Paragraf secara rinci Teks yang ada antara pembukaan <p> dan penutup </p> tag diformat persis seperti pada word processor.

    Mari kita membuat contoh baru, page03.html yang membuat penggunaan kedua judul dan paragraf. Ketik kode sama persis seperti yang ditunjukkan di bawah ini dan simpan sebagai page03.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Page03</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <h1>The Third Page</h1> <h3>A lesson in paragraphs</h3> <p>This paragraph follows an h3 heading. It will be the first time I will get to see something that looks like a REAL web page, although I'll have seen something similar in a wordprocessor document.</p> </body> </html>

    Mulai sekarang, pelajaran ini akan menganggap bahwa Anda akan menciptakan struktur generik halaman untuk diri Anda sendiri, dan berkonsentrasi hanya pada isi dokumen dalam body. Halaman yang tampil dalam browser Anda, seperti gambar dibwah ini:

    Daftar (3 jenis) Setelah paragraf dan judul, daftar mungkin yang paling umum elemen XHTMLAda tiga, daftar tipe dasar: Unordered lists Ordered lists (like this one)

    Definition list

    The Unordered List Jenis elemen ini dibuka dengan <ul> tag dan ditutup dengan </ul> tag. Elemen khusus ini harus memiliki satu atau lebih anak, yang dikenal sebagai item daftar. Daftar item mulai dengan <li> tag dan diakhiri dengan </li> tag. Cara terbaik untuk melihat bagaimana daftar bekerja adalah dengan mencobanya. Menggunakan template Anda, menciptakan sebuah dokumen yang diberinama page04.html yang mencakup kode berikut dalam dokumen body:
    <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> Hasilnya

    Contoh Lain Buat page05.html dengan Kode sebagai berikut:


    <ul> <li>First list item</li> <li>Second list item <ul> <li>First nested item</li> <li>Second nested item</li> <li>Third nested item</li> </ul> </li> <li>Third list item</li> <li>Fourth list item</li> </ul> Hasilnya:

    Ordered List Daftar jenis ini akan terbuka dengan <ol> tag dan ditutup dengan </ol> tag. Daftar item menggunakan sama li unsur sebagai unordered list. Buat page06.html dengan kode di bawah ini.
    <ol> <li>First list item</li> <li>Second list item <ol> <li>First nested item</li> <li>Second nested item</li> <li>Third nested item</li> </ol> </li> <li>Third list item</li> <li>Fourth list item</li> </ol> Hasil Tampilan:

    Definition Lists Definisi daftar (juga disebut daftar glossary) berbeda dari daftar lain karena item dalam daftar memiliki dua bagian: 1. Satu atau lebih definisi istilah (atau judul) 2. Satu atau lebih definisi deskripsi

    Biasanya, hanya ada satu istilah dan definisi. Hal ini sangat jarang untuk memiliki lebih dari satu istilah definisi. Setiap bagian dari daftar definisi memiliki elemen. Istilah definisi digambarkan oleh dt elemen, dan deskripsi definisi oleh dd elemen. Seluruh struktur yang terkandung dalam dl elemen. Buat Contoh page07.html dengan Kode berikut:
    <dl> <dt>James T. Kirk</dt> <dd>The heroic captain of the USS Enterprise has distinguished himself countless times when facing the unknown.</dd> <dt>Spock</dt> <dd>Kirk's trusted science officer can always be depended upon for solutions to difficult problems, as well as unswerving loyalty to his commander.</dd> <dt>Montgomery Scott</dt> <dd>The most talented engineer in Starfleet, Scotty has used his skills to save the USS Enterprise and keep her shipshape.</dd> </dl> Hasil tampilan :

    Pelajaran 3 Hyperlinks Link membentuk dasar dari web, karena link adalah cara dimana seorang pengguna dapat menavigasi dari halaman ke halaman lainnya, atau dari situs ke situs lainnya. Untuk membuat link dalam XHTML, Anda memerlukan dua hal: 1. Nama file (atau URL dari file) untuk yang ingin Anda link. 2. Teks, atau hotspot, yang mengidentifikasi hyperlink pada halaman. Berikut adalah contoh hyperlink, dalam hal ini menetapkan URL:
    <a href="http://example.com/">Example</a>

    Yang a adalah singkatan anchor karena juga digunakan untuk membuat anchor untuk link - kita akan membahas bahwa sedikit kemudian. href adalah singkatan dari hypertext referensi, yang dalam kasus contoh kita adalah URL untuk contoh situs web. Hal ini selalu tertutup dalam tanda kutip (""). Kemudian datang link teks; teks bahwa browser akan ditampilkan sebagai hyperlink, bukan URL yang sebenarnya. Akhirnya, ada tag penutup </a> yang memberitahukan browser bahwa ini adalah akhir dari link. Hasil akhir akan terlihat seperti ini: Contoh di atas menggunakan sesuatu yang disebut remote pathname, dalam menetapkan bahwa URL-nya di web. Ini hanyalah salah satu dari tiga macam jalur: 1. Remote Path: menentukan alamat web dari file. Ini kadang-kadang secara keliru disebut sebagai path absolut (yang berarti sesuatu yang berbeda). Sebagai contoh, "http://example.com/index.html" 2. Relative Path: poin ke file berdasarkan lokasi relatif ke file saat ini. For example, Sebagai contoh, ".. / folder / filename.html" 3. Absolute Path: poin ke file berdasarkan lokasi absolut pada sistem berkas. Ini juga kadang-kadang disebut relative-from-root . Sebagai contoh, "/ folder / filename.html" Contoh buat file bernama page08.html dengan kode berikut:

    <h1>List of relative links</h1> <ul> <li><a href="page01.php">First Page</a></li> <li><a href="page02.php">Second Page</a></li> <li><a href="page03.php">Third Page</a></li> </ul>

    Hasil :

    Teks format

    <em>...</em>

    Menginformasikan kepada browser untuk menekankan teks, biasanya menghasilkan teks dicetak miring.

    <strong>...</strong>

    Menginformasikan kepada browser untuk menekankan lebih kuat, biasanya dihasilkan dalam format teks tebal.

    <code>...</code>

    Elemen ini menunjukkan teks di dalamnya adalah kode sampel, dan menampilkannya dalam fixed-width tipografi (seperti Courier).

    <samp>...</samp>

    Sampel menunjukkan teks, dan bekerja sangat mirip dengan <code> unsur, yang diwakili dalam fixed-width tipografi.

    <kbd>...</kbd>

    Menunjukkan teks yang dimaksudkan untuk diketik oleh pengguna.

    <var>...</var>

    Menginformasikan kepada browser untuk mengharapkan sebuah variabel, atau sesuatu yang pada akhirnya akan diganti dengan nilai aktual. Usually in italics. Biasanya dalam huruf miring.

    <dfn>...</dfn>

    Menunjukkan definisi. Browser akan biasanya italicize teks.

    <cite>...</cite>

    Ini adalah untuk menunjukkan kutipan pendek atau rujukan.

    Pelajaran 4 Tabel Data Unsur yang paling umum dalam mendefinisikan struktur tabel:

    table
    Unsur ini encloses table.

    caption
    Unsur ini menjelaskan sifat table. Hanya satu keterangan yang diizinkan, dan harus segera mengikuti pembukaan <table> tag.

    tr
    Elemen ini merupakan deretan sel tabel.

    th
    Elemen ini mendefinisikan sebuah sel tabel yang berisi informasi header.

    td
    Elemen ini mendefinisikan sebuah sel tabel yang berisi data.

    thead
    Elemen ini digunakan untuk menyertakan sebuah kelompok yang mendefinisikan baris tabel's header. Hanya satu kelompok yang diperbolehkan.

    tfoot
    Elemen ini digunakan untuk menyertakan sebuah kelompok yang mendefinisikan baris tabel's footer. Hanya satu kelompok yang diizinkan, dan itu harus datang sebelum tbody elemen.

    tbody
    Elemen ini digunakan untuk menyertakan sebuah kelompok yang mendefinisikan baris tabel tubuh.

    Contoh membuat tabel sederhana. Buat page12.html dengan kode berikut:


    <table border="2px" cellspacing="2px" cellpadding="10px"> <caption><strong>Global Browser Statistics</strong></caption> <thead> <tr> <th>Browser</th> <th>Percentage</th> <th>Number</th> </tr> </thead> <tfoot> <tr> <td colspan="3" align="right"><em>source: <a href="http://thecounter.com">thecounter.com</a> - May 2002</em></td> </tr> </tfoot> <tbody> <tr> <td>Internet Explorer 5.x</td> <td>54%</td> <td>219,146,705</td> </tr> <tr> <td>Internet Explorer 6.x</td> <td>34%</td> <td>141,191,308</td> </tr> <tr> <td>Netscape 4.x</td> <td>4%</td> <td>16,606,594</td> </tr> <tr> <td>Internet Explorer 4.x</td> <td>3%</td> <td>13,080,856</td> </tr> <tr> <td>Others</td> <td>5%</td> <td>20m (approx)</td> </tr> </tbody> </table>

    Dilihat dalam browser, Anda akan melihat berikut:

    Pelajaran 5 Forms/ Formulir Form memungkinkan Anda untuk mengumpulkan hampir semua jenis informasi yang kemudian dapat diproses oleh script server side, atau diimpor ke aplikasi lain untuk analisis. Elements Form

    form
    Elemen ini pembentuk formulir, ini termasuk informasi tentang bagaimana dan di mana data yang dikumpulkan akan diproses.

    fieldset
    Anda dapat mengelompokkan bentuk terkait kontrol dan label dalam elemen ini.

    legend
    Elemen ini memberikan keterangan untuk sebuah fieldset elemen.

    label
    Anda dapat melampirkan informasi tentang sebuah bentuk kontrol dengan elemen ini.

    input
    Ini bentuk yang paling serbaguna, dengan 10 pilihan yang berbeda.

    select
    Membungkus elemen ini pilihan yang tersedia dalam menu.

    option

    Setiap opsi yang tersedia dalam sebuah select menu yang terkandung dalam elemen ini.

    textarea
    Kontrol ini menawarkan multi-line text input.

    Contoh berikut ini meliputi sebagian besar kontrol yang dijelaskan di atas. Berinama dengan
    form_example.html <form method="get" action="#"> <fieldset> <legend>Some Input Controls</legend> <p><label for="control1">Control 1: <input type="text" id="control1" name="control1" size="20" /></label></p> <p><label for="control2">Control 2: <input type="text" id="control2" name="control2" size="20" value="Value in here" /></label></p> <p><label for="control3">Password: <input type="password" id="control3" name="control3" size="20" /></label></p> <input type="hidden" name="secret" value="Hidden information can be passed" /> <fieldset> <legend>Radio Buttons</legend> <p>What does XHTML stand for?<br /> <label for="control4"> <input type="radio" id="control4" name="xhtml" value="Extendable" /> Extendable Hypertext Markup Language </label><br /> <label for="control4"> <input type="radio" id="control5" name="xhtml" value="Expandable" /> Expandable Hypertext Markup Language </label><br /> <label for="control6"> <input type="radio" id="control6" name="xhtml" value="Extensible" /> Extensible Hypertext Markup Language </label> </p> </fieldset> <p> <label for="control7"> Type your comments in here:<br /> <textarea id="control7" name="control7" rows="5" cols="30"></textarea> </label> </p> <fieldset> <legend>Checkboxes</legend> <p>Check any of these that you like:<br /> <label for="control8"> <input type="checkbox" id="control8" name="control8" value="Candy" /> Candy </label><br /> <label for="control9">

    <input type="checkbox" id="control9" name="control9" value="Pizza" checked="checked" /> Pizza </label><br /> <label for="control10"> <input type="checkbox" id="control10" name="control10" value="Fries" /> Fries </label> </p> </fieldset> <p> <label for="control11"> More comments:<br /> <textarea id="control11" name="control11" rows="5" cols="30" disabled="disabled">This control is disabled!</textarea> </label> </p> <fieldset> <legend>Submission Controls</legend> <p> <label for="control12"> Submit this form with an image:<br /> <input type="image" id="control12" src="http://www.w3.org/Icons/valid-xhtml10" value="Submit me!" /> </label> </p> <p> <label for="control13"> Submit this form with a submit button:<br /> <input type="submit" id="control13" value="Form was submitted with a submit button" /> </label> </p> <p> <label for="control14"> Reset the form to its initial state:<br /> <input type="reset" id="control14" /> </label> </p> </fieldset> </fieldset> </form> Hasil :

    You might also like