maya's blog: 2011

Senin, 02 Mei 2011

Tugas Praktikum Pemograman Web-Java Script3

Date

Di dalam javascript juga dibuat data mengenai tahun, bulan, hari, jam, menit, detik.
Untuk membuat tanggal dalam halaman suatu web, dibutuhkan suatu variabel untuk menampung/menyimpan tanggal yang akan disimpan.
Contoh, untuk memunculkan tanggal yang sesuai dengan saat ini, digunakan sintaks :
var tgl = new Date();
Sedangkan untuk memunculkan tanggal yang kita ingin atur sendiri, maka gunakan contoh sintaks berikut :
var tgl = new Date(2010,3,18);
hasil tampilan dalam web : Sun Apr 18 00:00:00 UTC+0700 2010
Untuk lebih lengkap dengan jam,menit dan detik,maka tambahkan pada sintaks, contoh :
var tgl = new Date(year,month,day,hours,minutes,seconds);
Fungsi get dalam date digunakan untuk mengambil nilai.
contoh :
document.write(bulan= +tgl.getMonth());
maka akan keluar tampilan angka bulan yang kita inputkan berurut indeks untuk bulan. Indeks dimulai dari 0.
Yang diatur oleh aturan indeks adalah bulan dan hari.
Fungsi set dalam Date digunakan untuk mengubah nilai.
contoh :
tgl.setMonth(8);
maka hasilnya adalah bulannya menjadi bulan indeks ke-8, yaitu September.

Math

Dalam Javascript, terdapat bermacam-macam jenis math, diantaranya yaitu :
Math.abs()= nilai absolut
Math.ceil() = pembulatan nilai ke atas
Math.floor() = pembulatan nilai ke bawah
Math.round() = pembulatan nilai, jika angka dibelakang koma dari 5 ke atas, akan dibulatkan ke atas, dibawah 5 akan dibulatkan ke bawah
isNaN() = pengecekan apakah angka atau bukan, jika angka akan mengirim nilai false, dan jika huruf akan mengirim nilai true
Math.random() = akan memberikan nilai acak, yang nilainya selalu dibawah 1.

Sabtu, 23 April 2011

Tugas Praktikum Pemograman Web-Java Script2

Mengenal Message Box
Dalam Java Script terdapat tiga macam message box standar, yaitu
-alert
-confirm
-prompt
Ketiga message box ini merupakan bagian dari objek window, dan diletakkan diantara tag <script language ="JavaScript"> dan </script>.

Alert
Alert digunakan untuk menampilkan pesan / informasi yang sifatnya penting dan mendesak.
onSelect="select_nama()">

Bentuk umum dari message box alert adalah:

window.alert(pesan);

Confirm

Confirm digunakan untuk meminta konfirmasi dari pengunjung web. Nilai yang mampu ditampung oleh

message box adalah nilai true atau false. Kedua nilai ini dihasilkan dari penekanan tombol Ok atau Cancel.

Penekanan tombol Ok akan menghasilkan nilai true sedangkan penekanan tombol Cancel akan menghasilkan

tombol false.

Bentuk umum dari message box confirm adalah:

window.confirm(pertanyaan);
contoh :

var a;

a = window.confirm("Apakah Anda perokok?");

if (a) {

document.write("Anda seorang perokok");

} else {

document.write("Anda bukan seorang perokok");

}

</SCRIPT>

Prompt

Prompt dapat digunakan untuk menampung nilai yang diinputkan oleh pengunjung web.

Bentuk umum dari message box prompt adalah:

window.prompt(pesan, nilai_default);
contoh :

var nama;

nama = window.prompt("Masukkan nama Anda", "");

document.write("Selamat Datang " + nama);

</SCRIPT>

Mengenal function

Penggunaan function memungkinkan penulisan suatu kode program secara modular atau yang sering kali

disebut sebagai modular programming. Penulisan function pada JavaScript umumnya diletakkan pada bagian

HEAD dalam dokumen HTML.

Bentuk umum dalam penulisan function adalah:

function nama_function() {

//statement-statement yang akan dieksekusi oleh function

}Jika function ingin digunakan, panggil nama function.
contoh :
<head>
<script language ="JavaScript">
function sapa() {

document.write("<h1>Hallo, Apa Kabar?</h1>");

}
</script>
</head>

<body>

sapa();

document.write("Header ini dihasilkan dari pemanggilan function sapa");

</script>
</body>

Suatu function juga bisa melewatkan suatu parameter ketika function tersebut dipanggil.

Bentuk umum penulisannya adalah:

function nama_function(parameter1, parameter2, ...) {

//statement-statement yang akan dieksekusi oleh function

}

Suatu function juga bisa menghasilkan suatu nilai ketika function tersebut dipanggil. Untuk menjadikan

function yang dibuat dapat menghasilkan / mengembalikan suatu nilai ketika dipanggil, yang perlu dilakukan

adalah dengan menyertakan kata kunci return di depan nilai yang akan dikembalikan oleh function tersebut.

Berikut ini adalah bentuk umum penulisannya.

function nama_function() {

//statement-statement yang akan dieksekusi oleh function

return nilai_kembali;

}

Mengenal Event

Event adalah kejadian yang terjadi pada suatu halaman web. Kejadian ini bisa bermacam-macam, ada kejadian penekanan tombol, kejadian pengubahan nilai pada textbox, dan bermacam-macam kejadian lainnya.
Event onClick
Event onClick merupakan kejadian penekanan tombol mouse (click) pada komponen form.
Kejadian ini bisa berupa penekanan tombol, pemilihan checkbox maupun radio button, dan pemilihan suatu link, serta penekanan tombol submit ataupun reset. Pengaturan terhadap event ini dilakukan dengan menuliskan atribut onClick pada tag HTML yang bersangkutan. Atribut ini dapat diberi nilai berupa nama function yang akan dipicu oleh event tersebut.
contoh :
<head>
   <script language ="JavaScript">
      function sapa() {
         window.alert("Selamat Datang\n" + formku.nama.value);      }
   </script>
</head>

<table>

</table>

</form>
</body>

Dalam dokumen HTML untuk membuat suatu tombol bebas (selain tombol submit dan reset) dapat

menggunakan tag <input> dengan menyertakan atribut type yang diberi nilai BUTTON.

Label pada tombol bisa diatur menggunakan atribut VALUE.

Untuk mengakses nilai yang tertampung dalam suatu komponen, yang perlu dilakukan adalah menyebutkan

nama form tempat komponen tersebut berada, selanjutnya baru sebutkan nama komponennya dan diakhiri

dengan kata kunci value. Penyebutan itu dilakukan dengan menyertakan tanda “.” (titik) sebagai pemisah.

Hal ini berlaku juga ketika JavaScript ingin menempatkan nilai yang dihasilkan ke dalam suatu komponen

dalam form HTML.

Atribut READONLY yang terdapat pada suatu textbox menjadikan nilai pada textbox tersebut tidak dapat

diubah lewat halaman web browser.

Selain atribut READONLY terdapat atribut lain yaitu atribut DISABLED yang berfungsi untuk menonaktifkan suatu komponen form.

Event onLoad dan onUnLoad

Event onLoad berkaitan dengan kejadian pembukaan suatu file dokumen HTML ke dalam web browser

sedangkan event onUnLoad berkaitan dengan kejadian penutupan suatu file dokumen HTML oleh suatu web

browser. Baik event onLoad maupun event onUnLaod keduanya hanya dapat disertakan sebagai atribut pada tag <body>.

<body onLoad="salam()" onUnload="bye()">

Event onFocus dan onBlur

Event onFocus berkaitan dengan kejadian mengarahkan fokus kursor ke suatu komponen form tertentu. E

Baik event onFocus maupun event onBlur keduanya bisa diimplementasikan pada komponen textbox dan text area.

contoh :
<input type="text" name="nama" onFocus="fokus_nama()" onBlur="bye_nama()">

Event onChange

vent onBlur berkaitan dengan kejadian ketika kursor beralih meninggalkan suatu komponen form tertentu. Event onChange merupakan suatu kejadian pengubahan nilai pada suatu komponen.
contoh sintaks :
<input type="text" name="nama" onChange="ubah_nama()">

Event onSelect

Event onSelect berkaitan dengan kejadian pemilihan teks pada suatu komponen form seperti pemilihan teks

yang berada pada suatu textbox. Event ini bisa diterapkan pada textbox, textarea, combo box, dan list box.
contoh sintaks :
<input type="text" name="nama"

Event onMouseOver dan onMouseOut

Event onMouseOver dan onMouseOut berkaitan dengan kejadian pergerakan kursor mouse pada suatu link.

Event onMouseOver terjadi ketika kursor mouse berada di atas suatu link sedangakan event onMouseOut

terjadi ketika cursor mouse bergerak meninggalkan suatu link.
contoh sintaks :
<a href="http://ubuntu.com" onMouseOver="dekat()" onMouseOut="jauh()"><img src="pic1.jpg"></a>contoh sintaks :

Jumat, 22 April 2011

Tugas Praktikum Pemograman Web-Java Script

Pengenalan Java Script

Java Script merupakan bahasa pemrograman yang dieksekusi di sisi klien atau yang biasa dikenal dengan istilah client side programming di mana suatu kode program akan dikirimkan ke klien dan dieksekusi / dijalankan oleh web browser dan bukannya dieksekusi di web server.

Kode program Java Script akan disisipkan pada dokumen HTML dengan menggunakan pasangan tag <SCRIPT> dan </SCRIPT> di atribut LANGUAGE dari tag <SCRIPT> akan diberi nilai JavaScript.
Contoh sintaks :<SCRIPT LANGUAGE=”JavaScript”>
</SCRIPT>
Java Script merupakan bahasa pemrograman yang bersifat case sensitive, artinya Java Script akan membedakan penggunaan huruf besar dan huruf kecil.

Setiap statement / pernyataan dalam kode program Java Script selalu diakhiri dengan karakter “;” (titik

koma / semicolon).

Mencetak Teks

Dalam Java Script perintah yang digunakan untuk mencetak suatu teks pada dokumen HTML adalah document.write(“teks”). Perintah document.write ditulis diantara tag <script language="JavaScript"> dan </script>.

contoh : document.write("<H1>Huruf</H1>");

Memberi komentar

Terdapat dua cara untuk menyertakan komentar dalam Java Script:

1. Menggunakan penanda //

Penanda // digunakan untuk menuliskan komentar dalam satu baris

2. Mengunakan pasangan penanda /* dan */

Pasangan penanda /* dan */ digunakan untuk menuliskan komentar yang lebih dari satu baris

Tipe Data dan Deklarasi Variabel
Tiga macam tipe data utama dalam javascript, yaitu:
- tipe data String
- tipe data bilangan/numerik
- tipe data logika/boolean
Pendeklarasian variabel dalam Java Script ditandai dengan penggunaan kata kunci var dan diikuti dengan
nama variabel.
Contoh perintah :

var kota = ”bandung”;
</SCRIPT>

Operator Aritmatika
Operator aritmatika adalah operator yang digunakan untuk menangani /mengoperasikan suatu nilai bertipe data numerik.

Berikut ini adalah daftar tipe data numerik:

+ untuk penjumlahan

- untuk pengurangan

* untuk perkalian

/ untuk pembagian

% untuk modulud / sisa pembagian

++ untuk increment / penaikan nilai sebesar 1

-- untuk decrement / penurunan nilai sebesar 1

Contoh perintah :

var a, b, c;

a = 7; b = 4; c = 0;

document.write("nilai variabel a = " + a +"<BR>");

document.write("nilai variabel b = " + b +"<BR>");

c = a + b;

document.write("a + b = " + c + "<BR>");
</SCRIPT>

Operator Pemberian Nilai / Assignment

Operator penugasan / assignment adalah operator yang digunakan untuk memberikan / memasukkan nilai ke

dalam suatu variabel.
Berikut ini adalah daftar operator penugasan:
=
keterangan : nilai yang berada di sisi kanan akan dimasukkan ke variabel di sisi kiri
contoh : x = 3
maka nilai variabel x saat ini adalah 3
+=
keterangan :

nilai dari variabel yang berada di sisi kiri akan ditambahkan dengan nilai yang berada di sisi kanan

contoh : x = 5

x += 2

maka nilai variabel x saat ini adalah 7
-=
keterangan :

nilai dari variabel yang berada di sisi kiri akan dikurangkan dengan nilai yang berada di sisi kanan

contoh : x = 6

x -=4

maka nilai variabel x saat ini adalah 2
*=
keterangan :

nilai dari variabel yang berada di sisi kiri akan dikalikan dengan nilai yang berada di sisi kanan

contoh : x = 2

x *= 7

maka nilai variabel x saat ini adalah 14

keterangan :

nilai dari variabel yang berada di sisi kiri akan dibagi dengan nilai yang berada di sisi kanan

contoh : x = 24

x /= 8

maka nilai variabel x saat ini adalah 3

keterangan :

nilai dari variabel yang berada di sisi kiri akan dimoduluskan dengan nilai yang berada di sisi kanan

contoh : x = 7

x %= 3

maka nilai variabel x saat ini adalah 1

Operator Pembanding / Comparison
Berikut ini adalah daftar operator pembanding / comparison :

keterangan :

akan menghasilkan nilai true bila kedua nilai yang dibandingkan memiliki bobot yang

contoh : x = (4 == 2)

maka nilai variabel x saat ini adalah false

keterangan :

akan menghasilkan nilai true bika kedua nilai yang dibandingkan memiliki bobot

berbeda / tidak sama

contoh : x = (4 != 2)

maka nilai variabel x saat ini adalah true

keterangan :

akan menghasilkan nilai true apabila nilai pertama (nilai yang berada di sisi kiri) memiliki bobot

contoh : x = (4 > 2)

maka nilai variabel x saat ini adalah true

keterangan :

akan menghasilkan nilai true apabila nilai pertama (nilai yang berada di sisi kiri) memiliki bobot

contoh : x = (4 < 2)

maka nilai variabel x saat ini adalah false

keterangan :

akan menghasilkan nilai true apabila nilai pertama (nilai yang berada di sisi kiri) memiliki bobot

contoh : x = (4 >= 4)

maka nilai variabel x saat ini adalah true

keterangan :

akan menghasilkan nilai true apabila nilai pertama (nilai yang berada di sisi kiri) memiliki bobot

contoh : x = (4 <= 8)

maka nilai variabel x saat ini adalah true

Operator Logika

Operator logika adalah operator yang digunakan untuk mengoperasikan nilai-nilai bertipe data boolean yang

bernilai true atau false.

Berikut ini adalah daftar operator logika :

keterangan :

operator and, operator ini akan menghasilkan nilai false bila di antara nilai-nilai yang dioperasikan terdapat nilai false

contoh : x = (3<7) && (4>7)

maka nilai variabel x saat ini adalah false

keterangan :

operator or, operator ini akan menghasilkan nilai true bila di antara nilai-nilai yang dioperasikan terdapat nilai true

contoh : x = (3<7) || (4>7)

maka nilai variabel x saat ini adalah true

keterangan :

operator not, operator ini akan menghasilkan nilai true bila nilai yang dioperasikan bernilai false dan akan menghasilkan nilai false bila nilai yang dioperasikan bernilai true

contoh : x = !(3<7)

maka nilai variabel x saat ini adalah false

Operasi Penggabungan String
Operator penggabungan string dituliskan dengan penanda +.

contoh :

var x;

x = "aksara" + "jawa";

document.write('x = "aksara" + "jawa"<BR>');

document.write('nilai variabel x = "' + x + '"<BR><BR>'
</SCRIPT>

Konversi Tipe Data

Tipe data yang memungkinkan untuk dikonversi adalah tipe data string ke tipe data numerik.

Ada dua fungsi yang bisa digunakan untuk mengkonversi suatu nilai bertipe data string ke numerik, yaitu fungsi parseInt() dan fungsi parseFloat().

Fungsi parseInt() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik berbentuk

bilangan bulat / integer.

contoh : a = “2.5”

Dan fungsi parseFloat() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik

berbentuk bilangan pecahan / floating point.
contoh : a = “2.5”

x = 3 + parseFloat(a);

maka nilai variabel x saat ini adalah 5.5

Mengenal Statemen if

Bentuk umum dari statement if yang paling sederhana adalah:

if (kondisi) {

//statement-statement yang akan dieksekusi bila kondisi benar

}
contoh :

var x = 8;

document.write("nilai variabel x = " + x + "<BR>");

if (x> 0) {

document.write("x adalah bilangan positif");

}

</SCRIPT>

Mengenal Statement if ... else ...

Bentuk umum dari statement ini adalah:

if (kondisi) {

//statement-statement yang dieksekusi bila kondisi benar

} else {

//statement-statement yang dieksekusi bila kondisi salah

}
contoh :

var x = 11;

document.write("nilai variabel x = " + x + "<BR>");

if (x> 0) {

document.write("x adalah bilangan positif");

} else {

document.write("x adalah bilangan negatif");

}

</SCRIPT>

Mengenal Statement if ... else if ...

Berikut ini adalah bentuk umum dari statement if ... else if ... :

if (kondisi1) {

//statement-statement bila kondisi 1 benar

} else if (kondisi2) {

//statement-statement bila kondisi 2 benar

} else {

//statement-statement bila semua kondisi salah

}
contoh :

var x = 11;

document.write("nilai variabel x = " + x + "<BR>");

if (x > 0) {

document.write("x adalah bilangan positif");

} else if (x < 0) {

document.write("x adalah bilangan negatif");

} else {

document.write("x adalah bilangan nol");

}

</SCRIPT>

Mengenal Statement switch ... case ...

Statement switch ... case ... merupakan suatu bentuk statement alternatif untuk melakukan percabangan.

Bentuk umum dari statement switch ... case ... adalah:

switch (variabel) {

case nilai_penguji1: //stament-statement pilihan 1

break;

case nilai_penguji2: //stament-statement pilihan 2

break;

default : //statement-statement

};

contoh :

var hari = 5;

document.write("nilai variabel hari = " + hari + "<BR>");

document.write("hari yang dipilih: ");

switch(hari) {

case 1: document.write("senin");

break;

case 2: document.write("selasa");

break;

case 3: document.write("rabu");

break;

case 4: document.write("kamis");

break;

case 5: document.write("jumat");

break;

case 6: document.write("sabtu");

break;

case 7: document.write("minggu");

break;

default: document.write("tidak terdaftar");

};

</SCRIPT>

Mengenal Operator ... ? ... : ...

Operator ... ? ... : ... digunakan untuk melakukan suatu proses percabangan sederhana.

Bentuk umum dari penggunaan operator ... ? ... : ... adalah:

kondisi ? statement_kondisi_true : statement_kondisi_false;
contoh :

var x, hasil;

x = 2;

document.write("nilai variabel x = " + x + "<BR>");

hasil = (x>0) ? "positif" : “negatif";

document.write("x adalah bilangan " + hasil);

</SCRIPT>

Mengenal Statement while

Statement while merupakan salah satu statement yang bisa digunakan untuk melakukan suatu proses perulangan / looping. Bentuk umum dari statement while adalah:

while (kondisi) {

//statement-statement yang diulang

}
contoh :

var a=4;

while(a>1) {

document.write("hai<BR>");

a--;

}

</SCRIPT>

Mengenal Statement do ... while

Bentuk umum dari statement do ... while adalah:

do {

//statement-statement yang diulang

} while (kondisi);
contoh :

var a=4;

do {

document.write("semangat<BR>");

a--;

} while(a>1);

</SCRIPT>

Mengenal Statement for

Statement for juga merupakan salah satu statement yang bisa digunakan untuk melakukan perulangan /

looping. Bentuk umum dari statement for adalah :

for (inisialisasi; kondisi; penaikan_penurunan) {

//statement-statement yang diulang

}
contoh :

var a;

for(a=1;a<7;a++) {

document.write("hi!!!<BR>");

}

</SCRIPT>Statement if digunakan untuk melakukan percabangan dalam melakukan eksekusi sejumlah statement.

x = 3 + parseInt(a);

maka nilai variabel x saat ini adalah 5lebih kecil dibandingkan nilai kedua (nilai yang berada di sisi kanan)lebih besar atau sama dengan nilai kedua (nilai yang berada di sisi kanan)lebih kecil atau sama dengan nilai kedua (nilai yang berada di sisi kanan)lebih besar dibandingkan nilai kedua (nilai yang berada di sisi kanan)sama

Jumat, 25 Maret 2011

Tugas Praktikum 6 Pemograman Web-Ratna Ayu-1072005

Pengenalan CSS

CSS adalah singkatan dari Cascading Style Sheet, berfungsi untuk meningkatkan kemampuan XHTML dan berperan dalam desain tampilan.
CSS menggunakan pasangan tag <style type="text/css"> dan </style>. Dalam tag CSS antar atribut dipisahkan tanda ; (titik koma) dan pemberian nilai atribut menggunakan tanda :(titik dua).

1. Mengatur warna teks
Pewarnaan warna teks dapat ditulis di dalam tag style, contoh sintaks :
<style type="text/css">
h1{color : red;}
p{color : blue;}
</style>
Dan dalam tag body nya :
<body>
   <h1>Berwarna merah</h1>
   <p>Berwarna Biru</p>
</body>

2. Mengatur Perataan teks
Perataan teks tersedia dalam beberapa jenis, yaitu left, right, center, dan justify.
contoh sintaks:
<style type="text/css">
h1{text-align : center;}
p{text-align : left;}
</style>

3. Membuat Garis pada teks
Untuk membuat garis pada teks, digunakan sintaks text-decoration. Jenis text-decoration adalah :
-overline
untuk garis diatas teks
-underline
untuk garis dibawah teks
-linethrough
untuk coretan tengah
-blink
untuk modifikasi garis
contoh sintaks :
<style type="text/css">
h1{text-decoration : underline;}
p{text-decoration : overline;}
</style>

4. Mengatur Indentasi teks
Dilakukan dengan mengatur nilai atribut text-indent dengan satuan cm dan px.
contoh sintaks :
<style type="text/css">
p{text-indent : 2cm;}
</style>

5. Mengatur penggunaan Huruf Kapital
Tag yang digunakan untuk mengatur huruf kapital adalah tag text-transform. Jenis-jenis text-transform:
-uppercase
untuk penggunaan huruf besar semua
-lowercase
penggunaan huruf kecil
-capitalize
penggunaan huruf kapital di setiap awal kata
contoh sintaks :
<style type="text/css">
h1{text-transform : uppercase;}
</style>

6. Mengatur Ukuran dan jenis huruf
Untuk pengaturan ukuran huruf, digunakan tag font-size, sedangkan untuk pengaturan jenis huruf yaitu tag font-family.
contoh sintaks :
<style type="text/css">
    p{font-family : arial;
        font-size : 18pt;}
</style>

7. Menagtur Cetak tebal dan Cetak miring
Untuk pengaturan cetak tebal digunakan tag font-weight, dan pengaturan cetak miring menggunakan tag font-style.
contoh sintaks :
<style type="text/css">
p{font-weight : bold;
      font-style : italic;}
</style>

8. Mengatur tipe border/garis tepi dan warna border
Jenis tag border-style:
-dotted
-dashed
-solid
-double
-groove
-ridge
-inset
-outset
Untuk pengaturan warna border digunakan tag border-color.

9. Mengatur Ketebalan border
Tag yang digunakan untuk mengatur ketebalan border adalah tag border-width.
contoh sintaks :
<style type="text/css">
   p{border-style : dotted;
       border-color : red;
       border-width : 16px;}
</style>

10. Mengatur padding dan margin
padding digunakan untuk mengatur jarak teks dan border.
contoh sintaks :
<style type="text/css">
   p{border-style : dotted;
       border-color : red;
       padding-left : 1cm;
       padding-top : 1cm;
       padding-bottom : 1.5cm;
       padding-right : 1.5cm;}
</style>
Margin diatur untuk memberi jarak antara border dengan layar.
contoh sintaks :
<style type="text/css">
   p{border-style : dotted;
       border-color : red;
       margin-left : 2cm;
       margin-right : 3cm;}
</style>

11. CSS pada UnOrdered List dan Ordered List
contoh sintaks UnOrdered list :
<style type="text/css">
   ul{list-style-type : disc}
</style>
contoh sintaks Ordered list :
<style type="text/css">
   ol{list-style-type : lower-roman}
</style>

12. Membuat list dengan gambar
contoh sintaks :
<style type="text/css">
   ul{list-style-image : url('contoh.jpg')}
</style>

13. Mengatur Warna dan Gambar Latar
contoh sintaks untuk mengatur warna latar:
<style type="text/css">
  body{background-color : blue;}
  h1{background-color : red;}
</style>
contoh sintaks untuk mengatur gambar latar:
<style type="text/css">
  body{background-image : url('pic1.jpg');}
</style>

14. Mengatur posisi gambar latar
contoh sintaks untuk mengatur posisi gambar latar:
<style type="text/css">
  body{background-image : url('pic1.jpg');
            background-repeat : norepeat;
            background-position : top-right;}
</style>

15. Mengatur Perulangan dan membekukan Gambar latar
contoh sintaks untuk mengatur perulangan gambar latar:
<style type="text/css">
  body{background-image : url('pic1.jpg');
            background-repeat : repeat-x;}
</style>
contoh sintaks untuk membekukan gambar latar:
<style type="text/css">
  body{background-image : url('pic1.jpg');
            background-repeat : norepeat;
            background-position : top-right;
            background-attachment : fixed;}
</style>

16. ID dalam CSS
ID digunakan untuk meningkatkan kemampuan dari CSS. Lambang ID dalam CSS adalah #.
contoh sintaks :
<style type="text/css">
  #satu{font-style : italic;
            background-color : aqua;
            color : red;}
</style>
dan dalam tag body diisi :
<body>
<h1 id="satu">Header 1 Style 1</h1>
</body>

17. Class dalam CSS
Simbol yang digunakan oleh class adalah .(titik). Class dapat digabungkan dengan ID.
contoh sintaks :
<style type="text/css">
  #satu{font-style : italic;
            background-color : aqua;
            color : red;}
   .dua{text-decoration : underline;
           font-family : arial;
           border-style : dotted;
           border-color : blue;}
   h2.satu{font-family : arial;
               color : aqua;}
</style>
dan dalam tag body diisi :
<body>
<h1 id="satu">Header 1 ID 1</h1>
<h1 class="dua">Header 1 Class 2</h1>
  <h2 class="satu">Header 2 class 1</h2>
</body>

18. In line CSS
Pendefinisian CSS ditulis sebagai nilai dari atribut style pada tag XHTML. Ditulis dalam tag body.
contoh sintaks :
<body>
<h1 style="color : pink;
                   background-color : blue;
                   text-decoration : underline;">Menggunakan model pendefinisian In line</h1>
</body>

19. External CSS
Pendefinisian CSS ditulis dalam file yang terpisah dari dokumen XHTML. Digunakan tag <link rel="stylesheet" type="text/css" href="file1.css"> dalam tag body dokumen XHTML. Sedangkan dalam file1.css dibuat ID atau Class yang akan digunakan.

Senin, 21 Maret 2011

Tugas Praktikum 5 Pemograman Web-Ratna Ayu-1072005

Form

Form digunakan untuk menampung komponen inputan, form berkaitan dengan pemograman. Form merupakan sejenis daftar dalam suatu formulir. Di dalam form terdapat 3 atribut yaitu name, method, dan action.
Ada beberapa tipe input didalam form, yaitu :
1. Tipe Text atau TextBox
digunakan untuk memberi kotak pada data yang akan diisi.
Contoh sintaks :
<body>
<form>
Nama: <input type="text" name="nama" size="20" maxlength="15" /><br/>
Alamat:<input type="text" name="alamat" size="20" maxlength="20">
</form>
</body>
Hasil :

NAMA	:
ALAMAT	:

2. Tombol Submit dan Reset
Contoh sintaks tombol submit adalah : <input type="submit" value="kirim"/>
Contoh sintaks tombol reset adalah : <input type="reset" value="hapus"/>
Hasil :

3. Tipe Input Password
Contoh sintaks :
<body>
<form>
username<input type="text" name="username"/><br/>
password<input type="password" name="password" />
<input type="submit" value="Subnit Query">
</form>
</body>
Hasil :

Username	:
Password	:

4. Tipe CheckBox
Contoh sintaks :
<body>
<form>
Daftar hobi</br>
    <input type="checkbox" name="renang"/>renang</br>
    <input type="checkbox" name="baca" checked/>membaca</br>
    <input type="checkbox" name="mancing" checked/>memancing</br>
    <input type="checkbox" name="nonton"/>nonton</br>
  </form>
</body>
Hasil :
Daftar hobi
renang
membaca
memancing
nonton

5. Tipe RadioButton
Contoh sintaks :
<body>
  <form>
   Jenis kelamin</br>
    <input type="radio" name="kelamin" value="pria"/>Laki-laki</br>
    <input type="radio" name="kelamin" value="wanita" checked/>Perempuan</br>
  </form>
</body>
Hasil :
Jenis kelamin
Laki-laki
Perempuan

6. Tipe TextArea
Contoh sintaks :
<body>
  <form>
   Nama<input type="text" name="nama"></br>
   Komentar<textarea name="komentar" cols="20" rows="5" wrap> </textarea>
  </form>
</body>
Hasil :

Nama
Komentar

7. Tipe ComboBox
Dalam combo box, pilihan yang dapat dipilih hanya satu.
Contoh sintaks :
<body>
  <form>
  distro linux favourite:</br>
   <select name="distro">
    <option value="fedora"/>Fedora Core
    <option value="suse"/>Open Suse
    <option value="ubuntu" selected/>Ubuntu
    <option value="debian"/>Debian
   </select>
  </form>
</body>
Hasil :

8. Tipe ListBox

Dalam List box, dapat memilih lebih dari satu pilihan.
Contoh sintaks :
<body>
  <form>
   distro linux favourite:</br>
    <select name="distro" multiple/>
     <option value="fedora" selected/>Fedora Core
     <option value="suse"/>Open Suse
     <option value="ubuntu" selected/>Ubuntu
     <option value="debian"/>Debian
    </select>
  </form>
</body>
Hasil :

Senin, 14 Maret 2011

Tugas Praktikum 4 Pemograman Web-Ratna Ayu-1072005

FRAME

Frame digunakan untuk membingkai beberapa dokumen XHTML ke dalam satu tampilan halaman web.
Frame dibagi menjadi 2 frame, yaitu:
- tag <frame>
dapat dipakai sebagai tag <frame src/> yang biasanya dipergunakan untuk mengambil suatu halaman web lainnya. Contoh sintaks : <frame src="halaman_a.html"/>.
- tag <frameset>
didalam tag frameset dapat digunakan untuk membagi frame ke dalam bentuk kolom dan baris.
Contoh sintaks : <frameset cols="30%,*,*">,sintaks ini dipergunakan untuk membagi frame menjadi 3 kolom. Sedangkan sintaks : <frameset rows="30%,*,*">, dipergunakan untuk membagi frame menjadi 3 baris.
Untuk memahami frame biasanya digunakan teknik memotong roti.

Borderless Frame
digunakan untuk memberi nilai pada atribut border sesuai dengan keperluan. Atribut border diletakkan didalam tag frameset.
Contoh sintaks: <frameset cols="20%,40%,*" border="4">.
Untuk memberi nilai 0 pada atribut border, maka isi atribut border dalam tag frameset adalah 0 sehingga jika border = 0,tidak terdapat garis pemisah antar frame yang terlihat.

Link Dalam Frame
Untuk membuat link dalam frame digunakan 2 dokumen XHTML. Contoh tag yang digunakan dalam membuat link didalam link yaitu : <a href="halaman_b.html" target="kanan">Halaman b</a>.

IFrame
Merupakan implementasi frame yang lebih fleksibel. Untuk membuat iframe juga membutuhkan 2 dokumen XHTML.
Contoh sintaks : <iframe src="halaman1.html" width="200" height="200" align="right"/>.

Minggu, 06 Maret 2011

Tugas Praktikum 3 Pemograman Web-Ratna Ayu-1072005

Tabel
Table digunakan untuk membagi tampilan dan mengelompokkan suatu informasi.
Terdapat beberapa tag didalam tag tabel, yaitu :
- <caption>
Tag untuk memberi judul pada tabel yang ingin dibuat.
- <tr>
Tag ini digunakan untuk membuat suatu baris pada tabel.
- <th>
Digunakan untuk menyatakan cell heading suatu tabel.
- <td>
Digunakan untuk membuat isi dari suatu cell data dalam tabel.
Dalam Tabel, terdapat beberapa atribut yang mendukung pembuatan tabel yang lengkap dan efisien.
Salah satunya yaitu atribut border, atribut ini digunakan umtuk mengatur ketebalan garis tepi. Garis tepi dapat diatur sesuai keinginan.
Atribut bgcolor digunakan untuk mengatur warna latar pada keseluruhan tabel.
Contoh penggunaan atribut border dan bgcolor pada tag table yaitu : <table bgcolor="red" border="3"> </table>.
Atribut yang digunakan untuk mengatur jarak spasi dan padding adalah atribut cellspacing dan cellpadding. Cellspacing digunakan untuk mengatur jarak antar cell. Sedangkan cellpadding digunakan untuk mengatur jarak tulisan dan border di masing-masing cell.
Contoh penggunaan atribut cellspacing dan cellpadding adalah : <table cellpadding="10" cellspacing="30"> </table>.
Penggunaan headings pada table, yaitu :
<html>
<body>
    <table border="2">
      <tr>
        <th>heading</th>
      </tr>
      <tr>
        <td>baris 1, kolom 1</td>
        <td>baris 1, kolom 2</td>
      </tr>
    </table>
</body>
</html>
Atribut width dan height digunakan untuk mengatur lebar dan tinggi tabel.
Contoh penggunaan dalam tag : <table width="400" height="400"> </table>.
Atribut align dan valign juga dapat digunakan didalam tag table. Atribut align digunakan untuk melakukan perataan secara horisontal. Dapat digunakan didalam tag table dan tag td. Contoh : <table align="center"> <tr> <td align="left">Perataan</td> <td>Kiri</td> </tr> </table>.
Sedangkan atribut valign digunakan untuk melakukan perataan secara vertikal. Biasanya digunakan didalam tag td. Contoh : <tr> <td valign="top">Perataan</td> <td>atas</td> </tr>.
Atribut colspan dan rowspan. Atribut colspan digunakan untuk penggabungan cell secara kolom, sedangkan atribut rowspan untuk penggabungan cell secara baris. Kedua atribut ini diletakkan didalam tag yang ingin digabungkan. Contoh sintaks : <th rowspan="3" colspan="2">3 baris dan 2 kolom digabungkan</th>.
Mengosongkan cell pada table digunakan tag td, contoh sintaks : <td> </td>.

Senin, 28 Februari 2011

Tugas Praktikum 2 Pemograman Web-Ratna Ayu Sri

Pada pertemuan kedua mata kuliah Pemograman Web, saya mendapat penjelasan mengenai beberapa materi yang lebih lanjut dalam pembuatan web dibandingkan minggu kemarinnya. Ringkasan materi yang dapat saya sampaikan adalah:

Untuk Memberi Gambar pada Latar

Dilakukan dengan menggunakan atribut background pada tag<body>, yaitu menjadi : <body background="pic1.jpg">. File gambar dan file xhtml harus berada dalam satu lokasi yang sama.

Untuk Menampilkan Gambar pada Tampilan Halaman Web

Digunakan tag <img>, file gambar dan file xhtml harus berada dalam satu lokasi yang sama. Contoh sintaks : <img src="pic1.jpg"/>
Atribut lain yang dapat digunakan dalam tag <img> adalah : <img src="pic1.jpg" align="middle" alt="tulisan yang ingin ditampilkan bila gambar tidak muncul/saat kursor mengarah ke gambar" width="200" height="300"/>

Mengenal Tag <marquee>

Digunakan untuk membuat animasi sederhana. Atribut yang digunakan untuk mengatur arah gerak animasi adalah atribut direction. Contoh sintaks : <marquee direction="right">Ini teks animasi</marquee>.

Mengenal Tag <bgsound>

Digunakan untuk memutar file audio sebagai suara latar. File lagu dan file xhtml harus ada dalam satu lokasi. Contoh sintaks : <bgsound src="lagu.mp3"loop="2"/>.

Mengenal Tag <embed>

Tag ini digunakan untuk memutar file video. Lokasi tempat menyimpan file xhtml dan file video harus sama. Contoh sintaks : <embed src="video.mpg" width="300" height="200" loop="true" autostart="false"/>. Jika menggunakan sintaks loop="true" dan autostart="false", maka video akan memutar ulang dengan sendirinya.

Mengenal List

Tipe list ada dua, yaitu :
-Ordered list (memperhatikan urutan, menggunakan tag <ol>)
-Unordered list (Tidak memperhatikan urutan, menggunakan tag <ul>)

Ordered List

Ordered list memiliki beberapa tipe atribut, yaitu :
- 1
- A
- a
- I
- i
dan memiliki pilihan start yang ditentukan oleh para pembuat halaman web. Contoh sintaks ordered list :
<ol type="A" start="3">
   <li>buku</li>
   <li>bolpen</li>
   <li>pensil</li>
   <li>penghapus</li>
</ol>

Unordered list

Ada beberapa tipe unordered list, yaitu :
- circle
- disc
- square
Contoh sintaks :
<ul type="square">
   <li>buku</li>
   <li>bolpen</li>
   <li>pensil</li>
   <li>penghapus</li>
</ul>

Mengenal Definition List

Dalam definition list terdapat :
- <dl> : merupakan tag dari definition list yang terletak didalam tag <body>.
- <dt> : istilah yang ingin terjemahkan diletakkan diantara tag <dt> dan </dt>.
- <dd> : arti dari istilah yang ingin diterjemahkan ditulis diantara tag <dd> dan </dd>.

Mengenal Link / Hyperlink

Untuk membuat sebuah link, dibutuhkan 2 dokumen xhtml. Tag yang digunakan untuk membuat sebuah link adalah : <h1>Ini adalah halaman pertama</h1>
<a href="halaman2.html">ke halaman 2</a>. Buat juga sebuah dokumen xhtml lain yang berisi kebalikan dari tag yang dibuat dihalaman sebelumnya apabila menginginkan link bolak-balik.

Mengenal Link pada Jendela Browser Baru

Memberi nilai _blank pada atribut target. Dengan membuat dua dokumen xhtml, maka dapat dibuat juga link untuk jendela browser yang baru. Contoh sintaks :
<h1>Ini adalah halaman pertama</h1>
<a href="halaman2.html" target="_blank">ke halaman 2</a>.

Membuat Link ke Alamat Suatu Situs di Internet

Nilai atribut a href disesuaikan dengan alamat situs yang akan dituju. Contoh sintaks :
<a href=http://google.com target="_blank">ke google</a>.

Penggunaan Link pada Gambar

Gambar yang terdapat didalam jendela browser dapat dijadikan acuan untuk pindah ke halaman yang dijadikan link jika gambar tersebut diklik. Tag <a> </a> mengapit tag <img />.
Contoh sintaks :
<a href="halaman2.html"target="_blank">
<img src="pic1.jpg" width="100" height="100"/>
</a>

Link ke Email

Link yang digunakan untuk menyambung ke email seseorang. Contoh sintaks :
<a href="funny_guys@yahoo.com">email funny</a>

Minggu, 27 Februari 2011

Tugas Praktikum 1 Pemograman Web-Ratna Ayu-1072005

Pengertian HTML

HTML adalah singkatan dari Hyper Text Markup Language. HTML merupakan format dokumen standar pada web. HTML terbentuk dari tag-tag yang memerintahkan web browser untuk mengesekusi/menerjemahkan perintah-perintah yang dispesifikasikan. XHTML adalah perkembangan dari HTML. Yang meliputi Web Browser adalah :
-Internet Explorer
-Mozilla Firefox
-Opera
-Safari
-Google Crome
Tag adalah penanda dalam dokumen XHTML, diawali tanda '<' dan diakhiri tanda '>', selalu menggunakan huruf kecil.

Kerangka Utama Dokumen XHTML

<html>
     <head>
          <title>Judul Dokumen</title>
     </head>
     <body>
           Isi Dokumen dapat ditulis di sini
     </body>
</html>
Membuat dokumen XHTML dapat menggunakan notepad, edit plus, dreamwaver, dll. Dan untuk melihat hasilnya bisa menggunakan web browser.

Mengganti Warna background, dan teks

Attribut yang digunakan untuk mengganti warna backraound dalam pembuatan dokumen XHTML adalah attribut bgcolor, sedangkan untuk mengganti warna teks digunakan attribut teks pada tag body. Contoh sintaks : <body bgcolor="yelow" teks="green">

Membuat Komentar

Komentar digunakan untuk memberikan keterangan tambahan. Untuk membuat komentar pada dokumen XHTML, diawali dengan tanda . Komentar tidak akan muncul di layar browser, dan terdapat didalam tag <body>. Contoh sintaks :

Tag <br/>

Digunakan untuk menampilkan tulisan dalam baris yang berbeda, seperti penggunaan tombol Enter. Tag ini tidak berpasangan, trdapat dalam tag <body>. Contoh sintaks : ini tag untuk pindah baris <br/>

Tag <p>

Digunakan untuk mengelompokkan suatu teks kedalam suatu paragraf. Tag <p> memiliki kesamaan dengan tag<div>, dan berada di dalam tag <body>. Contoh sintaks : <p align="left"> Tulisan ini<br/> menggunakan tag p </p>

Tag Heading

Heading memiliki 6 ukuran, mulai dari <h1> sampai <h6>, terdapat pada tag <body>. Contoh sintaks : <h1 align="center">heading1</h1>

Tag <hr />

digunakan untuk membuat suatu garis mendatar/horisontal, berada di tag <body>. contoh sintaks : <hr width="10%" size="20" align="right" noshade/>

Tag <b>, <i>, <u>

Tag <b> digunakan untuk tulisan cetak tebal, tag <i> untuk tulisan cetak miring/italic, dan tag <u> untuk garis bawah/underline. Contoh sintaks : <i>Ini tulisan cetak miring</i> <br/>

Tag <big> dan <small>

Untuk memperbesar dan memperkecil ukuran text. Contoh sintaks : <small>Dari kecil</small>

Tag <sup>, <sub>, <tt>, dan <del>

Tag <sup> untuk fungsi superscript, tag<sub> untuk fungsi subscript, tag <tt> digunakan untuk memberi efek mesin tik pada teks, dan tag <del> untuk memberikan efek coretan. Contoh sintaks : Kata yang <del>dicoret</del>

Tag <pre>

Digunakan untuk memformat posisi tulisan,contoh tanpa tag <br/> tulisan dapat menjorok kedalam. contoh sintaks : <pre>
                                   Paragraf ini
                                   sangat menarik.
                                   </pre>

Tag <font>

Digunakan untuk melakukan pengaturan huruf. Kita dapat mengubah jenis huruf,ukuran huruf dan juga warna huruf. Contoh sintaks : <font face="arial" size="5" color="yellow">
ini efek font
</font>

Tag Basefont

Tag ini digunakan untuk mengatur default font/huruf. Contoh sintaks : <basefont face="verdana" size="3" color="red"/>

Tag <acronym>

Tag ini digunakan untuk memberi keterangan tambahan terhadap suatu istilah ataupun singkatan. Contoh sintaks : <acronym title="Sekolah Dasar">SD</acronym>

Special Character

Digunakan untuk menampilkan karakter-karakter dari tulisan/kata yang kita ketik pada bagian body. contoh sintaks : &amp.

Minggu, 20 Februari 2011

1. Gambar dan Multimedia

Tag yang digunakan untuk menyisipkan gambar dan multimedia ke dalam dokumen html adalah tag <img xsrc=”lokasifilegambar”>.
Lokasi file gambar dapat berupa lokasi relatif atau absolut.

Dokumen HTML berbeda dengan dokumen DOC/PDF, karena dokumen DOC/PDF merupakan dokumen yang menggabungkan (embed) file gambar ke dalam dokumen, sedangkan dokumen HTML hanya mencantumkan link (lokasi) file gambar tersebut, sehingga agar bisa ditampilkan, maka dokumen HTML dan file gambar tersebut harus berada di lokasi yang tepat.

contoh: <img Xsrc="flower.jpg" width="50" height="50"/>

2. List

Daftar disebut juga list. untuk membuat sebuah list, dapat digunakan tag <ol> </ol> (daftar bernomor urut [orderded list]) atau <ul></ul> (daftar tanpa nomor urut [unordered list]). Untuk tiap item daftar digunakan tag <li></li>.

contoh:

<html>
<head> <title>Halaman Web Pertamaku</title> </head>
<body>
<ol>
<li>Paragraf</li>
<li>Gambar</li>
<li>Hiperlink</li>
<li>Daftar</li>
</ol>
</body>
</html>

Jika tag<ol> dan </ol> di atas diganti dengan <ul> dan </ul>, maka nomor urut (1,2,3) akan berganti dengan gambar bullet.

3. Hyperlink(tautan)

Hyperlink merupakan kekuatan HTML(WWW) sebenarnya. Hyperlink, sering juga disebut link, membuat WWW menjadi sangat populer, membuatnya identik dengan internet secara keseluruhan. Link ini secara default ditampilkan dalam teks berwarna biru dan bergaris bawah atau gambar bergaris batas (keliling) warna biru. Tag yang dipergunakan link dalam dokumen HTML adalah <a> </a>. Link sendiri dibagi dua, yaitu internal dan eksternal.

Link internal digunakan sebagi penanda agar mempermudah navigasi pada dokumen yang panjang. Link internal yang biasa kita lihat adalah tulisan back to top/kembali ke atas pada sebuah halaman web. Bila link seperti ini diklik maka dokumen akan menggulung kembali ke bagian atas halaman.

Tag untuk link internal adalah <a link=”namadokumen#namalokasi”> </a>.

Untuk menandai lokasi digunakan tag <a name=”namalokasi”></a>.

Sedangkan link internal menghubungkan dengan dokumen lain, baik dalam satu situs maupun dengan sumber daya lain di internet.

Tag untuk link eksternal adalah <a xhref=”namatujuan”></a>.

Lokasi bisa berupa dokumen HTML, program (aplikasi), gambar, suara, video, atau dokumen tipe lain (PDF, DOC). Jika dokumen selain HTML maka file akan diunduh (download) terlebih dahulu sebelum dibuka dengan aplikasi yang sesuai.

Dalam mengeset tujuan link eksternal dalam sebuah situs kita mengenal istilah lokasi relatif (tidak tetap) dan absolut (tetap). Lokasi relatif ditentukan berdasarkan lokasi (path) dokumen yang bersngkutan.

Misalnya dalam file index.html hendak dicantumkan link ke halaman produk.html dan terletak di path yang sama (c:\My Documents), maka link dituliskan sebagai berikut :

<a xhref="index.html">Produk Kami</a>

Sementara untuk mencantumkan link ke dokumen Daftar.xls di folder c:\My Documents\List, maka link dituliskan sebagai berikut :

<a xhref="List/Daftar.xls>Daftar Nama</a>

Untuk mencantumkan link ke dokumen Help.pdf di folder c:\Adobe\Reader, maka link dituliskan sebagai berikut :

Sementara, link absolut dituliskan dalam sintaks : namaprotokol ://namaserver/namalokasi/namafile. Seperti contoh di atas, untuk menuliskan link ke dokumen produk.html di server artivisi.com maka harus dituliskan :

<a xhref="http://www.artivisi.com/produk.html">Produk Kami</a>

Untuk link antar website, dipergunakan tag :

<a href=”http://www.agitolearninternet.wordpress.com/”>link antar website</a><br>

Untuk link yang dipergunakan sebagai bookmark, tag yang digunakan :

<a href=”#top”>Link yang digunakan sebagai bookmark</a> <br>

Untuk link dalam satu website, digunakan tag :

<a href=”other-page.html”>link antar file dalam satu website</a> <br>