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>
</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>
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:
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:
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
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">
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 :
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 :
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 :
alert("HATI HATI DIJALAN BANYAK BATU!!");
</script>
Hasil :
12
JENDELA KONFIRMASI : yes or no dengan confirm()

Sintak :
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 :
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>
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
16
CSS
CSS = Cascading Style Sheet adalah suatu teknik
penulisan kode untuk memperindah dan
mempermudah dalam pengkodean HTML dengan
tujuan untuk memperindah tampilan situs
CSS dimulai dengan :
<STYLE TYPE="text/css">
NamaKODeBaru { Parameter :
nilai }
</STYLE>
Sebagai contoh untuk kode HTML <B>..</B> artinya
adalah cetak tebal pada teks yang terletak
diantaranya. Dengan CSS kita dapat

CONTOH
:
mendefinisikan
<B>..</B> agar memiliki efek
Tag <U>..</U> memiliki tugas baru disamping tugas lama, yaitu
sesuai yang kita inginkan,
warnatambahan
tulisan.
misalnya efek terhadap warna huruf.
Contoh : <Style TYPE=txt/CSS
U {color=red}
</Style>
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
.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 :
.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

INSERT IMAGE DAN LINK :

: tag <A HREF=namadoklink> label </A>

IMAGE LINK : image yang jika di klik akan menuju link

JAVA SCRIPT : tag

FUNGSI YANG MENGAMBIL NILAI/PARAMETER DARI FORM

Menghitung Faktorial : Mengambil nilai form

Tulisan ini berjalan tiap 200 milidetik

ARRAY DALAM JAVA SCRIPT :

FUNGSI KALENDER : Date

JENDELA PERINGATAN DENGAN : alert

JENDELA KONFIRMASI : yes or no dengan confirm()

ARRAY UNTUK MEMBUAT TABLE DENGAN JAVASCRIPT

diantaranya. Dengan CSS kita dapat

Beberapa efek pada satu kode B

huruf dan gaya huruf

CSS-GLOBAL :Sekali Tulis, pakai bersama

Digunakan oleh file : CSS_Global1.html

CLASS DALAM CSS :

CSS UNTU KUBAH UKURAN HURUF :

MEMBUAT FRAME : (HTML)

FRAME : 4 BUAH WILAYAH FRAME

Anda mungkin juga menyukai