LISTING PROGRAM
<html>
<head>
<script type =
"text/javascript">
function salam(){
alert("Welcome!!");
}
function jawab(){
document.getElementById("01").innerHTML
= ("Intan Octaviani")
}
</script>
</head>
<body
bgcolor = white align ="center" >
<form
method="post">
<center>Username :
<input type="text" name = "nama" /> </center>
<p><center>Password
: <input type="password" password =
"lalalili"/></center></p>
<input type
="submit" name = "submit" value = "Submit" />
<p><input type
="button" value ="Click Here!!" onclick = salam() />
</p>
<p id=
"01"> Your Name</p>
<p><input type
="button" value = "Test" onclick = "jawab()" >
<input type
="submit" name = "Submit" value = "Reset"
/></p>
<a href = "D:\LA
PWEB\minc.jpg">
<input type
="button" value ="Picture"> </a>
</form>
</body>
</html>
LOGIKA PROGRAM
Pada pertemuan pertama praktikum
Pemograman Web kali ini, akan mempelajari tentang pengenalan XML (eXtensible
Markup Language) dan JavaScript.
Berikut adalah
langkah-langkahnya:
1. Pertama, bukalah aplikasi Notepad++ yang ada pada desktop. kemudian untuk membuat project baru,
klik File > New. Lalu ketikkan listing program yang akan dibuat.
2. Berikut adalah
penjelasan dari penggunaan sintaks yang ada:
§ <html>…</html> Sintaks ini digunakan untuk membuat sebuah halaman web.
§ <script
type = "text/javascript">…</script> sintaks ini untuk menggunakan javascript pada komponen yang ada di dalam halaman web.
§ function
salam(){
alert("Welcome!!");
}
Sintaks diatas
berguna untuk memunculkan sebuah pesan salam bertuliskan “Welcome!!”.
§ function
jawab(){
document.getElementById("01").innerHTML
= ("Intan Octaviani")
}
Sintaks diatas berguna
untuk menampilan teks “Intan Octaviani”
pada saat tombol Test ditekan.
§ <body
bgcolor = magenta
align ="center" >…</body>
Sintaks
diatas berguna untuk membuat warna dasar halaman web yang dibuat berwarna
magenta dan konten berisi di tengah.
§ <center>Username
: <input type="text" name = "nama" /> </center>
Sintaks diatas berguna untuk membuat
sebuah kolom input
berupa teks yang berada di
tengah jendela web.
§ <input
type ="submit" name = "submit" value = "Submit"
/>
Sintaks diatas berguna
untuk menyimpan username serta password yang akan
dimasukkan ke dalam basis data.
§ <p><input
type ="button" value ="Click Here!!" onclick = salam()
/> </p>
Sintaks diatas digunakan untuk membuat
sebuah tombol dengan nama Click Here!!
dan dikoneksikan ke fungsi salam pada
saat tombol ditekan.
§ <p><input
type ="button" value = "Test" onclick = "jawab()"
>
Sintaks diatas digunakan
untuk membuat tombol dengan nama Test dan memanggil fungsi jawab.
§ <a
href = "D:\LA PWEB\minc.jpg">
<input
type ="button" value ="Picture"> </a>
Sintaks diatas berguna
untuk memunculkan gambar pada halaman web
3.
Setelah mengetik semua listing program, simpan dengan ekstensi
file .html
4.
Lalu buka file tersebut
menggunakan web browser, dengan mengetikkan lokasi dimana file tersebut
disimpan\namafile.html
1. Tampilan
Utama
2. Tampilan Button “Click Here!!”
3. Tampilan Button “Test”
4. Tampilan Button “Picture”
Tidak ada komentar:
Posting Komentar