Dasar
TAG HTML
<HTML>
Tag
ini adalah yang paling utama dan dokumen HTML anda harus punyai.
<HTML> tag.
<HTML> harus muncul pada
bagian paling awal dari kode halaman anda, dan </HTML> sebagai
yang paling akhir.
<HEAD>
Tepat
di bawah tag HTML adalah tag <HEAD>. Tag HEAD ini mengandung obyek yang
akan di load lebih dahulu oleh browser pengunjung halaman anda sebelum
menampilkan bagian lain dalam halaman yang sama.
<TITLE>
Tag
Title ini diletakkan di antara tag HEAD.
<TITLE>Selamat Datang di
Rileks – The Leading B2C Portal</TITLE>
String
yang berada di antara tag TITLE akan ditampilkan sebagai judul pada window
browser.
<BODY>
Di
bawah tag HEAD, namun masih di dalam (di antara) tag HTML.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Tag
BODY ini mengandung informasi yang berhubungan dengan property dasar pada
keseluruhan isi dokumen HTML. Text, Link, Link yang telah dikunjungi, Link yang
aktif dan warna latar belakang (background) dokumen serta image yang akan
menjadi background didefinisikan pada bagian ini.
<BODY
TEXT="white" LINK="red" VLINK="orange"
ALINK="gray" BGCOLOR="black"
BACKGROUND="white-tile.gif"></BODY>
Tag
BODY ini mengandung informasi yang berhubungan dengan property dasar pada
keseluruhan isi dokumen HTML. Text, Link, Link yang telah dikunjungi, Link yang
aktif dan warna latar belakang (background) dokumen serta image yang akan
menjadi background didefinisikan pada bagian ini.
<BODY
TEXT="white" LINK="red" VLINK="orange"
ALINK="gray" BGCOLOR="black"
BACKGROUND="white-tile.gif"></BODY>
TEXT=
|
Warna
dari keseluruhan teks pada dokumen
|
LINK=
|
Warna
teks yang berupa Link
|
ALINK=
|
Warna
teks yang sedang di klik oleh user
|
VLINK=
|
Warna
teks link yang pernah dikunjungi oleh user
|
BGCOLOR=
|
Warna
latar belakang dokumen
|
BACKGROUND=
|
Path
(jalur relatifatau absolut) menuju ke image yang akan menjadi latar belakang
dari dokumen anda yang akan muncul lebih dahulu dari bgcolor.
|
Comment
Tag
Tag
"comment" adalah sebagai berikut:
<!--
Your text -->
Browser
akan mengabaikan isi apapun yang berada dalam area comment tag ini. Tag ini
berguna untuk memberi kemudahan pada saat anda melakukan perubahan struktur
halaman anda.
Kode
yang telah anda kuasai sejauh ini adalah:
<HTML>
<HEAD>
<TITLE>My Website</TITLE>
</HEAD>
<BODY TEXT="Black" LINK="Blue" VLINK="Orange" ALINK="Gray" BGCOLOR="White" >
</BODY>
</HTML>
<HEAD>
<TITLE>My Website</TITLE>
</HEAD>
<BODY TEXT="Black" LINK="Blue" VLINK="Orange" ALINK="Gray" BGCOLOR="White" >
</BODY>
</HTML>
Untuk melihat penjelasan dari Tag
Dasar HTML ini anda bisa membacanya di tulisan Belajar HTML dengan sub judul Tag Dasar HTML
Seperti dijelaskan bahwa tag dasar
dari suatu dokumen HTML itu terdiri dari 3 elemen utama yaitu: html, head dan
body. Yang dalam penulisannya diawali dengan tag pembuka "<…>"
dan diakhiri dengan tag penutup "</…>".
<html>
<head>
</head>
<body>
</body>
</html>
Untuk membuktikannya bisa dengan
melihat kode sumber (source code) dari suatu halaman website. Caranya adalah
dengan membuka salah satu website kemudian bagi yang menggunakan browser
Firefox, Google Chrome atau Opera tekan Ctrl+U, untuk Safari tekan Ctrl+Alt+U
sedangkan untuk Internet Explorer tekan 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 <head> maupun
yang berada di antara tag <body>.
Pada bagian paling atas atau sebelum
tag <html> mungkin anda akan melihat <!DOCTYPE bla… bla…>, ini
disebut DOCTYPE deklarasi fungsinya adalah untuk menunjukkan tipe dokumen dan
versi yang digunakan.
Walaupun kelihatannya agak rumit
ketika kita melihat kode sumber tersebut tetapi kalau diperhatikan secara
seksama bahwa rumus penulisan tag-tag html tersebut adalah 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
Elemen HTML tanpa atribut:
<nama-elemen>Konten</nama-elemen>
Contoh:
<p>Paragraf tanpa ada
atribut</p>
Hasil:
Paragraf tanpa ada atribut
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 dari elelen-elemen HTML ada
yang tidak memerlukan tag penutup seperti contoh diatas. Contoh lainnya 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">
1. Frames
Dengan Frame, kamu dapat menampilkan lebih satu dokumen HTML dalam satu halaman website. Masing-masing dokumen disebut frame, dan masing-masing frame berdiri sendiri. Ada 3 macam tag dalam Frames, yaitu :
Tag Frameset
Tag <Frameset> digunakan untuk membagi window kedalam beberapa frame.
masing-masing frame bisa dibuat berdasarkan pembagian row (baris) dan
cols (kolom) dalam frameset.
Tag Frame
Tag <frame> digunakan untuk mendefinisikan dokumen HTML yang diletakkan dalam tiap-tiap frame yang telah dibagi pada tag<frameset> diatas.
Pada Contoh dibawah akan ditunjukkan frameset yang dibagi dalam 2 kolom. Kolom pertama bernilai 25% dari lebar windows pada browser. Kolom kedua bernilai 75% dari lebar windows pada browser. Dokumen HTML “frame_a.htm” diletakkan pada kolom pertama, dan dokumen HTML “frame_b.htm” diletakkan pada kolom kedua. Jadi sebelumnya kamu harus membuat halaman HTML “frame_a.htm” dan “frame_b.htm”.
Kode HTML Frameset :
<HTML>
<HEAD> <TITLE> Frameset </TITLE> </HEAD> <frameset cols=”25%,75%”> <frame src=”frame_a.htm” mce_src=”frame_a.htm”> <frame src=”frame_b.htm” mce_src=”frame_b.htm”> </frameset> </HTML> |
<HTML>
<HEAD> <TITLE>Dokumen frame_a.htm </TITLE> </HEAD> <BODY> <B> Ini adalah Dokument Frame A </B> </BODY> </HTML> |
<HTML>
<HEAD> <TITLE>Dokumen frame_b.htm </TITLE> </HEAD> <BODY> <I> Ini adalah Dokument Frame B </I> </BODY> </HTML> |
Gambar diatas menampilkan 2 buah halaman HTML dalam 1 window.
Tag Iframe
Tag <Iframe> digunakan untuk mendefinisikan frame didalam frame
yang sifatnya fleksibel (bisa dibuat dimana saja).
Contoh :
<HTML>
<HEAD> <TITLE>Dokumen frame_a.htm </TITLE> </HEAD> <BODY> <TABLE> <TR> <TD><iframe src=”frame_a.htm”></iframe></TD> <TD><iframe src=”frame_B.htm”></iframe></TD> </TR> </TABLE> </BODY> </HTML> |
2. Tables
Tables didefinisikan dengan tag<table>. Sebuah table dibagi kedalam baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan tag <td>). Data yang akan ditulis diletakkan di antara tag <td> dan </td> yang bisa berisi text, images, lists, paragraphs, forms,rules, tables, etc.
Dalam contoh tag <iFrame> diatas sudah diberikan contoh penggunakan tables.
Contoh lain penggunakan table:
<table border=”1″>
<tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
row 1, cell 1
|
row 1, cell 2
|
row 2, cell 1
|
row 2, cell 2
|
kalau ada pertanyaan atau tanggapan kasih komentar, ok !!!
0 komentar
Post a Comment