Knowledge Cafe of SMK INDUSTRI AL-KAAFFAH: Hasil Laporan Praktikum WEB browser

LAPORAN

PRAKTIKUM PEMROGRAMAN WEB MODUL 2

Oleh :

Kelompok 1

Khoirul H (7/X TKJ)

M. Yoga Pratama (12/X TKJ)

Rubika nastiti (18/X TKJ)

Vike Dita A (22/X TKJ)

Yuliana Sandi W (24/X TKJ)

SMK INDUSTRI AL KAAFFAH

KOMPETENSI KEAHLIAN TEKNIK KOMPUTER DAN JARINGAN

OKTOBER 2014

BAB II

KOMPONEN HTML LANJUT

A. TUJUAN

1) Memahami komponen HTML lanjutan.

2) Memahami kegunaan dan cara penerapan komponen HTML.

3) Mampu memanfaatkan komponen –komponen HTML untuk membuat halaman web.

B. DASAR TEORI

1. Elemenelemen HTML5

Pada bab sebelumnya telah dijelaskan mengenai elemen-elemen fundamental dari HTML/XHTML dan implentasinya. Dalam perkembangannya saat ini, HTML5 memliki penambahan elemen-elemen baru (missal: <video>, <audio>, dll) dan ada beberapa elemen pada HTML versi sebelumnya yang dihilangan kan pada HTML5 (misal: , <frameset>, dll). Daftar elemen-elemen tersebut juga telah tertulis pada bab sebelumnya.

Secara garis besar, elemen-elemen ini mencakup:

a) Link: Untuk mengaitkan satu dokumen dengan dokumen-dokumen lainnya (atau bisa juga mengaitkan blok-blok di dalam satu dokumen)

b) Table: Untuk menghasilkan data dalam benuk tabular (table)

c) Form:Untuk menghasilkan form masukan data.

C. LATIHAN

1. Menggunakan Link

Fitur fundametal dari hypertext adalah hyperlink (tautan/pranala) dokumen-dokumen, kita dapat menunjuk lokasi-lokasi lain. Sebagaimana diketahui, hyperlink merupakan text yang memungkinkan kita utuk melakukan navigasi dari satu halaman ke hlaman lainnya. Elemen dari hyperlink adalah <a> (anchor) berpasang dengan </a>. Dalam elemen ini minimal harus atribut href, berfungsi untuk mendefinisikan tautan.

a. Menciptakan Link

Script :

Link 1

<!doctype html>

<html lang="en">

<head>

<title>demo link</title>

</head>

<body>

<a href="link2.html">klik disini</a>

</body>

</html>

Hasilnya :

Link 2

<!doctype html>

<html lang="en">

<head>

<title>demo link 2</title>

</head>

<body>

untuk kembali ke halaman pertama

<a href="link1.html">klik disini</a>

</body>

</html>

Hasilnya :

b. Atribut Link

Selain href, elemen anchor juga menyedikan sejumlah 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 window (atau tab) baru. Di sisi lain, title berfungsi untuk menampilkan teks manakala kursor mouse berada diatas link.

Script :

“_blank”

<!docype html>

<html lang="en">

<head>

<title>demo atribut link</title>

</head>

<body>

<a href="link2.html" target="_blank" title="title link">klik disini</a>

</body>

</html>

Hasilnya :

“_parent”

<!docype html>

<html lang="en">

<head>

<title>demo atribut link</title>

</head>

<body>

<a href="link2.html" target="_parent" title="title link">klik disini</a>

</body>

</html>

Hasilnya :

“_self”

<!docype html>

<html lang="en">

<head>

<title>demo atribut link</title>

</head>

<body>

<a href="link2.html" target="_self" title="title link">klik disini</a>

</body>

</html>

Hasilnya :

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 mendefinisikan lokasi di atribut href yang diberi prefiks #. Langkah berikutnya adalah menetapkan nilai atribut id di blok yang akan dituju,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

<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>

Lorem ipsum dolor sit amet, condetectur adipicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.

Ut eni ad minim veniam, quis nosrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat diueudo jedwjeud dud edoehn wjfeiw eweguwhe ufwpybsbdc,.

 hsaxbkjsxsax

 asbxasxahsxasxh asxhasxhasxvahs xasbxasbxhasbxas xh xhduedcmncjdfcfknsk jbdcb

 asbxasxbasx saxbkjabsxhasbxjsb

 nasbxasvxvas skxhabsxkhasx sx

 nkldnohdfae fadjjdfm jdf flkdnf ksdmksjirs sdv;smdvms,s dvksvksdv kvsmvs vsldvojsmsdh dnvsjvns

 xcmzjsbcK/WDJ/WKJOAHE;FKJSBFJSBFGBKJDVJHDJFDS SdnfoshdifSDJbisdh idfhsbdfjshusbvsfijvnsm vszjhvsjnv oodhdhfudd

 sbkabdbcbdbcjdbf

<h3 id="Pembahasan"</h3>

Lorem ipsum dolor sit amet, consetectur adipicing elit, sed d knqdnOJC mD SDNKNM Sdnkv dndkcascnjmamm mcm;dmv a;mc;dvoh wrg ssofnsjdbodf dnfef fidjdndihkdmdvdkvnsd ssdkv;dvjsdnvkdvnsjddvsjvkdno euismod tepor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliqubasxabkjsb abkabsxabdcbdcbdcbaskc ajsbckabsckabsc scabkjs a a a a aa fvihdsvichsdsbdciibwbdwckjbsjcbskjbcbsbbjssjsip ex ea commodo consequat.

 asbdjj jsdjohadjaj njs snjs smdv ddhiawd kasdoihdawd llaspjpsichas sas cnabcasjnscacas jncnlk nscnsj jsjsknsk kscksnckps jklnsoic sjdfand ska

jdhbcbi scjasjcnan sdn sdlaspo jsmo ifnaefh jdmni c efenaifa advlmadinn ifeij afnijfka sfnafefj kdddfnadmck dckdidvm vmadnjaidvadnvka adnvlndvdokef, gogmdv ejwr fbsofms sfbmsosj dsdovdskvskrv vovmjpfhbodg rigwjrg[wgs vjshdv

 jsjcnas jahdja djahhihejbakshas jdhhbdlkwjfien adnfnoaufhrwwniiwjwww ofjj njapj raonf nd i 9uijkj iiwj iufiufif

 uuhrfu fowhfwhf wwefhh fwwoe ohqwhdqwhihq qqidoqdjd aisdakjdgdbwwdc do wieowhe oowdfhowhef ww

<h3 id="Kesimpulan">kesimpulan</h3>

lorem ipsum dolor sit amet, consetectur adipicing elit, sed doahsgusvdas hedkabxkagsixa xjasxkagxaegdd agsdjabxajsxabxasbxa sxasxjasbashcavcv amsnxjasjabsa xasgx asjxjasbxkasxa xajsxjasxasbxbasxn sxas sjxasxjax zjxa ajsxbjasp ci dsjcljsdcljsd euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ansjduaqs wjsex ea commodo consequat.

 nbsas s ajadc jasxsyybx

</body>

</html>

Hasilnya :

d. Link Gambar

Link tidak hanya dipresentasikan dalam bentuk teks, tetapi juga bisa berupa gambar. Langkah pembuatan link gambar pun sangat sederhana, cukup mengampit elemen <img> diantara elemen <a>.

Scirpt :

<!doctype html>

<html lang="en">

<head>

<title>Demo Link Gambar</title>

</head>

<body>

<a href="http://google.co.id" title="searh with google">

<img src="34502.jpg" border="0" />

</a>

</body>

</html>

Hasilnya :

2. Menggunakan Tabel

Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. Perpotongan baris dan kolom di dalam tabel 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 penformatan.

a. Menciptakan tabel

Pada prinsipnya, pembuatan tabel sangat sederhana sekali, hanya masalah pengorganisasian. Semua tabel harus diawali dengan elemen <table> ,kemudian ada tiga elemen dasar yang mengikutinya, meliputi:

1) Elemen <th> atau table heading yang berfungsi mendefinisikan header.

2) Elemen <tr> atau table row yang berfungsi mendefinisikan baris.

3) Elemen <td> atau table data yang berfungsi mendefinisikan sel.

Struktur pembentukan tabel dapat dilihat seperti dibawah ini:

Script:

<!doctype html>

<html lang="en">

<head>

<title>Demo Link Tabel</title>

</head>

<body>

<table border=1>

<caption>Label dari Tabel</caption>

<tr>

<th>NO</th>

<th>Nama</th>

<th>Alamat</th>

</tr>

<tr>

<td>1</td>

<td>Herlambang</td>

<td>Bojonegoro</td>

</tr>

<tr>

<td>2</td>

<td>Nidhom</td>

<td>Ethiopia</td>

</tr>

</table>

</body>

</html>

Hasilnya :

b. 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 antarsel) dan cellpadding (untuk mengatur spasi antara border sel dengan isinya) . Atribut lain yang juga cukup penting adalah width (untuk menentukan lebar atau sel).

Script:

<!doctype html>

<html lang="en">

<head>

<title>Demo Tabel</title>

</head>

<body>

<table border=1 align="center" cellspacing=10 cellpadding=5>

<caption>Label dari Tabel</caption>

<tr>

<th width="50">no</th>

<th width="150">Nama</th>

<th width="200">Alamat</th> </tr>

<tr>

<td>1</td>

<td><center>Herlambang</center></td>

<td>bojonegoro</td>

</tr>

<tr>

<td>2</td>

<td>Nidhom</td>

<td>Ethiopia</td>

</tr>

</table>

</body>

</html>

Hasilnya :

c. Mendesain tabel

Sebuah tebel tidak selalu memiliki ukuran dan jumlah sel yang sma dalam setiap garis aatupun kolomnya. Sebagai contoh, mungkin kita perly melakukan penggabungan (merge) sel. Dalam konteks elemen tabel, penggabungan sel dapat dilakukan bedasar baris (rowspan) atau kolom (colspan).

Fitur lain yang ada pada tabel adalah pengelompokan sel berdasatkan kolom maupun baris. Untuk mengelompokan kolom menggunakan elemen <colgroup> sedangkan pada baris 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>

<!-- Gabug kolom nama dan alamat --!>

<th width="350" colspan=2>Span Nama Dan Alamat</th>

</tr>

<!-- 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>

Hasilnya :

3. Menggunakan Form

Tak ubahnya form (formulir) konvensional, elemen <form> pada HTML merupakan suatu media untuk memasukkan data. Disini form juga terdiri dari komponen elemen <input> seperti button, checkbox, email, password, radio, reset, submit, text, dll. Menggunakan form dapat dilakukan secara langsung atau memanfaatkan tabel guna memperoleh hasil yang rapi. Contoh pembuatan form yang melibatkan tabel diperlihatkan sebagai berikut:

Script :

<!doctype html>

<html lang="en">

<head>

<title>template Design 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>

<tr>Nama</tr>

<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>Wiraswasta</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>

Hasilnya :

A. Study Kasus

Dengan Memanfaatkan elemen tabel dan hyperlink, Buatlah sebuah halaman website terdiri dari 3 buah tab menu. Bila diklik pada salah satu menu maka akan menunjukkan isi yang berbeda. Tiap halaman berisi link untuk mendownload data-data yang talah disediakan.

Script :

· Film

<!doctype html>

<html lang="en">

<head>

<title>Study Kasus</title>

</head>

<body>

<body background="b.jpg"/>

<table border=0 align="center" cellspacing=0 cellpadding=4 bgcolor="green">

<caption><center>Download Dataku</center></caption>

<tr>

<th width=20 bgcolor="green"> </th>

<th width=1 bgcolor="white"> </th>

<th width=200 bgcolor="yellow"><a href="Film.html">Film</a>

<th width=1 bgcolor="white"> </th>

<th width=200><a href="Dokumen.html">Dokumen</a>

<th width=1 bgcolor="white"> </th>

<th width=200><a href="Musik.html">Musik</a>

<th width=1 bgcolor="white"> </th>

<th width=20 bgcolor="green"> </th>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=6>1. <a href="downloadavenger.html">The Avengers</a></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=6>2. <a href="downloadturbo.html">Turbo</a></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>3. <a href="downloadtron.html">Tron Legacy</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>4. <a href="downloadpercy.html">Percy Jackson a Lightning Thief</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>5. <a href="downloadthor.html">Thor The Darkworld Thrones</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green" colspan=9><center>Study Kasus Kelompok 5</center></td>

</tr>

<center><img src="gambar.jpg" border=10/></center>

</table>

</body>

</html>

Hasilnya :

· Dokumen

<!doctype html>

<html lang="en">

<head>

<title>Study Kasus</title>

</head>

<body>

<body background="b.jpg"/>

<table border=0 align="center" cellspacing=0 cellpadding=4 bgcolor="green">

<caption><center>Download Dataku</center></caption>

<tr>

<th width=20 bgcolor="green"> </th>

<th width=1 bgcolor="white"> </th>

<th width=200><a href="Film.html">Film</a>

<th width=1 bgcolor="white"> </th>

<th width=200 bgcolor="yellow"><a href="Dokumen.html">Dokumen</a>

<th width=1 bgcolor="white"> </th>

<th width=200><a href="Musik.html">Musik</a>

<th width=1 bgcolor="white"> </th>

<th width=20 bgcolor="green"> </th>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=6>1. <a href="belajarmengetik.html">Belajar Mengetik</a></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=6>2. <a href="tutorialmacromedia.html">Tutorial Macromedia Flash 8</a></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>3. <a href="tutorialcorel.html">Tutorial Corel Draw x6</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>4. <a href="tutorialpotoshop.html">Tutorial Adobe Photoshop CS3</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>5. <a href="downloadpowerdirector.html">Tutorial Power Director 11</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green" colspan=9><center>Study Kasus Kelompok 5</center></td>

</tr>

<center><img src="gambar.jpg" border=10/></center>

</table>

</body>

</html>

Hasilnya :

· Musik

<!doctype html>

<html lang="en">

<head>

<title>Study Kasus</title>

</head>

<body>

<body background="b.jpg"/>

<table border=0 align="center" cellspacing=0 cellpadding=4 bgcolor="green">

<caption><center>Download Dataku</center></caption>

<tr>

<th width=20 bgcolor="green"> </th>

<th width=1 bgcolor="white"> </th>

<th width=200><a href="Film.html">Film</a>

<th width=1 bgcolor="white"> </th>

<th width=200><a href="Dokumen.html">Dokumen</a>

<th width=1 bgcolor="white"> </th>

<th width=200 bgcolor="yellow"><a href="Musik.html">Musik</a>

<th width=1 bgcolor="white"> </th>

<th width=20 bgcolor="green"> </th>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=6>1. <a href="avenged.html">Avenged Sevenfold</a></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=6>2. <a href="brunomars.html">Bruno Mars</a></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>3. <a href="downloadavril.html">Avril Lavigne</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>4. <a href="downloadlinkinpark.html">Linkin Park</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green"></td>

<td bgcolor="yellow"></td>

<td bgcolor="yellow" colspan=5>5. <a href="downloadone-d.html">One Direction</a></td>

<td bgcolor="yellow"></td>

<td bgcolor="green"></td>

</tr>

<tr>

<td bgcolor="green" colspan=9><center>Study Kasus Kelompok 5</center></td>

</tr>

<center><img src="gambar.jpg" border=10/></center>

</table>

</body>

</html>

Hasilnya :

B. Tugas Praktikum

1. Buat kreasi grafik batang statis dengan memanfaatkan elemen tabel.

Script :

<!doctype html>

<html lang="en">

<head>

<title>:) Tugas Praktikum Kelompok 5</title>

</head>

<body>

<body bgcolor="grey">

<center>Grafik Hasil Test SD Negeri Pendtium</center>

<table border=0 align="center" cellspacing=0 cellpadding=0 bgcolor="grey"/>

<tr>

<td bgcolor="grey" width=30>100</td>

<td bgcolor="grey" width=20></td>

<td bgcolor="black" width=10></td>

<td bgcolor="grey" width=30></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="blue">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="grey"></td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey">50</td>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="grey"></td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="blue">.</td>

<td bgcolor="grey"></td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="grey"></td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="grey"></td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="grey"></td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="blue">.</td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="yellow">.</td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey">0</td>

<td bgcolor="grey"></td>

<td bgcolor="black">.</td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="grey" colspan=5><center>Herlambang</center></td>

<td bgcolor="grey"></td>

<td bgcolor="grey" colspan=3><center>Nidhom</center></td>

<td bgcolor="grey"></td>

<td bgcolor="grey" colspan=3><center>Bian</center></td>

<td bgcolor="grey"></td>

<td bgcolor="grey" colspan=3><center>Sonny</center></td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey" width=30>.</td>

<td bgcolor="grey" width=20></td>

<td bgcolor="grey" width=10></td>

<td bgcolor="grey" width=30></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="grey" colspan=5>Keterangan :</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="grey">.</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="red">.</td>

<td bgcolor="grey"></td>

<td bgcolor="grey">:</td>

<td bgcolor="grey" colspan=8>Kemampuan Membaca</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="blue">.</td>

<td bgcolor="grey"></td>

<td bgcolor="grey">:</td>

<td bgcolor="grey" colspan=8>Kemampuan Menulis</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="chartreuse">.</td>

<td bgcolor="grey"></td>

<td bgcolor="grey">:</td>

<td bgcolor="grey" colspan=8>Kemampuan Mendengar</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="yellow">.</td>

<td bgcolor="grey"></td>

<td bgcolor="grey">:</td>

<td bgcolor="grey" colspan=8>Kemampuan Berbicara</td>

<td bgcolor="grey"></td>

</tr>

<tr>

<td bgcolor="grey"></td>

<td bgcolor="aqua">.</td>

<td bgcolor="grey"></td>

<td bgcolor="grey">:</td>

<td bgcolor="grey" colspan=8>Kemampuan Menggambar</td>

<td bgcolor="grey"></td>

</tr>

</table>

By: 

Rubika Nastiti (Team Leader) 

Muhammad Yoga Pratama 

Khoirul Hamzah 

Vike Dita A 

Yuliana Sandy Waloyo 

<center><img src="gambar.jpg" border=10/></center>

</body>

</html>

Hasilnya :

2. Buat desain tabel perbandingan sikap dengan memanfaatkan fitur pengelompokan.

Script :

<!doctype html>

<html lang="en">

<head>

<title>Tugas Praktikum 2 Kelompok 5</title>

</head>

<body>

<center>Perbandingan Sikap</center>

<table border=1 cellspacing=0 cellpadding=2 align="center"/>

<tr>

<th width=50>No.</th>

<th width=200>Spesifikasi Sikap</th>

<th width=60>Poin</th>

<th width=150>Herlambang</th>

<th width=150>Nidhom</th>

<th width=150>Bian</th>

<th width=150>Sonny</th>

</tr>

<tr>

<td align="left">1 2 3 4 5 </td>

<td align="left">Kerja Keras Tekun Tidak Sombong Sabar Pemaaf </td>

<td align="left">8 9 6 7 10 </td>

<td align="center">X X X X X </td>

<td align="center">X X - - - </td>

<td align="center">- X - - X </td>

<td align="center">- - - - - </td>

</tr>

<tr>

<td align="left">6 7 8 9 10 </td>

<td align="left">Pemalas Ceroboh Tinggi Hati Pendendam Kurang Vitamin </td>

<td align="left">-5 -3 -7 -10 -11 </td>

<td align="center">- - - - - </td>

<td align="center">- - X X X </td>

<td align="center">X X - X - </td>

<td align="center">X X X X X </td>

</tr>

<tr>

<td colspan=3><center>Jumlah Poin</center></td>

<td><center>40</center></td>

<td><center>-11</center></td>

<td><center>1</center></td>

<td><center>-36</center></td>

</tr>

</table>

Source : Forbes Magazine - February, 2011 

By: 

Rubika Nastiti (Team Leader) 

Muhammad Yoga Pratama 

Khoirul Hamzah 

Vike Dita A 

Yuliana Sandy Waloyo 

<center><img src="gambar.jpg" border=10/></center>

</body>

</html>

Hasilnya :

H. Tinjauan Referensi

Tim Guru Mata PelajaranProduktif TKJ. Modul 2: Komponen HTML Lanjut. Kepanjen: SMK Industri Al Kaaffah. 2014.

Knowledge Cafe of SMK INDUSTRI AL-KAAFFAH

Selasa, 18 November 2014

Hasil Laporan Praktikum WEB browser

Tidak ada komentar:

Posting Komentar