pemrograman web 1: 2014

1. Penjelasan tentang link

2. Tag-tag yang tidak berpasangan

Jawab 1.

Tag <a href=””></a> merupakan tag yang digunakan untuk membuat link.

File yang akan dibuka jika LINK di klik

LINK yang terbentuk

Contoh :

<a href=prak1.html>Praktikum 1</a>

Jawab 2.

Pada umumnya tag-tag html berpasangan.

Namun ada yang tidak berpasangan

Seperti tag <hr>, <br>, @copy; <

www.w3c.org

Materi :

1. Memahami tag <table>

2. Mengenal tag <form>

3. Memamahi tag <img>

Pengantar

Tata letak (layout) informasi di web dapat dirancang dengan menggunakan tabel, css, frame.

2 baris 2 kolom

1 baris 2 kolom

1 baris 1 kolom

Ilustrasi tabel

Ilustrasi tabel 1 baris 1 kolom menjadi halaman web.

Google

Gambar 1

Tabel 2 baris 2 kolom, baris 1, dari 2 kolom jadi 1.

Tabel 2 baris 2 kolom, kolom 2, dari 2 baris jadi 1.

Logo	AnimasI			Jam
Menu	Isi			Menu
Submenu	P	M	O
	F	R	K

eMBER

Latihan 1.

1. Aktifkan notepad

2. Ketikkan struktur html

3. Simpan dengan nama prak3.html

4. Aktifkan web browser

5. Buka file prak3.html dari web browser

Rancang gambar 1.

Google
G1	G2	G3	G4	G5	G6

SISTEM INFORMASI
Home Product Contact Guest Book
Medan 2013

1. Memahami tag <table>

2. Memahami tag <form>

3. Memahami tag <img>

4. Memahami tag <link>

Latihan 1.

Buatlah kode HTML untuk merancang tampilan di bawah ini dengan memanfaatkan tag <table>.

Jawab :

1. Aktifkan notepad

2. Ketikkan struktur html

3. Simpan kode dengan nama lat4.html

4. Rancanglah tabel 3 baris 2 kolom

5. Aktifkan web browser

6. Buka file lat4.html dari web browser

Latihan 2.

Buatlah kode HTML untuk mendesain rancangan di bawah ini:

Form (Formulir)

Misalkan diketahui form pendaftaran anggota perpustakaan pada Sistem Informasi Perpustakaan Unika St. Thomas Medan Berbasis Web.

FORMULIR PENDAFTARAN

Nama

Alamat

Tempat/Tanggal Lahir

Agama

Fakultas

Program Studi

Foto

BROWSE

BATAL

DAFTAR

Komponen-komponen pembentuk form

1. Textbox

2. Checkbox

3. Combobox

4. Radio

5. Textarea

6. Button

Frame

Cols = 20% / lebar kolom

Frame 1

Frame 2

Frame 3

Rows =40% / tinggi baris

Cols=50% / lebar kolom

Cols =50% /lebar kolom

Frame adalah : membagi window web browse menjadi beberapa bagian sesuai yang kita inginkan,dengan kata lain didalam window terdapat window.

Beberapa properti atau atribut yang digunakan

1.Cols : mengatur lebar dari frame secara vertikal / kolom

2. Rows : mengatur tinggi baris dari frame secara horizontal/mendatar.

Beberapa satuan nilai yang dapat digunakan antara lain :

1.persen (%)

2.Pixel (px)

3.Centimeter (cm)

4.Point (pt)

5.Inci (in)

Materi :

1. Evaluasi

2. Cascading Style Sheet

A. Evaluasi

- memahami struktur html

- memahami tag-tag dasar html

Hari Ibu.

Asd;flasd fsad sadf sadf asdf sadf asdf sadfsad fasdf sdaf sdaf asdfasdf asdf sadfasd fsadf asdfasd fasdf sadfasd fsadfsadf asdfsadf asdfasdf. Sa dfasd fsadf sadf sadfsadf sadfsadf sadfasd fsadf.

B. Cascading Style Sheet

1. Inline CSS

2. Internal CSS

3. External CSS

Inline css adalah css yang dituliskan langsung di dalam tag.

Soal :

Formatlah tag h1 dengan css sehingga memiliki ciri sbb:

1. Ukuran teks 50px

2. Jenis tulisan verdana

3. Perataan teks tengah

4. Warna tulisan biru

5. Latar belakang warna merah

6. Border : 10px solid green

Jawab:

1. Buka lembaran baru di notepad

2. Ketikkan struktur html

3. Simpan kode dengan nama css1.html

Soal 2:

Formatlah tag <p> sehingga memiliki attribut sbb:

1. Perataan teks : justify

2. Awal paragraph indent : 50 px

3. Jenis huruf : arial

4. Besar huruf : 16 pt;

Jawab:

Informasi Lengkap tentang CSS:

WWW.W3C.ORG

Tag-Tag HTML

<p>

<hr>

<table>

<form>

<img>

<hn>

B. Internal CSS

à css yang dituliskan di dalam tag <head>

à penulisan diapit oleh tanda:

<style>

</style>

Latihan 3.

1. Buka lembaran baru di notepad

2. Ketikkan struktur html

Soal

Buat internal css dari tag <p> sehingga memiliki attribut sbb:

1. Perataan teks : justify

2. Awal paragraph indent : 50 px

3. Jenis huruf : arial

4. Besar huruf : 16 pt;

Trend Web Berisikan Data Multimedia (Suara, Video, Animasi, Teks)

Bagaimana menyisipkan animasi/video ke halaman web?

Software Manipulasi video bisa digunakan:

1. Movie Maker

2. Pinnacle

3. Edius

4. Sony Vegas Pro

Bagaimana tentang animasi?

Software animasi yang bisa digunakan:

1. Adobe Flash CS 5

2. Autodesk 3Dmax

3. Maya

Langkah-Langkah Membuat Animasi Sederhana:

Aktifkan macromedia flash 8

2. Klik Flash Document

Materi :

- Latihan frame

Ilustrasi frame

Frame dituliskan diantara tag <head> dan <body>

Jawab:

1. Aktifkan notepad

2. Ketikkan struktur HTML

<html>

<head>

<title>Latihan Frame</title>

</head>

<body>

</body>

</html>

3. Rancang frame seperti gambar 1.

<html>

<head>

<title>Latihan Frame</title>

</head>

<frameset cols="30%,*">

<frame src=menu.html>

<frame src=isi.html>

</frameset>

<body>

</body>

</html>

Home

Profil

Product

Contact

Soal :

Rancanglah frame sehingga memiliki layout seperti di bawah ini:

Materi :

- Mengenal Javascript

Latihan 1.

1. Aktifkan notepad

2. Ketikkan struktur HTML

3. Simpan kode dengan nama JS1.HTML

4. Aktifkan web browser

5. Buka file JS1.HTML dari web browser

Javascript

è Untuk mendinamisasi halaman-halaman web

Ada 3 (tiga) cara untuk menuliskan javascript, yaitu :

1. Dituliskan di bagian body

2. Dituliskan di bagian head

3. Dituliskan terpisah dari kode html

Elemen-Elemen Bahasa Javascript

1. Struktur

</script>

Contoh 1. Buat kode javascript untuk menampilkan string “Unika St. Thomas”

<html>

<head>

<title>Latihan JS-1</title>

</head>

document.write("Unika St. Thomas");

</script>

</body>

</html>

Buatlah garis horizontal di javascript

<html>

<head>

<title>Latihan JS-1</title>

</head>

document.write("Unika St. Thomas");

document.write("<hr>");

</script>

</body>

</html>

Tuliskan satu paragrap dengan menggunakan javascript, kemudian formatlah paragrap tersebut dengan css sehingga memiliki attribut sbb:

- besar tulisan 14pt

- jenis tulisan verdana

- warna tulisan magenta

- awal paragrap menjorok 50px

- jarak baris 24px

2. Operator

Jenis-jenis :

a. Aritmatika

Simbol

keterangan

Sisa Bagi

4 % 2 = 0

4 % 3 = 1

0 % 5 = 5

Soal.

Formatlah string total pembelian dengan css internal sehingga memiliki attribut sebagai berikut:

- besar teks 50pt

- warna teks hitam

- warna latar belakang putih

Hasil sisa bagi dibuat dalam tabel 1 baris, 1 kolom. Format tabel tersebut dengan css sehingga memiliki attribut:

- warna latar belakang hitam

- warna tulisan biru

- border : 5px solid green

b. Kondisi

Simbol	Keterangan
<	Lebih kecil dari
>	Lebih besar dari
<=	Lebih kecil atau sama dengan
>=	Lebih besar atau sama dengan
==	Sama dengan
!=	Tidak sama dengan

c. Logika

Simbol		Keterangan
&&	Dan	and
\|\|	Atau	Or
!	Bukan	not

d. Kenaikan/penurunan nilai

Simbol	Keterangan
++	Menaikkan nilai 1. Cth : a++; ++a; Artinya : a = a + 1;
--	Menurunkan nilai 1 Cth : a--; --a; Artinya : a = a - 1;

e. Penyingkatan

Simbol	Keterangan
+=	Cth : A+=5 à A = A + 5
-=
*=
/=
%=	Cth : A%3 à A = A % 3

Latihan 2.

1. Buka lembaran baru di notepad

2. Ketikkan struktur HTML

3. Simpan kode dengan nama js2.html

4. Buka file js2.html dari web browser

Soal:

Tentukanlah keterangan lulus apa tidak lulus berdasarkan nilai akhir (na). Jika NA>65 maka keterangan lulus.

var na;

na=...

if (na>65)

{

Cetak lulus

}

Soal :

CV. ABC menetapkan besar bonus 15% jika pembelian di atas 10.000.000. sebaliknya besar bonus hanya 3%. Buatlah kode javascript untuk mendapatkan besar pembelian setelah dikurangi bonus.

Jawab:

1. Buka lembaran baru di notepad

2. Ketikkan struktur html

BESOK ............. MENDALAMI :

1. Pernyataan Bersyarat

2. Pernyataan Berulang

Materi Pemrograman:

Materi

Struktur Javascript

</script>

Variabel

var a,b;

</script>

Operator

- Aritmatika

- Relasi

- Logika

- Penyingkatan

- Penurunan/kenaikan

- pengerjaan

Pernyataan Bersyarat

IF dan SWITCH

If ada 3 jenis:

1. Syntax 1

2. Syntax 2

3. Syntax 3

Switch

Pernyataan Berulang

2 Pernyataan Berulang

1. For

2. While

Larik/Array

Fungsi

Object

Kursus : Java, C#, VB, Flash, ... , ...., ...., ....., ....

RP. 3.000.000,-

Pernyataan Berulang ada 2 jenis :

1. For

2. While

For digunakan jika banyaknya perulangan suda pasti. Sedangkan While digunakan jika banyaknya perulangan belum pasti.

Syntax:

While (kondisi)

{

}

i=1;

while (i<=100)

{

document.write(i);

i++;

}

Latihan 1.

1. Buka dreamweaver/notepad

2. Ketikkan kode program berikut:

var i;

i=1;

while (i<=100)

{

document.write(i);

document.write("<BR>");

i++;

}

</script>

3. Simpan kode dengan nama while1.html

4. Buka file while1.html dari web browser

Latihan 2.

Buatlah kode javascript untuk menampilkan kelipatan 5 mulai dari 0 s/d 100.

1. Buka notepad/dreamweaver

2. Ketikkan kode js

var i;

i=0;

while (i<=100)

{

document.write(i);

document.write("<BR>");

i+=5;

}

</script>

Latihan 3.

Buatlah tabel perkalian berikut:

5 x 1 = 5

5 x 2 = 10

..................

5 x 20 = 100

Perintah while dapat dibentuk dalam perintah bersarang (nested while).

While ()

{

While ()

{

}

Latihan 4.

Buatlah kode JS untuk menampilkan output berikut:

111

1111

11111

1. Buka notepad/dreamweaver

2. Ketikkan kode js berikut:

var i,j;

i=1;

while (i<=5)

{

j=1;

while(j<=i)

{

document.wite(“1”);

j++;

}

document.write(“<br>”);

i++;

</script>

- Buat teks muncul di tengah web browser

Jawab:

Gunakan tabel

- Buat teks berukuran 24pt dengan jenis Verdana

Jawab:

Gunakan CSS

Latihan 4.

Fungsi adalah blok kode program yang disusun secara sistematis untuk menghasilkan suatu nilai.

Fungsi terbagi 2 yaitu :

1. Built-in function

2. User defined function

Built-in function à fungsi yang sudah disediakan oileh javascript. Fungsi tersebut tinggal dipanggil.

User defined function à fungsi yang dibuat oleh user / pemakai.

Syntax :

Function namafungsi([parameter])

{

[deklarasi]

[statement]

}

Buatlah fungsi untuk menampilkan tulisan Unika st. Thomas.

Jawab:

1. Buka notepad / dreamweaver

2. Ketikkan fungsi berikut :

Hari/Tanggal : Kamis, 19 Desember 2013

Materi :

1. Memahami pernyataan berulang while

2. Mengenal Larik (Array)

3. Mengenal fungsi

Pendahuluan

Pernyataan berulang di JS ada 2 (dua) jenis yaitu :

1. For

2. While

Pernyataan while digunakan untuk mengerjakan pernyataan secara berulang selama syarat / kondisi TRUE.

Syntax:

while (syarat) { <statement> }	for (variabel;syarat;kenaikan/penurunan) { <statement> }
Mencetak string “Unika” 10x	Mencetak string “Unika” 10x
<script> var i; i=1; //Nilai Awal while (i<=10) { document.write(“unika”); i=i+1; } </script>	<script> var i; for (i=1;i<=10;i++) { document.write(“unika”); } </script>

Latihan 1.

1. Buka macromedia / notepad

2. Buatlah kode JS untuk mencetak string “unika” sebanyak 10x

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Latihan While 1</title>

</head>

<body>

var i;

i=1;

while (i<=10)

{

document.write(“Unika”);

i++;

}

</script>

</body>

</html>

var a,b,c;

a=4;

b=10-a+5/5;

c=(a+b)-(a*b);

document.write(“ok”);

</script>

var beli;

var bayar;

var diskon;

beli=5000000;

if (beli>1000000)

diskon=0.1;

else

diskon=0.03;

bayar=beli-(diskon*beli);

document.write(bayar);

</script>

Soal :

Buatlah kode JS untuk mencetak kelipatan

2 mulai dari 0 s/d 100.

0 2 4 6 8 .... 100

Soal:

Buatlah kode JS untuk menentukan faktorial

Dari suatu bilangan.

1!=1

2!=2X1

3!=3X2X1 = 6

4!=4x3x2x1=24

5!=5X4X3X2X1=120

var i,fak,n;

n=5;

fak=1;

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

{

fak=fak*i;

}

document.write(“Faktorial “, n, “ adalah =”,fak);

</script>

Larik à variabel tunggal yang dapat menampung banyak nilai

Ilustrasi varibel biasa dengan variabel array

Diketahui IP sepuluh orang mahasiswa sbb: 2.5,3.0,1.8,3.3,2.5,3.4, 2.8, 1.9, 2.3, 2.7. Buatlah kode JS untuk menghitung rata-rata IP
<script> var ip1,ip2,ip3,ip4,ip5; var ip6,ip7,ip8,ip9,ip10; ip1=1.5; ip2=3.0; ip3=1.8; ip4=3.3; ip5=2.5; ip6=3.4; ip7=2.8; ip8=1.9; ip9=2.3; ip10=2.7; rata=(ip1+ip2+ip3+ip4+ip5+ip6+ip7+ip8+ip9+ip10)/10; document.write(“Rata – Rata IP : “,rata); </script>	<script> var ip = array(10); ip(1)=1.5;ip(2)=3.0; ip(3)=1.8; ip(4)=3.3;ip(5)=2.5; ip(6)=3.4; ip(7)=2.8;ip(8)=1.9; ip(9)=2.3; ip(10)=2.7; for (i=1;i<=10;i++) { Jlh=jlh+ip(i); } rata=jlh/10; document.write(“Rata IP = “,rata); </script>

Jika data sudah ada maka dapat dilakukan pengolahan:

1. Mencari jumlah

2. Mencari rata-rata

3. Mencari maksimum dan minimum

4. Mencari frekuensi

Minggu, 09 Februari 2014