Pertemuan 1 Media Interaktif
1.
HTML dan
XHTML
HTML (HyperText
Markup Language) merupakan sebuah bahasa markup, bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan teks
dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar
yang digunakan untuk mendesain halaman web.
Pada awal tahun 2000, konsorsium W3C (World Wide Web Consortium) membuat
perubahan besar melalui XHTML (eXtensible
Hypertext Markup Language). Ide
dasarnya, dalam upaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan ekstensibilitas XML (eXtensible Markup Language) ke HTML.
Perkembangan HTML semakin pesat seiring diperkenalkannya
HTML5 pada tahun 2009. HTML5 dibangun oleh konsorsium W3C untuk dimasukkan
sebagai perubahan besar berikutnya pada standar HTML. Atas dasar ini, maka
penting sekali untuk mengenal dan memahami HTML5 dengan baik.
2.
Struktur
Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag <ht
ml > dan diakhiri dengan
komplemennya, yakni tag </ ht ml > tag.
Dokumen HTML juga menyertakan tiga pasang tag.
• Tag <head> dan </
head>: digunakan untuk menyatakan informasi
mengenai dokumen HTML.
• Tag <titl e> dan </
titl e>: digunakan untuk menambahkan
title di title bar browser.
• Tag <body > dan </
body>: digunakan untuk melingkupi
semua teks yang terdapat di halaman HTML.
Bentuk struktur dokumen HTML yang standar sebelum versi HTML5
diperlihatkan sebagai berikut:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<!-- Ini
baris komentar, tidak diproses --> <title>Ini
judul dokumen HTML4</title>
</head>
<body>
Ini adalah teks di body
</body>
</html>
Pada HTML5, struktur penulisan lebih diringkas dengan bentuk sebagai
berikut:
<!DOCTYPE
html>
<html>
<head>
<!-- Ini
baris komentar, tidak diproses --> <title>Ini
judul dokumen HTML5</title>
</head>
<body>
Ini adalah teks di body
</body>
</html>
3.
Persiapan
Kebutuhan
Pada praktikum awal ini, meskipun dokumen HTML bisa
ditampilkan tanpa menggunakan web server,
namun di sini diwajibkan tetap menggunakan. Selain itu, praktikum ini juga
menuntut pembuatan kode-kode yang baik, benar, dan valid. Berikut ini adalah
kebutuhan-kebutuhan yang minimal diperlukan:
a.
WampServer
Paket web server Apache, PHP, dan MySQL. Alasan
pemilihan paket bundel seperti ini dikarenakan praktis sehingga tinggal
memfokuskan pada pemrograman.
b.
Web Browser
Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun
untuk pembanding, sebaiknya juga memanfaatkan browser lain.
c.
Editor Teks
Editor teks untuk menuliskan kode-kode HTML
pembentuk halaman aplikasi web (tidak diperkenankan menggunakan IDE seperti
Dreamweaver dan sebagainya).
d.
HTML Validator
Untuk menghasilkan dokumen HTML yang valid, sangat disarankan memasang
validator, misalnya berupa add-on
pada browser Firefox.
1.
Membuat
Dokumen HTML
Secara garis besar, struktur dokumen HTML terdiri
dari dua bagian: header dan bodi. Di
mana header mendefinisikan informasi
mengenai dokumen, sedangkan bodi mendefinisikan tubuh atau isi dokumen.
Langkah-langkah
pembuatan dokumen HTML diperlihatkan sebagai berikut:
1. Buka
editor teks.
2. Ketikkan
teks (kode-kode HTML) berikut:
<!DOCTYPE
html>
<html>
<head>
<!-- Ini baris komentar, tidak diproses --> <title>Ini
judul dokumen</title>
</head>
<body>
Ini adalah
teks di body
</body>
</html>
3.
Simpan dokumen HTML dengan nama latihan1.1.html dan letakkan di lokasi
direktori web, misal C:\wamp\www.
Perhatikan, www merupakan direktori
web dan sebaiknya buat subdirektori di dalamnya.
No comments: