Test Block Top

The Blog...
Articles, Tips & Trick and Other Interesting Information...

14 Februari 2010

Diagram Pohon HTML

Halaman web/blog setidaknya tersusun dari beberapa tag diantaranya 'title' yang terletak antara tag <head> sampai </head>, diikuti dengan konten (main content) yang terletak antara tag <body> sampai dengan </body>. Lebih jelasnya, lihat gambar 'Diagram Pohon HTML' di bawah:

Diagram Pohon HTML

Tag paling atas 'html', diikuti tag 'head' dan 'body' di dalamnya. Tag 'head' mempunyai sub tag 'title', sedangkan 'body' mempunyai sub tag antara lain 'h1' (header) dan tag 'p' (paragraf).

Tag 'p' sendiri mempunyai sub tag 'em' (emphasized / huruf miring), 'bold' (huruf tebal), dan 'underline' (garis bawah text).

Keterkaitan antar tag dapat dikatakan sebagai hubungan antara induk dan anak, 'html' merupakan induk dari tag 'head' dan 'body', tag 'head' induk dari tag 'title', 'body' induk dari 'h1' dan 'p', 'p' induk dari 'em' 'bold' dan 'underline'. Jika dibalik 'em' 'bold' dan 'underline' merupakan anak dari 'p', 'p' dan 'h1' merupakan anak dari 'body', 'title' anak dari 'head', 'body' dan 'head' merupakan anak dari 'html'. Contoh kode htmlnya dapat anda lihat seperti di bawah ini;



<!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">
<head>
<title>title/judul halaman website anda</title>
</head>
<body>
<h1>Header Text Anda</h1>

<p>Paragraf pertama konten</p>

<p><b><u><em>Paragraf kedua konten</em></u></b></p>
</body>
</html>

Tampilan visual pada web browser akan seperti ini;

Header Text Anda

Paragraf pertama konten

Paragraf kedua konten

Dapat dilihat '<b>', '<u>', '<em>' berada diantara tag 'p' buka dan tutup, atau dengan kata lain '<b>', '<u>', '<em>' merupakan bagian dari tag 'p'. Tag 'p' bagian dari tag 'body', tag body berada diantara tag 'html' dan seterusnya.

Kira-kira seperti itulah contoh sederhana struktur halaman website pada umumnya. Tapi tentu saja untuk membuat halaman web yang menarik dan interaktif tidak semudah dan sesederhana itu, dibutuhkan imaginasi, tekhnik dan cara yang lebih rumit lagi.

Tidak ada komentar:

Posting Komentar

Loncat ke Atas ↑