Syalalalala: September 2014

Senin, 29 September 2014

Pemograman Web Lanjut (MODUL 1)

MUH.RIFQI NUR KHOIRI (L200120102)
KELAS E

1. Align

<HTML>
<HEAD>
<TITLE>Paragraf dan Align</TITLE>
</HEAD>
<BODY>
<P align="left">Format paragraf ini rata kiri</P>
<P align="right">Format paragraf ini rata kanan</P>
<P align="center">Format paragraf ini rata tengah</P>
<P align="justify>Format paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.Format pargraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.Format paragraf ini rata kanan-kiri.</P>
</BODY>
</HTML>

PrintScreen

2. Daftar

<HTML>
<HEAD>
<TITLE>Bullets dan Numbering</TITLE>
</HEAD>
<BODY>
<P>Daftar menggunakan Bullets</P>
<ul type='circle'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ul>
<P>Daftar menggunakan Numbering (angka)</P>
<ol type='1'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
<P>Daftar menggunakan Numbering (angka)</P>
<ol type='a'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
<P>Daftar menggunakan Numbering (huruf romawi)</P>
<ol type='I'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
</BODY>
</HTML>

PrintScreen

3. Dokumen

<HTML>
<HEAD><TITLE>Dokumen HTML</TITLE></HEAD>
<BODY bgcolor="skyblue">
Ini adalah sebuah dokumen HTML dengan judul "Dokumen HTML" dan warna latar/background biru langit.
Terimakasih
</BODY>
</HTML>

PrintScreen

4. Font

<HTML>
<HEAD>
<TITLE>Font</TITLE>
<BODY>
<FONT face='comic sans ms'>
Teks ini berukuran normal jenis Comic Sans MS dan warna hitam
</FONT></BR>
<FONT size='5' face='verdana' color='red'>
Teks ini berukuran 5 jenis Verdana dan warna merah
</FONT></BR>
Teks cetak <b>Tebal</b>
<i>Miring</i>
<u>Garis Bawah</u>
<strike>Garis tengah</strike>
<sup>Superscript</sup> dan
<sub>Subscript</sub>
</FONT>
</BODY>
</HTML>

PrintScreen

5. Gambar

<HTML>
<HEAD><TITLE>Gambar</TITLE></HEAD>
<BODY>
<p><img src='gambar.jpg' height='100' width='100'>
Peralatan teks dibawah secara default dan gambar asli ukuran dengan ukuran 100 x 100 pixel</p>
<p><img src='gambar.jpg' height='100' width='100'
align='top' border='2'>Perataan teks di atas dan border gambar 2 pixel</p>
<p align='center'><img src='gambar.jpg' height='100' width='100'>
align='middle'>Perataan teks di tengah</br>dan letak gambar di tengah dokumen</p>
</BODY>
</HTML>

- Letakkan gamabar dalam satu folder dengan script html. Beri nama gambar dengan "gambar.jpg"

PrintScreen

6. Heading

<HTML>
<HEAD><TITLE>Heading</TITLE></HEAD>
<BODY>
<h1>Teks dengan ukuran heading one</h1>
<h2>Teks dengan ukuran heading two</h2>
<h3>Teks dengan ukuran heading three</h3>
<h4>Teks dengan ukuran heading four</h4>
<h5>Teks dengan ukuran heading five</h5>
<h6>Teks dengan ukuran heading six</h6>
</BODY>
</HTML>

PrintScreen

7. Multilevel

<html><head>
<title> Germanic Languanges </title>
</head>
<ul>
<li>West Germanic Languanges</li>
<ul><li>English</li>
<ul><li>British</li>
<ul><li>BBC</li>
<li>Cockey</li>
<li>Dubliner</li>
</ul>
<li>American</li>
<ul><li>Newscaster</li>
<li>Drawl</li>
<li>Jive</li>
</ul></ul>
<li>Dutch</li>
<ul><li>Hollander</li>
<li>Flemis</li>
<li>Afrikans</li>
</ul>
</ul></ul>
</body></html>

PrintScreen

8. Table

<HTML>
<HEAD>
<TITLE>Table</TITLE></HEAD>
<BODY>
Tabel biasa
<table border="1">
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr><tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td></tr></table>
Colspan
<table border="1">
<tr>
<td colspan="3" align="center">Quarter 1</td></tr>
<tr align="center">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td></table>
Rowspan
<table border="1">
<tr>
<td rowspan="3" align="center">Quarter 1</td>
<td>Jan</td>
</tr>
<tr>
<td>Feb</td>
</tr>
<tr>
<td>Mar</td>
</tr>
</table>
</font></BODY></HTML>

PrintScreen

TUGAS MODUL 1

Minggu, 28 September 2014

Pemograman Web Lanjut (MODUL 2)

MUH. RIFQI NUR KHOIRI
L200120102
KELAS E

Laporan Modul 2

Langkah Praktikum
Percobaan 1

Mencari gambar logo Google di internet ber-ektensi .jpg atau .png, simpan gambar tersebut dan letakkan di folder yang sama dengan file percobaan yang akan disimpan.
Mengubah nama gambar tersebut menjadi google.jpg atau google.png
Mengetikkan script berikut di dalam notepad :

<html>
<head><title>Hyperlink</TITLE><head>
<body>
<h1>
Ini Adalah Halaman 1</H1>
</BR>
Untuk pergi ke halaman 2 klik
<a href='halaman2.html' target='top'>Di sini
</a>
</BR>
Untuk pergi ke halaman Google silahkan klik gambar di bawah :
</BR> 
<a href='http://www.google.com' target='_blank'> <img src='google.jpg' width='200' height='50' alt='google'></a>
</BR> 
Untuk melihat refrensi tentang pemograman web silahkan klik teks di bawah : </BR> 
<a href ='#refrensi'><b>Lihat referensi tentang pemograman Web</b></a>
</BR></BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> </BR> 
<a name='referensi'><b>Referensi Pemograman Web</b></a>
</BR>
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
Di sini adalah teks berisi tentang referensi pemograman web
</BR>
</BODY>
</HTML>

Menyimpan file dengan nama halaman1.html.
Membuka kembali notepad baru. Kemudian mengetikkan script berikut : .

Menyimpan file dengan nama halaman2.html
Membuka file dengan nama halaman1.html menggunakan browser
Hasil :

Percobaan 2

1. Mengetikkan script berikut di dalam notepad

<html>
<head><title>Form</TITLE></HEAD>
<body>
<h2 align="center">
<font color="#9966FF">Free Registration</font></h2>
<form action="proses.php" method="post" name="form">
<table width="68%" border="0" align="center" cellpadding="0">
<tr>
  <td width="15%">Nama</td>
  <td width="2%">:</td>
  <td width="83%"><input name="txtNama"type="text" id="txtNama"></td>
 </tr>
<tr>
  <td>Tgl Lahir</td>
  <td>:</td>
  <td><input name="txtTgl" type="text" id="txtBulan" size="8" maxlength="4"></td>
 </tr>
<tr>
  <td>Alamat</td>
  <td> </td>
  <td><textareaini name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textareaini></td>
 </tr>
<tr>
  <td>Kota</td>
  <td>:</td>
  <td><input name="txtKota" type="text" id="txtKota"></td>
 </tr>
<tr>
  <td>Pekerjaan</td>
  <td>:</td>
  <td><select name="cboJob" id="cboJob">
    <option>Tani</option>
    <option>Nelayan</option>
    <option>Karyawan</option>
   </select></td>
 </tr>
<tr>
  <td>Jenis Kelamin</td>
  <td>:</td>
  <td><input name="radJk" type="radio" value="1" checked> Laki-Laki
   <input type="radio" name="radJk" value="2"> Perempuan </td>
 </tr>
<tr>
  <td>Hobby</td>
  <td> : </td>
  <td><input name="cekReading" type="checkbox" id="cekReading" value="1"> Reading</td>
 </tr>
<tr>
  <td> </td>
  <td> </td>
  <td><input name="cekSport" type="checkbox" id="cekSport" value="2"> Sport</td>
 </tr>
<tr>
  <td> </td>
  <td> </td>
  <td><input name="cekSing" type="checkbox" id="cekSing" value="3"> Singing</td>
 </tr>
<tr>
  <td> </td>
  <td> </td>
  <td><input name="cekTravel" type="checkbox" id="cekTravel" value="4"> Traveling</td>
 </tr>
<tr>
  <td> </td>
  <td> </td>
  <td><input name="btnKirim" type="submit" id="btnKirim" value="Kirim">
   <input name="btnCancel" type="reset" id="btnCancel" value="Cancel">
 </tr>
</table>
</form>
</BODY>
</HTML>

2. Menyimpan file dengan nama form.html
3. Membuka file yang sudah disimpan menggunakan browser
4. Hasil :

Percobaan ke 3

1. Mengetikkan script berikut di dalam notepad:

2. Menyimpan file dengan nama animasi.html
3. Membuka file yang sudah disimpan dengan menggunakan browser
4. Hasil :

TUGAS

tugas 1

1. Menuliskan script HTML untuk membuat gambar berjalan yang mana gambar tersebut adalah hyperlink menuju alamat www.yahoo.com (ukuran gambar 100 x 50 piksel, dan target hyperlink pada jendela yang sama)
2. Script HTML :

3. Hasil :

Tugas 2

Menjelaskan fungsi dari tag atribut berikut :

Laporan praktek pemograman WEB lanjut

Percobaan 1 (Hyperlink)

<!DOCTYPE HTML>
<HTML>
<head>
<title>MUH. RIFQI NUR KHOIRI</title>
</head>

<body bgcolor="skyblue">

<h1>Daftar Menu Makanan dan Minuman</h1>
<ul type="1">
<li>Makanan :</li>
<ul>
<li>Nasi goreng</li>
<li>Mie goreng telur</li>
<li>Nasi padang</li></ul></br>
<li>Minuman :</li>
<ul>
<li>Es Teh</li>
<li>Es Jeruk</li>
<li>Jus Lemon</li></ul></br>
<p><img src='3R.jpg' heigh='100' width='100'> </p>
<a href="https://www.facebook.com/ricolak">alamat faccebook saya</a>

</body>

</HTML>

Percobaan1 (halaman 2.html) <HTML>
<HEAD><TITLE>Hyperlink </TITLE><HEAD>
<BODY>
<H1>Ini adalah Halaman 2</H1>
</BR>
Untuk kembali ke halaman 1 silahkan klik di bawah ini
: </BR>
<a href='halaman1.html' target='_top'> Kembali</a>
</BODY>
</HTML>

Percobaan ke 2 (Form)

<html>
<head>
<title> Form</title>
</head>
<body>
<h2 align="center"><font color="#9966FF">Free
Registration</font></h2>
<form action="proses.php" method="post" name="form">
<table width="68%" border="0" align="center" cellpadding="0">
<tr>
<td width="15%">Nama</td>
<td width="2%">:</td>
<td width="83%"><input name="txtNama"
type="text" id="txtNama"></td>
</tr>
<tr>
<td>Tgl Lahir</td>
<td>:</td>
<td><input name="txtTgl" type="text" id="txtTgl" size="4" maxlenght="@">
/
<input name="txtBulan" type="text" id="txtBulan" size="4" maxlength="4"></td>
</tr>
<tr>
<td>Alamat</td>
<td> </td>
<td><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textarea></td>
</tr>
<tr>
<td>Kota</td>
<td>:</td>
<td><input name="txtKota" type="text" id="txtKota"></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td><select name="cboJob" id="cboJob">
<option>Tani</option>
<option>Nelayan</option>
<option>Karyawan</option>
</select></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input name="radJk" type="radio"
value="2">
Perempuan</td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><input name="cekReading" type="checkbox" id="cekReading" value="1">
Reading </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="cekSport" type="checkbox" id="cekSport" value="2">
Sport</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="cekSing" type="checkbox"id="cekSing" value="3">
Singing </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="cekTravel" type="checkbox"id="cekTravel" value="4">
Traveling</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name=btnKirim" type="submit"id="btnKirim" value="Kirim">
<input name="btnCancel" type="reset"id="btnCancel" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>

Percobaan 3 (Animasi)

<html>
<head><title>Animasi</TITLE></HEAD>
<BODY>
<marquee>teks ini berjalan</marquee>
</BR>
<blink> Teks ini berkedip-kedip</blink>
</BODY>
</html>