Phantom-Wahyoe

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>

Menyimpan file dengan nama form.html
Membuka file yang sudah disimpan menggunakan browser
Hasil

Percobaan 3

Membuka aplikasi notepad
Mengetikkan script berikut di dalam notepad

Tugas 2

Jelaskan Fungsi dari tag dan atribut berikut

readmore...

MODUL 1

“HTML (Hyper Text Markup Language) Dasar”

A. Tujuan

Dapat mengetahui dan memahami dasar-dasar bahasa HTML (Hyper Text Markup Language) sebagai bahasa pemrograman untuk membuat halaman web statis.

B. Landasan Teori

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

C. Alat dan Bahan

      Alat dan bahan yang digunakan dalam praktikum adalah:
      1.      PC atau Laptop
      2.      Browser (Mozilla Firefox)
      3.      Notepad++
      4.      Microsoft Word

D. Langkah-langkah Percobaan

       Percobaan 1: Dokumen HTML
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut:

http://pastebin.com/9FVHSpSN