Elemen Head
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> 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.
0 comments
Post a Comment