Pengertiaan
HTML:
HTML (Hyper Text
Markup Language) adalah sebuah bahasa markup yang digunakan untuk
membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah
browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan
di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard
Generalized Markup Language), HTML adalah sebuah standar yang digunakan
secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar
Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web
Consortium (W3C).
Secara garis besar,
terdapat 4 jenis elemen dari HTML:
1.
Structural adalah tanda yang menentukan level atau tingkatan dari
sebuah teks (contoh, <h1>Golf</h1> akan memerintahkan
browser untuk menampilkan “Golf” sebagai teks tebal besar yang menunjukkan
sebagai Heading 1
2.
Presentational adalah tanda yang menentukan tampilan dari sebuah
teks tidak peduli dengan level dari teks tersebut
(contoh, <b>boldface</b> akan menampilkan bold.
Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak
direkomendasikan untuk mengatur tampilan teks,
3.
Hypertext adalah tanda yang menunjukkan pranala ke bagian dari
dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.ilmukita.com/">IlmuKita</a> akan
menampilkan IlmuKita sebagai sebuah hyperlink ke URL
tertentu),
4.
Elemen widget yang membuat objek-objek lain seperti
tombol (<button>), list (<li>), dan garis horizontal (<hr>).
Contoh dokumen HTML
sederhana adalah seperti di bawah ini :
<html>
<body>
Isi dari websiteku
</body>
</html>
Hasilnya adalah : Isi
dari websiteku
Pengertian XHTML
XHTML
adalah singkatan dari Extensible Hyper Text Markup Language yang merupakan
gabungan dari html (Hyper Text Markup Language) dan xml (Extensible Markup
Language). Xhtml merupakan versi diatas html, penulisan kode menggunakan bahasa
xhtml haruslah disusun secara rapi dan tertib. Semua elemen pembuka pada xhtml
harusah ditutup, ini berbeda dengan html. Keunggulan menggunakan xhtml adalah
dapat digunakan pada perangkat selain komputer, musalnya HP dan lainnya. Itu
sebabnya Mywapblog penggunaan xhtml karena memang di khususkan untuk pengguna
HP atau ponsel. XHTML adalah sebuah aplikasi dari XML (Extensible Mark-up Languange).
XHTML direkomendasikan oleh W2C pada january 2000.
Perbedaan HTML dan
XHTML :
Perbedaan HTML dan XHTML :
A. Semua
elemen dan attribute pada dokumen XHTML harus diketik dalam huruf kecil (ini
tidak perlu pada HTML).
B. Semua
tag pembuka harus ditutup dengan tag penutup, di HTML banyak tag- tag pembuka
dibiarkan terbuka tanpa menutupnya namun tidak terjadi error bila dibuka pada
browser, salah satu contohnya adalah line break dan image tag.
C. Dalam
dunia XHTML, segala tag harus bersarang secara teratur (properly nested),
artinya bahwa jika anda membuka tag “a” setelah itu membuka tag baru di
dalamnya, maka tag yang paling baru harus ditutup duluan dan tag yang terbuka
pertama harus ditutup paling akhir. Walaupun nesting ini juga terdapat dalam
dunia HTML namun tidak seketat peraturan di XHTML.
D. Tiap value pada attribute harus terbungkus
dengan tanda kutip ganda atau tunggal dan atributnya sendiri tidak boleh
disingkat.
E. Image tag harus terdapat alt attribute yang
menyediakan deskripsi image, untuk memungkinkan mereka memiliki beberapa
persyaratan untuk aksesibilitas bersama dengan standar web yang berbeda.
F. Persyaratan lain dari XHTML adalah adanya
pernyataan dari DOCTYPE yang menentukan aturan mana yang diikuti oleh dokumen
anda (aturan yang diwarisi dari XML). Anda akan menemukan pernyataan ini pada
barisan pertama dari atas ketika anda mengaktifkan halaman source kode XHTML
yaitu tipe dokumen deklarasi (juga disebut dengan DTD atau DOCTYPE). Sebagian
besar halaman web yang diciptakan hari ini akan menyertakan deklarasi DOCTYPE
tersebut. Ada 3 DTD untuk XHTML: Strict (hanya akan validasi jika tanpa tag
usang), Transisi (masih akan memvalidasi dengan tag usang), dan Frameset (untuk
halaman yang "set up frame"). Semua dokumen XHTML harus sesuai dengan
aturan sintaks XML.
Dasar Aturan XHTML
1. Kode berada dalam huruf kecil
Karena XML itu sensitif, semua kata kunci elemen dan nama atribut yang digunakan dalam XHTML harus dalam huruf kecil itu. Sebagai contoh yang salah :
Karena XML itu sensitif, semua kata kunci elemen dan nama atribut yang digunakan dalam XHTML harus dalam huruf kecil itu. Sebagai contoh yang salah :
|
Tips <TITLE>
untuk Blogger Baru </ TITLE>
|
tapi yang benar seperti ini:
|
Tips <title>
untuk Blogger Baru </ title>
|
2. Nilai atribut berada dalam tanda kutip
Semua nilai atribut harus diapit baik dalam tanda kutip tunggal atau ganda.Contoh-contoh berikut tidak diterima oleh XHTML: -
|
<div
id=header-wrapper>
<a href=http://tips-for-new-bloggers.blogspot.com> Link Teks </ a> <img src=photo.jpg/> <table width=200 border=0 cellpadding=2> |
Sebaliknya,harus ditulis seperti: -
|
<div
id='header-wrapper'>
<a href="http://tips-for-new-bloggers.blogspot.com"> Link Teks </ a> <img src="photo.jpg"/> <table width="200" border="0" cellpadding="2"> |
3. Elemen kontainer harus menutup tag
Ini tidak benar: -
|
<p> ayat
A.
|
Dalam XHTML, harus ada tag penutup dengan garis miring (/) di akhir: -
|
<p> code </
p>.
|
Contoh yang benar seperti ini
|
<ul>
... </ Ul>
<li> ... </ Li> <table> ... </ Table> <h2> ... </ H2> <div> ... </ Div> <span> ... </ Span> <dt> ... </ Dt> <dd> ... </ Dd> <a href> ... </ A> |
4. Standalone elemen harus ditutup
Beberapa elemen yang kosong atau mandiri. Mereka tidak mempunyai hubungan dengan tag penutup. Contoh umum adalah: -
|
<br>
<img> <input> <frame> <hr> <META> <link> |
Meskipun demikian, dalam XHTML, elemen ini harus dihentikan atau ditutup. Ada dua cara untuk melakukan itu. Salah satu cara untuk menghentikan elemen yaitu untuk memberikan garis miring (/) pada akhirnya seperti ini: -
|
<br/>
<img/> <input/> <frame/> <hr/> <meta/> <link/> |
Cara kedua adalah dengan menambahkan tag penutup yang sesuai seperti ini: -
|
<br>
... </ Br>
<img> ... </ Img> <input> ... </ Input> <frame> ... </ Frame> <hr> ... </ Jam> <META> ... </ Meta> <link> ... </ Link> |
5. Elemen yang berulang
Ini berarti bahwa elemen harus ditutup dalam urutan terbalik. Sebagai contoh, kode ini tidak diterima dalam XHTML: -
|
<form> <table> ... </
Form> </ table>
|
elemen penutup harus terbalik... contoh sederhananya. elemen pembuka pertama, penutupnya harus ada di bagian terakhir. elemen pembuka kedua, penutupnya harus nomor 2 dari akhir... begitu seterusnya
|
<form> <table> ... </
table> </ form>
|
6. Dokumen hanya memiliki satu elemen root
Dalam dokumen XHTML, kamu hanya diperbolehkan memiliki satu root. di awal
|
<html>
<head> ... </ Head> <body> ... </ Body> </ Html> |
7. Minimisasi atribut tidak diperbolehkan
Dalam XHTML, semua atribut harus dalam bentuk = "nilai". Bahkan jika nilai adalah sama seperti namanya, tidak dapat diminimalkan untuk satu kata.Oleh karena itu, kami di Text Box Add dan Textarea misal. kode text tidak seperti ini :
|
<textarea
readonly> Kode Hyperlink </ textarea>
|
tapi ini: -
|
<textarea
readonly="readonly"> Kode Hyperlink </ textarea>
|
Pengertian HTML5
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan
menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti
dariInternet. HTML5 adalah revisi kelima dari HTML (yang pertama kali
diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada
tahun1997) dan hingga bulan Juni 2011 masih dalam pengembangan.
Tujuan utama pengembangan HTML5 adalah untuk memperbaiki
teknologiHTML agar mendukung teknologi multimedia terbaru, mudah dibaca
oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World
Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal
yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas
pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan
diimplementasikan secara berbeda-beda oleh banyak perangkat
lunak pembuat web.
HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana
dikembangkan oleh W3C atau Word Wide Web Consortium. Lalu apakah yang dimaksud
dengan Semantic Web? Semantic berasal dari bahasa
Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni
pembelajaran untuk memahami penanda. Semantic sendiri
mempunyai arti bahasa yang berfokus pada penanda untuk mengetahui arti yang
terkandung di dalamnya.
Jadi, yang dimaksud semantic web adalah bahasa pemrograman
yang mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu
mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini
bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan
akan berkembang ke Web 4.0. Perkembangan teknologi benar-benar
cepat sekali berubah.
Tujuan dibuatnya HTML5 antara lain:
1.
Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
2.
Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
3.
Penanganan kesalahan yang lebih baik.
4.
Lebih banyak markup untuk menggantikan scripting.
5.
HTML5 merupakan perangkat mandiri.
Fitur baru dalam HTML5:
·
Unsur kanvas untuk menggambar.
·
Video dan elemen audio untuk media pemutaran.
·
Dukungan yang lebih baik untuk penyimpanan secara offline.
·
Elemen konten yang lebih spesifik, seperti artikel,
footer, header,
navigation, section.
navigation, section.
·
Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.
Beberapa kelebihan yang dijanjikan pada HTML5:
·
Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
·
Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
·
Integrasi ('inline') dengan doctype yang lebih sederhana.
·
Penulisan kode yang lebih efisien.
·
Konten yang ada di situs lebih mudah terindeks oleh search engine.
Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah
mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan
Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari
HTML5.
Markup
Pada HTML 5 diperkenalkan beberapa elemen
baru dan atribut yang merefleksikan tipikal
penggunaan website modern. Beberapa diantaranya adalah pergantian
yang bersifat semantik pada blok yang umum digunakan: yaitu elemen
(<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai
blok navigasi website) dan <footer> (biasanya dikaitkan pada
bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen
lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan,
seperti elemen multimedia <audio> dan <video>.
Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen
presentasi semata seperti<font> dan <center>, yang
sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).
API baru
Untuk menambah keluwesan pemformatan, pada
HTML5 telah dispesifikasikan pengkodean application programming interfaces
(APIs)antarmuka document object model (DOM) yang ada dikembangkan dan fitur de
facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :
·
Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat
spesifikasi 1.0 untuk canvas 2D.
·
Timed media playback
·
Media penyimpanan luring (aplikasi web luring)
·
Penyuntingan dokumen
·
Drag and Drop
·
Cross-document messaging
·
Manajemen sejarah kunjungan penjelajah web
·
Tipe MIME dan penanggung jawab protokol registrasi.
Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski
teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML.
Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam
spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :
·
Geolocation
·
Web SQL Database, media penyimpanan database lokal.
·
API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).
Contoh
HTML 5:
·
memasang plugin flash untuk sharing video maka pada
halaman web kita harus ditulis sebagai berikut
<object type="application/x-shockwave-flash"
width="400" height="220" wmode="transparent"
data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>
·
Contoh diatas menggunakan plugin Flash dari Adobe
untuk menjalankan aplikasi web pada browser maka lain caranya bila kita
menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft.
Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah
ini
<object width="300" height="300"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>
<param name="source" value="SilverlightApplication1.xap"/>
</object>
·
HTML5 ini dibuat menyederhanakan kompleksitas
penggunaan media video dengan standard baru yaitu penggunaan tag <video>.
Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file
video sebagai berikut
<video src=tutorialku.mp4>
</video>
</video>
Daftar Pustaka :
penjelasannya simple dan dapat dimengerti
BalasHapusterima kasih mas arif
postingan ini sangat membantu saya dalam memahami bedanya html dengan xhtml
thanks min, atas penjelasannya sangat membantu sekali dalam mengerjakan tugas DPW memahami bedanya html dengan xhtml
BalasHapusNIM : 1822500068 Nama : LIA FEBRIANTI
https://sites.google.com/mahasiswa.atmaluhur.ac.id/liaf-mahasiswa-atmaluhur
http://www.atmaluhur.ac.id
Terimakasih atas info nya saya jadi tau penjelasan dan perbedaan httml5 dan html versi sebelumnya dan saya bisa mengerjakan tugas yang diberikan .. 1822500125 Sadila Septiani http://sadila.mahasiswa.atmaluhur.ac.id/ dan website kampus saya http://www.atmaluhur.ac.id
BalasHapusTerimakasih atas infonya saya jadi tau penjelasan dan perbedaan httml5 dan html versi sebelumnya dan saya bisa mengerjakan tugas yang telah diberikan. Citra Pratiwi 1822500124 http://citrapratiwi.mahasiswa.atmaluhur.ac.id/ dan website kampus saya http://www.atmaluhur.ac.id
BalasHapusTerimakasih atas penjelasannya saya jadi tau penjelasan dan perbedaan httml5 dan html 5 versi sebelumnya dan saya bisa mengerjakan tuga saya 1822500123 Alfina http://alfina.mahasiswa.atmaluhur.ac.id/ dan website kampus saya http://www.atmaluhur.ac.id
BalasHapusmakasih ya gan atas penjelasannya, saya jadi tau dalam menjawab tugas yang diberikan... 1822500067 Ira Meidianti http://ira.mahasiswa.atmaluhur.ac.id/dan website kampus saya http://www.atmaluhur.ac.id
BalasHapusmakasih ya gan atas penjelasannya, saya jadi tau dalam menjawab tugas yang diberikan... 1822500084 Robiansyah http://robiansyah.mahasiswa.atmaluhur.ac.id/dan website kampus saya http://www.atmaluhur.ac.id
BalasHapusTerimakasih atas penjelasannya saya jadi bisa menjawab tugas yang diberikan. 1822500134 Alfindra https://alfindra.mahasiswa.atmaluhur.ac.id dan website kampus saya https//www.atmaluhur.ac.id
BalasHapus