Assalamualaikum kepada semua blogger yang saya hormati, akhirnya saya bisa memiliki waktu luang untuk belajar dan sharing bersama agan agan yang pintar dalam bahasa pemrogramman komputer khususnya dalam pengembangan aplikasi web berbasis java dengan menggunakan teknologi play framework,
tapi sebelumnya saya ingin sarankan kepada agan agan sekalian sebelum kita lanjut menuju ke dalam pengembanganya alangkah baiknya kita sudah mengetahui apa itu HTML, CSS, JQuery dan JavaScript,
baiklah ko begitu kita bahas dahulu mengenai HTML, lets Check It Out.!!!! :)

Hypertext Markup Language

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 dan Netscape Editor, namun tetap saja anda harus menguasai HTML terutama untuk membuat aplikasi dengan teknologi CGI.

1.1 Dasar-dasar HTML

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>

nah setelah itu kita simpan filenya di dokument dengan memakai extensi .html misalnya : belajardasar.html
dan bukalah file tersebut dan klik, jadi dechhh tampilanya di web browser :)

1.1.1 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:

Tabel 1. 1 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

1.1.2 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.

1.1.3 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>.

1.1.4 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.

1.1.5 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:

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.

1.1.6 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>

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 1. 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)

1.1.7 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.

1.1.8 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>

6. <IMG SRC=logo.jpg>

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.

1.1.9 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>.

1.1.10 Link Dari Suatu Gambar

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

1.2 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>

1.2.1 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>

6. <IMG SRC=logo.jpg>

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.

1.2.2 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

1.3 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

1.4 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

1.5 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:

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:

1.6 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.

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>

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>

1.6.2.1 File HEADER.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Header dokumen</H1>

</BODY>

</HTML>

1.6.2.2 File KIRI.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Daftar Isi</H1>

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

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

</BODY>

</HTML>

1.6.2.3 File KANAN.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Isi frame awal</H1>

Isi awal

</BODY>

</HTML>

1.6.2.4 File KANAN1.HTML

<HTML>

<HEAD>

</HEAD>

<BODY>

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

Isi dari link pertama

</BODY>

</HTML>

1.6.2.5 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.

1.7 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.

1.7.1 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:

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.

1.7.2 Elemen Textbox

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

Tag yang digunakan adalah:

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.

1.7.3 Elemen Textarea

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

Tag yang digunakan adalah:

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.

1.7.4 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).

1.7.5 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

1.7.6 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:

<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 1. 9 Elemen Dropdown

1.7.7 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

BELAJAR JAVA WEB DENGAN PLAY FRAMEWORK

Selasa, 23 Oktober 2012

Belajar HTML

Hypertext Markup Language

1.1 Dasar-dasar HTML

Struktur Dokumen HTML

1.1.1 Tag Heading

1.1.2 Latihan: Mengenal Heading

1.1.3 Tag List

1.1.4 Latihan: Mengenal List

1.1.5 Tag gambar

1.1.6 Latihan: Menggunakan Tag Gambar

1.1.7 Link

1.1.8 Latihan: Menggunakan Link

1.1.9 Link Pada Satu Halaman

1.1.10 Link Dari Suatu Gambar

1.2 Tabel HTML

1.2.1 Latihan: Menggunakan Tabel HTML 1

1.2.2 Latihan: Menggunakan Tabel HTML 2

1.3 Format Paragraph

1.4 Format Font

1.5 Warna Dokumen

1.6 Frame HTML

1.6.2.1 File HEADER.HTML

1.6.2.2 File KIRI.HTML

1.6.2.3 File KANAN.HTML

1.6.2.4 File KANAN1.HTML

1.6.2.5 File KANAN2.HTML

1.7 Form HTML

1.7.1 Mendeklarasikan Form

1.7.2 Elemen Textbox

1.7.3 Elemen Textarea

1.7.4 Elemen Checkbox

1.7.5 Elemen Radio Botton

1.7.6 Elemen Drop-Down Menu

1.7.7 Elemen Tombol

Tidak ada komentar:

Posting Komentar