4159 HTML Dan Javascript

1
HTML DAN JAVASCRIPT

STRUKTUR HTML : <HEAD> </HEAD> <BODY> ..</BODY> HEADER DAN TITLE : HEADER digunakan untuk memberi judul atau subjudul, dengan tag <Hn>..</Hn>; n = 1,2,3,4,5 dan 6 : kode besar huruf TITLE digunakan untuk memberi judul halaman web dengan Tag <TITLE> ..</TITLE> Efek paragraf dan baris <p> ..</p> paragraf baru <BR> baris baru Efek Kendali Huruf: <b> ..</b> huruf BOLD (tebal) <i> .. </i> huruf ITALIC (miring) <font face=model huruf color=kode warna huruf size=ukuran> .. catatan : Pada setiap tag yang diberikan, efek pada teks adalah terus menerus sampai dijumpai pasangan tag penutupnya Contoh : Dok HTML yang diketik dengan teks editor dan efek pada browser <HEAD><TITLE>Halaman Web Ku Pertama</TITLE> <H1>JUDUL DENGAN HEADER 1 </H1><BR> <H2>JUDUL DENGAN HEADER 2 </H2><BR> <H3>JUDUL DENGAN HEADER 3 </H3><BR> </TITLE> <BODY> <p>Selamat datang pada <b>web site</b> ku <BR> Ini adalah <i>penulisan HTML</i> langung pakai teks editor <font face=ARIAL><b>Dan Huruf ini Arial diatur</b><BR> dari editor<font face="TIMES NEW ROMAN" Color="ff0000" size=16> dan selesai </font><font face="COURIER" Color="0000ff" >efek font</p> Dan ini adalah paragraf baru dan selesai efek font</p> Dan ini adalah paragraf baru
INSERT IMAGE DAN LINK : IMAGE : tag <IMG SRC =namagambar> BORDER=n> n = 0 , berarti tanpa border LINK : tag <A HREF=namadoklink> label </A>
IMAGE LINK : image yang jika di klik akan menuju link <A HREF=namadoklink> <IMG SRC =namagambar> BORDER=n> </A> Contoh : <A HREF="http:www.google.com">Ini Mau ke Google</A> <A HREF="Penjelasan.doc"><IMG SRC="Blue_bulb.GIF" BORDER=0> HASIL :
EFEK BORDER : Perhatikan kode-kode berikut : <IMG SRC="Blue_bulb.GIF" BORDER=0> <IMG SRC="Blue_bulb.GIF" BORDER=1> <IMG SRC="Blue_bulb.GIF" BORDER=3> <IMG SRC="Blue_bulb.GIF" BORDER=5> <IMG SRC="Blue_bulb.GIF" BORDER=7> <IMG SRC="Blue_bulb.GIF" BORDER=10>
JAVA SCRIPT : tag <SCRIPT LANGUAGE=JAVASCRIPT> disini kode java script </SCRIPT> OPERATOR DAN VARIABEL OPERATOR : Operator aritmetika dan logika sama persis dengan program java VARIABEL : Dalam java Script variable cukup dideklarasikan dengan var. Tidak dibedakan apakah variabel itu bilangan(int, float) atau string Contoh : var A=10 var B=JOKO BODO MENCETAK KE DOKUMEN : Untuk mencetak ke dokumen aktif digunakan statemen document.write( teks atau variable atau operasi aritmetik) Hasil cetakan berupa teks dapat diformat menggunakan tag HTML CONTOH: <SCRIPT LANGUAGE=JAVASCRIPT> var A=10 var B="JOKO BODO" document.write("<h3>"+B+" anaknya </h3>"); document.write("<h1>"+(A+5)+" ORANG <h1>"); </SCRIPT> Operasi data HASIL :
Kode HTML
LOOP for :
Untuk Loop for perbedaannya terletak pada counter Dalam java diulis for (int i=0;i<A;i++) Maka dalam java Script for (var i=0; i<A;i++) Contoh:
<SCRIPT LANGUAGE=JAVASCRIPT> var A=10 for (var i=0;i<A;i++) document.write("<font size=14>"+i+" "); </SCRIPT>
LOOP while : Untuk Loop while jika digunkan counter perbedaannya terletak pada counter Contoh: <SCRIPT LANGUAGE=JAVASCRIPT> var A=10 var B=0; while (B<A) { document.write("<font size=14>"+B+" "); B+=2; } </SCRIPT>
Function : Sintak : function nama_fungsi (parameter) Contoh : Fungsi 1 parameter <Script LANGUAGE="JavaScript"> function cetak(n) { for (i=1;i<=n;i++) document.write(" HELLO "+i +" ") } cetak(4) </Script> Contoh : Fungsi 2 parameter <Script LANGUAGE="JavaScript"> function cetak(n,s) { for (i=1;i<=n;i++) document.write(s+" "+i +" ") } cetak(3,"HELLO"); cetak(1,"<BR>"); cetak(2,"INFORMATIKA"); </Script>
Hasil :
FUNGSI YANG MENGAMBIL NILAI/PARAMETER DARI FORM - Ke dalam dokumen dapat dipasang suatu formulir abstrak dengan tag <form >...</form> - Dalam formulir tersebut dapat dipasang komponen GUI seperti tombol dan textfield : Sintak : <FORM name=namaformulir> <input type = ...> komponen GUI </FORM> - contoh pemasangan komponen GUI: untuk tombol : <input type=button name=namaTombl onclick=aksi> untuk textfield: <input type=text name=namatextfield >
Menghitung Faktorial : Mengambil nilai form <script LANGUAGE="JavaScript"> function fak() { var n=document.fm.nilai_n.value var f=1 for (var i=1;i<=n; i++) f*=i document.fm.hasil.value=f } function bersihkan() { document.fm.nilai_n.value="" document.fm.hasil.value="" } </script> <TITLE>MENGHITUNG FAKTORIAL</TITLE> <h2>MENGHITUNG FAKTORIAL</H2> <form name="fm" > Masukkan Nilai n disini <input type ="text" name="nilai_n" value ="" size="5" ><BR> <input type =button value="hitung Faktorial" onclick="fak()" > <input type =text name="hasil" value="" size="25" <br> <input type =button value="clear" onclick="bersihkan()" > </form> </html>
>
VERSI KE-2 DARI PROGRAM FAKTORIAL : melewatkan parameter form <script LANGUAGE="JavaScript"> function fak(form) { var n=form.nilai_n.value var f=1 for (var i=1;i<=n; i++) f*=i form.hasil.value=f } function bersihkan(form) { form.nilai_n.value="" form.hasil.value="" } </script> <TITLE>MENGHITUNG FAKTORIAL</TITLE> <h2>MENGHITUNG FAKTORIAL</H2> <form name="formulir" > Masukkan Nilai n disini <input type ="text" name="nilai_n" value ="" size="5" ><BR> <input type =button value="hitung Faktorial" onclick="fak(formulir)" > <input type =text name="hasil" value="" size="25" > <br> <input type =button value="clear" onclick="bersihkan(formulir)" > </form> </html> Contoh : Membuat Status bar berjalan-jalan <html> <body bgcolor="#FFFFF" text="#00000"> <script LANGUAGE="JavaScript"> var Pesan="Selamat Datang pada Web Site Kami "+ "Jangan ragu-ragu berikan masukan yang mendidik.. " function gulungStatus() { window.status=Pesan; Pesan=Pesan.substring(1,Pesan.length)+ Pesan.substring(0,1); setTimeout("gulungStatus()",200); } </script> <body onLoad="gulungStatus()" </body> </html>
Tulisan ini berjalan tiap 200 milidetik
ARRAY DALAM JAVA SCRIPT : Untuk membuat array stetemen adalah : var NamaArray = new Array(Dimensi) Tidak seperti dalam java yang mana index array harus dimulai dari 0, dalam javaScript indek dapat dimulai dari 1 atau 0 Contoh : var sales = new Array(3); sales[0]=JONI; sales[1]=RUDI; sales[2]=YUNI; dapat juga ditulis sebagai : sales[1]=JONI; sales[2]=RUDI; sales[3]=YUNI; CONTOH DALAM PROGRAM : <script LANGUAGE="JavaScript"> var sales = new Array(3); sales[1]="JONI"; sales[2]="RUDI"; sales[3]="YUNI"; for(var i=1;i<=3;i++) document.write("<H4>"+i+" "+sales[i]+" "); </script> HASIL :
10
FUNGSI KALENDER : Date Jika sebuah objek Date dibuat misalnya dengan : Var tgblth=new Date(); maka beberapa nilai dari tanggal dapat diperoleh , dengan : getDate() : mendapatkan angka tanggal getMonth() : mendapatkan angka bulan getYear() : mendapatkan angka tahun getDay() : mendapatkan angka urut hari (1=Senin, 2=Selasa, dst.. CONTOH PENGGUNAAN : <script LANGUAGE="JavaScript"> var hari=new Array(7); hari[1]="SENIN"; hari[2]="SELASA"; hari[3]="RABU"; hari[4]="KAMIS"; hari[5]="JUMAT"; hari[6]="SABTU"; hari[7]="MINGGU"; var bulan =new Array(12); bulan[1]="Januari"; bulan[2]="Februari"; bulan[3]="Maret"; bulan[4]="April"; bulan[5]="Mei"; bulan[6]="Juni"; bulan[7]="Juli"; bulan[8]="Agustus"; bulan[9]="September"; bulan[10]="Oktober";
11
bulan[11]="Nopember"; bulan[12]="Desember"; var tgblth=new Date(); var Tanggal=tgblth.getDate(); var NamaBulan=bulan[tgblth.getMonth()+1]; var Tahun =tgblth.getYear(); var Nmhari=hari[tgblth.getDay()]; document.write("<h3>Hari Ini adalah: "+Nmhari ); document.write(", "+Tanggal+ " "+NamaBulan+" "+Tahun+"<BR>"); </script>
JENDELA PERINGATAN DENGAN : alert Contoh : <script LANGUAGE="JavaScript"> alert("HATI HATI DIJALAN BANYAK BATU!!"); </script> Hasil :
12
JENDELA KONFIRMASI : yes or no dengan confirm() Sintak :

<script LANGUAGE="JavaScript"> tanya=confirm("APAKAH ANDA INGIN LIHAT GAMBAR KUDA ?"); if(tanya!="0") { top.location="2_horses.GIF"; } </script>
jika Ok -> MENDAPATKAN NILAI DARI KEYBOARD DENGAN : prompt Sintak : prompt(teks yang muncul ); COntoh : <script LANGUAGE="JavaScript"> var nama = prompt("Masukkan nama anda !!"); var umur = prompt("Masukkan umur anda ..."); document.write("<H4> Hello "+nama+" anda lahir "+(2007-umur)+", kan? "); </script>
13
14
ARRAY UNTUK MEMBUAT TABLE DENGAN JAVASCRIPT <form name=fm> <table border=5><tr><td> <input type=button name=kotak size=40 value="Tampilkan table" onClick="aksi()"> </td><tr></form> <script LANGUAGE="JavaScript"> function aksi() {var NB=new Array(5); NB[1]="Pensil"; NB[2]="Buku"; NB[3]="Bolpoint"; NB[4]="Penggaris"; NB[5]="Penghapus"; var HB=new Array(5); HB[1]=750 ; HB[2]=1000; HB[3]=1250;HB[4]=800; HB[5]=300; var SAT=new Array(5); SAT[1]=3; SAT[2]=5; SAT[3]=10; SAT[4]=20; SAT[5]=4; var TOT=new Array(5); for(i=1;i<=5;i++)TOT[i]=SAT[i]*HB[i]; document.write("<font color=blue size=4>DAFTAR PEMBELIAN<BR>"); document.write("<table border=2 collspadding=2 collspacing=2>") document.write("<tr><td>NO</td><td>BARANG</td>"); document.write("<td>HARGA</td><td>SATUAN</td><td>TOTSL</td> </tr>"); var TOTPEM=0; for(var i=1;i<=5;i++) {teks="<tr><td>"+i+"</td><td>"+NB[i]+"</td><td>"+HB[i]+"</td>"; teks=teks+"<td>"+SAT[i]+"</td><td>"+TOT[i]+"</td></tr>"; document.write(teks); TOTPEM=TOTPEM+TOT[i]; } document.write("<tr><td colspan=4 align=center>") document.write("TOTAL PEMBELIAN</td><td>"+TOTPEM+"</td></tr>"); document.write("</table>"); } </script>
15
CSS = Cascading Style Sheet adalah suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan16 tujuan untuk memperindah tampilan situs CSS dimulai dengan : CSS <STYLE TYPE="text/css"> NamaKODeBaru { Parameter : nilai } </STYLE> Sebagai contoh untuk kode HTML <B>..</B> artinya adalah cetak tebal pada teks yang terletak
CONTOH : Tag <U>..</U> memiliki tugas baru disamping tugas lama, yaitu </Style> warna tulisan.
diantaranya. Dengan CSS kita dapat mendefinisikan <B>..</B> agar memiliki efek tambahan sesuai yang kita inginkan, misalnya efek terhadap warna huruf. Contoh : <Style TYPE=txt/CSS U {color=red}
HASIL :
17
CONTOH : Tag <U> =under line Dan tag <I> = italic Diberi efek baru, yaitu warna merah hurufnya Tag <B> = bold, diberi efek warna hijau
HASIL :
Beberapa efek pada satu kode B

Misalkan pada tag <B> akan dilekatkan efek warna, jenis
huruf dan gaya huruf Perintahnya CSS-style nya B { color:lime; text-decoration: underline; font-family:Arial } CONTOH:
18
HASIL :
CSS-GLOBAL :Sekali Tulis, pakai bersama

Kita dapat mendefinisikan suatu file *.css yang berisi kode-kode CSS File tersebut dapat diacu oleh setiap HTML Jika file HTML akan mengacu file CSS tersebut ditulis : <HEAD> <LINK REL="stylesheet" HREF="global.css" TYPE="text/css"> </HEAD> Contoh nama file :GLOBAL.CSS berisi kode CSS B {color: red; text-decoration: underline; font-family: Arial } I {color:blue; font-family:"Monotype Corsiva"; font-size:20}
Digunakan oleh file : CSS_Global1.html
19
dan file:Css_Global2.html
HASIL : SUATU FRAME YANG MENGGUNAKAN 2 file tsb
HASIL :
20
CLASS DALAM CSS : Class adalah suatu kelompok perintah CSS yang dapat digunakan pada tag tertentu HTML untuk memberi efek tambahan berdasar definisi class <STYLE TYPE="text/css"> .tanya {color: red} .jawab {color: blue} </STYLE> Pada efek HTML dapat digunakan sbb : <P CLASS=tanya> ini adalah teks yang terpengaruh efek class tanya</P> Efek class dapat dilekatkan pada tag HTML apa saja, seperti pada tag <B>, tag <I> dst
HASIL :
21
CSS UNTU KUBAH UKURAN HURUF : Font-size : xx-small, x-small, small, medium, large, x-large, xx-large
HASIL :
4 POSITIONING :
22
23
WATERMARKING :
Watermarking adalah konsep mendesaign background layar dengan gambar tertentu Konsep ini dapat diimplementasikan melalui konsep class sebagai berikut : <STYLE TYPE="text/css"> .nama_Class {background-image: url(namagambar"); background-repeat: yes} </STYLE> </HEAD>
24
MEMBUAT FRAME : (HTML)

<FRAME> adalah Tag HTML yang berfungsi untuk membagi layar Beberapa perintah itu adalah <FRAMESET> < FRAME> <IFRAME> <FRAMESET>..</FRAMESET> memiliki parameter : ROWS = panjang baris (pixel) COLS=panjang kolom (pixel) ONLOAD=string (semua frame sudah diload) ONUNLOAD(=string (semua string telah dihapus) <FRAME>..</FRAME> memiliki parameter : NAME =nama frame SRC = URL (isi frame) FRAMEBORDER =[0 | 1] MARGINWIDTH=pixel (batas kiri thd isi frame) MARGINHEIGHT=pixel (batas atas thd isi frame) SCROLLING =[yes | no ]
25
FRAME : 4 BUAH WILAYAH FRAME
26

4159 HTML Dan Javascript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

4159 HTML Dan Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

1

HTML DAN JAVASCRIPT

Tulisan ini berjalan tiap 200 milidetik

JENDELA KONFIRMASI : yes or no dengan confirm() Sintak :

Beberapa efek pada satu kode B

CSS-GLOBAL :Sekali Tulis, pakai bersama

Digunakan oleh file : CSS_Global1.html

HASIL : SUATU FRAME YANG MENGGUNAKAN 2 file tsb

MEMBUAT FRAME : (HTML)

FRAME : 4 BUAH WILAYAH FRAME

Anda mungkin juga menyukai