pengenalan xhtml

7/31/2019 Pengenalan Xhtml

1/17

Pengenalan XHTML

Teknik Informatika

UNIVERSITAS LANGLANGBUANA BANDUNG


2/17

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

tertutupXHTML harus dalam huruf kecil

Dokumen XHTML harus memiliki satu root elemen

Contoh Penulisan

...

Membuat website dengan XHTML

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


3/17

Pelajaran 1

Struktur Halaman

Bukalah text editor anda dan ketik kode berikut, sama persis seperti yang

ditunjukkan di bawah ini.

Page01

My first webpage

At last, I am a web developer!

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

Baris ini memberitahu browser apa yang membentuk halaman yang akan

diambil. Browser harus merender halaman sesuai dengan aturan yang

diberikan dalam Document Type Definition.


4/17

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.

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.

Page01

Baris ini memberikan nama halaman. Judul biasanya ditampilkan dalam judul

bar viewport (jendela browser).

Elemen meta ini memberikan informasi mengenai pengkodean karakter yang

digunakan untuk teks dokumen, dan juga jenis file tersebut.

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.

Sisa halaman tertutup di dalam body elemen. Isi atau content dari halaman

website yang ingin anda tampilkan ditulis pada bagian ini.

My first webpage

Ini adalah baris judul pertama dari teks yang akan terlihat. Unsur atau

headerini digunakan untuk mewakili paling penting dari 6 standar pos.

Kebanyakan browser mewakili judul dalam huruf tebal untuk membedakan

mereka dari sisa teks, tetapi itu adalahpentingnya setiap pos yang paling

signifikan.


Sebagian besar teks pada sebagian besar halaman web berada dalam p atau

paragrafelemen. Baik h1 dan p elemen menghasilkan satu baris setelah tag

penutup.


5/17

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:

My first webpage


Low importance headingA little more important than the last headingRelatively important nowA bit more importantThis heading is very important

The most important heading ever!

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

dan penutup
tag diformat persis seperti
pada word processor.
http://translate.googleusercontent.com/translate_c?hl=id&sl=en&u=http://jessey.net/simon/xhtml_tutorial/one.php&prev=/search%3Fq%3Dxhtml%2Blearning%26hl%3Did%26client%3Dfirefox-a%26rls%3Dorg.mozilla:en-US:official%26hs%3DUo3%26sa%3DG&rurl=translate.google.co.id&usg=ALkJrhjPgI9HMnfcyF-EQKGoVfenqFmg5ghttp://translate.googleusercontent.com/translate_c?hl=id&sl=en&u=http://jessey.net/simon/xhtml_tutorial/one.php&prev=/search%3Fq%3Dxhtml%2Blearning%26hl%3Did%26client%3Dfirefox-a%26rls%3Dorg.mozilla:en-US:official%26hs%3DUo3%26sa%3DG&rurl=translate.google.co.id&usg=ALkJrhjPgI9HMnfcyF-EQKGoVfenqFmg5g


6/17


7/17

Definition list

The Unordered List

Jenis elemen ini dibuka dengan tag dan ditutup dengan tag. Elemen

khusus ini harus memiliki satu atau lebih anak, yang dikenal sebagai item daftar.

Daftar item mulai dengan tag dan diakhiri dengan 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:

First list itemSecond list itemThird list itemFourth list item

Hasilnya

Contoh Lain Buat page05.html dengan Kode sebagai berikut:

First list itemSecond list itemFirst nested itemSecond nested itemThird nested item

Third list itemFourth list item

Hasilnya:


8/17

Ordered List

Daftar jenis ini akan terbuka dengan tag dan ditutup dengan tag. Daftar

item menggunakan sama li unsur sebagai unordered list. Buat page06.html dengan

kode di bawah ini.

First list itemSecond list itemFirst nested itemSecond nested itemThird nested item

Third list itemFourth list item

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


9/17

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

Seluruh struktur yang terkandung dalam dl elemen. Buat Contoh page07.html dengan

Kode berikut:

James T. KirkThe heroic captain of the USS Enterprise has distinguished himself

countless times when facing the unknown.SpockKirk's trusted science officer can always be depended upon for

solutions to difficult problems, as well as unswerving loyalty to hiscommander.Montgomery ScottThe most talented engineer in Starfleet, Scotty has used his skills to

save the USS Enterprise and keep her shipshape.

Hasil tampilan :


10/17

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:

Example

Yang a adalah singkatan anchorkarena juga digunakan untuk membuat anchoruntuk

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 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 secarakeliru 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. Forexample, Sebagai contoh, ".. / folder / filename.html"

3. Absolute Path: poin ke file berdasarkan lokasi absolut pada sistem berkas. Inijuga kadang-kadang disebut relative-from-root. Sebagai contoh, "/ folder /filename.html"

Contoh buat file bernama page08.html dengan kode berikut:


11/17

List of relative links

First PageSecond PageThird Page

Hasil :

Teks format

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

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

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

...Sampel menunjukkan teks, dan bekerja sangat mirip dengan unsur, yangdiwakili dalam fixed-width tipografi.

...Menunjukkan teks yang dimaksudkan untuk diketik oleh pengguna.


12/17

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

...Menunjukkan definisi. Browser akan biasanya italicize teks.

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


mendefinisikan baris tabel's footer. Hanya satu kelompok yang diizinkan, dan

itu harus datang sebelum tbody elemen.


13/17

tbody


mendefinisikan baris tabel tubuh.

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

Global Browser StatisticsBrowserPercentageNumber

source: thecounter.com - May 2002

Internet Explorer 5.x54%219,146,705


Netscape 4.x4%16,606,594


Others

5%20m (approx)

Dilihat dalam browser, Anda akan melihat berikut:


14/17

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

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


15/17

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

Some Input Controls

Control 1:

Control 2:

Password:
Radio Buttons
What does XHTML stand for?
Extendable Hypertext Markup Language

Expandable Hypertext Markup Language
Extensible Hypertext Markup Language

Type your comments in here:
Checkboxes
Check any of these that you like:
Candy


16/17

Pizza

Fries

More comments:
This control is disabled!
Submission Controls
Submit this form with an image:

Submit this form with a submit button:

Reset the form to its initial state:

Hasil :


17/17

pengenalan xhtml

Documents