TEKNIK INFORMATIKA

UNIVERSITAS PGRI RONGGOLAWE TUBAN

PEMROGRAMAN WEB

UNIVERSITAS PGRI RONGGOLAWE TUBAN

TEKNIK INFORMATIKA

UNIVERSITAS PGRI RONGGOLAWE TUBAN

MODUL

PRAKTIKUM

PEMROGRAMAN WEB

OLEH :

ASFAN MUQTADIR, S.Kom

UNIVERSITAS PGRI RONGGOLAWE TUBAN

2013

TEKNIK INFORMATIKA

UNIVERSITAS PGRI RONGGOLAWE TUBAN

PEMROGRAMAN WEB

UNIVERSITAS PGRI RONGGOLAWE TUBAN

PraktikumI HTML 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 :

Judul ditampilkan pada baris teratas browser

2. Tag-tag dasar HTML

Tag Kegunaan

Mendefinisikan sebuah dokumen html Mendefinisikan isi/badan suatu dokumen - Mendefinisikan heading ke 1 s/d heading ke 6

Mendefinisikan sebuah paragraph Menyisipkan sebuah line break Mendefinisikan sebuah garis horizontal Mendefinisikan komentar dalam kode sumber HTML Mendefinisikan teks tebal Mendefinisikan teks yang dimiringkan

Mendefinisikan teks yang dimiringkan Defines subscripted text Mendefinisikan teks yang posisinya lebih ke atas Mendefinisikan teks yang bergaris bawah

Mendefinisikan teks preformatted

3. Tag daftar/list

Start Tag Tipe Kegunaan 1,A,a,i,III Mendefinisikan sebuah list ordered Circle,disc,square Mendefinisikan sebuah list unordered - Mendefinisikan sebuah item dalam list - Mendefinisikan sebuah list definisi

4. Tag Frame

Sesuai dengan namanya frame yang berarti bingkai, adalah berhubungan dengan pengaturan

bingkai sebagai pembentuk jendela tampilan pada browser.

Start Tag Kegunaan Mendefinisikan sebuah himpunan frame Mendefinisikan sebuah sub window (sebuah frame)

Mendefinisikan sebuah bagian noframe untuk browser yang tidak dapat menangani frame

Ada tiga pengaturan frame, yaitu secara vertical, horizontal dan kombinasi dari vertical dan

horizontal. Script HTML yang digunakan untuk pengaturan frame maka tidak dapat digunakan

untuk membuat halaman tampilan web, untuk itu diperlukan file yang berisi script HTML lain dan

disisipkan kedalam script frame tesebut.

a. Frameset (horisontal dan vertikal)

Perhatikan hasil frameset dibawah ini, dalam satu tab halaman browser terdapat 3 halaman

sekaligus. Contoh ini merupakan pengaturan dari ketiga jenis frameset.

5. Table

Atribut Nilai Arti border 0 s/ 15 Meniadakan atau menampilkan

ketebalan garis-garis pada tabel

- Membuat baris table, pengaturan semua teks dapat dilakukan disini

- Membuat kolom judul - Membuat kolom table isi align LEFT | CENTER |

RIGHT Mengatur horizontal alignment

valign TOP | MIDDLE | BOTTOM

Mengatur vertical alignment

nowrap - Meniadakan pindah baris baru pada saat table ditampilkan pada jendela

broser yang tidak mencukupi.

rowspan n Menggabungkan baris table menjadi satu (merge cells)

colspan n Manggabungkan kolom table menjadi satu (merge cells)

border=10 on table 4x4 daftar harga handphone tipegaransinon garansi bekas galaxyyoung1.200.000 &nbsp&nbsp galaxygio1.850.000 1.500.000800.000

xperiamini101.950.000 1.500.000950.000 xperia102.100.000 1.800.0001.050.000 n9002.750.0002.100.000 1.100.000

Tugas Pendahuluan :

1. Jelaskan sejarah singkat perkembangan internet !

2. Jelaskan Perkembangan HTML dan bagaimana perkembangan selanjutnya!

3. Dengan menggunakan tag-tag HTML, buat tampilan persis 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 Formal

1. SD/MI

2. SMP/MTS

3. SMA/MA

II. Non Formal

i. [Pendidikan non formal]

III. Prestasi

a. [Daftar Prestasi]

EMAIL : [EMAIL ANDA]

Tugas Praktikum :

1. Dengan menggunakan Perintah HTML buatalah FRAME seperti pada gambar berikut :

a.

b.

c.

2. Buatlah nested tabel seperti gambar di bawah :