Dasar Tag Hypertext Markup Language HTML
Hypertext Markup Language (HTML)
Dokumen HTML merupakan sebuah file teks. Karena hanya berisi teks, makadokumen HTML menjadi sangat sederhana, sehingga mudah untuk ditransfer ke sebuah jarungan internet. Namun karena sederhana, HTML memiliki kelemahan, salah satunya adalah Kita harus mengetikkan sendiri semua kode HTML jika ingin membuat sebuah halaman web / blogspot. Memang sekarang telah banyak beredar HTML editoryang dapat membantu Kita dalam membuat sebuah halaman web / blogspot tanpa menyentuh kode HTML sama sekali., namun dalam pengembangan halaman web / blogspot denganmenggunakan bahasa script seperti VBScript dan Java Script, pengetahuan mengenaiHTML harus mutlak diperlukan, karena Kita harus tahu dengan pasti di mana harusmenyisipkan script yang diinginkan dalam HTML.
Untuk menuliskan HTMLVBScript dan JavaScript dapat menggunakan teks editor sederhana, seperti Notepad atau EditPad.
Dokumen HTML merupakan sebuah file teks. Karena hanya berisi teks, makadokumen HTML menjadi sangat sederhana, sehingga mudah untuk ditransfer ke sebuah jarungan internet. Namun karena sederhana, HTML memiliki kelemahan, salah satunya adalah Kita harus mengetikkan sendiri semua kode HTML jika ingin membuat sebuah halaman web / blogspot. Memang sekarang telah banyak beredar HTML editoryang dapat membantu Kita dalam membuat sebuah halaman web / blogspot tanpa menyentuh kode HTML sama sekali., namun dalam pengembangan halaman web / blogspot denganmenggunakan bahasa script seperti VBScript dan Java Script, pengetahuan mengenaiHTML harus mutlak diperlukan, karena Kita harus tahu dengan pasti di mana harusmenyisipkan script yang diinginkan dalam HTML.
Untuk menuliskan HTMLVBScript dan JavaScript dapat menggunakan teks editor sederhana, seperti Notepad atau EditPad.
Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag. Penulisannya diapit oleh apa yang disebut delimiter (pembatas).Delimiter adalah suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag.
Untuk HTML delimiter yang dipakai adalah dengan karakter < dan > . Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tag.
Tag pada awal kode disebut opening tag, dan pada akhir kode disebut ending tag. Ending Tag ditandai dengan karakter/ diikuti dengan opening Tag.
Contoh tag :
<HTML> -----Kode program. </HTML>
Sebuah dokumen HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala). Bagian head ditkitai dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>. Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut , misalnya judul, nama penulis, komentar-komentar ,dan lain-lain.
Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web / blogspot tersebut.
Contoh dari tag dokumen web / blogspot sederhana :
<HTML>
<HEAD><H1>Belajar BLOGSPOT dasar</H1>
</HEAD>
<BODY> Selamat datang ke belajar blogspot dasar. </BODY>
</HTML>
Berikut ini adalah beberapa tag dasar yang penting dari HTML (penulisan tidak case sensitive, boleh huruf besar atau kecil.)
1. <HTML> … </HTML>.
Menjelaskan bahwa teks file adalah merupakan HTML format. Diletakkan pada awal dan akhir dari setiap halaman web.
2. <HEAD> … </HEAD>
Diantaranya adalah area dari heading halaman. Digunakan untuk script/perintah khusus yang tidak mempunyai hubungan dengan format dari halaman.
3. <TITLE> … </TITLE>
Memberi judul yang ditampilkan pada ujung kiri atas dari browser window.
4. <BODY> … </BODY>
Setelah tag <HEAD> dan digunakan untuk area dimana yang dilihat adalah merupakan tampilan dari web/ isi dari halaman. Pada tag <BODY> di dalamnya dapat ditambahkan beberapa atribut seperti tampak di bawah ini
o bgcolor=”…” memberikan warna latar/ background halaman.
o text=”…” memberikan warna tulisan / teks.
o link=”…” memberikan warna pada hyperlinks (link halaman)
o vlink=”…” memberi warna pada hyperlink yang telah dimasuki/ diklik.
o alink=”…” memberi warna pada link yang aktif.
Warna yang diberikan merupakan kode hexadecimal .
contoh
#000000 warna putih,
#FF0000 warna merah,
#00FF00 warna hijau dan
#0000FF warna biru.
5. <B> … </B>
Membuat tulisan tebal (Bold Text )
6. <P> … </P>
Merupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan, indentansi dan jarak. Antara lain seperti berikut
<P ALIGN=”left”> … </P> untuk pengaturan paragraph rapat kiri (left)
<P ALIGN=”center”> … </P> untuk pengaturan paragraph di tengah (center)
<P ALIGN=”right”> … </P> untuk pengaturan paragraph rapat kanan (right)
<P NOWRAP> … </P> untuk membuat penulisan paragraph tanpa pemotongan batas pinggir halaman untuk berganti baris, dan hanya bisa berganti baris dengan tag <BR>
7. <BR>
Untuk memberikan baris baru / pergantian baris. Diletakkan pada bagian teks yang mau berganti baris.
Untuk HTML delimiter yang dipakai adalah dengan karakter < dan > . Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tag.
Tag pada awal kode disebut opening tag, dan pada akhir kode disebut ending tag. Ending Tag ditandai dengan karakter/ diikuti dengan opening Tag.
Contoh tag :
<HTML> -----Kode program. </HTML>
Sebuah dokumen HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala). Bagian head ditkitai dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>. Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut , misalnya judul, nama penulis, komentar-komentar ,dan lain-lain.
Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web / blogspot tersebut.
Contoh dari tag dokumen web / blogspot sederhana :
<HTML>
<HEAD><H1>Belajar BLOGSPOT dasar</H1>
</HEAD>
<BODY> Selamat datang ke belajar blogspot dasar. </BODY>
</HTML>
Berikut ini adalah beberapa tag dasar yang penting dari HTML (penulisan tidak case sensitive, boleh huruf besar atau kecil.)
1. <HTML> … </HTML>.
Menjelaskan bahwa teks file adalah merupakan HTML format. Diletakkan pada awal dan akhir dari setiap halaman web.
2. <HEAD> … </HEAD>
Diantaranya adalah area dari heading halaman. Digunakan untuk script/perintah khusus yang tidak mempunyai hubungan dengan format dari halaman.
3. <TITLE> … </TITLE>
Memberi judul yang ditampilkan pada ujung kiri atas dari browser window.
4. <BODY> … </BODY>
Setelah tag <HEAD> dan digunakan untuk area dimana yang dilihat adalah merupakan tampilan dari web/ isi dari halaman. Pada tag <BODY> di dalamnya dapat ditambahkan beberapa atribut seperti tampak di bawah ini
o bgcolor=”…” memberikan warna latar/ background halaman.
o text=”…” memberikan warna tulisan / teks.
o link=”…” memberikan warna pada hyperlinks (link halaman)
o vlink=”…” memberi warna pada hyperlink yang telah dimasuki/ diklik.
o alink=”…” memberi warna pada link yang aktif.
Warna yang diberikan merupakan kode hexadecimal .
contoh
#000000 warna putih,
#FF0000 warna merah,
#00FF00 warna hijau dan
#0000FF warna biru.
5. <B> … </B>
Membuat tulisan tebal (Bold Text )
6. <P> … </P>
Merupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan, indentansi dan jarak. Antara lain seperti berikut
<P ALIGN=”left”> … </P> untuk pengaturan paragraph rapat kiri (left)
<P ALIGN=”center”> … </P> untuk pengaturan paragraph di tengah (center)
<P ALIGN=”right”> … </P> untuk pengaturan paragraph rapat kanan (right)
<P NOWRAP> … </P> untuk membuat penulisan paragraph tanpa pemotongan batas pinggir halaman untuk berganti baris, dan hanya bisa berganti baris dengan tag <BR>
7. <BR>
Untuk memberikan baris baru / pergantian baris. Diletakkan pada bagian teks yang mau berganti baris.
8. <A> …. </A>
Membuat link antar dua halaman web. Tag <A> adalah merupakan tag penghubung (anchor tag). Biasanya dituliskan dengan <A HREF link file > …</A>. Tatacara penulisan letak file ini juga bergantung dari letak filenya dimana. Untuk itu disini akan dijelaskan beberapa cara penulisan letak relative dari link file sbb( file web referensi adalah file dimana kita menuliskan link halaman) :
o HREF=”file.html” file.html terletak di direktori yang sama dengan file web referensi.
o HREF=”dir/file.html” letak file.html di dalam direktori dir dan direktori dir terletak pada direktori yang sama dengan file web referensi
o HREF=”dir/dir2/file.html” letak file.html di dalam direktori dir2 dimana direktori ini di dalam direktori dir.
o HREF=”../file.html” letak file.html di direktori yang berada satu level di atas direktori posisi file web referensi sekarang.
o HREF=”../../dir/file.html” letak file.html pada dua level di atas.
Untuk beberapa tambahan pada penulisan alamat adalah sbb:
o <A HREF=mailto:email@yahoo.com> … <A>
Penulisan seperti ini adalah untuk memberikan link email dari seseorang/ perusahaan.
o <A HREF=http://www.satu.com> … <A> Memberikan link ke website lainnya.
o <A NAME=”nama”> dan <A HREF=”#nama”> … <A>
Membuat link antar dua halaman web. Tag <A> adalah merupakan tag penghubung (anchor tag). Biasanya dituliskan dengan <A HREF link file > …</A>. Tatacara penulisan letak file ini juga bergantung dari letak filenya dimana. Untuk itu disini akan dijelaskan beberapa cara penulisan letak relative dari link file sbb( file web referensi adalah file dimana kita menuliskan link halaman) :
o HREF=”file.html” file.html terletak di direktori yang sama dengan file web referensi.
o HREF=”dir/file.html” letak file.html di dalam direktori dir dan direktori dir terletak pada direktori yang sama dengan file web referensi
o HREF=”dir/dir2/file.html” letak file.html di dalam direktori dir2 dimana direktori ini di dalam direktori dir.
o HREF=”../file.html” letak file.html di direktori yang berada satu level di atas direktori posisi file web referensi sekarang.
o HREF=”../../dir/file.html” letak file.html pada dua level di atas.
Untuk beberapa tambahan pada penulisan alamat adalah sbb:
o <A HREF=mailto:email@yahoo.com> … <A>
Penulisan seperti ini adalah untuk memberikan link email dari seseorang/ perusahaan.
o <A HREF=http://www.satu.com> … <A> Memberikan link ke website lainnya.
o <A NAME=”nama”> dan <A HREF=”#nama”> … <A>
Kedua tag di atas memberikan hubungan saling terkait, dimana jika kita meletakkan tag pertama di atas dari halaman (top) dan tag kedua merupakan link yang diletakkan pada paling bawah halaman sendiri, jika link diklik, maka posisi kursor langsung menuju pada letak pemberian tag pertama. Hal ini biasa dibuat untuk membuat link ke atas dan ke bawah dari satu halaman.
9. <IMG SRC=”gambar.jpg” … >…</IMG>
Jika Anda ingin meletakkan gambar / file photo di web Anda, maka dapat dilakukan dengan memberikan tag ini. Perlu diingat bahwa tag ini juga mempunyai beberapa atribut yang dituliskan di belakang keterangan nama file seperti:
o width=”...” memberikan lebar dari gambar.
o height=”…” tinggi dari gambar.
o border=”…” memberikan ketebalan dari bingkai gambar.
o alt=”…” memberi nama dari gambar.
o align=”…” memberikan posisi dari gambar.
Pemberian link web/ dokumen dengan gambar juga bisa dilakukan.Contohnya jika kita mempunyai file gambar : web.gif dan kita ingin membuat link dengan file tersebut. Maka cara penulisannya adalah dengan :
<A HREF=”link.html’>
<IMG SRC=”web.gif” WIDTH=”50” HEIGHT=”50” BORDER=”1” ALT=”web”>
</A>
Jenis file yang dipakai bisa berupa file bmp, gif dan jpg.
10. Pengaturan bentuk, ukuran, dan warna tulisan.
11. <OL>… </OL> , <UL>… </UL>dan <LI>… </LI>
Biasanya untuk membuat list / memberikan penomoran langsung pada list baris. Contohnya
<ol>
<li>List item #3</li>
<li>List item #4</li>
</ol>
akan tampak seperti berikut :
1. List item #1
2. List item #2
3. List item #3
4. List item #4
Selain itu dapat juga dengan mengganti tag <OL> dengan <UL> maka akan tampak seperti berikut :
• List item #1
• List item #2
• List item #3
• List item #4
12. <HR>
Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen web. Dapat diberikan attribute seperti pada atribut gambar/ image.
13. Tag Tabel.
Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan tag-tag Tabel. Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut.
Maka tag yang harus ditulis adalah sbb:
<table border="1">
<tr> <!--baris 1 awal-->
<td>Sel 1, baris 1</td>
<td>Sel 2, baris 1</td>
<td>Sel 3, baris 1</td>
<td>Sel 4, baris 1</td>
</tr> <!--baris 1 akhir-->
<tr> <!--baris 2 awal-->
<td>Sel 1, baris 2</td>
<td>Sel 2, baris 2</td>
<td>Sel 3, baris 2</td>
<td>Sel 4, baris 2</td>
</tr> <!--baris 2 akhir-->
</table>
Pemberian Tag <!-- ... --> adalah sebagai pemberian komentar pada pengkodean dengan tujuan mempermudah pengecekan baris script.
Penulisan dari tag table adalah diawail dengan tag <table> dan untuk memberikan sel pertama dengan tag <td>, sedangkan untuk ganti baris dengant tag <tr>
14. <!-- komentar -->
Tujuannya memberikan komentar terhadap dokumen dan membantu pengecekan dokumen.
9. <IMG SRC=”gambar.jpg” … >…</IMG>
Jika Anda ingin meletakkan gambar / file photo di web Anda, maka dapat dilakukan dengan memberikan tag ini. Perlu diingat bahwa tag ini juga mempunyai beberapa atribut yang dituliskan di belakang keterangan nama file seperti:
o width=”...” memberikan lebar dari gambar.
o height=”…” tinggi dari gambar.
o border=”…” memberikan ketebalan dari bingkai gambar.
o alt=”…” memberi nama dari gambar.
o align=”…” memberikan posisi dari gambar.
Pemberian link web/ dokumen dengan gambar juga bisa dilakukan.Contohnya jika kita mempunyai file gambar : web.gif dan kita ingin membuat link dengan file tersebut. Maka cara penulisannya adalah dengan :
<A HREF=”link.html’>
<IMG SRC=”web.gif” WIDTH=”50” HEIGHT=”50” BORDER=”1” ALT=”web”>
</A>
Jenis file yang dipakai bisa berupa file bmp, gif dan jpg.
10. Pengaturan bentuk, ukuran, dan warna tulisan.
11. <OL>… </OL> , <UL>… </UL>dan <LI>… </LI>
Biasanya untuk membuat list / memberikan penomoran langsung pada list baris. Contohnya
<ol>
<li>List item #3</li>
<li>List item #4</li>
</ol>
akan tampak seperti berikut :
1. List item #1
2. List item #2
3. List item #3
4. List item #4
Selain itu dapat juga dengan mengganti tag <OL> dengan <UL> maka akan tampak seperti berikut :
• List item #1
• List item #2
• List item #3
• List item #4
12. <HR>
Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen web. Dapat diberikan attribute seperti pada atribut gambar/ image.
13. Tag Tabel.
Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan tag-tag Tabel. Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut.
Maka tag yang harus ditulis adalah sbb:
<table border="1">
<tr> <!--baris 1 awal-->
<td>Sel 1, baris 1</td>
<td>Sel 2, baris 1</td>
<td>Sel 3, baris 1</td>
<td>Sel 4, baris 1</td>
</tr> <!--baris 1 akhir-->
<tr> <!--baris 2 awal-->
<td>Sel 1, baris 2</td>
<td>Sel 2, baris 2</td>
<td>Sel 3, baris 2</td>
<td>Sel 4, baris 2</td>
</tr> <!--baris 2 akhir-->
</table>
Pemberian Tag <!-- ... --> adalah sebagai pemberian komentar pada pengkodean dengan tujuan mempermudah pengecekan baris script.
Penulisan dari tag table adalah diawail dengan tag <table> dan untuk memberikan sel pertama dengan tag <td>, sedangkan untuk ganti baris dengant tag <tr>
14. <!-- komentar -->
Tujuannya memberikan komentar terhadap dokumen dan membantu pengecekan dokumen.