Scribd
Unggah
624 tayangan7 halaman

Praktikum 1 (HTML Dasar)

Praktikum ini membahas penggunaan tag-tag dasar HTML untuk membuat list, frame, tabel, dan iframe. Siswa diajak membuat berbagai struktur data seperti daftar riwayat hidup, frame horizontal dan vertikal, serta tabel nested menggunakan tag-tag tersebut.

Diunggah oleh

Asfan Muqtadir
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
624 tayangan7 halaman

Praktikum 1 (HTML Dasar)

Praktikum ini membahas penggunaan tag-tag dasar HTML untuk membuat list, frame, tabel, dan iframe. Siswa diajak membuat berbagai struktur data seperti daftar riwayat hidup, frame horizontal dan vertikal, serta tabel nested menggunakan tag-tag tersebut.

Diunggah oleh

Asfan Muqtadir
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Praktikum

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 :
<html>
<head>
<title> Judul ditampilkan pada baris teratas browser
</title>
</head>
<body>
<! . . . ISI dari HTML . . . >
</body>
</html>

2. Tag-tag dasar HTML


Start Tag
<html>
<body>
<h1>-<h6>
<p>
<br>
<hr>
<!-->

<b>
<em>
<i>
<sub>
<sup>
<u>
<pre>

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
<ol>
<ul>
<li>
<dl>

Tipe
1,A,a,i,III
Circle,disc,square
-

Kegunaan
Mendefinisikan sebuah list ordered
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
<frameset>

Kegunaan
Mendefinisikan sebuah himpunan frame

<frame>

Mendefinisikan sebuah sub window (sebuah frame)

<noframes>

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)


<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

border

0 s/ 15

<tr></tr>
<th></th>
<td></td>
align
valign
nowrap

LEFT | CENTER |
RIGHT
TOP | MIDDLE |
BOTTOM
-

rowspan

colspan

Arti
Meniadakan atau menampilkan
ketebalan garis-garis pada tabel
Membuat baris table, pengaturan
semua teks dapat dilakukan disini
Membuat kolom judul
Membuat kolom table isi
Mengatur horizontal alignment
Mengatur vertical alignment
Meniadakan pindah baris baru pada
saat table ditampilkan pada jendela
broser yang tidak mencukupi.
Menggabungkan baris table menjadi
satu (merge cells)
Manggabungkan kolom table menjadi
satu (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>&nbsp</td><td>&nbsp</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]
I.

RIWAYAT PENDIDIKAN

EMAIL

Pendidikan Formal
1. SD/MI
2. SMP/MTS
3. SMA/MA
:
II.
Non Formal
i. [Pendidikan non formal]
III.
Prestasi
a. [Daftar Prestasi]
: [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 tampilkan


sebuah Web yang dibuat pada tugas pendahuluan no.3 dengan menggunakan Iframe.
3. Buatlah Nested Tabel seperti gambar di bawah :

Anda mungkin juga menyukai