~my subjective opinion~: Laporan 1 Praktikum Bahasa Pemrograman Web

    TUGAS PRAKTIKUM
1. Membuat kreasi grafik batang dengan memanfaatkan elemen tabel
    - Source Code :

 <textarea cols="65" readonly="textarea" rows="5">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>Grafik Berbasis Tabel</title> </head> <body background="1.png "> <body> <table frame="above" align="center" cellspacing=5 cellpadding=5> <tr> <th width="250">Perusahaan</th> <th width="90" colspan=3></th> <th width="170" colspan=3>Pendapatan</th> </tr> <tr> <td>Angin Reboot Ltd</td> <td width="32"></td> <td width="50"></td> <td width="21"></td> <td width="140" colspan="2" bgcolor="green"></td> <td width="30" align="left">+150%</td> </tr> <tr> <td>Command Prompt, Inc</td> <td width="32"></td> <td width="50"></td> <td width="21"></td> <td width="55" bgcolor="green"></td> <td width="85" align="left">+55%</td> <td width="38"></td> </tr> <tr> <td>Hibernate Ltd</td> <td width="32"></td> <td width="50" align="right">-23%</td> <td width="21" bgcolor="yellow"></td> <td width="55"></td> <td width="90"></td> <td width="40"></td> </tr> <tr frame="below"> <td>Shutdown Ltd</td> <td width="32" align="right">-75%</td> <td width="50" colspan="2" bgcolor="red" border=></td> <td width="55"></td> <td width="85"></td> <td width="38"></td> </tr> </body> </html>

- Tampilan

2. Membuat desain tabel perbandingan item dengan memanfaatkan fitur pengelompokkan

- Source Code
<!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>Grafik Berbasis Tabel</title> </head> <body background="on.jpg"> <h3 align="center">Perbandingan Fitur</h3> <body> <table border=1 align="center" cellspacing=0 cellpadding=5> <tr> <th width="20">No</th> <th width="220">Fitur</th> <th width="120">Enterprise</th> <th width="100" colspan=2>Pro Free</th> </tr> <tr> <td>1 <br>2 <br>3 <br>4 <br>5 </td> <td>Garansi Seumur Hidup <br>Multiuser <br>Update otomatis <br>Cetak laporan <br>Notifikasi error </td> <td align="center">X <br>X <br>X <br>X <br>X </td> <td>- <br>- <br>X <br>X <br>X </td> <td>- <br>- <br>- <br>- <br>X </td> </tr> <tr> <td width="30">6 <br>7 </td> <td width="180">Ubah tema <br>Try ikon </td> <td width="50" align="center">X <br>X </td> <td width="40" align="left">X <br>X </td> </body> </html> </table> </body> </html>

- STUDI KASUS
# Membuat desain Frame
- Source Code
1. Tampilan Tengah

 <!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>WELCOME</title> </head> <frameset rows="15%,*,10%"> <frame src="atas.html" name="atas" id="atas"/> <frameset cols="20%,*,20%"> <frame src="kiri.html" name="kiri" id="kiri"/> <frame src="smuanyo.html" name="tengah" id="tengah"/> <frame src="kanan.html" name="kanan" id="kanan"/> </frameset> <frame src="bawah.html" name="bawah" id="bawah"/> </frameset> </html>

- Sub Film (beberapa diantaranya)
- Drama

 <!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"> <HTML> <HEAD> <TITLE> DRAMA </TITLE> <BASE href="http://blackuro.blogspot.com"></HEAD> <BODY background='pik.jpg' width= 1100 height=500></center><hr>/> </HTML> <a href="http://blackuro.blogspot.com" title="Owner's Official blog"> <center><img src="str.jpg" width="700" height="300"></center><hr><hr> </a> <ul> <a href="me.html" target="_blank" title="Title Link">About Me</a></a> <a href="mailto:a.jenk21@gmail.com">Contact Me</a> <br /> <br /> <li><a href="bann.html" target="_blank" title="Title Link">Back to Film Page</a></li> </ul> <font color="black" face="Calibri"><h1 align="center"><b>REFERENSI FILM</b></h1> <font color="black" face="Calibri"><h1 align="center"><b>DRAMA</b></h1> <center><img src="003.gif"></center> </a> <br /> <br /> <ul> <H3><p>1. PURSUIT OF HAPPINESS</p></H3> <center><img src="pursu.jpg"></center> <P>Film yang mengisahkan kehidupan sebenarnya dari seorang Christopher Gardner, seorang tuna wisma dan single parents yang berjuang dalam hidup bersama anaknya hingga berhasil menjadi jutawan dan CEO sebuah perusahaan stockbroker ternama di Amerika yaitu Christopher Gardner International Holdings dengan kantor yang kini tersebar di New York, Chicago, and San Francisco. Dari seorang yang miskin hingga menjadi jutawan, pastilah sebuah kisah yang sudah pasti akan mengundang rasa kagum dan menarik untuk kita ketahui. Sebuah moment yang yang mampu menyentuh emosional terdalam dan bersatu dalam sebuah konteks kehidupan spritual akan sebuah arti kehidupan itu sendiri.</P> <P>The Pursuit of happiness adalah salah satu film yang layak anda tonton. Banyak pelajaran hidup yang dapat diambil didalamnya. Menceritakan bagaimana sebuah kerja keras dan devotion seorang ayah terhadap anaknya membawa kebahagiaan pada akhirnya. Kita tidak tahu betapa mewahnya sebuah pertolongan bila kita tidak pernah kesulitan. Dan betapa indahnya kebahagiaan, bila tidak pernah merasakan penderitaan. Salah satu pelajaran hidup yang priceless.</P> <P>Mungkin yang perlu kita pertanyakan dari kisah tersebut adalah bagaimana kita mengartikan sebuah kebahagiaan. Bukan hasil pencapaiannya, namun prosesnya. Karena Seorang milyuner seperti Gardner sekalipun pernah membuat keluarganya kelaparan. Pernah mengalami derita yang tak terbayangkan. Sangat beda dari film-film yang selalu berisi anak seorang kaya yang kemudian menjadi lebih kaya lagi kemudian hidup bahagia. Ini adalah cerita nyata yang juga dialami oleh ratusan juta orang di muka bumi. Apa yang dapat kita pelajari dari Chris Gardner dalam meraih kesuksesannya? Mempertahankan keluarganya? Apakah takdir yang menemukan kita ataukah kerja keras dan kesabaran yang membawa kita menuju takdir kita? Satu hal mungkin yang harus kita ingat sebagai pelajaran, kita tidak pernah tahu apa yang orang lain telah lalui ketika kita membentuk ekspektasi kita.</P> <br /> <br /> <H3><P>2. HACHIKO A DOG STORY</P></H3> <center><img src="hachi.jpg"></center><hr> <P>Ada yang bilang kalau anjing adalah teman terbaik manusia. Mungkin tidak salah juga kalau melihat kisah yang dialami oleh Parker Wilson (Richard Gere) dan anjing kesayangannya. Kisah persahabatan Parker dan anjing bernama Hachiko ini bahkan mampu memberikan inspirasi pada seluruh warga kota tentang makna persahabatan sesungguhnya.</P> <P>Pertemuan antara Parker dan Hachiko pun sebenarnya terjadi tanpa sengaja. Hachiko adalah anjing tanpa tuan yang ditemukan Parker saat ia pulang kerja. Parker sebenarnya bermaksud mencari pemilik Hachiko untuk mengembalikan anjing ini namun saat usaha itu tak menemui jalan Parker akhirnya memutuskan untuk memelihara Hachiko.</P> <p>Setiap hari Hachiko selalu mengantar Parker ke stasiun saat pria yang bekerja sebagai dosen ini berangkat kerja. Dan setiap sore pula Hachiko datang menjemput Parker ke stasiun saat ia pulang kerja. Suatu ketika, Parker berangkat kerja seperti biasa namun tak pernah kembali ke stasiun itu. Parker meninggal sebelum ia pulang. Hachiko yang tak tahu kalau majikannya telah tiada tetap datang setiap sore berharap bertemu Parker lagi.</p> <p>Hari berlalu dan sembilan tahun sudah Hachiko selalu datang ke stasiun untuk menjemput majikannya. Meski Hachiko tak pernah lagi bertemu Parker namun Hachiko tak pernah menyerah.</p> <P>Menguras air mata. Sepertinya hanya itu kalimat yang paling tepat menggambarkan film berjudul HACHIKO: A DOG'S STORY ini. Kisahnya sendiri sebenarnya tak bisa dibilang baru karena kisah persahabatan antara manusia dan anjing memang sudah berkali-kali dituangkan ke layar lebar. Kalaupun ada yang menarik hanyalah gambaran kesetiaan Hachiko, sang anjing, yang tetap datang ke stasiun menunggu tuannya datang meski pada kenyataannya tuannya tak pernah kembali lagi.</P> <br /> <br /> </body> </html>

- Cartoon

 <!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"> <HTML> <HEAD> <TITLE> CARTOON 3D </TITLE> <BASE href="http://blackuro.blogspot.com"></HEAD> <BODY background='pik.jpg' width= 1100 height=500></center><hr>/> </HTML> <ul> <a href="http://blackuro.blogspot.com" title="Owner's Official blog"> <center><img src="str.jpg" width="700" height="300"></center><hr><hr> </ul> </a> <ul> <a href="me.html" target="_blank" title="Title Link">About Me</a></a> <a href="mailto:a.jenk21@gmail.com">Contact Me</a> <br /> <br /> <li><a href="bann.html" target="_blank" title="Title Link">Back to Film Page</a></li> </ul> <font color="black" face="Calibri"><h1 align="center"><b>REFERENSI FILM</b></h1> <font color="black" face="Calibri"><h1 align="center"><b>CARTOON 3D</b></h1> </a> <ul> <H3><P>1. UP</P></H3> <center><img src="up.jpg" ,width="100"></center> <P>Keliling dunia dengan balon. begitulah kesan pertama yang didapat ketika menonton film ini. Film ini mengisahkan seorang kakek yaitu Carl Fredrickson, yang sudah harus dimasukkan ke panti jompo karena sudah tidak ada yang merawatnya dan mulai meresahkan masyarakat. Akan tetapi, ada satu cita-cita Carl dengan mendiang istrinya - Ellie Fredricksen, sejak mereka berteman waktu kecil yang belum terlaksana, yaitu, pergi ke Paradise Falls di Amerika Selatan. Sayangnya sang istri sudah meninggal. Janji tetap janji, pada hari yang seharusnya Carl dijemput untuk dipindahkan ke panti jompo, ternyata rumah Carl telah dipasangi sepuluh ribu balon gas helium, tekanan balon yang sangat kuat membuat retakan diseluruh bagian bawah rumah, dan menerbangkan rumah tersebut. Carl akhirnya terbang bersama rumahnya. Ketika dikira ia akan berpetualan sendirian, seorang anak kecil bernama Russel , mengetuk pintu rumahnya, Disaat sedang terbang!. Russel yang berusia 8 tahun tipikal anak yang lugu, lucu, bawel namun memendam kesepian yang dalam. Russel, seorang pramuka yang ingin melengkapi emblem kepanduannya, menyimpan kerinduan yang sangat terhadap kehadiran seorang ayah.</P> <P>Carl dan Russel akhirnya menjalani petualangan berdua. di tengah perjalanan, Russell menemukan Kevin, seekor burung raksasa yang menyerupai burung unta, dan mereka menjadi sahabat baik karena Kevin menyukai cokelat, dan Russell punya banyak coklat. Carl sempat tidak menyukai Kevin, lalu Carl bertemu dengan Dug, seekor anjing yang dapat bicara dengan sebuah alat pada leher dug. Namun, Dug mempunyai tiga musuh yaitu alfa,belda,delta. Sekawanan anjing tersebut ternyata dimiliki oleh Charles Muntz, pahlawan Carl dari kecil.</P> <P>Charles Muntz diusir dari tempat tinggalnya karena telah menyebarkan berita bohong tentang makhluk asing dari Paradise Falls. ketika Carl menyadari susunan tulang mahluk asing tersebut sangat mirip dengan Kevin, ia pun bergegas pergi dari kediaman Charlez. tapi Charles tahu bahwa Carl memiliki Kevin, ia menyuruh anjing-anjingnya untuk mengejar Carl dan Russell serta Kevin yang melarikan diri. namun usaha pengejaran Charles sia-sia karena mereka berhasil lolos tapi Carl harus kehilangan rumah kenangannya dengan Ellie yang jatuh dari ketinggian ketika akan menyelamatkan diri.</P> <P>Russell dan Carl, pulang ketempat asalnya dengan kapal raksasa Muntz dan mereka menghadiri upacara yang diikuti Russell. Russell mengangkat Carl sebagai ayah angkatnya, sementara Kevin sudah pulang ketempat asalnya dan Dug menjadikan Carl sebagai pemilik barunya. Dug, Carl, dan Russell hidup bahagia, sementara saat kembali ke Paradise Falls, rumah Carl dan Ellie mendarat dengan sempurna di Paradise Falls, tepat seperti gambar dari lukisan yang mereka impikan selama 70 tahun.</P> <br /> <br /> <H3><P>2. SHREK FOREVER AFTER</P></H3> <center><img src="shrek.jpg" ,width="100"></center> <P>Post Power Syndrome memang bukan masalah yang ringan. Sindrom hilangnya kekuasaan ini sering kali mengacaukan hidup seseorang dan itulah yang terjadi pada Shrek (Mike Myers) setelah ia memutuskan hidup tenang dan menikahi Putri Fiona (Cameron Diaz). Setelah berkeluarga, Shrek bukan lagi ogre yang ditakuti orang seperti dulu. Ia hanyalah pria biasa yang berusaha menjadi kepala rumah tangga yang baik.</P> <P>Suatu ketika masalah yang dihadapi Shrek ini tercium oleh Rumpelstiltskin (Walt Dohrn) yang segera saja memanfaatkan posisi lemah Shrek. Rumpelstiltskin mengatakan kalau ia bisa mengembalikan Shrek seperti dulu kala bila Shrek mau menandatangani perjanjian yang dibuat oleh Rumpelstiltskin.</P> <P>Dalam sekejap mata Shrek berada di dunia lain yang sama sekali bertolak belakang dengan dunia yang ditinggali Shrek. Di dunia asing ini Rumpelstiltskin adalah seorang raja sementara Donkey (Eddie Murphy) adalah seekor keledai ilmuwan. Di dunia aneh ini Lord Farquaad (John Lithgow) ternyata masih hidup dan yang lebih parah lagi adalah kenyataan bahwa Fiona ternyata sama sekali tidak mengenal Shrek.</P> <p>Waktu Shrek tak banyak. Ia hanya akan ada sampai esok hari karena ternyata sebagai imbalan dari apa yang diberikannya, Rumpelstiltskin telah mengambil satu hari terpenting dalam hidup Shrek, hari kelahirannya. Kalau sampai matahari terbit esok hari Shrek tak berhasil mendapatkan ciuman Fiona maka dunia tak akan pernah mengenal Shrek lagi. Celakanya, jangankan bisa mencium Fiona, mendekatinya saja sudah susahnya bukan main.</p> <P>Setelah mendulang cukup banyak dolar dari tiga film SHREK, DreamWorks memutuskan bagian keempat ini adalah bagian terakhir dari SHREK. Jarang ada studio yang berani 'membunuh' sebuah serial yang sangat menguntungkan. Tapi keputusan itu tak salah karena memperpanjang serial ini belum tentu bisa mendatangkan uang lebih banyak lagi.</P> <p>Nyatanya, sebagai sebuah bagian 'perpisahan', SHREK FOREVER AFTER ini memang layak diacungi jempol. Selain dari sisi visual yang jelas jadi lebih baik, kisah yang ditawarkan pun cukup menghibur. Ditambah lagi dengan para pengisi suara yang sepertinya sudah paham benar karakter masing-masing tokoh yang mereka bawakan, pas sudah SHREK FOREVER AFTER ini sebagai sebuah tontonan yang menghibur.</p> <br /> <br /> </ul> </body> </html>

- Sub Music
- Kpop

 <!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"> <HTML> <HEAD> <TITLE> K-POP </TITLE> <BASE href="http://blackuro.blogspot.com"></HEAD> <BODY background='pik.jpg' width= 1100 height=800></center><hr>/> </HTML> <a href="http://blackuro.blogspot.com" title="Owner's Official blog"> <center><img src="str.jpg" width="700" height="300"></center><hr><hr> </a> <ul> <a href="me.html" target="_blank" title="Title Link">About Me</a></a> <a href="mailto:a.jenk21@gmail.com">Contact Me</a> <br /> <br /> <li><a href="music.html" target="_blank" title="Title Link">Back to Music Page</a></li> </ul> <a><font color="black" face="Calibri"><h1 align="center"></b><i>K-POP MUSIC</i></b></h1></a> <br /> <br /> <ul> <H3><P>1. SHINee</P></H3> <left><img src="SHIN.jpg"></left> <ul> <li><a href="stand.html" target="_blank" title="Title Link">Stand By Me</a></li> <li><a href="hello.html" target="_blank" title="Title Link">Hello</a></li> </ul> <br /> <br /> <P><H3>2. FT Island</P></H3> <left><img src="ft.jpg"></left> <ul> <li><a href="losi.html" target="_blank" title="Title Link">Love Sick</a></li> <li><a href="love.html" target="_blank" title="Title Link">Love Love Love</a></li> <br /> <br /> </ul> </ul> </body> </html>

- West

 <!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"> <HTML> <HEAD> <TITLE> WEST</TITLE> <BASE href="http://blackuro.blogspot.com"></HEAD> <BODY background='pik.jpg' width= 1100 height=800></center><hr>/> </HTML> <a href="http://blackuro.blogspot.com" title="Owner's Official blog"> <center><img src="str.jpg" width="700" height="300"></center><hr><hr> </a> <ul> <a href="me.html" target="_blank" title="Title Link">About Me</a></a> <a href="mailto:a.jenk21@gmail.com">Contact Me</a> <br /> <br /> <li><a href="music.html" target="_blank" title="Title Link">Back to Music Page</a></li> </ul> <a><font color="black" face="Calibri"><h1 align="center"></b><i>WEST MUSIC</i></b></h1></a> <br /> <br /> <ul> <H3><P>1. Michael Buble</P></H3> <left><img src="buble.jpg"></left> <ul> <li><a href="every.html" target="_blank" title="Title Link">Everything</a></li> <li><a href="wonder.html" target="_blank" title="Title Link">What a Wonderfull World</a></li> </ul> <br /> <br /> <P><H3>2. Lene Marlin</P></H3> <left><img src="lene.jpg"></left> <ul> <li><a href="dis.html" target="_blank" title="Title Link">Disguise</a></li> <li><a href="day.html" target="_blank" title="Title Link">Another Day</a></li> <br /> <br /> </ul> </ul> </body> </html>

2. Tampilan Kanan

 <!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></title> </head> <BODY background='chm.jpg'></center><hr>/> <body> <a><font color="black" face="Calibri"><h1 align="center"></b><i>DAFTAR LINK</i></b></h1></a> <li><a href="http://blackuro.blogspot.com.com" target="_blank" title="Title Link"> MY BLOG</a></li>v <li><a href="http://ondstreet.blogspot.com" target="_blank" title="Title Link">Intan's Blog</a></li>v <li><a href="http://binnerrs.blogspot.com" target="_blank" title="Title Link">Roisa's Blog</a></li>v <li><a href="http://sthrei.blogspot.com" target="_blank" title="Title Link">Resti's Blog</a></li>v </body> </html>

3. Tampilan Kiri

 <!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></title> </head> <BODY background='chm.jpg'></center><hr>/> <body> <a href="http://um.ac.id" title="State University of Malang"> <img src="um-tlu.png" align="center" /> <br/> <li><a href="http://blogger.com" target="_blank" title="Title Link"> Blogger</a></li>v <li><a href="http://facebook.com" target="_blank" title="Title Link">Facebook</a></li>v <li><a href="http://twitter.com" target="_blank" title="Title Link">Twitter</a></li>v <li><a href="http://ajangkompetisi.com" target="_blank" title="Title Link">Ajang Kompetisi</a></li>v </body> </html>

4. Tampilan Bawah

 <!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></title> </head> <BODY background='clo.jpg'></center><hr>/> <body> <h4><a href="me.html" align="center"><> Author : Rahajeng K.S</a></h4>v </body> </html>

5. Tampilan Atas

<!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></title> </head> <BODY background='clo.jpg'></center><hr>/> <a href="mailto:a.jenk21@gmail.com">Contact Me</a> <body> <a><font color="black" face="Calibri"><h1 align="center"></b><i>ALL ABOUT FILM AND MUSIC</i></b></h1></a> </body> </html>
Tampilan

(tampilan utama web)

- Terdapat 5 bagian frame, yakni bagian :
1. Atas   : yang tersambung pada mail apllication
2. Kiri    : tersambung pada berbagai link, seperti link UM (gambar) dan lain-lain
3. Tengah    : tersambung pada html lain, yaitu html music dan html film, selain itu    ada back to main page <tampilan awal>
4. Kanan :   Tersambung ke link blog – blog
5. Bawah : tersambung ke profile author

Tampilan Sub Musik<kanan> dan film <kiri>

Tampilan Profile Author

- Pada sub drama terdapat link yang mengarah ke html lain,
- Pada Film : Hororr, adventure, drama, dan cartoon, di dalamnya terdapat pilihan link yang mengarah pada pilihan judul film, bila judul film diklik maka akan menunjukkan resensi film yang dipilih.

Cuplikan resensi dari genre film yang dipilih

- Pada Music : west dan k-pop,di dalamnya terdapat link yang mengarah ke html pilihan musisi dan lirik lagunya yang ingin dibaca. Bila judul lagu diklik maka akan menampilkan lirik secara keseluruhan.