praktikum 1 (html dasar)
DESCRIPTION
Praktikum Pemrograman WEB IModul 1TRANSCRIPT
Praktikum IHTML DASAR (List, Frame dan Table)
Tujuan :
1. Mengerti penggunaan masing-masing tag daftar, table dan frame.2. Mampu membuat halaman web statis dengan tag-tag daftar, table dan frame.
Alat dan Bahan :
1. Buku materi PEMROGRAMAN WEB / buku literatur mengenai PEMROGRAMAN WEB.2. Modul praktikum PEMROGRAMAN WEB.
Landasan teori :
1. Format Penulisan HTML
Format standar penulisan html :<html>
<head><title> Judul ditampilkan pada baris teratas browser</title></head><body><! . . . ISI dari HTML . . . ></body>
</html>
2. Tag-tag dasar HTML
Start Tag Kegunaan<html> Mendefinisikan sebuah dokumen html<body> Mendefinisikan isi/badan suatu dokumen<h1>-<h6> Mendefinisikan heading ke 1 s/d heading ke 6
<p> Mendefinisikan sebuah paragraph<br> Menyisipkan sebuah line break<hr> Mendefinisikan sebuah garis horizontal<!--> Mendefinisikan komentar dalam kode sumber HTML<b> Mendefinisikan teks tebal<em> Mendefinisikan teks yang dimiringkan<i> Mendefinisikan teks yang dimiringkan<sub> Defines subscripted text<sup> Mendefinisikan teks yang posisinya lebih ke atas<u> Mendefinisikan teks yang bergaris bawah<pre> Mendefinisikan teks preformatted
3. Tag daftar/list
Start Tag Tipe Kegunaan<ol> 1,A,a,i,III Mendefinisikan sebuah list ordered<ul> Circle,disc,square Mendefinisikan sebuah list unordered<li> - Mendefinisikan sebuah item dalam list<dl> - Mendefinisikan sebuah list definisi
4. Tag Frame
Sesuai dengan namanya frame yang berarti bingkai, adalah berhubungan dengan pengaturanbingkai sebagai pembentuk jendela tampilan pada browser.
Start Tag Kegunaan
<frameset> Mendefinisikan sebuah himpunan frame<frame> Mendefinisikan sebuah sub window (sebuah frame)
<noframes>Mendefinisikan sebuah bagian noframe untuk browser yangtidak dapat menangani frame
Ada tiga pengaturan frame, yaitu secara vertical, horizontal dan kombinasi dari vertical danhorizontal. Script HTML yang digunakan untuk pengaturan frame maka tidak dapat digunakanuntuk membuat halaman tampilan web, untuk itu diperlukan file yang berisi script HTML laindan disisipkan kedalam script frame tesebut.
a. Frameset (horisontal dan vertikal)
<html><body><frameset rows="30%,70%">
<frame src="frame1.html"><frameset cols="15%,85%">
<frame src="frame2.html"><frame src="frame3.html">
</frameset></frameset></body></html>
Perhatikan hasil frameset dibawah ini, dalam satu tab halaman browser terdapat 3 halaman
sekaligus. Contoh ini merupakan pengaturan dari ketiga jenis frameset.
b. IFrame
IFrame merupakan perkembangan dari frame, yang sebelumnya digunakan untuk
menampilkan beberapa bagian halaman Web dalam satu halaman Web yang utuh.
IFrame mempunya fungsi yang sama dengan frame, perbedaannya adalah IFrame
tidak tampil dalam seluruh tampilan layar, ukuran IFrame dapat dibatasi sesuai
dengan kebutuhan.
Syntax untuk sebuah IFrame
<iframe src=”URL”> </iframe>
Atribut pada IFrame
Atribut yang ada pada IFrame, tinggi dan lebar digunakan untuk menentukan tinggi
dan lebar dari iframe, nilai yang digunakan dengan satuan pixel bisa juga dalam
persen.
<iframe src=”link_frame.html” width=300 height=200></iframe>
Untuk menghilangkan garis batas pada IFrame bisa menggunakan atribut
“frameborder=0”.
5. Table
Atribut Nilai Artiborder 0 s/ 15 Meniadakan atau menampilkan
ketebalan garis-garis pada tabel<tr></tr> - Membuat baris table, pengaturan
semua teks dapat dilakukan disini<th></th> - Membuat kolom judul<td></td> - Membuat kolom table isialign LEFT | CENTER |
RIGHTMengatur horizontal alignment
valign TOP | MIDDLE |BOTTOM
Mengatur vertical alignment
nowrap - Meniadakan pindah baris baru padasaat table ditampilkan pada jendelabroser yang tidak mencukupi.
rowspan n Menggabungkan baris table menjadisatu (merge cells)
colspan n Manggabungkan kolom table menjadisatu (merge cells)
Contoh Pembuatan Tabel
<html><head><title>border=10 on table 4x4</title></head><body><table border=10><tr><th colspan=4>daftar harga handphone</th></tr><tr><th>tipe</th><th>garansi</th><th>non
garansi</th><th>bekas</th></tr><tr align=left><td>galaxy
young</td><td>1.200.000</td><td> </td><td> </td></tr><tr align=left><td>galaxy
gio</td><td>1.850.000</td><td>1.500.000</td><td>800.000</td></tr><tr align=left><td>xperia
mini10</td><td>1.950.000</td><td>1.500.000</td><td>950.000</td></tr><tr align=left><td>xperia
x10</td><td>2.100.000</td><td>1.800.000</td><td>1.050.000</td></tr><tr align=left><td>n900</td><td>2.750.000</td><td>2.100.000</td>
<td>1.100.000</td></tr></table></body></html>
Tugas Pendahuluan :1. Jelaskan sejarah singkat perkembangan internet !2. Jelaskan perbedaan antara Frame dengan IFrame dan berikan contohnya !3. Dengan menggunakan tag-tag HTML, buat tampilan seperti dibawah ini :
DAFTAR RIWAYAT HIDUP [NPM]NAMA LENGKAP : [NAMA LENGKAP ANDA]NPM : [NPM ANDA]KELAS : [KELAS ANDA]TTL : [TEMPAT LAHIR], [TANGGAL LAHIR]ALAMAT : [ALAMAT LENGKAP ANDA]
RIWAYAT PENDIDIKAN :
I. Pendidikan Formal1. SD/MI2. SMP/MTS3. SMA/MA
II. Non Formali. [Pendidikan non formal]
III. Prestasia. [Daftar Prestasi]
EMAIL : [EMAIL ANDA]
Tugas Praktikum
1. Dengan menggunakan Perintah HTML buatalah FRAME seperti pada gambar berikut :a.
b.
2. Buatlah sebuah halaman Web dengan nama iframe_npm.html, kemudian tampilkansebuah Web yang dibuat pada tugas pendahuluan no.3 dengan menggunakan Iframe.
3. Buatlah Nested Tabel seperti gambar di bawah :