Konsep Hypertext Markup Language

Definisi Markup Language

Markup Language

Markup language adalah sejenis pengkodean pada teks yang merepresentasikan teks sebagai suatu struktur detil tentang teks yang diperlihatkan.

Pada markup language modern, penggunanya yang sangat menyebar adalah HTML dan XML

Web Page

Web adalah sarana yang dapat membantu anda untuk mengemukakan ide-ide anda. Dalam merancang sebuah web site, sebaiknya anda menentukan :

• Tentukan tujuan membuat website.

• Tentukan halaman-halaman web apa yang diperlukan untuk website tersebut.

• Tentukan sasaran pembaca web yang anda buat.

• Usahakan menambah suara, gambar, animasi atau fitur-fitur agar web anda terlihat menarik.

Struktur Web Page

Sebelum mulai membuat dokumen web. Sebaiknya pertimbangkan dengan baik cara mengelola dokumen tersebut. Hal paling mudah kita lakukan adalah dengan membuat struktur / bagan dari rancangan web yang akan kita buat dengan jelas dan tidak menyimpang dari tujuan dan sasaran yang telah di tentukan. Hal-hal yang perlu disampaikan antara lain adalah :

• Pembukaan: memperkenalkan dokumen anda kepada pembaca disertai dengan ulasan ringkas tentang maksud dokumen tersebut

• Menu utama: memperlihatkan isi dari seluruh web site anda

• Penutup: anda bisa menggunakan bagian ini untuk membuat suatu ringkasan atau meminta saran dan pendapat pembaca

HyperText Markup Language (HTML)

HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language

• HTML is not a programming language, it is a markup language

• A markup language is a set of markup tags

• HTML uses markup tags to describe web pages

HTML markup tags are usually called HTML tags

• HTML tags are keywords surrounded by angle brackets like <html>

• HTML tags normally come in pairs like <b> and </b>

• The first tag in a pair is the start tag, the second tag is the end tag

• Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

¡ HTML documents describe web pages

¡ HTML documents contain HTML tags and plain text

¡ HTML documents are also called web pages

Struktur Dokumen HTML

Dokumen HTML disusun tiga bagian yaitu:

Pasangan tag yang berbentuk <html> dan </html> yang menandakan bahwa kode yang anda buat merupakan kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML. (didalam tag <html> dan </html> umumnya terbagi atas kepala dan badan).
Bagian Kepala disimbolkan dengan tag <head> dan </head> yang berguna sebagai informasi umum dari sebuah halaman web. (pada bagian kepala, anda bisa menentukan judul dokumen HTML. Judul ini ditulis dalam pasangan tag <title> dan </title>, tag title hanya boleh berada di bagian kepala).
Bagian Badan disimbolkan dengan tag <body> dan </body> yang berguna untuk mensetting attribut di seluruh dokumen

Gunakan selalu huruf kecil (lowercase)

kebiasaan kita dalam membuat HTML, hurufnya gede-gede bahkan kadang-kadang campur aduk nggak karuan. Perhatikan contoh HTML yang keliru dibawah ini:

<TR>

<TD>Contoh Teks</TD>

</TR>

</table>

Jika anda perhatikan pada dicontoh diatas, tag ataupun atribut ada yang menggunakan huruf kapital (uppercase). Didalam HTML kode seperti itu salah, anda harus selalu menggunakan huruf kecil. Karena itu biasakan menggunakan huruf kecil dalam membuat tag html. Walaupun toh hasilnya dibrowser sama saja, tetapi web anda menjadi tidak standard

Hindari Pasangan Tag yang Berpotongan dengan Pasangan Tag Lain

Sebuah pasangan tag bisa berada dalam pasangan tag yang lain. Tag seperti ini sering disebut tag berkalang (nested tag). Contoh:

<html>

<head>

<title>Nested Tag</title>

</head>

</html>

Jika anda menuliskan pasangan tag. Pastikan bahwa anda menuliskan dengan benar. Pasangan tag yang berpotongan dengan pasangan tag yang lain perlu dihindari. Karena akan menjadi error dan bukan merupakan bahasa HTML lagi.

Contoh penulisan tag yang salah :

<html>

<head>

<title>

<body>

Contoh HTML Yang Salah

</title>

</head>

</body>

</html>

Ket:

Terjadi kesalahan letak pada tag <head> dan tag <body>.

Extensible Hyper Text Markup Language (XHTML)

XML atau Extensible Markup Language adalah bahasa markup seperti halnya HTML. Hanya saja XML lebih terstruktur penggunaannya, salah sedikit saja maka aplikasi-aplikasi yang dapat membaca XML akan gagal membaca file XML anda.

Perbedaan antara XML dan HTML adalah:

• HTML didesain untuk menampilkan data

• XML didesain untuk mendeskripsikan data.

Contoh Syntax XML :

<?xml version="1.0" encoding="UTF-8"?>

<nama>Achmad Teguh Wibowo</nama>

<bagian>PPTI Lantai 8</bagian>

</deskripsi>

<hobi>

<pertama>Tidur</pertama>

<kedua>Makan</kedua>

</hobi>

</profil>

Sejarah XHTML

Karena itu W3C mengeluarkan standard baru yang menggabungkan kekuatan HTML dan XML menjadi satu yaitu XHTML. Karena XHTML merupakan XML, maka XHTML bisa dibaca oleh semua alat yang mampu membaca XML. Dan karena XHTML juga merupakan HTML maka browser-browser kuno juga mampu membacanya.

KENAPA HARUS STANDART ?

• Tidak Semua Browser Bisa Membaca Kode HTML Yang Tidak Standart (browser Link dan browser Webbie).

• Kode XHTML Lebih Terstruktur Maka Search Engine dapat lebih mudah mengindeks website anda.

XHTML sendiri saat ini sudah ada 3 versi, yaitu XHTML 1.0, XHTML 1.1 dan XHTML 2.0 (dalam pengembangan). Apabila anda masih beralih dari HTML ke XHTML gunakan saja XHTML 1.0, karena XHTML 1.1 sudah banyak perubahan apalagi yang XHTML 2.0.

XHTML 1.0 sendiri dibagi menjadi 3 tipe dokumen yaitu:

• STRICT. Puncaknya standard, gunakan ini apabila anda benar-benar menginginkan kode yang benar-benar terstruktur. Beberapa tag sudah dihilangkan disini seperti <iframe>. Anda harus mengkombinasikan antara XHTML dan CSS

• TRANSITIONAL. Gunakan ini apabila anda ingin tampilan ditampilkan didalam file XHTML tidak di CSS

• FRAMESET. Gunakan yang ini, jika anda ngotot ingin menggunakan frames

Contoh Deklarasi XHTML 1.0 Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Contoh Deklarasi XHTML 1.0 TRANSITIONAL :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Contoh Deklarasi XHTML 1.0 FRAMESET :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Browser

browser adalah suatu perangkat lunak yang digunakan untuk menampilkan halaman-halaman website yang berada di internet.

Beberapa Contoh Browser Yang Sering Digunakan :

• Internet Explorer