1 | P r a k t i k u m P e m r o g r a m a n W e b 1 Praktikum
1. Praktikum 1 (HTML Dasar)
Disini saya menggunakan notepad++ untuk menulis tag-tag html nya.
Dibawah ini adalah listing program nya.
Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
dijalankan.
Analisis : dari tampilan diatas, saya menggunakan tag-tag html yang di
antaranya yaitu tag <html> berfungsi untuk menandai dokumen dan diakhiri
dengan </html>, tag <head> berfungsi untuk memformat heading (judul dan
sub judul) dari suatu halaman web dan diakhiri dengan tag </head>, tag
2 | P r a k t i k u m P e m r o g r a m a n W e b 1 pada tittle bar windows web browser dan diatas judul pada title bar windows
nya adalah “ Judul WEB” yang diakhiri dengan tag </title>, tag <body> mengapit tag-tag yang merupakan bagian yang akan ditampilkan pada
halaman web browser atau yang memuat isi dalam html dan diakhiri dengan
Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
3 | P r a k t i k u m P e m r o g r a m a n W e b 1 Analisis : dari tampilan diatas, saya menggunakan tag-tag html yang di
antaranya yaitu tag <center>berfungsi untuk perataan tengah baik teks
maupun gambar dan diakhiri dengan tag </center>, tag <h1> sampai <h6>
berfungsi untuk memperbesar ukuran huruf untuk setiap jenis heading dan
diakhiri dengan tag </h1> sampai </h6> yang kita gunakan pada listing
program html, tag <marquee>berfungsi untuk membuat scrolling teks (teks
berjalan) dan diakhiri dengan tag </marquee>, tag <big> berfungsi untuk
memperbesar ukuran teks sebesar satu point dari defaultnya dan diakhiri
dengan tag ></big>, tag <hr> berfungsi untuk membuat garis horizonta l dan
diakhiri dengan tag </hr>, tag <br> berfungsi untuk pindah baris dan diakhiri
dengan tag ></br>, tag <pre> berfungsi untuk membuat teks dengan ukuran
yang sama dan diakhiri dengan tag ></pre>, tag <u> berfungsi untuk
membuat teks bergaris bawah dan diakhiri dengan tag </u>, tag <b>
berfungsi untuk mempertebal huruf dan diakhiri dengan tag </b>, tag <ol>
berfungsi untuk mendefinisikan awal dan akhir numbering dan diakhiri
dengan tag ></ol>, tag <li> berfungsi untuk membuat bullet point atau baris
baru pada list (berpasangan dengan tag <menu> <dir> <ul> <ol>) dan diakhiri
dengan tag ></li>, tag <font>cberfungsi untuk mengganti jenis huruf, ukuran
huruf, warna huruf yang akan digunakan untuk teks dan diakhiri dengan tag
4 | P r a k t i k u m P e m r o g r a m a n W e b 1
3. Praktikum 3 (Tag HTML dengan Atribut dan Nilai)
Disini saya menggunakan notepad++ untuk menulis tag-tag html nya.
Dibawah ini adalah listing program nya.
Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
5 | P r a k t i k u m P e m r o g r a m a n W e b 1 Analisis : dari tampilan diatas, saya menggunakan tag-tag html yang di
antaranya yaitu tag <body bgcolor=”yellow” berfungsi untuk membuat latar
belakang halaman web berwana kuning atau sesuai dengan warna yang kita
inginkan saja. Tag <font> berfungsi untuk memformat font dan diakhiri
dengan tag </font>, tag ini dipengaruhi oleh atribut ukuran font (size), jenis
font (face) dan warna font (color). Tag <marquee behavior=”alternate”
berfungsi untuk membuat teks berjalan dari kanan ke kiri. Tag <ol type=”1”
artinya untuk menampilkan penomoran secara berurut. Tag <ul type=”disc”
artinya untuk menampilkan penomoran secara tidak berurut dan atribut dalam
<ul> yaitu circle (bulat), square (kotak), disc (bulat tebal), (tag <li>
berfungsi untuk membuat bullet point atau baris baru pada list (berpasangan
dengan tag <menu> <dir> <ul> <ol>) dan diakhiri dengan tag ></li>.
4. Praktikum 4 (Tag HTML Header Text)
Disini saya menggunakan notepad++ untuk menulis tag-tag html nya.
Dibawah ini adalah listing program nya.
Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
6 | P r a k t i k u m P e m r o g r a m a n W e b 1 Analisis : dari tampilan diatas, saya menggunakan tag-tag html beberapa
diantara nya sudah saya dijelaskan dari praktikum-praktikum sebelum nya dan
pada praktikum ini di antaranya yaitu tag <strong> yang berfungsi untuk
Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
7 | P r a k t i k u m P e m r o g r a m a n W e b 1 Analisis : dari tampilan diatas, saya menggunakan tag-tag html beberapa
diantara nya sudah saya dijelaskan dari praktikum-praktikum sebelum nya dan
pada praktikum ini di antaranya yaitu tag <p align=”center”> artinya
perataan teks paragrah secara rata tengah, adapun atribut tag <p> (memformat
paragrap atau alinea) yaitu align left (rata kiri), align right (rata kanan) dan
align center(rata tengah), tag <p style”=color:#FF0000”> artinya teks pada paragraph menjadi berwarna merah karena disitu terdapat kode warna merah.
Untuk tag <font color> pada sebelumnya pun sudah diberitahukan.
6. Praktikum 6 (Tag HTML Picture)
Disini saya menggunakan notepad++ untuk menulis tag-tag html nya.
8 | P r a k t i k u m P e m r o g r a m a n W e b 1 Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
dijalankan.
Analisis : dari tampilan diatas, saya menggunakan tag-tag html beberapa
diantara nya sudah saya dijelaskan dari praktikum-praktikum sebelum nya dan
pada praktikum ini di antaranya yaitu tag <img> yang berfungsi untuk
menampilkan gambar. Atribut nya yaitu src (untuk menentukan lokasi gambar
serta ekstensi gambarnya), alt (untuk menentukan keterangan gambar jika
gambar gagal ditampilkan), width (untuk menentukan lebar gambar dalam
satuan pixel maupun persen), height (untuk menentukan tinggi gambar dalam
satuan pixel maupun persen), align (untuk menentukan perataan pada
dokumen tersebut). Di atas terdapat tag <img src=”Ubuntu.png”
width=”153” height=”210”> artinya file ekstensi gambar berbentuk png dengan lebar gambar 153 dan tinggi gambar 210.
7. Praktikum 7 (Tabel )
Disini saya menggunakan notepad++ untuk menulis tag-tag html nya.
9 | P r a k t i k u m P e m r o g r a m a n W e b 1 Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
dijalankan.
Analisis : dari tampilan diatas, saya menggunakan tag-tag html beberapa
diantara nya sudah saya dijelaskan dari praktikum-praktikum sebelum nya dan
10 | P r a k t i k u m P e m r o g r a m a n W e b 1
atributnya yaitu href (untuk menentukan lokasi tujuan yang ditunjuk oleh
link). Bordercolor artinya ketebalan warna bingkai gambar. Cellpadding
untuk menentukan spasi didalam sel. Colspan untuk menggabungkan kolom.
Target artinya untuk menentukan letak dimana bagian dari layar yang akan
ditampilkan.
8. Praktikum 8
Disini saya menggunakan notepad++ untuk menulis tag-tag html nya.
Dibawah ini adalah listing program nya.
Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
11 | P r a k t i k u m P e m r o g r a m a n W e b 1 Analisis : dari tampilan diatas, saya menggunakan tag-tag html beberapa
diantara nya sudah saya dijelaskan dari praktikum-praktikum sebelum nya dan
pada praktikum ini di antaranya yaitu tag <strike> untuk memberi garis
tengah pada teks atau mencoret teks dan diakhiri dengan tag </strike>. Tag
<table> untuk membuat tabel.
Pretest
Disini saya menggunakan notepad++ untuk menulis tag-tag html nya.
13 | P r a k t i k u m P e m r o g r a m a n W e b 1 Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
dijalankan.
Analisis : dari tampilan diatas, saya menggunakan tag-tag html yang di
antaranya yaitu tag yang sudah saya pelajari pada praktikum sebelum-sebelum
nya. Pretest diatas merupakan gabungan dari beberapa praktikum diatas. Tag
<tr> untuk membuat garis pada tabel. Tag <td> untuk membuat kolom. <td
width=”19%” align=”center”><img src=”Fkom-Warna.png”></td> artinya didalam sebuah kolom terdapat gambar yang berada ditengah dengan
file ekstensi nya png dan lebar gambarnya 19%. <td
align=”center”><h1><UNIVERSITAS KUNINGAN</h1> artinya hasil yang ditampilkan pada web browser nanti tulisan UNIVERSITAS KUNINGAN
berada ditengah dan ukuran teksnya besar. <hr size=”3” color=”0000ff”>
artinya hasil yang ditampilkan pada web browser nanti merupakan garis
horizontal dengan ketebalan 3 dan berwarna biru. <ol type=”1”> artinya
didalam sebuah tabel terdapat penomoran secara berurut dengan input type
nya dimulai dengan angka 1. <table align=”center” border=”1”
bordercolor=”0000cc” cellpadding=”2”> artinya didalam sebuah tabel terdapat tabel yang mempunyai ketebalan garisnya 1 dengan warna kuning
14 | P r a k t i k u m P e m r o g r a m a n W e b 1 Tugas
Disini saya menggunakan notepad++ untuk menulis tag-tag html nya.
15 | P r a k t i k u m P e m r o g r a m a n W e b 1 Dan dibawah ini adalah tampilan halaman web setelah listing program diatas
