LAPORAN
PRAKTIKUM
PEMROGRAMAN WEB
Oleh:
Kelompok
1
FAJRUL
FALLAH (04/X TKJ)
ITA WIDYA K (07/X
TKJ)
MARIFATUN
NAFILA (11/X TKJ)
NUR QOMARIAH
DRS (16/X TKJ)
TRI
WIDYAYANTO H (22/X TKJ)
SMK
INDUSTRI AL KAAFFAH
KOMPETENSI
KEAHLIAN TEKNIK KOMPUTER DAN JARINGAN
OKTOBER
2014
BAB
II
KOMPONEN HATML LANJUT
A.TUJUAN
Ø Memahami komponen-komponen HTML lanjutan.
Ø Memahami keguanaan dan cara penerapan komponen HTMl.
Ø Mampu memanfaatkan komponen-komponen HTML untuk membuat halaman WEB.
B.DASAR TEORI
1.Elemen-Elemen HTML5
Pada bab sebelumnya telah dijelaskan
mengenai elemen-elemen fundamental dari HTML/XHTML dan implementasinya.Selain
elemen-elemen tersebut,masih terdapat elemen-elemen lain yang juga memiliki
peran cukup penting di dalam menghasilkan dokumen HTML.Dalam perkembangannya
saat ini,HTML5 memiliki penambahan elemen-elemen
baru(misal:<video>,<audio>,dll) dan ada beberapa elemen pada HTML
versi sebelumnya yang dihilangkan pada
HTML5(misal:<font>,<frameset>,dll)Daftar elemen-elemen tersebut
juga tertulis pada bab sebelumnya.
Di bab ini akan dijelaskan mngenai dasar-dasar dan cara
penggunaan elemen-elemen yang nantinya akan sering kita gunakan.Secara garis
besar,elemen-elemen ini mencakup:
A.link:Untuk mengaitkan satu
dokumen dengan dokumen-dokumen
lainya(atau bisa juga mangaitkan blog-blog dalam satu dokumen)
B.Table:Untuk menghasilkan data
dalam bentuk tabular(tabel).
C.Form:Untuk menghasilkan form
masukan data.
C.LATIHAN
1.Menggunakan
link
Fitur fundamental dari hypertext
adalah hyperlink (tautan/pranala)
dokumen-dokumen; kita dapat menunjuk lokasi-lokasi lain.Sebagaimana diketahui,hyperlink merupakan teks yang
memungkinkan kita untuk melakukan navigasi dari satu halaman ke halaman
lainya.Elemen dari hyperlink
adalah<a> (anchor) berpasangan
dengan</a>.Dalam elemen ini minimal harus atribut href, berfungsi untuk mendefinisikan tautan.
a. Menciptakan link
Script:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>demo link</title>
</head>
<body>
<a href="link2.html">klik di sini</a>
</body>
</html>
Hasil:
Scipt:
<!DOCTYPE HYML>
<html lang="en">
<head>
<title>Demo link 2</title>
</head>
<body>
untuk kembali ke halaman pertama
<a href="link1.html">klik di sini</a>
</body>
</html>
Hasil:
B.atribut link
Selain href,elemen anchor juga menyediakan atribut guna mendukung fungsionalitasnya,
dua diantaranya yang kerap digunakan adalah target
dan title. Atribut target digunakan untuk mengatur apakah link akan dibuka di window yang sama (default) atau di window (atau tab) baru.
Di sisi lain,title berfungsi untuk
menampilkan teks manakala kursor mouse berada di atas link
Script:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo Atribut Link</title>
</head>
<body>
<a href="link2.html" target="_blank"
title="Title
link">klik di
sini</a>
</body>
Hasil:
C.link internal
Elemen anchor
juga memungkinkan kita untuk melakukan navigasi di dalam satu dokumen (layaknya
bookmark). Untuk mengimplementasikan hal
ini, kita memerlukan atribut id.
Langkah pertama untuk mengimplementasikan link
internal adalah dengan mendevinisikan lokasi di atribut href yang diberi prefiks #.
Langkah berikutnya adalah menetapkan nilai atribut id di blok yang akan di tuju, di mana nilainya sama dengan href namun tanpa prefiks #. Untuk lebih
jelasnya, perhatikan dokumen berikut:
Script:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DEmo Link internal</title>
</head>
<body>
menu
<ul>
<li><a
href="#pendahuluan">pendahuluan</a></li>
<li><a
href="#pembahasan">pembahasan</a></li>
<li><a href="#kesimpulan">kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">pendahuluan</h3>
<p>
lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aligue .
ut enim ad minim venia, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat .
<h2 id="pembahasan">pembahasan</h3>
<p>
lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua .
ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat .
<h3 id="kesimpulan">kesimpulan</h3>
<p>
lorem ipsum dolor sit amet, consectetur adisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua .
ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat .
</body>
</html>
Hasil:
D.link email
Link tak hanya sebatas pada dokumen, tetapi juga bisa dimanfaatkan untuk
menunjuk ke suatu alamat email. Adapun
dalam implementasinya, kita tinggal mengubah alamat URL dengan alamat
email-yang lebih dahulu diberi prefiks mailto.
Script:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo link email</title>
</head>
<body>
<a href="mailto:didik@um.ac.id" >didik at um dot ac dot
id</a>
</body>
</html>
Hasil:
E.Link gambar
Link
tidak hanya direpresentasikan dalam bentuk teks, tetapi juga bisa berupa
gamabar. Langkah pembuatan link gambar pun sangat sederhana, cukup mengapit
elemen <img> di antara elemen
<a>.
Script:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo Link Gambar</title>
</head>
<body>
<a href="http://google.co.id" title="Search with
Google">
<img src="jpg.jpg" border="0" />
</a>
</body>
</html>
Hasil:
F.Menggunakan tabel
Pada
umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris dan
kolom. Perpotongan baris dan kolom di dalam tabel disebut sebagai sel.
Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan data di
dalam tabel secara atraktif. Artinya, tak hanya sebatas pada data tabular saja,
namun juga mengizinkan kita melakukan pemformatan.
Ø
Menciptakan tabel
Script:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Demo Table</title>
</head>
<body>
<table border=1>
<caption>Label dari table</caption>
<!--Header-->
<tr>
<th>No</th>
<th>Nama</th>
<t>Alamat</th>
</tr>
<!--Baris data pertama-->
<tr>
<td>1</td>
<td>fajrul falah</td>
<td>malaysia</td>
</tr>
<1--baris data kedua-->
<tr>
<td>2</td>
<td>tri</td>
<td>papua</td>
</tr>
</table>
</body>
</html>
Hasil:
Ø
Pemformatan tabel
Elemen tabel
menyediakan sejumlah atribut yang dapat digunakan untuk memformat visualisasi
tabel.Tiga atribut pertama yang sering digunakan adalah align (untuk mengatur posisi),cellspacing
(untuk mengatur spasi antar sel) dan
cellpadding (untuk mengatur spasi antar border sel dengan isinya).atribut lain
yang juga cukup penting adalah width
(untuk menentukan lebar tabel atau sel)
Script:
<!DOCTYPE HTML>
<html
lang="en">
<haed<
<title>Demo Tabel</title>
</head>
<body>
<table border=1
align="center" cellspacing=0 cellpadding=10>
<caption>Label
dari tabel</caption>
<!-- Header -->
<tr>
<!-- Mengatur lebar
kolom -->
<th
width="50">No</th>
<th
width="150">Nama</th>
<th
width="200">Alamat</th> </tr>
<-- Baris data
pertama -->
<tr>
<td>1</td>
<td>Herlambang</td>
<td>Bojonegoro</td>
</tr>
<!-- Baris data kedua
-->
<tr>
<td>2</td>
<td>Nidhom</td>
<td>Ethiopia</td>
</tr>
</table>
</body>
</html>
Hasil:
Ø
Mendesain tabel
Sebuah tabel
tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap baris
ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan penggabungan (merge) sel. Dalam konteks elemen tabel,
penggabungan sel dapat dilakukan berdasarkan baris (rowspan) atau kolom (colspan).
fitur lain yang ada pada tabel adalah pengelompokan sel berdasarkan kolom
maupun baris. Untuk pengelompokan kolom menggunakan elemen <colgroup> sedangkan pada garis memanfaatkan <tbody>.
Script:
<!DOCTYPE HTML>
<html
lang="en">
<head>
<title>demo span/merge
sel</title>
</head>
<body>
<table border=1
align="center" cellspacing=0 cellpadding=5>
</tr>
<th
width="50">no</th>
<!--gabung kolom nama
dan alamat-->
<th
width="350" colspan=2>span nama dan alamat</th>
</tr>
<!--gabung baris data
pertama-->
<tr>
<!--gabung baris 1
dan 4-->
<td rowspan=4>span
baris 1 dan 4</td>
<td>herlambang</td>
<td>bojonegoro</td>
</tr>
<!--baris data
kedua-->
<tr>
<td>nidhom</td>
<td>ethiopia</td>
</tr>
<!--baris data
ketiga-->
<tr>
<td>bian</td>
<td>zimbabwe</td>
</tr>
<!--baris data
keempat-->
<tr>
<td>sonny</td>
<td>pantai
gading</td>
</tr>
</table>
</body>
</html>
Hasil:
G.Menggunakan form
Tak ubahnya form (formulir) konvensional,elemen
<form> pada HTML merupakan
suatu media untuk memasukan data. Disini form
juga terdiri dari komponen elemen <input>
sperti button, checkbox, e-mail, pasword,
radio,reset,submit,teks,dll.
Pembuatan form dapat dilakukan secara langsung
atau memanfaatkan tabel guna memperoleh hasil yg rapi. Contoh pembuatan form yang melibatkan tabel di
perlihatkan sebagai berikut:
Script:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Template Desain Form</title>
</head>
<body>
<h3>Formulir Pendaftaran PTI-Mail.com</h3>
<form action="" Method="post">
<table border=0>
<tr>
<td>NIK</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" />Pria
<input type="radio" />Wanita
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>
<select name="job">
<option>Guru</option>
<option>Wiraswsta</option>
<option>Lainnya</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Ok" />
<input type="submit" value="Cancel" />
</td>
</tr>
</table>
</form>
</body>
</html>
Hasil:
H.Studi kasus
Dengan
memanfaatkan elemen tabel dan hyperlink,buatlah
sebuah halaman
website terdiri dari 3 buah tab menu. Bila diketik pada salah satu menu maka
akan menunjukan isi yang berbeda. Tiap halaman terisi link untuk mendownload data-data yang telah
disediakan. Kurang lebih tampilan halaman website tersebut adalah seperti
dibawah ini:
Script:
<!DOCTYPE HTML>
<html
lang="en">
<head>
<title>DOWNLOAD
DATAKU</title>
</head>
<body>
<table border=0
align="center" cellspacing=0 cellpadding=4
bgcolor="bold">
<caption><center>SILAHKAN
MEMILIH</center></caption>
<tr>
<th width=10
bgcolor="red"></th>
<th width=1
bgcolor="white"></th>
<th width=200
bgcolor="bold"><a href="film.html"><font
color="silver">film</font></a>
<th width=1
bgcolor="white"></th>
<th width=200
bgcolor="red"><a href="music.html">music</a>
<th width=1
bgcolor="white"></th>
<th width=200
bgcolor="red"><a
href="lawakan.html">lawakan</a>
<th width=10
bgcolor="red"></th>
</tr>
<td
bgcolor="bold" colspan=3>1. <a href="crow
zero"><font color="black">crow
zero</a></td>
</tr>
<tr>
<td
bgcolor="bold" colspan=3>2. <a href="the amazing
spiderman"><font color="black">the amazing
spiderman</a></td>
</tr>
<tr>
<td
bgcolor="bold" colspan=3>3. <a href="real
steel"><font color="black">real
steel</a></td>
</tr>
<tr>
<td
bgcolor="blue" colspan=0><center><font
color="white">study kasus kelompok
2</font></center></td>
</tr>
</body>
</head>
Hasil:
I.Tugas praktikum
ü
Buat kreasi grafik batang statis dengan memanfaatkan
elemen tabel,contohnya hasilnya terlihat seperti dabawah ini:
Script:
<!DOCTYPE HTML>
<html
lang="en">
<head>
<title>Grafik</title>
</head>
<body>
<table border=0
align="center" cellspacing=0 cellpadding=3>
<caption><b>GRAFIK
PERBANDINGAN SIKAP</b></caption>
<pre>
</font>
</pre>
<tr>
<td
align="right">100</td>
<td rowspan=10
bgcolor=black></td>
<td
width="25" height="20" colspan=25>
</tr>
<tr>
<td
align="right">90</td>
<td
width="15" height="20" colspan=26></td>
</tr>
<tr>
<td
align="right">80</td>
<td width="15"
height="20" colspan=25></td>
</tr>
<tr>
<td
align="right">70</td>
<td width
="30" rowspan=7></td>
<td width
="20" height="30" rowspan=2></td>
<td width
="20" height="200" bgcolor=aqua rowspan=7></td>
<td width
="20" height="20" rowspan=1></td>
<td width
="20" rowspan=3></td>
<td width
="20" bgcolor=purple rowspan=7></td>
<td width
="20" rowspan=7></td>
<td width
="20" rowspan=1></td>
<td width
="20" rowspan=3></td>
<td width
="20" rowspan=5></td>
<td width
="20" rowspan=5></td>
<td width
="20" rowspan=4></td>
<td width
="20" rowspan=7></td>
<td width
="20" rowspan=3></td>
<td width
="20" rowspan=3></td>
<td width
="20" rowspan=3></td>
<td width
="20" rowspan=4></td>
<td width
="20" rowspan=5></td>
<td width
="20" rowspan=7></td>
<td rowspan=5></td>
<td
rowspan=6></td>
<td
rowspan=6></td>
<td
rowspan=4></td>
<td
rowspan=3></td>
<td width
="15" rowspan=7></td>
</tr>
<tr >
<td
align="right">60</td>
<td width
="15" bgcolor=yellow rowspan=6></td>
<td width
="15" height="120" bgcolor=red rowspan=6></td>
</tr>
<tr>
<td
align="right">50</td>
<td width
="15" height="120" rowspan=5 bgcolor=red></td>
</tr>
<tr >
<td
align="right">40</td>
<td width
="15" height="80" bgcolor=grey rowspan=4></td>
<td width
="15" bgcolor=aqua rowspan=4></td>
<td
width="15" bgcolor=red rowspan=4></td>
<td
width="15" bgcolor=aqua rowspan=4></td>
<td
width="15" bgcolor=yellow rowspan=4></td>
<td
width="15" bgcolor=purple rowspan=4></td>
</tr>
<tr >
<td
align="right">30</td>
<td width
="15" height="60" bgcolor=purple rowspan=3></td>
<td width
="15" bgcolor=grey rowspan=3></td>
<td width
="15" bgcolor=grey rowspan=3></td>
</tr>
<tr >
<td
align="right">20</td>
<td width
="15" height="40" bgcolor=yellow rowspan=2></td>
<td width
="15" bgcolor=grey rowspan=2></td>
<td
width="15" bgcolor=purple rowspan=2></td>
<td
width="15" bgcolor=red rowspan=2></td>
</tr>
<tr >
<td
align="right">10</td>
<td
width="15" height="20" bgcolor=aqua
rowspan=1></td>
<td
width="15" bgcolor=yellow rowspan=1></td>
</tr>
<tr>
<td></td>
<td
height="25" colspan=25 bgcolor=black></td>
</tr>
<tr>
<td
colspan=3></td>
<td colspan=5
align="center"><b>fajrul</b></td>
<td></td>
<td colspan=5
align="center"><b>dyah</b></td>
<td></td>
<td colspan=5
align="center"><b>tri</b></td>
<td></td>
<td colspan=5
align="center"><b>ita </b></td>
<td></td>
</table>
<br>
<br>
<table border=0
align="left" cellspacing=3 cellpadding=3>
<tr>
<td><b><i>Keterangan:</i></b></td>
</tr>
<tr>
<td bgcolor=red
width="40"></td>
<td><i> :
pendiam</i></td>
</tr>
<tr>
<td bgcolor=aqua width="40"></td>
<td><i> :
Mudah Bergaul</i></td>
</tr>
<tr>
<td bgcolor=yellow
width="40"></td>
<td><i> :
Mudah Memaafkan</i></td>
</tr>
<tr>
<td bgcolor=grey
width="40"></td>
<td><i> :
Pendendam</i></td>
</tr>
<tr>
<td bgcolor=purple
width="40"></td>
<td><i> :
Kritis </i></td>
</tr>
</table>
</body>
</html>
Hasil:
ü
Buat desain tabel perbandingan sikap dengan memanfaatkan fitur pengelompokan.contoh hasilnya
diperlihatkan seperti gambar dibawah ini:
Script:
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<title>Tabel
Perbandingan</title>
</head>
<body
background="bg.jpg">
<table
width="700" border="0" align="center">
<tr>
<td
width="375" colspan=8
align="center"><strong>####### PERBANDINGAN FITUR
########</strong></td>
</tr>
<tr>
<td
colspan="8" style="border-bottom:#000000 solid
thin;"></td>
</tr>
<tr>
<td
width="25" align="center"><strong>No</strong></td>
<td
width="1" rowspan="10" style="border-left:#000000
solid thin;"></td>
<td
width="150"
align="center"><strong>Fitur</strong></td>
<td
width="1" rowspan="10" style="border-left:#000000
solid thin;"></td>
<td
width="75" align="center"><strong>Enterprise</strong></td>
<td
width="1" rowspan="10" style="border-left:#000000
solid thin;"></td>
<td
width="25"
align="center"><strong>Pro</strong></td>
<td
width="50"
align="center"><strong>Free</strong></td>
</tr>
<tr>
<td
colspan="8" style="border-top:#000000 solid
thin;"></td>
</tr>
<tr>
<td
width="25" align="center">1</td>
<td
width="150">Garansi seumur hidup</td>
<td
width="75" align="center">X</td>
<td
width="25" align="center">-</td>
<td
width="50" align="center">-</td>
</tr>
<tr>
<td
width="25" align="center">2</td>
<td
width="150">Multiuser</td>
<td
width="75" align="center">X</td>
<td
width="25" align="center">-</td>
<td
width="50" align="center">-</td>
</tr>
<tr>
<td
width="25" align="center">3</td>
<td
width="150">Update otomatis</td>
<td width="75"
align="center">X</td>
<td
width="25" align="center">-</td>
<td
width="50" align="center">-</td>
</tr>
<tr>
<td
width="25" align="center">4</td>
<td
width="150">Cetak laporan</td>
<td
width="75" align="center">X</td>
<td
width="25" align="center">X</td>
<td
width="50" align="center">-</td>
</tr>
<tr>
<td
width="25" align="center">5</td>
<td
width="150">Notifikasi error</td>
<td
width="75" align="center">X</td>
<td
width="25" align="center">X</td>
<td
width="50" align="center">-</td>
</tr>
<tr>
<td
colspan="8" style="border-top:#000000 solid
thin;"></td>
</tr>
<tr>
<td
width="25" align="center">6</td>
<td
width="150">Ubah tema</td>
<td
width="75" align="center">X</td>
<td
width="25" align="center">X</td>
<td
width="50" align="center">X</td>
</tr>
<tr>
<td
width="25" align="center">7</td>
<td
width="150">Try icon</td>
<td
width="75" align="center">X</td>
<td
width="25" align="center">X</td>
<td
width="50" align="center">X</td>
</tr>
<tr>
<td
colspan="8" style="border-top:#000000 solid
thin;"></td>
</tr>
</table>
</body>
</html>
Hasil:
Posting Komentar