Home > HTML, web development > Dasar-dasar HTML

Dasar-dasar HTML

July 5th, 2009 Leave a comment Go to comments

Netscape 7.

Image via Wikipedia

Semua dokumen dan aplikasi yang dapat berjalan di atas web browser umumnya memiliki format hypertext markup language (HTML). Karena itu, untuk bisa melalukan pemrograman aplikasi di atas web anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah banyak terdapat tool yang dapat anda gunakan untuk membuat halaman secara WYSIWYG seperti Frontpage, Dreamweaver, dll, namun tetap saja anda harus menguasai HTML untuk membuat aplikasi berbasis web.

Setelah mempelajari bagian ini anda diharapkan akan mampu:

  • Menguasai dasar-dasar HTML.
  • Mengenal dan mampu menggunakan tag-tag HTML dasar: H1, H2, dst, list, ordered list, dan unordered list.
  • Menguasai dan mengugnakan tabel HTML untuk menampilkan informasi statis dalam bentuk tabel.
  • Melakukan pem-format-an paragraph pada dokumen HTML.
  • Menentukan warna dokumen HTML.
  • Menggunakan frame HTML.
  • Melakukan pem-format-an font pada dokumen HTML
  • Mengerti dan menggunakan form HTML untuk menerima input dari user.
  • Mengerti CSS
  • Mengerti sekilas JavaScript


Pendahuluan

HTTP (hypertext transfer procotol) merupakan protokol yang digunakan untuk mentransfer data antar web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (hypertext markup language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file text biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan tag-tag (perintah khusus) pada file text biasa tadi.

Tag HTML biasanya berupa tag-tag yang berpasang-pasangan dan ditandai dengan simbol < dan >. Pasangan atau ‘penutup perintah’ dari sebuah tag ditandai dengan tanda ‘/’. Misalnya pasangan dari tag <contoh> adalah </contoh >.

Struktur Dokumen HTML

Setiap dokumen atau halaman HTML memiliki struktur atau susunan file sebagai berikut:

<HTML>
<HEAD>
<TITLE> Judul yang akan muncul pada title bar web browser</TITLE>
</HEAD>
<BODY>
Text, gambar, atau apapun yang ingin anda tampilkan pada dokumen anda ada pada bagian ini.
</BODY>
</HTML>

Latihan: Mengenal Struktur HTML

Ketikkan baris-baris di atas dengan NOTEPAD pada sebuah file baru dengan nama LATIHAN1-1.HTML. Lalu simpan pada direktori C:\TEMP. Lalu jalankan browser anda dan buka file di atas melalui menu FILE-OPEN.

Hasilnya akan terlihat seperti pada gambar di bawah:

Gambar 1 Tampilan Latihan HTML 1

Gambar 1 Tampilan Latihan HTML 1

Seperti terlihat, struktur file HTML diawali dengan sebuah tag <HTML> dan ditutup dengan tag </HTML>. Di dalam tag ini terdapat dua buah bagian besar yaitu yang diapit oleh tag <HEAD> … </HEAD> dan tag <BODY> … </BODY>.

Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <TITLE> … </TITLE> yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Tag lain misalnya <META> dan tag-tag lainnya yang akan kita pelajari kemudian.

Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anda akan menuliskan semua jenis informasi , berupa text dengan bermacam format maupun gambar, yang ingin anda sampaikan pada pengguna nantinya.

Tag Heading

Tag pertama yang akan kita pelajari adalah tag heading yang berfungsi untuk memformat heading (judul dan sub judul) dari sebuah halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML yaitu:

Daftar Tag Heading

Tag pembuka

Tag penutup

Nama

Fungsi

<H1>

</H1>

Heading 1

Judul Besar

<H2>

</H2>

Heading 2

Sub judul 1

<H3>

</H3>

Heading 3

Sub judul 2

<H4>

</H4>

Heading 4

Sub judul 3

<H5>

</H5>

Heading 5

Sub judul 4

<H6>

</H6>

Heading 6

Sub judul 5

<H7>

</H7>

Heading 7

Sub judul 6

Latihan: Mengenal Heading

Ketikkan baris-baris berikut ini pada sebuah file baru, dan simpan dengan nama
LATIHAN1-2.HTML.

<HTML>
<HEAD>
<TITLE> Latihan menggunakan tag heading</TITLE>
</HEAD>
<BODY>
<H1>Produk PT Maju Terus</H1>

Berikut ini adalah produk yang terdapat oleh PT Maju Terus.

<H2>Komputer</H2>

Pentium II, Pentium 200, Pentium 100, Pentium 75

<H2>Asesori </H2>

Disket 1.44M, Cartridge 100 M Rp 100.000,

<H2>Printer</H2>

HP Laserjet III Rp 2.000.000, HP Deskjet 500 Rp 1.500.000, HP Deskjet 600C Rp 1.900.000

</BODY>
</HTML>

Jalankan browser anda dan buka file di atas. Perhatikan tampilan yang terlihat. Text yang diapit oleh tag <H1> dan </H1> akan muncul dengan ukuran huruf yang lebih besar dan tebal dibandingkan dengan text normal. Text yang diapit oleh tag <H1> dan </H1> akan muncul dengan ukuran huruf yang lebih besar dan tebal dibandingkan dengan text normal namun lebih kecil daripada text yang diapit oleh tag H1. Demikian seterusnya untuk tag-tag heading selanjutnya.

Tag List

Tag <LI> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu daftar dalam format bullet (bulleted list) dan dalam bentuk nomor (ordered list). Untuk masing-masing jenis list ini diperlukan tambahan tag yang berbeda yaitu tag <UL> dan <OL>.

Latihan: Mengenal List

Sebagai contoh, buka lagi file LATIHAN1-2.HTML dan simpan sebagai LATIHAN1-3.HTML. Lalu ketikkan baris-baris tambahan sehingga terlihat seperti berikut ini:

<HTML>
<HEAD>
<TITLE> Latihan menggunakan tag heading</TITLE>
</HEAD>
<BODY>
<H1>Produk PT Maju Terus</H1>

Berikut ini adalah produk yang terdapat oleh PT Maju Terus.

<H2>Komputer</H2>

<OL>

<LI>Pentium II

<LI>Pentium 200
<LI>Pentium 100, Pentium 75

</OL>

<H2>Asesori </H2>

<OL>

<LI>Disket 1.44M

<LI>Cartridge 100 M Rp 100.000

</OL>

<H2>Printer</H2>

<UL>

<LI>HP Laserjet III Rp 2.000.000

<LI>HP Deskjet 500 Rp 1.500.000

<LI>HP Deskjet 600C Rp 1.900.000

<UL>

</BODY>
</HTML>

Lalu tampilkan pada browser, dan perhatikan tampilannya. Text yang diapit oleh tag <OL> … </OL> akan ditampilkan dalam bentuk daftar yang teratur (nomor 1,2,3,…). Tag <LI> akan menyebabkan browser menampilkan tanda bullet. Namun jika berada diantara tag <UL>… </UL> tag <LI> akan menyebabkan browser menampilkan nomor yang berurutan.

Tag gambar

Anda dapat menampilkan gambar pada halaman HTML anda jika anda memiliki file gambarnya yang berformat GIF atau JPG. Untuk menampilkan gambar dapat digunakan tag IMG. Format tag ini agak berbeda dengan tag yang telah kita pelajari sebelumnya, yaitu:

<IMG SRC=namafilegambar>

Tag ini tidak memiliki tag penutup. Tag ini memiliki sesuatu didalamnya yang disebut dengan parameter. Parameter yang terlihat di atas dan yang harus disertakan untuk setiap pemanggilan tag IMG adalah parameter SRC. Parameter ini berfungsi untuk menentukan nama file gambar yang akan ditampilkan di browser. Nama file ini harus lengkap dengan path relatif terhadap halaman yang memanggilnya maupun absolut tempat dia berada pada web server.

Latihan: Menggunakan Tag Gambar

Buka file LATIHAN1-3.HTML dan ketikkan baris-baris tambahan sehingga terlihat sebagai berikut:

1. <HTML>

2. <HEAD>

3. <TITLE> Latihan menggunakan tag heading</TITLE>

4. </HEAD>

5. <BODY>

6. <IMG SRC=logo.jpg>

7.

8. <H1>Produk PT Maju Terus</H1>

9. Berikut ini adalah produk yang terdapat pada PT Maju Terus.

10.

11. <H2>Komputer</H2>

12. <OL>

13. <LI>Pentium II

14. <LI>Pentium 200

15. <LI>Pentium 100, Pentium 75

16. </OL>

17.

18. <H2>Asesori </H2>

19. <OL>

20. <LI>Disket 1.44M

21. <LI>Cartridge 100 M Rp 100.000

22. </OL>

23.

24. <H2>Printer</H2>

25. <UL>

26. <LI>HP Laserjet III Rp 2.000.000

27. <LI>HP Deskjet 500 Rp 1.500.000

28. <LI>HP Deskjet 600C Rp 1.900.000

29. <UL>

30.

31. </BODY>

32. </HTML>

Simpan dan berinama LATIHAN1-4.HTML, lalu buka file tersebut pada browser. Anda akan melihat sebuah gambar logo di atas halaman. Jika anda belum memiliki file gambar dengan nama logo.jpg, anda harus terlebih dahulu mengkopikannya pada direktori tempat file LATIHAN1-4.HTML berada.

Pada tag IMG ini kita dapat mendefinisikan beberapa parameter seperti:

Tabel 2 Paramter Tag IMG

Parameter

Fungsi

Isi

BORDER

Menentukan ukuran garis pinggir gambar jika dijadikan hypertext

0,1,2,… (pixel)

WIDTH

Menentukan ukuran lebar tabel

Dapat dalam % ukuran layar, atau dalam pixel

HEIGHT

Menentukan ukuran tinggi tabel

Dapat dalam % ukuran layar, atau dalam pixel

ALT

Menentukan text yang akan muncul di browser saat gambar berlum terdownload.

Text

HSPACE

Menentukan ukuran spasi antar gambar dengan text dalam arah horizontal

0,1,2,… (pixel)

VSPACE

Menentukan ukuran spasi antar gambar dengan text dalam arah vertikan

0,1,2,… (pixel)

Link

Kemampuan web untuk dapat melompat ke halaman lain atau ke alamat internet (URL) lain merupakan salah satu fasilitas yang sangat istimewa karena dapat sangat memudahkan pencarian informasi di internet. Sifat ini disebut hyperlink dan text atau gambar yang dapat kita click untuk menuju suatu halaman atau alamat tertentu disebut hypertext.

Untuk membuat hypertext ke halaman atau alamat URL lain digunakan tag sebagai berikut:

<A HREF=URL _tujuan> hypertext </A>

URL_tujuan dapat berupa nama file yang akan dibuka setelah hypertext di-click oleh pengguna, maupun URL dari sebuah halaman yang ada di internet.

Latihan: Menggunakan Link

Buka file LATIHAN1-4.HTML lalu berinama dengan nama LATIHAN1-5.HTML. Ketikkan baris-baris tambahan berikut ini:

1. <HEAD>

2. <TITLE> Latihan menggunakan link</TITLE>

3. </HEAD>

4. <BODY>

5.

6. <IMG SRC=logo.jpg>

7.

8. <H1>Produk PT Maju Terus</H1>

9. Berikut ini adalah produk yang terdapat pada PT Maju Terus.

10.

11. <H2>Komputer</H2>

12. <OL>

13. <LI><A HREF=http://www.compaq.com>Compaq Pentium II Rp 15.000.000</A>

14. <LI><A HREF=http://www.hp.com>HP Pentium 200 Rp 16.000.000</A>

15. <LI><A HREF=http://www.acer.com>Acer Pentium 100 Rp 14.000.000</A>

16. </OL>

17.

18. <H2>Asesori </H2>

19. <OL>

20. <LI>Disket 1.44M

21. <LI>Cartridge 100 M Rp 100.000

22. </OL>

23.

24. <H2>Printer</H2>

25. <UL>

26. <LI>HP Laserjet III Rp 2.000.000

27. <LI>HP Deskjet 500 Rp 1.500.000

28. <LI>HP Deskjet 600C Rp 1.900.000

29. <UL>

30. </BODY>

31. </HTML>

Pada contoh di atas, jika anda men-click text Compaq Pentium II Rp 15.000.000, anda akan dilompatkan ke homepage Compaq yang beralamatkan pada http://www.compaq.com.

Link dapat juga terjadi ke halaman lain pada server yang sama. Untuk ini parameter HREF cukup diisikan nama file HTML tujuan yang ingin anda buka. Contohnya:

<A HREF=disktet.html>Disket 1.44MB</A>

akan menyebabkan jika anda men-click text “Disket 1.44MB” browser akan membuka file DISKET.HTML pada direktori yang sama dengan file yang memanggil tag ini. Untuk ini anda harus terlebih dahulu memiliki file dengan nama DISKET.HTML.

Link Pada Satu Halaman

Link dapat juga terjadi pada dokumen yang sama, terutama jika dokumen itu terdiri dari banyak halaman yang menyulitkan pengguna untuk membacanya. Link pada satu dokumen ini dapat diibaratkan sebagai daftar isi dari dokumen tersebut.

Untuk membuat link pada satu halaman, digunakan kombinasi tag <A NAME=tujuan1> … </A> dengan tag <A HREF=#tujuan1> … </A>. Contohnya jika anda memiliki bagian dokumen sebagai berikut:

.

.

<H2><A NAME=bab2>BAB 2 Pembibitan</A></H2>

.

.

maka bagian lain pada dokumen anda dapat membuat link ke bagian di atas dengan tag sebagai berikut:

.

.

… detail mengenai pembibitan dapat dilihat pada <A HREF=#bab2>Bab 2</A>.

.

.

Link Dari Suatu Gambar

Link dapat pula kita buat bukan hanya pada text, namun juga pada gambar. Untuk melakukan ini, gunakan tag sebagai berikut:

<A HREF=url_tujuan> <IMG SRC=gambar.jpg> </A>

Tabel HTML

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri dari baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <TABLE>… </TABLE>. Tag ini berisi tag <TR> … </TR> untuk menentukan baris (table row) yang didalamnya terdapat tag <TD> …</TD> untuk menampilkan data pada setiap sel tabel (table data). Struktur tag ini adalah sebagai berikut:

<TABLE>

<TR>

<TD>data baris 1 kolom 1</TD><TD>data baris 1 kolom 2</TD>

</TR>

<TR>

<TD>data baris 2 kolom 1</TD><TD>data baris 2 kolom 2</TD>

</TR>

<TR>

<TD>data baris 3 kolom 1</TD><TD>data baris 3 kolom 2</TD>

</TR>

…

</TABLE>

Latihan: Menggunakan Tabel HTML 1

Buka file LATIHAN1-5.HTML dan simpan sebagai LATIHAN1-6.HTML. Ketikkan baris-baris tambahan sebagai berikut:

1. <HEAD>

2. <TITLE> Latihan menggunakan link</TITLE>

3. </HEAD>

4. <BODY>

5.

6. <IMG SRC=logo.jpg>

7.

8. <H1>Produk PT Maju Terus</H1>

9. Berikut ini adalah produk yang terdapat pada PT Maju Terus.

10.

11. <H2>Komputer</H2>

12. <TABLE>

13.

14. <TR>

15. <TD><A HREF=http://www.compaq.com>Compaq Pentium II </A></TD>

16. <TD>Rp 15.000.000</TD>

17. </TR>

18.

19. <TR>

20. <TD><A HREF=http://www.hp.com>HP Pentium 200</A></TD>

21. <TD>Rp 16.000.000</TD>

22. </TR>

23.

24. <TR>

25. <TD><A HREF=http://www.acer.com>Acer Pentium 100</A></TD>

26. <TD>Rp 14.000.000</TD>

27. </TR>

28.

29. </TABLE>

30.

31. <H2>Asesori </H2>

32. <UL>

33. <LI>Disket 1.44M

34. <LI>Cartridge 100 M Rp 100.000

35. </UL>

36.

37. <H2>Printer</H2>

38. <UL>

39. <LI>HP Laserjet III Rp 2.000.000

40. <LI>HP Deskjet 500 Rp 1.500.000

41. <LI>HP Deskjet 600C Rp 1.900.000

42. <UL>

43. </BODY>

44. </HTML>

Buka file LATIHAN1-6.HTML pada browser, anda akan melihat bagian komputer akan berada pada sebuah tabel yang terformat rapi.

Latihan: Menggunakan Tabel HTML 2

Lakukan pemformatan tabel terhadap bagian-bagian lainnya, dan simpan kedalam file LATIHAN1-7.HTML.

Di dalam tag TABLE kita dapat mendefinisikan beberapa parameter seperti:

Tabel 1. 3 Paramter Tag TABLE

Parameter

Fungsi

Isi

BORDER

Menentukan ukuran garis pinggir tabel

0,1,2,… (pixel)

WIDTH

Menentukan ukuran lebar tabel

Dapat dalam % ukuran layar, atau dalam pixel

HEIGHT

Menentukan ukuran tinggi tabel

Dapat dalam % ukuran layar, atau dalam pixel

BGCOLOR

Menentukan warna tabel

Dalam hexadesimal #000000 (hitam) sampai dengan #FFFFFF (putih)

BACKGROUND

Menentukan nama file gambar untuk background tabel

Nama file background (dalam format JPG atau GIF)

Sebagian besar dari parameter TABEL dapat digunakan untuk menentukan parameter dari baris maupun sel. Untuk menentukan parameter baris gunakan tag

<TR PARAMETER1=aaa PARAMETER2=bbb …> </TR>.

Sedangkan untuk menentukan parameter dari suatu sel gunakan tag

<TD PARAMETER1=aaa PARAMETER2=bbb …> </TD>

Format Paragraph

Disamping perintah-perintah format yang telah dijelaskan di atas, HTML memiliki beberapa format standard lainnya yang berupa text alignment, paragraph, horizontal line.

Tabel 1. 4 Tag Paragraph

Tag format

Guna

Contoh

<CENTER> … </CENTER>

Membuat text suatu paragraph menjadi rata ketengah

<CENTER>

text ini akan rata ke tengah

</CENTER>

<RIGHT>…</RIGHT>

Membuat text suatu paragraph menjadi rapat kanan

<RIGHT>

text ini akan rata ke tengah

</RIGHT >

<P>

Membuat satu pemisah paragraph

Paragraph 1

<P>

Paragraph 2

<BR>

Membuat satu pemisah baris

Baris 1

<BR>

Baris 2

<HR>

Memberikan satu garis pemisah yang berkesan 3 dimensi

Paragraph 1

<HR>

Paragraph 2

Format Font

Font pada halaman HTML dapat diformat seusai dengan desain yang anda tentukan. Untuk ini digunakan tag <FONT>…</FONT>. Berikut ini beberapa parameter yang dapat digunakan untuk memformat font.

Tabel 1. 5 Paramter Tag FONT

Tag format

Fungsi

Isi

SIZE

Menentukan ukuran font

…,-2,-1,+1,+2,+3,..

COLOR

Menentukan warna font

Dalam hexadesimal #000000 (hitam) sampai dengan #FFFFFF (putih)

FACE

Menentukan jenis font

Nama font yang tersedia di browser, misalnya “Arial”, “Times New Roman”, “Courier”, dll

Warna Dokumen

Pada tag BODY dapat kita sertakan informasi tambahan berupa parameter yang digunakan untuk memodifikasi tampilan dari seluruh dokumen HTML anda. Untuk menyertakan parameter pada tag BODY, gunakan tag berikut ini:

<BODY PARAMETER1=isi_parameter1 PARAMETER2=isi_parameter2 dst>

Beberapa parameter yang diapat digunakan untuk tag BODY adalah:

Tabel 1. 6 Parameter Tag BODY

Parameter

Fungsi

Isi

BGCOLOR

Menentukan warna backgound halaman

Dalam hexadesimal #000000 (hitam) sampai dengan #FFFFFF (putih)

BACKGROUND

Menentukan nama file gambar untuk background halaman

Nama file background (dalam format JPG atau GIF)

TEXT

Menentukan warna text normal

Dalam hexadesimal #000000 (hitam) sampai dengan #FFFFFF (putih)

LINK

Menentukan warna hypertext

Dalam hexadesimal #000000 (hitam) sampai dengan #FFFFFF (putih)

ALINK

Menentukan warna hypertext saat di-click

Dalam hexadesimal #000000 (hitam) sampai dengan #FFFFFF (putih)

VLINK

Menentukan warna hypertext yang telah pernah dikunjungi

Dalam hexadesimal #000000 (hitam) sampai dengan #FFFFFF (putih)

Contoh untuk membuat background halaman menjadi warna merah, warna hypertext menjadi hijau, dan warna text normal menjadi putih, digunakan tag sebagai berikut:

<BODY BGCOLOR=”#FF0000″ TEXT=”#FFFFFF” LINK=”#008000″ VLINK=”#800080″ ALINK=”#0000FF”>

Frame HTML

Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa bagian dimana setiap bagiannya merupakan satu halaman HTML terpisah. Ini dilakukan untuk membuat tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap sehingga dapat menghemat bandwidth internet dan mempercepat proses download secara keseluruhan.

Berikut ini contoh ilustrasi dari frame HTML:

Gambar 2 Frame HTML

Gambar 2 Frame HTML

Pada contoh di atas, anda memiliki sebuah halaman HTML utama yang terdiri dari 5 buah frame. Masing-masing frame memanggil file-file HTML yang terpisah untuk dijadikan menjadi satu tampilan pada halaman HTML utama.

Untuk membuat frame pada HTML digunakan tag <FRAMESET> … </FRAMESET>. Di dalam tag ini terdapat tag <FRAME> yang menentukan isi dari frame yang ditentukan pada tag FRAMESET. Struktur dari tag ini adalah:

<FRAMESET ROWS=a,b,c,… atau COLS=a,b,c,…>

<FRAME NAME=nama_frame1 SRC=nama_file_html_frame1>

<FRAME NAME=nama_frame2 SRC=nama_file_html_frame2>

<FRAME NAME=nama_frame3 SRC=nama_file_html_frame3>

</FRAMESET>

Pada tag FRAMESET terdapat parameter ROWS atau COLS yang menentukan apakan tampilan dokumen terbagi menjadi baris-baris frame atau kolom-kolom frame. Isi dari parameter ini adalah persentasi atau ukuran dalam pixel dari tinggi atau lebar dari masing-masing frame. Misalnya kita tentukan parameter ROWS=40,100 maka halaman HTML kita akan terbagi menjadi dua frame yang berbentuk dua baris dengan tinggi masing-masing 40 dan 100 pixel. Jika ditentukan parameter COLS=20%,* maka dokumen kita akan berbentuk dua kolom frame dengan ukuran lebar masing-masing 20% dan 80% dari lebar window browser. Tanda * digunakan untuk harga sisa dari 100% harga yang telah ditentukan pada harga lainnya.

Pada tag FRAME tetdapat parameter NAME yang menentukan identifikasi berupa nama dari setiap frame. Identifikasi ini diperlukan nantinya untuk hubungan antar frame. Parameter selanjutnya adalah SRC yang berisi nama file HTML yang akan ditampilkan pada frame ini.

Frame dapat kita susun bertingkat untuk menghasilkan susunan frame yang berbentuk kolom dan baris sekaligus. Perhatikan contoh berikut:

<FRAMESET ROWS=20%,*>

<FRAME NAME=header SRC=header.html>

<FRAMESET COLS=30%,*>

<FRAME NAME=kiri SRC=kiri.html>

<FRAME NAME=kanan SRC=kanan.html>

</FRAMESET>

</FRAMESET>

Latihan: Menggunakan Frame 1

Ketikkan baris-baris di atas dan simpan dengan nama file LATIHAN1-8.HTML. Jalankan atau buka di browser. Anda akan mendapatkan tampilan sebagai berikut:

Gambar 3 Tampilan Latihan 1. 8

Gambar 3 Tampilan Latihan 1. 8

Pesan-pesan “File not found” muncul karena memang kita belum memiliki file dengan nama HEADER.HTML, KIRI.HTML, dan KANAN.HTML. File-file ini akan kita buat pada latihan selanjutnya.

Latihan: Menggunakan Frame 2

Buat file baru dengan nama HEADER.HTML, KIRI.HTML, dan KANAN.HTML dengan isi masing-masing sebagai berikut:

File HEADER.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Header dokumen</H1>

</BODY>

</HTML>

File KIRI.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Daftar Isi</H1>

<A HREF=kanan.html TARGET=kanan>Isi awal</A><P>

<A HREF=kanan1.html TARGET=kanan>Isi pertama</A><P>

<A HREF=kanan2.html TARGET=kanan>Isi kedua</A><P>

</BODY>

</HTML>

File KANAN.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Isi frame awal</H1>

Isi awal

</BODY>

</HTML>

File KANAN1.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Isi frame dari link pertama</H1>

Isi dari link pertama

</BODY>

</HTML>

File KANAN2.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Isi frame dari link ke dua</H1>

Isi dari link ke dua

</BODY>

</HTML>

Kemudian buka kembali file LATIHAN1-8.HTML dan click link-link yang terdapat pada frame kiri. Anda akan mendapatkan bahwa frame kanan berubah-ubah isinya sesuai dengan link yang anda click.

Satu hal yang baru adalah parameter TARGET pada tag <A HREF>. Parameter ini digunakan untuk menentukan tujuan frame tempat dokumen HTML akan ditampilkan. Parameter ini digunakan saat kita memanfaatkan tag FRAME.

Form HTML

Form HTML merupakan tag yang paling penting khusunya dalam membuat aplikasi berbasis web. Form menyediakan elemen-elemen masukan yang dapat berupa textbox, check box, radio button, dan tombol.

Berikut ini contoh sebuah form pada sebuah halaman HTML.

Gambar 4 Contoh tampilan FORM HTML

Gambar 4 Contoh tampilan FORM HTML

Mendeklarasikan Form

Untuk mendeklarasikan sebuah form digunakan tag <FORM> … </FORM>. Di dalam tag ini kita akan mendefinisikan elemen-elemen form seperti yang telah disebutkan di atas. Selain tag elemen form kita juga dapat menuliskan sembarang text, tag, image.

Elemen tombol Submit digunakan untuk mengirimkan data yang ada pada form ke sebuah program yang akan memproses data tersebut. Tombo Reset digunakan untuk mengosongkan atau mengulangi isi form ke keadaan semulanya.

Struktur tag FORM ini adalah:

<FORM ACTION=program_pemroses METHOD=POST atau GET >

elemen 1

elemen 2

… dst

</FORM>

Parameter ACTION menentukan file atau program yang akan memproses data yang diterima oleh form saat pengguna men-click tombol Submit. Parameter METHOD digunakan untuk menentukan metoda pengiriman data form ke pemroses apakah GET atau POST.

Elemen Textbox

Elemen ini digunakan untuk menampilkan masukan berupa textbox yang mampu menerima masukan berupa string sebanyak satu baris.

Tag yang digunakan adalah:

<INPUT TYPE=TEXT NAME=textbox1 SIZE=xx>

dimana TYPE menentukan jenis masukan yang berupa TEXT (textbox), NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, SIZE adalah ukuran tampilnya textbox ini dalam banyaknya karakter.

Pada browser, elemen ini akan terlihat sebagai berikut:

Gambar 5 Elemen Text Box

Gambar 5 Elemen Text Box

Elemen Textarea

Elemen ini digunakan untuk menampilkan masukan berupa textbox yang mampu menerima masukan berupa string lebih dari satu baris.

Tag yang digunakan adalah:

<TEXTAREA NAME=textbox1 ROWS=xx COLS=yy> isi awal </TEXTAREA>

Parameter NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, COLS dan ROWS adalah ukuran kolom dan baris tampilnya textbox ini dalam banyaknya karakter. Semua text yang diapit oleh tag ini akan ditampilkan di dalamnya pada saat awal munculnya textbox ini.

Pada browser, elemen ini akan terlihat sebagai berikut:

Gambar 6 Elemen TEXTAREA

Gambar 6 Elemen TEXTAREA

Elemen Checkbox

Elemen ini digunakan untuk menampilkan masukan berupa pilihan dimana pengguna dapat memilih lebih dari satu pilihan.

Tag yang digunakan adalah:

<INPUT TYPE=CHECKBOX NAME=checkbox1 VALUE=ON atau OFF>Pilihan 1

dimana parameter TYPE menentukan jenis masukan yang berupa CHECKBOX, NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, VALUE menentukan apakah pada keadaan awal checkbox ini terpilih (ON) atau tidak (OFF).

Pada browser, elemen ini akan terlihat sebagai berikut:

Gambar 7 Elemen CHECKBOX

Gambar 7 Elemen CHECKBOX

Elemen Radio Botton

Elemen ini digunakan untuk menampilkan masukan berupa pilihan dimana pengguna hanya dapat memilih satu pilihan pada satu saat.

Tag yang digunakan adalah:

<INPUT TYPE=RADIO NAME=radio1 VALUE=pilihan1 CHECKED >Pilihan 1

<INPUT TYPE=RADIO NAME=radio1 VALUE=pilihan2>Pilihan 2

<INPUT TYPE=RADIO NAME=radio1 VALUE=pilihan3>Pilihan 3

dst

dimana parameter TYPE menentukan jenis masukan yang berupa RADIO (radio button), NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, CHECKED menentukan apakah pada keadaan awal radio button ini terpilih atau tidak, VALUE adalah harga dari pilihan.

Pada browser, elemen ini akan terlihat sebagai berikut:

Gambar 8 Elemen RADIO button

Gambar 8 Elemen RADIO button

Elemen Drop-Down Menu

Elemen ini digunakan untuk menampilkan masukan berupa pilihan dimana pengguna hanya dapat memilih satu pilihan pada satu saat dan pengguna dapat melihat semua pilihan dengan menekan tombol dropdown yang tersedia.

Tag yang digunakan adalah:

<SELECT NAME=menu1>

<OPTION VALUE=pilihan1>Pilihan 1

<OPTION VALUE=pilihan2>Pilihan 2

<OPTION VALUE=pilihan3>Pilihan 3

dst …

</SELECT>

Di dalam tag SELECT ini terdapat tag OPTION yang berfungsi untuk menampilkan pilihan-pilihan yang akan tersedia. Setiap pilihan ditentukan isinya dengan parameter VALUE.

Pada browser, elemen ini akan terlihat sebagai berikut:

Gambar 9 Elemen Dropdown

Gambar 9 Elemen Dropdown

Gambar 9 Elemen Dropdown

Elemen Tombol

Elemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol SUBMIT untuk mengirimkan data ke pemroses di server, RESET untuk mengulangi isian form, atau NORMAL yang tidak berfungsi apapun sebelum kita mendefinisikan sebuah fungsi untuknya dengan bantuan client-side scripting seperti JavaScript atau VBScript.

Tag yang digunakan adalah:

<INPUT TYPE=SUBMIT VALUE=OK NAME=tombol1> untuk tombol Submit

<INPUT TYPE=RESET VALUE=Reset NAME=tombol2> untuk tombol Reset

<INPUT TYPE=NORMAL VALUE=Jumlah NAME=tombol3> untuk tombol Normal

Pada browser, elemen ini akan terlihat sebagai berikut:

Gambar 10 Elemen Tombol

Gambar 10 Elemen Tombol

Latihan: Menggunakan Elemen Form

Kita akan membuat sebuah form dengan kriteria sebagai berikut:

  • Mampu menampung field Nama, Alamat, Telpon, Fax, dan Email
  • Mampu menampung field Pekerjaan yang berupa dropdown menu dengan pilihan “Mahasiswa”, “Pelajar”, “Pegawai Negeri”, dan “Pegawai Swasta”, dengan isi masing-masing “mahasiswa”, “pelajar”, “peg_negeri”, dan “peg_swasta”.
  • Mempu menampung field Anggota yang berupa pilihan “Ya” atau “Tidak”.
  • Terdapat tombol dengan text “Kirim Data” untuk mengirim data dan “Ulangi” untuk mengulangi proses pengisian.
  • Program yang akan memproses data ini berada di server dengan nama PROSES.EXE dan data dikiriman dengan metoda GET

Untuk membuat form dengan kriteria seperti di atas, ketikkan baris-baris berikut:

1. <HTML>

2. <BODY>

3. <FORM ACTION=PROSES.EXE METHOD=GET>

4. Nama : <INPUT TYPE=TEXT NAME=nama> <P>

5. Alamat: <INPUT TYPE=TEXT NAME=alamat> <P>

6. Telepon: <INPUT TYPE=TEXT NAME=telepon> <P>

7. Fax: <INPUT TYPE=TEXT NAME=fax> <P>

8. Email: <INPUT TYPE=TEXT NAME=email> <P>

9.

10. <SELECT NAME=pekerjaan>

11. <OPTION VALUE=mahasiswa>Mahasiswa

12. <OPTION VALUE=pelajar >Pelajar

13. <OPTION VALUE=peg_negeri >Pegawai Negeri

14. <OPTION VALUE=peg_swasta >Pegawai Swasta

15. </SELECT>

16.

17. Anggota :

18. <INPUT TYPE=RADIO NAME=anggota VALUE=ya CHECKED>Ya

19. <INPUT TYPE=RADIO NAME=anggota VALUE=bukan >Bukan

20.

21. <INPUT TYPE=SUBMIT VALUE=”Kirim Data” NAME=submit>

22. <INPUT TYPE=SUBMIT VALUE=”Ulangi” NAME=reset>

23. </FORM>

24. </BODY>

25. </HTML>

Pada form di atas, ketikan pengguna men-click tombol Submit, data akan terkirim ke server. Data ini tersusun dalam pasangan nama elemen form dan isinya dengan tanda ‘=’. Kesemua pasangan itu dipisahkan dengan tanda &.

Data-data ini kemudian akan diberikan ke server dan diteruskan ke program yang pada contoh di atas bernama PROSES.PHP. Bagaimana cara memproses data yang dimaksud sehingga sesuai dengan spesifikasi yang ditentukan, akan kita pelajari pada bagian selanjutnya.

Layer HTML

Layer adalah bagian dari dokumen HTML yang posisinya dapat diatur dalam satuan pixel (LEFT dan TOP), demikian pula lebar dan tingginya (WIDTH dan HEIGHT).

Boleh terdapat lebih dari satu layer dalam satu dokumen, masing-masing dapat saling bertumpuk => urutan tumpukan dapat diatur (Z-INDEX)

layers

Layer dapat berisi semua tag HTML dan segala jenis in formasi.

Layer dapat dibuat dengan beberapa Tag sbb:

Tag

Keterangan

atribut

Contoh

<SPAN>

Character-level
Bisa di IE maupun Netscape

ID
STYLE

<SPAN id=”Layer1″ style=”position:absolute; left:126px; top:390px; width:200px; height:115px; z-index:1″> … isi layer … </SPAN>

<DIV>

Block-level
Bisa di IE maupun Netscape

ID
STYLE

<DIV id=”Layer1″ style=”position:absolute; left:126px; top:390px; width:200px; height:115px; z-index:1; overflow: visible”>… isi layer …</DIV>

<LAYER>

Hanya di Netscape

ID
LEFT
TOP
WIDTH
HEIGHT
Z-INDEX
BGCOLOR

<LAYER id=”Layer1″ left=”89″ top=”515″ width=”200″ height=”115″ z-index=”1″>… isi layer …</LAYER>

<ILAYER>

Hanya di Netscape

ID
LEFT
TOP
WIDTH
HEIGHT
Z-INDEX
BGCOLOR

<ILAYER id=”Layer1″ left=”89″ top=”515″ width=”200″ height=”115″ z-index=”1″>… isi layer …</ILAYER>

Contoh

<HTML>

<BODY>

<span id=”Layer1″ style=”position:absolute; left:126px; top:390px; width:200px;   height:115px; z-index:1″>

  Text ini berada di dalam layer SPAN

</span>

<div id=”Layer2″   style=”position:absolute; width:200px; height:115px;   z-index:1; left: 58px; top: 904px;
  background-color: #CCFFCC;   layer-background-color: #CCFFCC;   border: 1px none #000000″>

     Text ini berada di dalam layer DIV

</div>

<layer id=”Layer3″ left=”109″ top=”931″   width=”200″ height=”115″ z-index=”1″ bgcolor=”#FF3399″>

     Text ini berada di dalam layer LAYER

</layer>

<ilayer id=”Layer4″ left=”281″ top=”36″   width=”200″ height=”115″ z-index=”1″ bgcolor=”#CCFFCC”>

     Text ini berada di dalam layer ILAYER

</ilayer>

</BODY>

</HTML>

Cascading Style Sheet (CSS)

CSS adalah feature HTML yang digunakan untuk memperkaya desain tampilan dokumen/style (ukuran font, jenis font, warna, tingkat presisi pixel, dsb) dan mempermudah proses layout dokumen.

Dengan CSS:

  • Setiap definisi style diberi nama khusus, disebut Selector
  • Tag HTML dapat di definisikan ulang, disebut Tag Selector
  • Dapat dibuat definisi baru untuk setiap tag HTML, disebut Class Selector
  • Dapat dibuat definisi untuk objek dokumen yang memiliki ID tersendiri (mis: layer HTML), disebut ID Selector

Selector dinyatakan dengan tag <STYLE TYPE=”text/css”> yang diletakkan di bagian <HEAD> dokumen HTML

Format “Tag Selector” (definisi ulang Tag HTML):

<STYLE TYPE=”text/css”>

TAGSelector {property:value; … }

</STYLE>

Contoh:

<HTML>
<HEAD>
<STYLE TYPE=”text/css”>
B {font-family:verdana; font-size:10pt; color:red}
</STYLE>
</HEAD>
<BODY> 

Ini contoh penggunaan <B>tag Bold</B> yang telah di
  definisikan ulang dengan CSS.
</BODY>
</HTML>

Format “Class Selector” (definisi style baru), untuk membuat style yang dapat dipakai oleh semua Tag HTML:

<STYLE TYPE=”text/css”>

.CLASSSelector {property:value; … }

</STYLE>





 


Contoh: 




<HTML> 
<HEAD> 
<STYLE TYPE=”text/css”> 
.kepala {font-family:verdana; font-size:14pt; color:green} 
</STYLE> 
</HEAD> 


<BODY> Ini contoh penggunaan <B class=”kepala”>tag Bold</B> yang 
menggunakan definisi class kepala. <br> Ini contoh penggunaan <I class=”kepala”>tag Italic</I> yang 
menggunakan definisi class kepala. 
</BODY> 
</HTML> 




Format “ID Selector”: Style untuk digunakan oleh object yang memiliki ID khusus (umumnya layer HTML) 




<STYLE TYPE=”text/css”>


  #IDSelector {property:value; … }


</STYLE>




Contoh:




<HTML>


<HEAD>


<STYLE TYPE=”text/css”>


#layer1 {position:absolute; left:10;top:10; z-Index:0}


#layer2 {position:absolute; left:140;top:140; z-Index:1}


</STYLE>


</HEAD>


<BODY>


<div ID=”layer1″>


<table border=”1″ bgcolor=”#FFCC00″>


<tr>


<td>Ini LAYER 1<br>Posisinya dimulai dari titik 10,10</td>


</tr>


</table>


</div>


<div ID=”layer2″> <table border=”1″ bgcolor=”#00CCFF”>


<tr>


<td>Ini LAYER 2<br>Posisinya dimulai dari titik 140,140</td>


</tr>


</table></div>


</BODY>


</HTML>




Definisi Style dapat disimpan di sebuah file yang dapat digunakan bersama-sama oleh semua file HTML, sehingga merubah file tsb otomatis merubah semua dokumen, artinya: 


    

  • mempermudah proses layout dan design

  • mempercepat download dokumen-dokumen HTML selanjutnya karena file style hanya di download sekali saja 
    • 





<LINK rel=stylesheet 


       href=”namafile.css” type=”text/css”>




Contoh


 




<HTML>


<HEAD>


  <LINK rel=stylesheet href=”style.css” type=”text/css”>


</HEAD>


<BODY>


<div ID=”layer1″>


<table border=”1″ bgcolor=”#FFCC00″>


<tr>


<td>Ini LAYER 1<br>Posisinya dimulai dari titik 10,10</td>


</tr>


</table>


</div>


<div ID=”layer2″> <table border=”1″ bgcolor=”#00CCFF”>


<tr>


<td>Ini LAYER 2<br>Posisinya dimulai dari titik 140,140</td>


</tr>


</table></div>






Ini contoh penggunaan <B class=”kepala”>tag Bold</B> yang menggunakan definisi class kepala.


</BODY>


</HTML>




Isi file style.css




.kepala {font-family:verdana; font-size:14pt; color:green}


#layer1 {position:absolute; left:10;top:10; z-Index:0}


#layer2 {position:absolute; left:140;top:140; z-Index:1}




Tag LINK digunakan untuk membuat kaitan (hubungan) antara dokumen ini ke dokumen lain yang disebut pada atribut HREF 


Atribut REL pada tag LINK menentukan apa jenis hubungan (relationship) antara dokumen ini dengan dokumen yang tersebut pada atribut HREF


 


Sekilas Tentang Script


Script adalah program kecil yang dituliskan pada dokumen HTML dan dijalankan pada browser 


Disebut “Client Side Script” karena dijalankan di sisi client (browser), dapat digunakan untuk berinteraksi dengan elemen-elemen dokumen HTML (elemen form, layer, body, title bar, status bar, dll) 


JavaScript dan VBScript adalah bahasa yang paling populer digunakan 


Script didefinisikan dengan tag <SCRIPT> … </SCRIPT> , dapat diletakkan pada bagian heading maupun body dokumen 


Boleh ditambahkan tag <NOSCRIPT> … </NOSCRIPT> untuk mengeluarkan pesan jika browser tidak mempunyai feature untuk menjalankan script 


Script umumnya didefinisikan dengan function untuk digunakan oleh elemen-elemen dokumen, yang dikaitkan dengan event yang ada pada elemen tsb (mis: onClick, onLoad, onFocus, dll) 


Formatnya sbb:




<HTML>


<HEAD>


<SCRIPT LANGUAGE=”JavaScript”>


  <!–  definisi-function-script  


function function1 ();  


function function2 ();  


//—>


</SCRIPT>


</HEAD>


<BODY onLoad=”function1″>


<NOSCRIPT> 


 informasi bahwa browser tdk memiliki feature 




  menjalankan script


</NOSCRIPT> 


  … 


 …  


<INPUT TYPE=”BUTTON” onClick=”function2″>


  …


  …


</BODY>


</HTML>




Contoh JavaScript 


 


<HTML>


<HEAD>


<SCRIPT LANGUAGE=”JavaScript”>  


function welcome()  {   


 alert(“Selamat Datang, saya dipanggil \


           oleh event onLoad dokumen ini”);  


}  


function ditekan(label)  {   


 alert(“Hai, anda baru saja menekan tombol ” + label);  


}


</SCRIPT>


</HEAD>


<BODY onLoad=”welcome()”>


<NOSCRIPT>  


browser anda tdk memiliki feature menjalankan script


</NOSCRIPT>


<FORM>  


<INPUT TYPE=”BUTTON” VALUE=”OK” onClick=”ditekan(this.value)”>


 <INPUT TYPE=”BUTTON” VALUE=”Cancel” onClick=”ditekan(this.value)”>


</FORM>


</BODY>


</HTML>




Contoh Event-event yang paling sering digunakan 








Event




Keterangan




Terdapat pada tag








onLoad




Terjadi pada saat sebuah object selesai di download keseluruhan




<BODY>, <IMG>, <LAYER>, <ILAYER>, <FRAMESET> 








onClick




Terjadi saat sebuah object di-click oleh user




<INPUT>, <SELECT>, <A>, <AREA>, <BODY> 








onDblClick




Terjadi saat sebuah elemen form di-doubleclick oleh user




<BODY>, <A>, <AREA>








onFocus




Terjadi saat cursor masuk ke suatu object




<INPUT>, <BODY>, <LAYER>, <ILAYER>, <TEXTAREA> 








onBlur




Terjadi saat cursor keluar dari suatu object




<INPUT>, <BODY>, <LAYER>, <ILAYER>, <TEXTAREA> 








onMouseOver




Terjadi saat cursor mouse memasuki suatu object




<LAYER>, <A>, <AREA>








onMouseOut




Terjadi saat cursor mouse keluar dari suatu object




<LAYER>, <A>, <AREA>








onMouseDown




Terjadi saat tombol mouse ditekan pada suatu object




<INPUT TYPE=SUBMIT>, 
<INPUT TYPE=RESET>, 
<INPUT TYPE=BUTTON>, 
<BODY>, <A>, <AREA>








onMouseUp




Terjadi saat tombol mouse dilepas pada suatu object




<INPUT TYPE=SUBMIT>, 
<INPUT TYPE=RESET>, 
<INPUT TYPE=BUTTON>, <BODY>, <A>, <AREA>








Definisi function script boleh juga dituliskan dalam satu file khusus agar dapat digunakan secara bersama-sama oleh banyak dokumen HTML. Untuk itu digunakan atribut SRC, yang isinya adalah lokasi file script, pada tag <SCRIPT>, misalnya: 




<HTML>


<HEAD>



<SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.mycompany.com/scripts/scripts.js”>
</SCRIPT>


</HEAD>


<BODY onLoad=”welcome()”>


<NOSCRIPT>  


browser anda tdk memiliki feature menjalankan script


</NOSCRIPT>


<FORM>  


<INPUT TYPE=”BUTTON” VALUE=”OK” onClick=”ditekan(this.value)”>



  <INPUT TYPE=”BUTTON” VALUE=”Cancel” onClick=”ditekan(this.value)”>


</FORM>


</BODY>


</HTML>




Selengkapnya lihat pada JavaScript Documentation (http://developer.netscape.com/library/documentation/javascript.html) 


 


Tag META


Tag <META> digunakan untuk menyimpan informasi yang berkaitan dengan browser (mis: refresh) dan search engine (mis: keyword, description), atau keperluan khusus lainnya 


Tag <META> memiliki atribut NAME, HTTP-EQUIV, dan CONTENT yang menentukan apa fungsi dari tag META itu sendiri 


Tag <META> “DESCRIPTION” dan “KEYWORD”, digunakan agar search engine dapat mengindex website anda, menampilkan pada direktorinya, berdasarkan DESCRIPTION dan KEYWORD yang ada, misalnya: 




<HEAD>


  <META NAME=”DESCRIPTION” CONTENT=”Virtual Training Center”>


<META NAME=”KEYWORDS” CONTENT=”HTML, PHP, JAVASCRIPT, VIRTUAL”>


</HEAD>




Tag <META> “REFRESH” digunakan untuk secara otomatis mereload dokumen HTML atau meload dokumen HTML baru setelah sekian detik, misalnya: 




<HEAD>



  <META HTTP-EQUIV=”REFRESH” CONTENT=”5;URL=http://www.vitraining.com”>


</HEAD>




Related articles by Zemanta















Reblog this post [with Zemanta]




  • Share/Bookmark
			

		

		

			Categories: HTML, web development			Tags: , , 		

	


	
		

	










	
	
    
			
  1. 
			No comments yet.		
    2. 
		

	


	
			
    
							
  1. 
					No trackbacks yet.				
    2. 

					

		

	






	

	


					
			

				

					
					
				

				

					
					
				

				

					
					
				

			


			
		
		
		

			
		


		
		

	

		


	

	


	

	

	



	































This site uses a Hackadelic PlugIn, Hackadelic SEO Table Of Contents 1.6.0.