Minggu, 28 September 2014

Tugas HTML Modul 2


LAPORAN PRAKTIKUM PEMROGRAMAN WEB
HTML (Hypertext Markup Language)



Disusun Oleh :
Nama : Rafli Setiadi
NIM : L200120106



FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014/2015





A.    Tujuan
Mengetahui dan memahami tag-tag  HTML sebagai bahasa pemrograman untuk membuat halaman web statis.

B.     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.

.


C.    ALAT dan BAHAN
1.           PC
2.           Sistem Operasi Windows 7
3.           Browser Mozilla Firefox/Chrome
4.           Notepad
5.           File gambar ber-ekstensi .jpg
6.           Lembar kerja percobaan

D.    LANGKAH-LANGKAH PRAKTIKUM
Percobaan 1 (Membuat Hyperlink)
1.      Cari gambar, misal gambar google ekstensi terserah anda, disini nama file gambar saya google.png. contoh gambar :
2.      Buka aplikasi Notepad++
3.      Save dulu filenya pada save as file type diganti dengan HyperText Markup Language File untuk file namenya terserah mau diisi apa, disini saya buat file namenya halaman1.html
4.      Kemudian tulis script :


       5.      Setelah itu simpan, dan cari folder dimana file halaman1.html disimpan, lalu double click                           dan lihat hasilnya. Dan klik teks yang berbeda maka halaman akan berpindah.

6.      lalu buat halaman html lagi untuk laman yang dituju oleh link tersebut. Disini saya membari nama halaman2.html sebagai halaman link yang dituju.

7.       Ketikkan script dibawah :




8.       Setelah itu simpan, dan cari folder dimana file halaman1.html disimpan, lalu double click dan lihat hasilnya. Dan klik teks yang berbeda maka halaman akan berpindah.
9.      Hasilnya



Percobaan 2 (From)

Langkah – langkah percobaan:
1.      Buka aplikasi Notepad++
2.      Save dulu filenya pada save as file type diganti dengan HyperText Markup Language File untuk file namenya terserah mau diisi apa, disini saya buat file namenya form.html
3.      Kemudian tulis script berikut:



<html>
<head><title>from</title>
</head>
<body>
<h2 align="center"><font color="#9966FF">free registration</font></h2>
<form action="proses.php" method="post" name="from">
<table width="68%" border="0" align="center" cellpadding="0">
<tr>
<td width="15%">nama</td>
<td width="28%">:</td>
<td width="83%"><input name="txtNama" type="text" id="txtNama"></td>

 </tr>
<tr>
<td>tanggal lahir</td>
<td>:</td>
<td><input name="txtTanggal" type="text" id="txtTanggal" size="4" maxlength="2">
/
<input name="txtBulan" type="text" id="txtBulan" size="4" maxlength="2">
/
<input name="txtTahun" type="text" id="txtTahun" size="8" maxlength="4"></td>

 </tr>
<tr>
<td>alamat</td>
<td>&nbsp</td>
<td><textarea name="txtAlamat" cols="40" rows="2" id="txtAlamat"></textarea></td>
</tr>
<td>kota</td>
<td>:</td>
<td><input name="txtKota" type="te" id="txtKota"></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td><input 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>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekSport" type="checkbox" id="cekSport" value="2"> sport</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekSing" type="checkbox" id="cekSing" value="3"> sing</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekTravel" type="checkbox" id="cekTravel" value="4"> Traveling</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="btnKirim" type="submit" id="btnKirim" value="kirim">
<input name="btnCancel" type="reset" id="btnCancel" value="cancel">
</td>
</tr>
</from>

</body>
</html>




       Percobaan 3

Langkah - langkah percobaan:
1. ketikkan script berikut di dalam notepad++


<html>
<head><title>animasi</title></head>
<body>
<marquee> teks ini berjalan</marquee>
</br>
<blink>teks ini berkedip-kedip</blink>
</body>
</html>

2. simpan file dengan nama animasi.html
3. buka file yang sudah disimpan menggunakan browser




E.   Tugas
1     Tuliskan script HTML untuk membuat gambar berjalan yang mana gambar tersebut adalah hyperlink menuju alamat www.yahoo.com. (ukuran gamabr 100 x 50 pixel, yang target jendela adalah sama.)
      -     Cari gambar yahoo dulu. ini contohnya

-          Buka notepad++
-          Save dulu filenya pada save as file type diganti dengan HyperText Markup Language File untuk file namenya terserah mau diisi apa, disini saya buat file namenya tugas.html
-          Kemudian tulis script :
               
<html>
<head><title>Tugas</TITLE></HEAD>
<body>
<h1>
Ini adalah Tugas 1</h1>
</br>
<h3>
 Untuk pergi ke halaman Yahoo silahkan klik gambar berjalan dibawah : </h3>
</br>
<marquee>
 <a href='http://www.yahoo.com' target='_top'> <img src='yahoo.png' 
 width='100' height='50' alt='yahoo'></a>
</marquee>
</BODY>
</HTML>


-          Setelah itu simpan, dan cari folder dimana file tugas.html disimpan, lalu double click dan lihat hasilnya.
-          Hasilnya :


                       
2.      Jelaskan fungsi tag atau atribut berikut :
No
Tag/atribut
Fungsi
1
<a href=’halaman2.html’>
Menuju ke halaman link yang dituju yaitu halaman2.html
2
<a href=’http://www.google.com’>
Menuju ke link halaman website google.com
3
<a href=’#referensi’>
Menuju ke link referensi yang berada dalam 1 halaman html
4
Target=’_blank’
Link dokumen ke jendela baru (new tab)
5
<input type=’checkbox’>
Membuat inputan berupa kotak-kotak cek
6
Name=’cekSing’
Memberi nama
7
<input type=’text>
Membuat inputan berupa text
8
Id=’txtkota’
Memanggil id textkota
9
Maxlenght=’20’
Lebar maksimal 20
10
<textarea> </textarea>
Membuat inputan berupa textarea/area text.
11
Cols=’20’
Membuat colom berukuran 20
12
&nbsp;
Membuat spasi/karakter kosong
13
<marquee> .. </marquee>
Membuat karakter berjalan
14
<blink> .. </blink>
Membuat karakter berkedip













Diposting oleh di Tidak ada komentar:

Senin, 22 September 2014



LAPORAN PRAKTIKUM PEMROGRAMAN WEB DASAR
HTML (Hypertext Markup Language) 


Disusun Oleh :
Nama : Rafli Setiadi
NIM : L200120106



FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014/2015



A.    TUJUAN
Mengetahui dan memahami dasar-dasar bahasa HTML sebagai bahasa pemrograman untuk membuat halaman web statis.

B.     LANDASAN TEORI
HTML adalah singkatan dari Hipertext Markup Language adalah salah satu memerintah bahasa pemrograman web desain dan juga biasa disebut script untuk menyusun dokumen-dokumen web. Dokumen HTML disimpan didalam format teks reguler dan mengandung tag-tag yang web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.


C.    ALAT dan BAHAN
1.           PC
2.           Sistem Operasi Windows 7
3.           Browser Mozilla Firefox/Chrome
4.           Notepad
5.           File gambar ber-ekstensi .jpg
6.           Lembar kerja percobaan

D.    LANGKAH-LANGKAH PRAKTIKUM
Percobaan 1 (Dokumen HTML)
Langkah Percobaan
1.           Buka Notepad
2.           Ketikan Script berikut :





3.           Simpan file dengan nama dokumen.html
4.           Buka file yang sudah disimpan dengan browser.



Percobaan 2 (Heading)
Langkah Percobaan
1.           Buka Notepad
2.           Ketikan Script berikut :




3.           Simpan file dengan nama heading.html
4.           Buka file yang sudah disimpan dengan browser.


Percobaan 3 (Font)
Langkah Percobaan

1.           Buka Notepad
2.           Ketikan Script berikut :





3.           Simpan file dengan nama font.html
4.           Buka file yang sudah disimpan dengan browser.




Percobaan 4 (Paragraf dan Align)
Langkah Percobaan
1.           Buka Notepad
2.           Ketikan Script berikut :






3.           Simpan file dengan nama align.html
4.           Buka file yang sudah disimpan dengan browser.




Percobaan 5 (Gambar)
Langkah Percobaan

1.           Buka Notepad
2.           Ketikan Script berikut :





3.           Simpan file dengan nama gambar.html
4.           Buka file yang sudah disimpan dengan browser







Percobaan 6 (Daftar menggunakan Bullets dan Numbering)
Langkah Percobaan
1.           Buka Notepad
2.           Ketikan Script berikut :





3.           Simpan file dengan nama daftar.html
4.           Buka file yang sudah disimpan dengan browser.



Percobaan 7 (Daftar menggunakan Multilevel List)
Langkah Percobaan
1.           Buka Notepad
2.           Ketikan Script berikut :





3.           Simpan file dengan nama multilevel.html
4.           Buka file yang sudah disimpan dengan browser.



Percobaan 8 (Table)
Langkah Percobaan
1.           Buka Notepad
2.           Ketikan Script berikut :





3.           Simpan file dengan nama tabel.html
4.           Buka file yang sudah disimpan dengan browser.





E.     TUGAS
1.           Tuliskan script html untuk membuat isi seperti gambar di bawah ini dengan background dokumen dari sebuah file gambar. Nama file gambar adalah NIM Anda.
1.           Langkah Percobaan
a.             Buka Notepad
b.            Ketikan Script berikut :




c.             Simpan file dengan nama tugas1.html
d.            Buka file yang sudah disimpan dengan browser.




2.           Jelaskan Fungsi dari tag berikut :
No
Tag/Atribut
Fungsi
1
Bgcolor=’blue’
Untuk menentukan warna background/latar yaitu biru.
2
<h1> - <h6>
Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.
3
<font> ... </font>
Mendefinisikan jenis font, warna dan ukuran untuk teks.
4
Face=’verdana’
Untuk membuat jenis teks/font yaitu verdana.
5
Size=’10’
Untuk menentukan ukuran teks/font sebesar 10.
6
Color=’blue’
Untuk pemberian warna pada teks/font yaitu biru.
7
<b> .... </b>
Untuk membuat teks menjadi tebal.
8
<i> .... </i>
Untuk membuat teks menjadi miring.
9
<u> .... </u>
Untuk membuat teks menjadi bergaris bawah.
10
<strike> .... </strike>
Untuk membuat teks menjadi bergaris tengah.
11
<sup> .... </sup>
Memberikan efek superscript pada teks.
12
<sub> .... </sub>
Memberikan efek subscript pada teks.
13
<p> .... </p>
Untuk membuat sebuah paragraf pada teks/tulisan.
14
Align=’center’
Untuk membuat teks menjadi rata tengah.
15
<img>
Untuk menampilkan sebuah gambar.
16
Src=’gambar.jpg’
Source, menyatakan lokasi penyimpan gambar atau lokasi dimana gambar diambil yaitu gambar.jpg
17
Width=’100’
Untuk menentukan lebar gambar yang akan ditampilkan sebesar 100.
18
Height=’100’
Untuk menentukan tinggi gambar yang akan ditampilkan sebesar 100.
19
Alt=’alt’
Untuk menampilkan teks ALT sebelum foto tersebut dimuat dalam browser utama dan bukan foto dalam berbasis teks browser.
20
<ul> .... </ul>
Mendefinisikan daftar dalam format bullet.
21
<ol> .... </ol>
Mendefinisikan daftar dalam format penomoran.
22
<li> .... </li>
Digunakan untuk menampilkan informasi dalam bentuk item daftar.
23
Type=’circle’
Untuk membuat daftar list yang akan ditampilkan berupa lingkaran.
24
<table> .... </table>
Untuk membuat tabel pada halaman.
25
<tr> .... </tr>
Membuat baris di dalam sebuah tabel.
26
<td> .... </td>
Mendefinisikan sel di dalam sebuah tabel.
27
Border=’2px’
Mengatur ketebalan garis sebesar 2px.
28
Colspan=’2’
Menggabungkan kolom sebesar 2 kolom.
29
Rowspan=’2’
Menggabungkan baris sebesar 2 baris.
30
</br>
Memberi baris baru/pindah baris.


3.           Buat multilevel list dengan kombinasi angka dan huruf.

Langkah Percobaan
a.       Buka Notepad
b.      Ketikan Script berikut :





c.      Simpan file dengan nama tugas3.html
d.      Buka file yang sudah disimpan dengan browser.




Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)