pengenalan xhtml
TRANSCRIPT
-
7/31/2019 Pengenalan Xhtml
1/17
Pengenalan XHTML
Teknik Informatika
UNIVERSITAS LANGLANGBUANA BANDUNG
-
7/31/2019 Pengenalan Xhtml
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
-
7/31/2019 Pengenalan Xhtml
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.
-
7/31/2019 Pengenalan Xhtml
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.
At last, I am a web developer!
Sebagian besar teks pada sebagian besar halaman web berada dalam p atau
paragrafelemen. Baik h1 dan p elemen menghasilkan satu baris setelah tag
penutup.
-
7/31/2019 Pengenalan Xhtml
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
At last, I am a web developer!
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 sepertipada 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 -
7/31/2019 Pengenalan Xhtml
6/17
-
7/31/2019 Pengenalan Xhtml
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:
-
7/31/2019 Pengenalan Xhtml
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
-
7/31/2019 Pengenalan Xhtml
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 :
-
7/31/2019 Pengenalan Xhtml
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:
-
7/31/2019 Pengenalan Xhtml
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.
-
7/31/2019 Pengenalan Xhtml
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
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.
-
7/31/2019 Pengenalan Xhtml
13/17
tbody
Elemen ini digunakan untuk menyertakan sebuah kelompok yang
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
Internet Explorer 6.x34%141,191,308
Netscape 4.x4%16,606,594
Internet Explorer 4.x3%13,080,856
Others
5%20m (approx)
Dilihat dalam browser, Anda akan melihat berikut:
-
7/31/2019 Pengenalan Xhtml
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
-
7/31/2019 Pengenalan Xhtml
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 ButtonsWhat does XHTML stand for?
Extendable Hypertext Markup LanguageExpandable Hypertext Markup Language
Extensible Hypertext Markup LanguageType your comments in here:
CheckboxesCheck any of these that you like:
Candy -
7/31/2019 Pengenalan Xhtml
16/17
Pizza
FriesMore comments:
Submission Controls
This control is disabled!Submit this form with an image:
Submit this form with a submit button:
Reset the form to its initial state:
Hasil :
-
7/31/2019 Pengenalan Xhtml
17/17