Haii.. sobat Hots WEB, Elemen adalah struktur yang menjelaskan suatu bagian dari
dokumen HTML.
Misalnya elemen h menjelaskan sebuah heading, element title menjelaskan sebuah judul, dan elemen p menjelaskan sebuah paragraf.
Sebuah elemen mengandung tiga bagian, yaitu tag awal, isi
dan tag akhir. Sebuah elemen diapit oleh kode "<" dan
">" (tanpa tanda petik). Pada tag akhir disisipkan tanda /.
Misalnya elemen body memiliki tag awal <body>, dan tag akhir
</body>. Start tag dan end tag mengatup isi elemen tag :
<body>Isi dari elemen</body>.
Nama elemen tidak memperhatikan besar-kecilnya huruf
sehingga <body>, <BODY>, dan <BodY> sama saja.
Elemen-elemen tidak boleh bertindihan satu sama lain. Bila
suatu baris perintah diawali elemen P lalu disusul elemen EM, maka diakhir
baris harus diakhiri dengan elemen EM terlebih dahulu kemudian P. Misalnya :
<P><EM>Isi dari elemen emphasized
text</EM></P>
Elemen Head
Elemen <head> merupakan elemen yang berisikan
informasi mengenai halaman web yang tengah dibuka, yang tidak akan ditampilkan
secara visual di halaman browser.
Elemen HEAD bisa digunakan untuk tempat penulisan judul
dokumen, informasi dokumen dan definisi referensi alamat. Selain itu, elemen
Head juga berfungsi untuk menghubungkan antara fike external (CSS atau
JavaScript) dengan halaman web yang bersangkutan dan sebaga tempat penulisan
sebuah keyword/kata kunci agar halaman web tercatat dalam mesin pencari (search
engine), seperti yahoo, google, dan sebagainya.
Sintaks :
<head>
<title>Belajar Elemen Head</title>
</head>
Di bawah ini adalah elemen dan atribut yang dapat digunakan
pada elemen HEAD: Atribut dari elemen HEAD di antaranya: dir, lang, xml:lang,
profile.
Elemen BASE
Elemen BASE dipakai untuk menguraikan suatu alamat URL agar
browser mengikutsertakan alamat tersebut dalam pencarian suatu obyek pada
dokumen. Atribut: href, target.
Sintaks:
<BASE Attribute="attributeValue">
Atribut HREF digunakan untuk menetapkan default URL untuk
URL-URL relatif didalam dokumen HTML. Atribut TARGET digunakan untuk menetapkan
default target jendela dimana URL-URL relatif nantinya ditampilkan. Contoh:
<HTML>
<HEAD>
<BASE HREF="http://example.com/files/"
TARGET="_blank">
</HEAD>
<BODY>
<A HREF="A.html">Link 1</A><BR>
<A HREF="B.html">Link 2</A><BR>
<A HREF="C.html">Link 3</A>
</BODY>
</HTML>
Berdasarkan dokumen HTML diatas,
jika Link 1 diklik, pada address bar akan tercetak
http://example.com/files/A.html.
Jika Link 2 diklik, pada address bar akan tercetak
http://example.com/files/B.html.
Jika Link 3 diklik, pada address bar akan tercetak
http://example.com/files/C.html.
Jadi disini sebenarnya URL-URL relatif selalu mengacu kepada
default URL berdasarkan penggambaran di elemen BASE.
Elemen TITLE
Elemen TITLE dipakai untuk mengartikan judul dokumen.
Atribut dari elemen TITLE di antaranya: dir, lang, xml:lang. Isi dari elemen
title juga digunakan untuk beberapa tujuan lainnya.
Ini adalah nama yang muncul di taksbar IE atau Firefox.
Dibawah ini contoh taksbar di IE.
Ketika anda menambahkan halaman ke bookmark (atau
favorit),judul akan digunakan sebagai nama penanda.
Elemen title digunakan oleh mesin pencari untuk memastikan
apa isi halaman anda, dan informasi apa tentang hal itu yang ditampilkan dalam
hesil pencarian.
Sintaks:
<TITLE
Attribute="attributeValue">...</TITLE>
Atribut LANG dan DIR ("ltr" dan "rtl")
masing-masing digunakan untuk menetapkan kode bahasa dan arah penulisan dari
isi elemen TITLE. Contoh:
<HTML>
<HEAD>
<TITLE LANG="id" DIR="ltr">Judul
Dokumen</TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Elemen META
Elemen META dipakai untuk mengartikan keterangan pada
dokumen, seperti nama penulis dokumen, deskripsi dokumen dan informasi kata
kunci yang digunakan oleh mesin pencarian seperti Google, Yahoo, Bing, dll.
dalam pencarian halaman yang sesuai dengan pencarian.
Metadata yang digambarkan elemen META tidak ditampilkan
secara visual, tetapi metadata tersebut sangat membantu mesin-mesin pencari,
seperti Google, Yahoo, dll.
Elemen META harus digambarkan dibagian HEAD. Namun teramat
disayangkan terlalu banyak webmaster yang menggunakan tag ini hanya untuk
spamming. MIsalnya seperti mengulang-ulang keyword untuk membuat page ranking
yang lebih tinggi, sehingga ada search engine yang telah menghentikan
penggunaan isi dari meta. Atribut dari elemen META di anataranya: content,
http-equiv, name, content,scheme, dir,lang, xml:lang.
Sintaks:
<META Attribute="attributeValue">
Atribut CONTENT digunakan sebagai tempat untuk menggambarkan
informasi dari atribut NAME atau HTTP-EQUIV. Atribut NAME digunakan untuk
menetapkan nama-nama parameter, seperti "author",
"description", "keywords", dll.
NAME="author" menggambarkan nama pemilik dari
dokumen HTML.
NAME="keywords" menggambarkan kata kunci untuk
dokumen HTML.
NAME="description" menggambarkan deskripsi singkat
dokumen HTML.
NAME="generator" menggambarkan nama program dimana
dokumen HTML dibuat, misal Notepad.
NAME="expires" menggambarkan masa berlaku untuk
dokumen HTML.
<META NAME="author" CONTENT="Noeroel
Arashi">
<META NAME="keywords"
CONTENT="html,css,javascript">
<META NAME="description" CONTENT="Tutorial
Web">
<META NAME="generator"
CONTENT="Notepad">
<META NAME="expires" CONTENT="Sun, 18 sept
2012 12:00:01 GMT">
Atribut HTTP-EQUIV digunakan untuk menggambarkan HTTP
header.
Untuk HTTP-EQUIV="content-language" menggambarkan
kode bahasa untuk dokumen HTML.
Untuk HTTP-EQUIV="content-type" menggambarkan
jenis media internet untuk dokumen HTML.
<META HTTP-EQUIV="content-language"
CONTENT="id">
<META META HTTP-EQUIV="content-type"
CONTENT="text/html;charset="UTF-8">
Berikut adalah contoh menggambarkan metadata untuk sebuah
dokumen HTML:
<HTML>
<HEAD>
<META NAME="description" CONTENT="tutorial
web" LANG="en" DIR="ltr">
<META NAME="keywords"
CONTENT="HTML,css,javascript,DHTML">
<META NAME="author" CONTENT="Noeroel
Arashi">
<META HTTP-EQUIV="content-type"
CONTENT="text/html;charset=UTF-8">
</HEAD>
<BODY>
...
</BODY>
</HTML>
Elemen SCRIPT
Elemen SCRIPT dipakai untuk mengartikan/mengembed suatu
script fungsi, seperti : Javascript, VBscript atau mengartikan tautan lokasi
file script untuk digunakan dokumen. Isi dari elemen SCRIPT adalah bahasa
scripting yang diembed atau yang akan dituliskan. Elemen SCRIPT boleh
digambarkan dibagian HEAD, elemen-elemen Block-Level kecuali didalam elemen
SELECT dan SCRIPT. Atribut dari elemen SCRIPT di antaranya: charset, type,src,
defer, xml: space.
Sintaks:
<SCRIPT Attribute="attributeValue">...</SCRIPT>
Atribut TYPE digunakan untuk menetapkan tipe media internet
untuk bahasa scripting yang akan digunakan, seperti "text/vbscript"
untuk bahasa VBScript, "text/javascript" untuk bahasa Javascript,
dll.
Atribut CHARSET digunakan untuk menetapkan character set
untuk bahasa scripting eksternal, nilai default adalah "ISO-8859-1"
jika anda tidak memberikannya. Atribut SRC digunakan untuk menetapkan lokasi
dari bahasa scripting yang akan diembed kedalam dokumen HTML. Atribut DEFER
digunakan untuk memberitahukan kepada browser, bahwa pengeksekusian bahasa
scripting ditunda dahulu sampai dokumen HTML selesai dimuat.
Contoh berikut ini adalah menggambarkan bahasa scripting
Javascript didalam dokumen HTML yang sama:
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
document.write("Halo 1!
");
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT TYPE="text/javascript">
document.write("Halo 2!");
</SCRIPT>
</BODY>
</HTML>
Contoh berikut ini adalah mengembed bahasa scripting
Javascript eksternal kedalam dokumen HTML:
Ketiklah dokumen Javascript eksternal dibawah ini dengan
Notepad, lalu simpan dengan nama halo.js.
document.write("Halo 1!<BR>");
Ketiklah kembali dokumen HTML dibawah ini dengan Notepad,
lalu simpan dengan nama halo.html.
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript"
SRC="halo.js"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT TYPE="text/javascript">
document.write("Halo 2!");
</SCRIPT>
</BODY>
</HTML>
Jalankan dokumen halo.html dengan browser.
Elemen OBJECT
Elemen OBJECT dipakai untuk mengartikan/mengembed suatu objek
agar dapat digunakan pada dokumen. Atribut dari elemen OBJECT di antaranya: id,
name, class, dir, lang, style, tabindex, title, xml:lang, align archive,
border, classid, codebase, codetype, data, declare, height, hspace, standby,
type, usemap, vspace, width. Beberapa jenis objek yang diembed seperti applet
Java, animasi Flash memerlukan settingan run-time. Untuk menyetting run-time
untuk objek-objek yang diembed tersebut gunakanlah elemen PARAM.
Elemen PARAM yang diikuti elemen-elemen Inline dan/atau
elemen-elemen Block-Level boleh digambarkan didalam elemen OBJECT. Untuk elemen
OBJECT itu sendiri boleh digambarkan didalam elemen-elemen Block-Level dan
elemen-elemen Inline, kecuali didalam elemen PRE.
Sintaks:
<OBJECT
Attribute="attributeValue">...</OBJECT>
Atribut ALIGN digunakan untuk mengatur kelurusan atau posisi
objek yang diembed terhadap elemen-elemen disekitarnya, nilainya adalah
"top", "middle", "bottom", "left", dan
"right".
Atribut ARCHIVE digunakan untuk menetapkan lokasi atau URL
dari file JAR, umumnya. Atribut BORDER digunakan untuk mengatur ketebalan garis
border untuk objek yang diembed.
Atribut CLASSID digunakan untuk menetapkan lokasi atau URL
dari implementasi (umumnya adalah lokasi dari versi plug-in yang digunakan)
dari objek yang diembed. Atribut CODEBASE digunakan untuk menetapkan default
URL untuk atribut CLASSID, DATA, atau ARCHIVE.
Atribut CODETYPE digunakan untuk menetapkan tipe media
internet untuk nilai atribut CLASSID.
Atribut DATA digunakan untuk menetapkan lokasi atau URL dari
objek yang diembed.
Atribut HEIGHT digunakan untuk menetapkan tinggi untuk objek
yang diembed.
Atribut HSPACE digunakan untuk menetapkan banyaknya ruang
spasi antara objek yang diembed dengan elemen-elemen yang berada disisi kiri
dan sisi kanannya.
Atribut NAME digunakan untuk memberikan nama pengenal untuk
elemen OBJECT.
Atribut STANDBY digunakan untuk menuliskan pesan pendek
selagi objek yang diembed sedang dalam proses dimuat (loading).
Atribut TYPE digunakan untuk menetapkan tipe media internet
untuk objek yang diembed (berdasar nilai dari atribut DATA).
Atribut USEMAP digunakan untuk menggambarkan image-map
disisi klien, nilainya adalah nilai atribut NAME elemen MAP, dan diawali karakter
"#".
Atribut VSPACE digunakan untuk mengatur banyaknya ruang
spasi antara objek yang diembed dengan elemen-elemen yang berada disisi atas
dan sisi bawahnya.
Atribut WIDTH digunakan untuk menetapkan lebar untuk objek
yang diembed.
Berikut adalah contoh mengembed sebuah dokumen HTML:
<HTML>
<BODY>
<OBJECT DATA="A.html"
TYPE="text/html" WIDTH="300" HEIGHT="200">
Alternatif: <A HREF="A.html">Tautan ke
dokumen A.html</A></OBJECT>
</BODY>
</HTML>
Berikut adalah contoh mengembed sebuah dokumen PDF:
<HTML>
<BODY>
<OBJECT DATA="A.pdf"
TYPE="application/pdf" WIDTH="300"
HEIGHT="200">
Alternatif: <A HREF="A.pdf">Ke dokumen
A.pdf</A></OBJECT>
</BODY>
</HTML>
Berikut adalah contoh mengembed sebuah file SWF kedalam
dokumen HTML::
<HTML>
<BODY>
<OBJECT
CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
CODEBASE="http://download.macromadia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
WIDTH="320" HEIGHT="400">
<PARAM NAME="movie"
VALUE="namaFile.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="play" VALUE="true">
<PARAM NAME="loop" VALUE="false">
</OBJECT>
</BODY>
</HTML>
Elemen LINK
Elemen LINK dipakai untuk mengartikan suatu style dokumen
dan mengartikan tautan lokasi file style untuk menghubungkan antara dokumen
dengan sumber lainnya. Atribut dari elemen LINK di antaranya: id, dir, class,
lang, style, title, xml:lang, charset, href, hreflang, media, rel, src, rev,
target, type.
Sintaks:
<LINK Attribute="attributeValue">
Atribut REV digunakan untuk menetapkan hubungan antara
dokumen yang ada dengan dokumen yang dilink.
Atribut REL digunakan untuk menetapkan hubungan antara
dokumen yang dilink dengan dokumen yang ada. Hanya nilai "stylesheet"
untuk atribut REL yang didukung oleh kebanyakan browser, dibawah ini adalah
contoh menggunakan nilai "stylesheet" untuk atribut REL:
Tuliskanlah kode CSS dibawah ini menggunakan Notepad, lalu simpan
dengan nama STYLE.css.
P#pertama {
color: blue;
}
P#kedua {
color: red;
}
Lalu tuliskanlah dokumen HTML dibawah ini menggunakan
Notepad, lalu simpan dengan REL.html.
<HTML>
<HEAD>
<TITLE>REL.html</TITLE>
<LINK REL="stylesheet"
HREF="STYLE.css" TYPE="text/css">
</HEAD>
<BODY>
<P ID="pertama">Alinea 1</P>
<P ID="kedua">Alinea 2</P>
</BODY>
</HTML>
Terakhir jalankan dokumen REL.html, akan nampak didalam
jendela browser untuk alinea pertama teksnya akan ditampilkan berwarna biru dan
pada alinea yang kedua teksnya akan ditampilkan berwarna merah.
Contoh dibawah ini adalah contoh dari hubungan-hubungan
antar dokumen didalam dokumen HTML yang bernama Bab2.html:
<HTML>
<HEAD>
<TITLE>Bab2</TITLE>
<LINK REL="Index"
HREF="../index.html">
<LINK REL="Next" HREF="Bab3.html">
<LINK REL="Prev" HREF="Bab1.html">
</HEAD>
<BODY>
<A HREF="../index.html">Go To Index</A><BR>
<A HREF="Bab3.html">Pergi ke Bab
3</A><BR>
<A HREF="Bab1.html">Kembali ke Bab
1</A><BR>
</BODY>
</HTML>
Atribut HREF digunakan untuk menetapkan lokasi dari dokumen
yang dilink. Atribut TYPE digunakan untuk menetapkan jenis media internet dari
dokumen yang dilink, nilainya antara lain "text/css",
"text/html", "text/javascript", dll. Atribut TARGET
digunakan untuk menetapkan target jendela untuk dokumen yang dilink, untuk
atribut TARGET dapat dilihat di Atribut Target HTML. Atribut MEDIA digunakan untuk
menetapkan tipe media yang digunakan untuk dokumen yang dilink. Atribut
HREFLANG digunakan untuk menetapkan kode bahasa dari dokumen yang dilink.
Atribut CHARSET digunakan untuk menetapkan character set dari dokumen yang
dilink.
Contoh:
Tuliskan kode CSS dibawah ini menggunakan Notepad, lalu
simpan dengan nama STYLE.css.
P#pertama {
color: blue;
}
P#kedua {
color: red;
}
Lalu tuliskan lagi dokumen HTML dibawah ini menggunakan
Notepad, lalu simpan dengan REL.html.
<HTML>
<HEAD>
<TITLE>REL.html</TITLE>
<LINK REL="stylesheet"
HREF="STYLE.css" TYPE="text/css"
media="print">
</HEAD>
<BODY>
<P ID="pertama">Alinea 1</P>
<P ID="kedua">Alinea 2</P>
</BODY>
</HTML>
Untuk melihat aturan CSS ini bekerja, jalankan dokumen
REL.html, kemudian lihatlah didalam print preview atau coba dicetak kedalam
kertas. Nanti akan terlihat bahwa alinea pertama teks akan berwarna biru, pada
alinea kedua teks akan berwarna merah.
Sekian Terima Kasih, Semoga Bermanfaat..