Scribd
Unggah
91 tayangan

4159 HTML Dan Javascript

Dokumen tersebut memberikan penjelasan singkat tentang struktur dasar HTML, tag-tag dasar HTML beserta fungsinya seperti header, title, paragraf, efek huruf dan font, serta penjelasan tentang penggunaan gambar, link, dan JavaScript dasar di dalam kode HTML.

Diunggah oleh

Ridwan Beloved
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
91 tayangan

4159 HTML Dan Javascript

Dokumen tersebut memberikan penjelasan singkat tentang struktur dasar HTML, tag-tag dasar HTML beserta fungsinya seperti header, title, paragraf, efek huruf dan font, serta penjelasan tentang penggunaan gambar, link, dan JavaScript dasar di dalam kode HTML.

Diunggah oleh

Ridwan Beloved
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 25

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
2

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

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

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>
HASIL : Operasi data

Kode HTML
5

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

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++) Hasil :
document.write(s+" "+i +" ")
}
cetak(3,"HELLO");
cetak(1,"<BR>");
cetak(2,"INFORMATIKA");
</Script>

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

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

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

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
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
mendefinisikan <B>..</B> agar memiliki efek
CONTOH :
tambahan sesuai yang kita inginkan,
Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu
warnamisalnya
tulisan. 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
 <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 :

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

Anda mungkin juga menyukai