SUSUNAN DASAR HTML, JAVASCRIPT DAN VBSCRIPT

Transkripsi

1 SUSUNAN DASAR HTML, JAVASCRIPT DAN VBSCRIPT 1. HTML 1.1. Susunan Dasar HTML <TITLE> Judul disini </TITLE> Program disini 1.2. Contoh <TITLE> Halaman Pertama </TITLE> <H1>Teks dengan Heading 1</H1> <H2>Teks dengan Heading 2</H2> <H3>Teks dengan Heading 3</H3> 2. JAVASCRIPT 2.1. Susunan Dasar JAVASCRIPT <TITLE> Halaman Pertama </TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> Program JavaScript disini </SCRIPT> 2.2. Contoh <TITLE> Halaman Pertama </TITLE> <SCRIPT LANGUAGE="JAVASCRIPT">

2 alert("selamat Datang di JavaScript!") </SCRIPT> 3. VBSCRIPT 3.1. Susunan Dasar VBSCRIPT <TITLE> Halaman Pertama </TITLE> <SCRIPT LANGUAGE="VBSCRIPT"> Program VBScript disini </SCRIPT> 3.2. Contoh <TITLE> Halaman Pertama </TITLE> <SCRIPT LANGUAGE="VBSCRIPT"> msgbox "Selamat Datang di VBScript!",vbOKOnly,"Hallo!" </SCRIPT>

3 PENGENALAN TAG/PERINTAH HTML <H1> sampai <H6> Perintah ini digunakan untuk memilih ukuran teks dari H1 sampai H6. Latihan 1: <TITLE>My Homepage</TITLE> <H1>Teks dengan Heading 1</H1> <H2>Teks dengan Heading 2</H2> <H3>Teks dengan Heading 3</H3> <H4>Teks dengan Heading 4</H4> <H5>Teks dengan Heading 5</H5> <H6>Teks dengan Heading 6</H6> <HR> Perintah ini digunakan untuk membuat garis horisontal penuh layar. Latihan 2: <TITLE>My Homepage</TITLE> <H1>Teks untuk judul</h1> <HR> Kalimat ini diapit oleh 2 buah garis <HR>

4 <I> Perintah ini digunakan untuk membuat teks miring. Latihan 3: <TITLE>My Homepage</TITLE> <I>Welcome to my homepage</i> <H1><I>Welcome to my homepage</i></h1> <B> Perintah ini digunakan untuk membuat teks tebal. Latihan 4: <TITLE>My Homepage</TITLE> Teks biasa <B> Teks tebal</b>

5 <U> Perintah ini digunakan untuk membuat teks bergaris bawah. Latihan 5: <TITLE>My Homepage</TITLE> <H1><U>Teks bergaris bawah</u></h1> <CENTER> Perintah ini digunakan untuk membuat teks ke tengah layar. Latihan 6: <TITLE></TITLE> <CENTER>Teks biasa ke tengah layar</center> <H1><CENTER>Teks judul ke tengah layar</center></h1>

6 ALIGN Perintah ini digunakan untuk membuat teks rata kiri, rata kanan, rata tengah atau rata kiri dan kanan. Perintah ini biasanya di kombinasikan dengan perintah lain seperti <p> atau <h1> sampai <h6>. Align=right Rata kanan Align=left Rata kiri Align=center Rata tengah Align=justify Rata kiri dan kanan Latihan 7: <title>my Homepage</title> <body> <p align=right>teks biasa dengan align right</p> <h1 align=right>teks judul dengan align right</h1> </body> <BR> Perintah ini digunakan untuk memasukkan fungsi enter. Latihan 8: <TITLE></TITLE> satu

7 dua tiga <BR><BR> satu<br> dua<br> tiga <! Perintah untuk membuat komentar atau keterangan di dalam program. <SMALL> Perintah untuk membuat teks berukuran kecil. <BIG> Perintah untuk membuat teks berukuran besar. Latihan 9: <TITLE></TITLE>  <SMALL>Teks dengan huruf kecil</small> <BR> <BIG>Teks dengan huruf besar</big>

8 <P> Perintah ini digunakan untuk membuat paragraf. <DD> Perintah ini digunakan untuk membuat awal paragraf menjorok ke dalam. Latihan 10: <TITLE></TITLE> <H3 align=justify> <DD> <P> Apakah JavaScript? JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. Dengan JavaScript kita dapat dengan mudah membuat halaman web yang interaktif. </P> <DD> <P> Apa yang diperlukan untuk menjalankan script yang ditulis dengan JavaScipt? Kita perlu JavaScript Enabled Browser yaitu browser yang mampu menjalankan Javascript. </P> </H3> FONT Perintah ini digunakan untuk mengatur ukuran font. FACE Perintah ini digunakan untuk mengatur jenis font. Latihan 11: <TITLE></TITLE>

9 <FONT SIZE="6" FACE="Roman">Teks dengan font Roman Size 6</FONT> <BR><BR> <FONT SIZE="5" FACE="Courier">Teks dengan font Courier Size 5</FONT> <BR><BR> <FONT SIZE="6" FACE="Arial">Teks dengan font Arial Size 6</FONT> <SUP> Perintah ini digunakan untuk membuat cetak naik sebuah teks. <SUB> Perintah ini adalah kebalikan dari <SUP> yaitu untuk membuat cetak turun sebuah teks. Latihan 12: <TITLE></TITLE> <H3> We are the 1<SUP>st</SUP> in the world. <BR> 2<SUP>2</SUP> = 4 <BR><BR> H<SUB>2</SUB>O adalah simbol kimia untuk air. </H3>

10 <UL> Perintah untuk membuat daftar atau list. <LI> Perintah untuk membuat item dari daftar atau list. Perintah ini harus berada dalam perintah <OL>, <UL>, <DIR> atau <MENU>. Latihan 13: <title></title> <body> <ul> <li> <h2>jawa TIMUR</h2> <ul> <li>surabaya</li> <li>malang</li> <li>kediri</li> </ul> </li> <br> <li> <h2>jawa BARAT</h2> <ul> <li>bandung</li> <li>bogor</li> <li>sukabumi</li> </ul> </li> </ul> </body>

11 Perintah untuk mengubah warna background pada halaman, mengubah warna link dan lainlain sesuai dengan atribut yang diberikan. Perintah memiliki atribut sebagai berikut: ATRIBUT FUNGSI TEXT=warna Untuk menentukan warna teks. BGCOLOR=warna Untuk menentukan warna background. LINK=warna Untuk menentukan warna link. ALINK=warna Untuk menentukan warna link yang sedang dipilih. VLINK=warna Untuk menentukan warna link yang sudah dikunjungi. ONLOAD=perintah Perintah yang akan dikerjakan ketika halaman web selesai di-download. ONUNLOAD=perintah Perintah yang akan dikerjakan ketika halaman web ditutup. Latihan 14: <TITLE></TITLE> <BODY BGCOLOR="#FFFACD" > <BODY ONLOAD="window.alert('Selamat Datang!')"> <BODY ONUNLOAD="window.alert('Terima kasih atas kunjungannya!')"> Ketika web page dibuka maka akan muncul pesan seperti dibawah ini: Dan ketika web page ditutup maka akan muncul pesan seperti di bawah ini:

12 <INPUT> Perintah ini pada dasarnya digunakan untuk meminta masukan data dari pengunjung. <FORM.> Perintah ini digunakan untuk membuat format masukan seperti formulir. <LABEL> Perintah ini digunakan untuk memberi label pada textbox yang dibuat dengan perintah <INPUT>. Latihan 15: <TITLE> New Document </TITLE> <BODY BGCOLOR="#FFFFFF"> <FORM> <LABEL>Company : <INPUT TYPE="text" NAME="company"></LABEL><BR> <LABEL for="stateentry">state : </LABEL> <INPUT TYPE="text" NAME="state" ID="stateEntry"> </FORM> <TEXTAREA> Perintah untuk membuat multiline-textbox. Latihan 16: <TITLE></TITLE> <BODY BGCOLOR="#FFFFFF"> <P> <LABEL>Ketik saran dan kritik anda di bawah ini: <TEXTAREA NAME="saran" ROWS="8" COLS="50"></TEXTAREA> </LABEL> </P>

13 <SELECT> Perintah ini digunakan untuk membuat menu dan umumnya digunakan bersama perintah <OPTION>. <OPTIONS> Perintah ini digunakan untuk membuat daftar pilihan menu. Latihan 17: <title></title> <body bgcolor="#ffffff" text="#000000"> <b>status : </b> <select name="cbostatus"> <option>menikah</option> <option>belum Menikah</option> </select> </body> <STYLE> Perintah untuk menggunakan style sheet. Latihan 18: <TITLE></TITLE>

14 <STYLE TYPE="text/css" media=screen> BODY {background=red; color=white} </STYLE> <H1>Hallo</H1> <FONT color=blue><h2>hallo lagi</h2></font> <H2>Selamat Datang</H2> <TABLE> Perintah ini digunakan untuk membuat tabel. Selain perintah <TABLE> perintah lain yang digunakan dalam pembuatan tabel adalah: PERINTAH <TH> <TR> <TD> FUNGSI Untuk membuat table header cell (judul kolom). Untuk membuat table row (baris tabel). Untuk membuat table data cell (data dalam tiap sel). Sedang atribut yang biasa digunakan adalah: ATRIBUT width border cellspacing cellpadding align bgcolor FUNGSI Menentukan lebar tabel atau kolom. Menentukan lebar border tabel. Menentukan lebar spasi antar sel. Menentukan lebar spasi dalam sel. Menentukan perataan teks dalam tabel. Menentukan warna background tabel. Latihan 19: <title></title>

15 <body> <table> <tr align=left> <th>nama</th> <th>umur</th> <th>alamat</th> </tr> <tr align=left> <td>lala</td> <td>23</td> <td>kediri</td> </tr> </table> </body> Latihan 20: <title></title> <body> <table border="2" cellpadding="5" cellspacing="0" width="544"> <tr align=left> <th bgcolor="#ffffcc"><font color="#0000ff">nama</font></th> <th bgcolor="#ffffcc"><font color="#0000ff">umur</font></th> <th bgcolor="#ffffcc"><font color="#0000ff">alamat</font></th> </tr> <tr> <td>lala</td> <td>23</td> <td>kediri</td> </tr> </table> </body>

16 <IMG...> Perintah ini digunakan untuk menampilkan gambar dalam halaman web. Perintah ini mempunyai 4 atribut, yaitu: ATRIBUT src border width height FUNGSI File gambar yang akan ditampilkan beserta path-nya. Tebal bingkai untuk gambar. Lebar gambar. Tinggi gambar. Latihan 21: <title></title> <body> <img border="0" src="../../../../pictures/jpeg/cewek_1.jpg" width="266" height="320"> </body>

17 <BGSOUND > Perintah ini digunakan untuk memasukkan musik dalam halaman web. Musik akan dimainkan begitu halaman web selesai di-load. Perintah ini memiliki 2 atribut penting yaitu: ATRIBUT src loop FUNGSI File musik yang akan dimasukkan beserta path-nya. Jumlah berapa kali musik dimainkan. Latihan 22: <title></title> <bgsound src="../../../../../my%20music/rekaman/ta'awwudz.wav" loop="1"> <body> </body> <FRAMESET> Perintah untuk membuat frame. Atribut yang digunakan oleh perintah ini adalah: ATRIBUT rows cols FUNGSI Panjang baris dalam satuan pixel atau persen. Panjang kolom dalam satuan pixel atau persen. FRAME Perintah untuk memasukkan gambar, halaman web atau URL ke dalam frame. Atribut yang biasa digunakan oleh perintah ini adalah: ATRIBUT name src noresize scrolling FUNGSI Nama frame Isi frame Bila dicantumkan maka frame tidak dapat di-resize. Menampilkan scrollbar pada frame. Latihan 23: <title></title> <frameset cols="20%,80%"> <frame name="menu" target="main" src="menu.html"> <frame name="main" src="contoh_img_src.html"> </frameset>

18 Kita juga dapat membuat frame yang berlapis. Latihan 24: <TITLE></TITLE> <FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="" NAME=""> <FRAME SRC="" NAME=""> </FRAMESET> <FRAMESET rows="33%,33%,*"> <FRAME SRC="" NAME=""> <FRAME SRC="" NAME=""> <FRAME SRC="" NAME=""> </FRAMESET> </FRAMESET>

19 <IFRAME> Perintah ini digunakan untuk membuat frame dengan lebar dan tinggi yang bisa diatur dan dapat diletakkan di bagian kiri, tengah atau kanan layar. Atribut dari perintah ini adalah: ATRIBUT src width height Isi dari frame. Lebar frame. Tinggi frame. FUNGSI Latihan 25: <title></title> <P align=center> <iframe src="contoh_img_src.html" width="266" height="320"></iframe><p> <P align=center> <iframe src="menu.html"></iframe><p>

20 <A HREF Perintah ini digunakan untuk membuat link ke halaman lain atau ke sebuah url. Latihan 26: <title></title> <body> <p><a href="../../../../pictures/jpeg/cewek_1.jpg">cewek Pertama</a></p> <p><a href="../../../../pictures/jpeg/cewek_2.jpg">cewek Kedua</a></p> <p><a href="../../../../pictures/jpeg/cewek_3.jpg">cewek Ketiga</a></p> </body> Ketika dijalankan akan muncul halaman berikut: Cobalah klik salah satu link tersebut, misalnya cewek ketiga maka akan muncul halaman berikut ini:

21 WINDOW.ALERT Perintah ini digunakan untuk menampilkan pesan berupa message box. Untuk penggunaannya lihat latihan 14. WINDOW.STATUS Perintah ini digunakan untuk menampilkan pesan/keterangan dari link yang disorot pada status bar. Latihan 27: <title></title> <body> <p><a href=" onmouseover="window.status='klik untuk melihat fotonya!'; return true " onmouseout="window.status=''">cewek Pertama</a></p> <p><a href=" onmouseover="window.status='klik untuk melihat fotonya!'; return true" onmouseout="window.status=''">cewek Kedua</a></p> <p><a href=" onmouseover="window.status='klik untuk melihat fotonya!'; return true" onmouseout="window.status=''">cewek Ketiga</a></p> </body> WINDOW.OPEN Perintah digunakan untuk menampilkan isi dari link pada jendela baru. Latihan 28: <title></title> <body> <p><a href="" onmouseover="window.open('../../../../pictures/jpeg/cewek_1.jpg');">cewe k Pertama</a></p> <p><a href="" onmouseover="window.open('../../../../pictures/jpeg/cewek_2.jpg');">cewe k Kedua</a></p> <p><a href="" onmouseover="window.open('../../../../pictures/jpeg/cewek_3.jpg');">cewe k Ketiga</a></p> </body>

22 OLEH : NOVRIANTA GAUTHAMA