Alex Camacho

HTML DAN JAVASCRIPT

STRUKTUR HTML :

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>

HASIL :

EFEK BORDER :

Perhatikan kode-kode berikut :

JAVA SCRIPT : tag

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>");

Operasi data

</SCRIPT>

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

function cetak(n)

{ for (i=1;i<=n;i++)

document.write(" HELLO "+i +" ")

}

cetak(4)

</Script>

Contoh : Fungsi 2 parameter

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 :

untuk textfield:

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>

Masukkan Nilai n disini

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

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";

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 :

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>

ARRAY UNTUK MEMBUAT TABLE DENGAN JAVASCRIPT

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

CSS

SHAPE \* MERGEFORMAT

l CSS = Cascading Style Sheet adalah suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs

l CSS dimulai dengan :

NamaKODeBaru { Parameter : nilai }

</STYLE>

l Sebagai contoh untuk kode HTML <B>..</B> artinya adalah cetak tebal pada teks yang terletak diantaranya. Dengan CSS kita dapat mendefinisikan <B>..</B> agar memiliki efek tambahan sesuai yang kita inginkan, misalnya efek terhadap warna huruf.

l Contoh : <Style TYPE=“txt/CSS”

U {color=red}

</Style>

CONTOH :

Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan.

HASIL :

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

l Misalkan pada tag <B> akan dilekatkan efek warna, jenis huruf dan gaya huruf

l Perintahnya CSS-style nya

l B { color:lime; text-decoration: underline;

font-family:Arial }

CONTOH:

HASIL :

CSS-GLOBAL :Sekali Tulis, pakai bersama

l Kita dapat mendefinisikan suatu file *.css yang berisi kode-kode CSS

l File tersebut dapat diacu oleh setiap HTML

l Jika file HTML akan mengacu file CSS tersebut ditulis :

l <HEAD>

l <LINK REL="stylesheet" HREF="global.css"

l TYPE="text/css">

l </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

dan file:Css_Global2.html

HASIL :

SUATU FRAME YANG MENGGUNAKAN 2 file tsb

HASIL :

CLASS DALAM CSS :

l Class adalah suatu kelompok perintah CSS yang dapat digunakan pada tag tertentu HTML untuk memberi efek tambahan berdasar definisi class

l <STYLE TYPE="text/css">

.tanya {color: red}

.jawab {color: blue}

</STYLE>

l Pada efek HTML dapat digunakan sbb :

l <P CLASS=“tanya”> ini adalah teks yang terpengaruh efek

class tanya</P>

l Efek class dapat dilekatkan pada tag HTML apa saja, seperti pada tag <B>, tag <I> dst

HASIL :

CSS UNTU KUBAH UKURAN HURUF :

Font-size : xx-small, x-small, small, medium, large, x-large, xx-large

HASIL :

POSITIONING :

WATERMARKING :

l Watermarking adalah konsep mendesaign background layar dengan gambar tertentu

l Konsep ini dapat diimplementasikan melalui konsep class sebagai berikut :

l <STYLE TYPE="text/css">

.nama_Class {background-image:

url(“namagambar"); background-repeat: yes}

l </STYLE> </HEAD>

MEMBUAT FRAME : (HTML)

l <FRAME> adalah Tag HTML yang berfungsi untuk membagi layar

l Beberapa perintah itu adalah

l <FRAMESET>

l < FRAME>

l <IFRAME>

l <FRAMESET>..</FRAMESET> memiliki parameter :

l ROWS = panjang baris (pixel)

l COLS=panjang kolom (pixel)

l ONLOAD=string (semua frame sudah diload)

l ONUNLOAD(=string (semua string telah dihapus)

l <FRAME>..</FRAME> memiliki parameter :

l NAME =nama frame

l SRC = URL (isi frame)

l FRAMEBORDER =[0 | 1]

l MARGINWIDTH=pixel (batas kiri thd isi frame)

l MARGINHEIGHT=pixel (batas atas thd isi frame)

l SCROLLING =[yes | no ]

FRAME : 4 BUAH WILAYAH FRAME

untuk melihat hasilnya maka anda loangsung aja mempraktekkannya. gampan kan saudara-saudari

Alex Camacho

Minggu, 05 Mei 2013

Tidak ada komentar:

Posting Komentar

Mengenai Saya