<!DOCTYPE html>
<html>
<head>
<title>Disini titel websiteku</title>
</head>
<body>
Disini adalah konten yang tampil di browser
</body>
</html>Klik untuk melihat previewnya
Doctype pada baris pertama diatas adalah deklarasi dari dokumen HTML yang digunakan jadi bukan tag HTML, sebagai contoh diatas DTD yang digunakan adalah HTML5.
Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>...</html> atau disebut juga dengan elemen HTML.
Kemudian tag " <head>...</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.
Tag berikutnya adalah " <title>...</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel websiteku".
Tag "<body>...</body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Untuk ber-ekperimen anda bisa mengunjungi salah satu web dan melihat kode sumber (source code) dari website tersebut. Caranya adalah dengan menekan Ctrl+U bagi anda pengguna browser Firefox, Google Chrome atau Opera, bagi pengguna browser Safari bisa menekan Ctrl+Alt+U dan bagi anda pengguna Internet Explorer bisa manekan Alt, V kemudian C.
Dengan cara anda masing-masing mulailah mencari ketiga tag diatas. Dengan melihat kode sumber kita juga bisa belajar tentang tag-tag apa saja yang ada di antara tag <html>, tag <head> maupun yang berada di antara tag <body>.
Walaupun kelihatan agak rumit ketika kita melihat isi dari kode sumber tersebut tetapi kalau diperhatikan secara seksama bahwa rumus penulisan tag-tag html tersebut selalu sama.
<nama-elemen atribut>Konten</nama-elemen>Untuk nama-elemen anda bisa melihat tabelnya di w3.org HTML Elements, untuk atribut terdiri dari 2 bagian yaitu nama dan nilai, contoh penulisannya adalah: nama="nilai"
Contoh:
<p style="color:blue">p = nama-elemen, style = nama-atribut dan color:blue = nilai-atribut</p>Hasil:
p = nama-elemen, style = nama-atribut dan color:blue = nilai-atribut
Sebagai referensi untuk atribut-atribut HTML bisa di lihat di w3.org HTML Attributes
Tag elemen HTML tanpa atribut:
<nama-elemen>Konten</nama-elemen>Contoh:
<p>Paragraf tanpa ada atribut</p>Hasil:
Paragraf tanpa ada atribut
Tag elemen HTML bisa memiliki beberapa atribut dengan dibatasi oleh spasi:
<nama-elemen atribut1 atribut2>Konten</nama-elemen>Contoh:
<p style="color:blue" title="paragraf">Paragraf dengan atribut style dan title - geser mouse ketulisan ini untuk melihat titelnya.</p>Hasil:
Paragraf dengan atribut style dan title - geser mouse ke tulisan ini untuk melihat titelnya.
Contoh lainnya:
<input type="button" value="Tombol">Hasil:
Sebagian tag HTML ada yang tidak memerlukan tag penutup seperti contoh diatas. Contoh lainnya adalah tag <img>, tag <img> digunakan untuk menampilkan gambar (image) di dalam dokumen HTML.
Contoh tag <img> dengan beberapa atribut:
<img src="images/yahoo.gif" width="147" height="31" alt="Yahoo">Hasil:
Tag HTML tanpa tag penutup tersebut biasanya hanya memiliki atribut-atribut tanpa ada konten seperti pada tag <p> diatas.
No comments:
Post a Comment