Praktik PWL Modul 2

MODUL 2

HTML LANJUT

I. Tujuan

Mengetahui dan memahami tag-tag dalam HTML lebih lanjut, dan mengetahui fungsi dari tag-tag tersebut.

II. Landasan Teori

Dalam mengakses infromasi dari dunia internet, pengguna akan menuju ke sebuah alamat unik internet yang disebut dengan nama domain dan akan menemukan informasi berbentuk teks, gambar, animasi bergerak ataupun suara dalam media yang disebut situs/website. Wibsite ini dibuka melalui sebuah program penjelajah yang berada di sebuah komputer. Program penjelajar bisa berupa : Mozila, Googlechrome, Internet Explore, dll.

III. Alat dan bahan

1. PC (Personal Computer)

2. Browser Mozila/chrome

3. Notepad++

4. Modul praktikum

IV. Langkah Kerja

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 akan disimpan
Membuka aplikasi notepad
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='modul2percobaan1halaman2.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 referensi tentang pemrogaman web silahkan klik teks di bawah:
</BR>
<a href='#referensi'><b>Lihat referensi Tentang pemrogaman 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></BR>
<a name='referensi'><b>Referensi Pemrogaman web</b></a>
</BR>
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
Di sini adlah teks berisi tentang referensi pemrogaman web
</BR>
</BODY>
</HTML>

halaman 1

halaman 2

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

Membuka aplikasi notepad
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="txttgl" size="4" 
maxlength="2">
/
<td><input name="txtbulan" type="text" id="txtbulan" size="4" 
maxlength="2">
/
<td><input name="txttahun" type="text" id="txttahun" size="8" 
maxlength="4">
</td></tr>
<tr>
<td>alamat</td>
<td> </td>
<td><textareaini name="txtalamat" cols="40" rows="2" 
id="txtalamat"></textareaini></span></span></div>
kota<br
 />

:<br />

pekerjaan<br />

:<br />

<select id="cbojob" nama="cbojob">
<option>Tani</option>
<option>Nelayan</option>
<option>Karyawan</option>
</select><br />

jenis kelamin<br />

:<br />

<input checked="" name="radjk" type="radio" value="1" />
Laki-laki
<input name="radjk" type="radio" value="2" />
perempuan<br />

hobby<br />

:<br />

<input id="cekreading" name="cekreading" type="checkbox" value="1" 
/>
reading<br />

<br />

<input id="ceksport" name="ceksport" type="checkbox" value="2" />
sport<br />

<br />

<input id="ceksing" name="ceksing" type="checkbox" value="3" />
singing<br />

<br />

<input id="cektravel" name="cektravel" type="checkbox" value="4" 
/>
traveling<br />

<br />

<br />
<ul>
<li><span style="font-family: "Times New Roman","serif"; 
font-size: 12.0pt; line-height: 150%; mso-fareast-font-family: "Times 
New Roman";">Menyimpan file dengan nama 
animasi.html</span></li>
<li><span style="font-family: "Times New Roman","serif"; 
font-size: 12.0pt; line-height: 150%; mso-fareast-font-family: "Times 
New Roman";">Membuka file yang sudah disimpan menggunakan 
browser</span></li>
<li><span style="font-family: "Times New Roman","serif"; 
font-size: 12.0pt; line-height: 150%; mso-fareast-font-family: "Times 
New Roman";">Hasil</span></li>
</ul>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: 0cm; 
text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a 
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvLtezyoPNY2uNAtMxumG-m5Gkq2jCX86HmQd0yRUh2N2LT3k8DfcD626Zh6jkSzhOpjlDUmeST4I2wtFiD1Lt31V-BagUCfejf_ZRdj7F-ucshdzuH4-hcO_g7_zOK7ZBvFqN-OIGQLBg/s1600/modul2percobaan3.PNG"
 imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img
 border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvLtezyoPNY2uNAtMxumG-m5Gkq2jCX86HmQd0yRUh2N2LT3k8DfcD626Zh6jkSzhOpjlDUmeST4I2wtFiD1Lt31V-BagUCfejf_ZRdj7F-ucshdzuH4-hcO_g7_zOK7ZBvFqN-OIGQLBg/s1600/modul2percobaan3.PNG"
 height="110" width="640" /></a></div>
</div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: 
.0001pt; margin-bottom: 0cm; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 
229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 
641.2pt 687.0pt 732.8pt; text-align: justify; text-justify: 
inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: 
.0001pt; margin-bottom: 0cm; text-align: justify; text-justify: 
inter-ideograph;">
</div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: 
.0001pt; margin-bottom: 0cm; text-align: justify; text-justify: 
inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%; margin-bottom: 
.0001pt; margin-bottom: 0cm; text-align: justify; text-justify: 
inter-ideograph;">
<span style="mso-bidi-font-weight: normal;"><span 
style="font-family: "Times New Roman","serif"; font-size: 14.0pt; 
line-height: 150%; mso-fareast-font-family: "Times New Roman";">Tugas
 1 </span></span></div>
<ul>
<li><span style="font-family: "Times New Roman","serif"; 
font-size: 12.0pt; line-height: 150%; mso-fareast-font-family: "Times 
New Roman";">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)</span></li>
<li><span style="font-family: "Times New Roman","serif"; 
font-size: 12.0pt; line-height: 150%; mso-fareast-font-family: "Times 
New Roman";">Script</span></li>
</ul>
<div style="text-align: center;">
<span style="font-family: "Times New Roman","serif"; font-size: 
12.0pt; line-height: 150%; mso-fareast-font-family: "Times New 
Roman";"><textarea style="height: 128px; width: 
453px;"><html>
<head><title>Hyperlink</TITLE><head>
<marquee><a href='http://www.yahoo.com'> <img 
src='google.jpg' width='100' height='50' 
alt='yahoo'></a></marquee>
</HTML>