Studi Kasus (Modul 2)

Diposting oleh | Sabtu, 12 Februari 2011  at 05.29
Labels :

Tampilan Halaman Web:
                                  index.html 


                                          film.html


                                          dokumen.html


                                          musik.html

Halaman web diatas merupakan sebuah halaman website yang 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 telah disediakan. Halaman Web ini memanfaatkan elemen tabel dan hyperlink.
Untuk membuat tampilan halaman web seperti diatas digunakan script html 5 seperti dibawah ini:
index.html : 

<!-- 
Design By Rastra Feryd Permana 
109533423226 
 S1 Pend. Teknik Informatika 2009/B 
 -->
<!DOCTYPE HTML>
<html lang = "en">
<head>
<link rel="shortcut icon" href="http://localhost/modul2/studikasus/images/icon.ico">
<title>Download Dataku</title>
</head>
<body >
<center><font face = "impact" size = 5 color = "blue">..:: Welcome To Rastra Server ::..</font>
<br>
<img src="http://localhost/modul2/studikasus/images/banner.gif"/></center>
<br>
<table align ="center" border = 0 bgcolor="white" cellspacing=0>
<tr>
<th width = "15" height = "60" bgcolor = "red"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/film.html">Film</a></th>
<th width = "15" height = "60" bgcolor = "white"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/dokumen.html">Dokumen</a></th>
<th width = "15" height = "60" bgcolor = "white"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/music.html">Musik</a></th>
<th width = "15" height = "60" bgcolor = "red"></th>
</tr>
<tr>
<td bgcolor="red"></td>
<td><img src="http://localhost/modul2/studikasus/images/film.jpg" width="200" height="300"></td>
<td bgcolor="white"></td>
<td><img src="http://localhost/modul2/studikasus/images/dokumen.jpg" width="200" height="300"></td>
<td bgcolor="white"></td>
<td><img src="http://localhost/modul2/studikasus/images/musik.jpg" width="200" height="300"></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td colspan=7 bgcolor = "red" align="center">
Copyright &copy; Rastra Feryd Permana
</td>
</tr>
</table>
</body>
</html>

film.html : 

<!-- 
Design By Rastra Feryd Permana 
109533423226 
 S1 Pend. Teknik Informatika 2009/B 
 -->
<!DOCTYPE HTML>
<html lang = "en">
<head>
<link rel="shortcut icon" href="http://localhost/modul2/studikasus/images/icon.ico">
<title>Download Dataku</title>
</head>
<body>
<center>
<font face = "impact" size = 5 color = "blue">..:: Welcome To Rastra Server ::..</font>
<br>
<img   src="http://localhost/modul2/studikasus/images/banner.gif"/></center><br>
<br>
<table align = "center" border = 0 bgcolor="yellow" cellspacing=0>
<tr>
<th width = "15" height = "60" bgcolor = "red"></th>
<th width = "200" height = "60" bgcolor = "#FFFF00">
<a href="http://localhost/modul2/studikasus/film.html">Film</a></th>
<th width = "15" height = "60" bgcolor = "white"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/dokumen.html">Dokumen</a></th>
<th width = "15" height = "60" bgcolor = "white"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/music.html">Musik</a></th>
<th width = "15" height = "60" bgcolor = "red"></th>
</tr>
<tr>
<td bgcolor="red"></td>
<td colspan=5 bgcolor = "#FFFF00">
<ol>
<li><a href = "movie.avi">Hantu Jeruk Purut</a></li>
<li><a href = "movie.avi">Arwah Goyang Karawang</a></li>
<li><a href = "movie.avi">Air Terjun Pengantin</a></li>
<li><a href = "movie.avi">Alangkah, Lucunya Negeri ini</a></li>
<li><a href = "movie.avi">Harry Potter 7 Part I</a></li>
<li><a href = "movie.avi">Triggerman</a></li>
<li><a href = "movie.avi">The Way Back</a></li>
<li><a href = "movie.avi">The Rite</a></li>
<li><a href = "movie.avi">The Descent: Part 2</a></li>
<li><a href = "movie.avi">Waiting For Superman</a></li>
<li><a href = "movie.avi">American Pie 7 (The Book Of Love)</a></li>
</ol></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td colspan=7 bgcolor = "red" align="center">
Copyright &copy; Rastra Feryd Permana
</td>
</table>
</body>
</html>

dokumen.html : 

<!-- 
Design By Rastra Feryd Permana 
109533423226 
 S1 Pend. Teknik Informatika 2009/B 
 -->
<!DOCTYPE HTML>
<html lang = "en">
<head>
<link rel="shortcut icon" href="http://localhost/modul2/studikasus/images/icon.ico">
<title>Download Dataku</title>
</head>
<body>
<center>
<font face = "impact" size = 5 color = "blue">..:: Welcome To Rastra Server ::..</font>
<br>
<img   src="http://localhost/modul2/studikasus/images/banner.gif"/></center><br>
<br>
<table align = "center" border = 0 bgcolor="yellow" cellspacing=0>
<tr>
<th width = "15" height = "60" bgcolor = "red"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/film.html">Film</a></th>
<th width = "15" height = "60" bgcolor = "white"></th>
<th width = "200" height = "60" bgcolor = "#FFFF00">
<a href="http://localhost/modul2/studikasus/dokumen.html">Dokumen</a></th>
<th width = "15" height = "60" bgcolor = "white"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/music.html">Musik</a></th>
<th width = "15" height = "60" bgcolor = "red"></th>
</tr>
<tr>
<td bgcolor="red"></td>
<td colspan=5 bgcolor = "#FFFF00">
<ol>
<li><a href = "modul.doc">Struct, Array, Pointer</a></li>
<li><a href = "modul.doc">Sorting</a></li>
<li><a href = "modul.doc">Searching</a></li>
<li><a href = "modul.doc">Stack</a></li>
<li><a href = "modul.doc">Queue</a></li>
<li><a href = "modul.doc">Single Linked List</a></li>
<li><a href = "modul.doc">Double Linked List</a></li>
<li><a href = "modul.doc">Rekursif</a></li>
<li><a href = "modul.doc">Tree</a></li>
<li><a href = "modul.doc">Hashing Table</a></li>
<li><a href = "modul.doc">Manipulation File</a></li>
</ol>
</td>
<td bgcolor="red"></td>
<tr>
<td colspan=7 bgcolor = "red" align="center">
Copyright &copy; Rastra Feryd Permana
</td>
</table>
</body>
</html>

musik.html : 

<!-- 
Design By Rastra Feryd Permana 
109533423226 
 S1 Pend. Teknik Informatika 2009/B 
 -->
<!DOCTYPE HTML>
<html lang = "en">
<head>
<link rel="shortcut icon" href="http://localhost/modul2/studikasus/images/icon.ico">
<title>Download Dataku</title>
</head>
<body>
<center>
<font face = "impact" size = 5 color = "blue">..:: Welcome To Rastra Server ::..</font>
<br>
<img   src="http://localhost/modul2/studikasus/images/banner.gif"/></center><br>
<br>
<table align = "center" border =0 bgcolor="yellow" cellspacing=0>
<tr>
<th width = "15" height = "60" bgcolor = "red"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/film.html">Film</a></th>
<th width = "15" height = "60" bgcolor = "white"></th>
<th width = "200" height = "60" bgcolor = "#66FF33">
<a href="http://localhost/modul2/studikasus/dokumen.html">Dokumen</a></th>
<th width = "15" height = "60" bgcolor = "white"></th>
<th width = "200" height = "60" bgcolor = "#FFFF00">
<a href="http://localhost/modul2/studikasus/music.html">Musik</a></th>
<th width = "15" height = "60" bgcolor = "red"></th>
</tr>
<tr>
<td bgcolor="red"></td>
<td colspan=5 bgcolor = "#FFFF00">
<ol>
<li><a href = "music1.mp3">Astrid - Tak Ingin Dintai </a></li>
<li><a href = "music2.mp3">Kerispatih - Tetap Mengerti</a></li>
<li><a href = "music3.mp3">Bondan ft. Fade2Black - Kita Selamanya</a></li>
<li><a href = "music4.mp3">Seventeen - Jaga Selalu Hatimu</a></li>
<li><a href = "music5.mp3">Ungu - Percaya Padaku</a></li>
<li><a href = "music6.mp3">Kangen Band - Jangan Bertengkar Lagi</a></li>
<li><a href = "music7.mp3">Irwansyah - Tentang Perasaanku</a></li>
<li><a href = "music8.mp3">Smash - I Heart You</a></li>
<li><a href = "music9.mp3">Agnes Monica - Karena Ku Sanggup</a></li>
<li><a href = "music10.mp3">Ari Lasso - Cinta Terakhir</a></li>
<li><a href = "music11.mp3">ST 12 - Dunia Pasti Berputar</a></li>
</ol>
</td>
<td bgcolor="red"></td>
<tr>
<td colspan=7 bgcolor = "red" align="center">
Copyright &copy; Rastra Feryd Permana
</td>
</table>
</body>
</html>


Dalam pembuatan halaman web seperti diatas diperlukan 4 halaman web yakni: index.html, film.html, dokumen.html dan music.html. Dari masing-masing halaman web diatas akan saling berhubungan satu sama lain dengan menggunakan link yang sudah  dimasukkan dalam kode html.

Jika Anda ingin mencoba tampilan halaman web diatas, download scriptnya dibawah ini setelah itu extract lalu pindahkan file extract tadi ke C:/XAMPP/htdocs (jika Anda menggunakan web server Jenis XAMPP) dan apabila Anda ingin menggunakan WAMP server pindahkan file extract tadi ke C:/WAMP/www. Kemudian ketika ingin menampilkannya aktifkan web server Anda kemudian ketik http://localhost/htdocs/modul2/studikasus/index.html (XAMPP) atau http://localhost/modul2/studikasus/index.html (WAMP) pada web browser Anda (Mozilla Firefox). 
Untuk melihat tampilan halaman web sesungguhnya klik disini ! 
Selamat Mencoba. . . .    

Artikel Terkait

INFO TECHNO KOMPAS

Memuat...

INFO CHAT

INFO FEEDJIT

INFO RASTRAPERMANA

 
Copyright © 2009 - 2013 info-rastrapermana
Avatar Gamezine Designed by Cheapest Tablet PC
Supported by Phones 4u