Desain Dan Pemrograman Web

Sunday, 9 February 2014

PRATIKUM DESAIN DAN PEMROGAMAN WEB
BAB                :  HTML DAN CSS
TEMA             : PUSAT STUDY ANIMASI, GAME DAN MULTIMEDIA

SOAL
  1. 1.       Buatlah desain layout web anda sesuai dengan tema projek yang telah anda pilih. Gunakan CSS Eksternal untuk mendesain layout anda.
  2. 2.       Gabungkan hasil slicing dengan CSS atau HTML yang telah anda buat.lalu sesuaikan tampilan pada desain html dan css anda, seperti tampilan pada desain photoshop yang telah anda buat.
  3. 3.       Isi content web anda dengan artikel , link dan gambar atau media lainnya sesuai dengan tema projek.
Jawab :

1.     Css dan html coding :

<!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">
<head>
<title>Latihan 3.3</title>
<style type="text/css">

.container{
        width:960px;
        height:auto;
        margin:auto;
}

.header{
        width:940px;
        min-height:100px;
        background:#aaa;
}

.sidemenu{
        width:200px;
        min-height:300px;
        background:#bbb;
        margin-right:5px;
}

.content{
        width:715px;
        min-height:300px;
        background:#ccc;
}

.footer{
        width:940px;
        min-height:50px;
        background:#ddd;
}

.header, .sidemenu, .content, .footer{
        float:left;
        padding:10px;
        margin-bottom:5px;
        text-align:center;
}

</style>
</head>

<body>
<div class="container">
        <div class="header"><h2>header</h2></div>
        <div class="sidemenu"><h2>menu samping</h2></div>
        <div class="content"><h2>content web</h2></div>
        <div class="footer"><h2>footer</h2></div>
</div>
</body>
</html>

ScreenShoot Desain layout web









3.      CSS CODE
@charset "utf-8";
/* CSS Document */

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h2, h2, h3, h4,h5, h6, noframes,ol, p, ul, li, center,dir, hr, menu, pre, img   {
  margin:0;
  padding:0;
  display: block;
  unicode-bidi: embed;
  border:none;
}

.left{
        float: left;
}
.right{
        float: right;
}
.clear{
        clear:both;
}
.center {
        text-align:center;
}
.text {
        margin-bottom:10px;
        margin-left:10px;
        margin-right:10px;
        margin-top:10px;
}

.search {
        right: 5px;
        position:absolute;
}
#foto {
        background-image:url(images/butterfly.swf);
        width:180px;
        height:180px;
}
#container{
        width: 960px;
        height: 960px;  
        margin: 0 auto;
        border: 0px solid black;

}

#header-atas {
        background-image:url(images/latihan-1_01.gif);
        background-repeat:no-repeat;
        width:960px;
        height:200px;
        padding:0px;
}

#body {
        background-color:transparent;
        width:960px;
        height:640px;
        padding:0px;
}

#body-kiri {
        background-color:transparent;
        width:220px;
        height:640px;
        padding:0px;
}

#menu-kiri {
        background-color:transparent;
        width:220px;
        height:120px;
        padding:0px;
}

#menu-kiri-atas {    
        background-image:url(images/button1.png);
        background-repeat:no-repeat;
        width:180px;
        height:40px;
        margin-left:20px;
        margin-right:20px;
        padding:0px;
}
#menu_1,about_us_2,contact_us_3,menu_21,about_us22,contact_us_33,
#menu_1 {
        background-repeat:no-repeat;
        width:180px;
        height:40px;
        margin-left:20px;
        margin-right:20px;
        padding:0px;
}
#about_us_2{
        background-image:url(images/button4.png);
}
#contact_us_3 {
        background-image:url(images/button3.png);
}
#menu_21 {
        background-image:url(images/button2.png);
}
#about_us_22{
        background-image:url(images/button44.png);
}
#contact_us_23 {
        background-image:url(images/button33.png);
}

#conten-kalender {
        background-color:transparent;
        width:180px;
        height:240px;
        margin-top:160px;
        margin-left:20px;
        margin-right:20px;
}

#conten-judul-kalender {
        background-color:transparent;
        width:180px;
        height:40px;
}

#conten-isi-kalender {
        background-color:transparent;
        width:180px;
        height:200px;
       
}

#body-tengah {
        background-color:transparent;
        width:520px;
        height:640px;
        padding:0px;
}

#body-kanan {
        background-color:transparent;
        width:220px;
        height:600px;
        padding:0px;
}

#body-kanan-conten {
        background-color:transparent;
        width:180px;
        height:480px;
        padding:0px;
        margin-top:40px;
        margin-left:20px;
        margin-right:20px;
}

#body-kanan-isi-conten {
        background-color:transparent;
        width:180px;
        height:160px;
}

#body-kanan-isi-conten-judul {
        background-image:url(images/button1.png);
        width:180px;
        height:40px;
}

#body-kanan-isi-conten-isi {
        background-image:url(images/123_06.gif);
        width:180px;
        height:140px;
}

#body-tengah-atas {
        background-color:transparent;
        width:520px;
        height:320px;
}

#body-tengah-atas-judul {
        background-image:url(images/button%20tengah.png);
        width:520px;
        height:40px;
}

#body-tengah-atas-isi {
        background-image:url(images/isi%20body.png);
        width:520px;
        height:280px;
}

#body-tengah-bawah {
        background-color:transparent;
        width:520px;
        height:320px;
}

#body-tengah-bawah-judul {
    background-image:url(images/button%20tengah.png);
        width:520px;
        height:40px;
}

#body-tengah-bawah-isi {
        background-image:url(images/isi%20body.png);
        width:520px;
        height:280px;
}

#footer {
        background-image:url(images/footer%20ke%202.png);
        width:960px;
        height:80px;
        padding:0px;
}
                                                   




HTML 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">
<head>
<script language="javascript" type="text/javascript" >
<!-- hide

function jumpto(x){

if (document.form1.jumpmenu.value != "null") {
document.location.href = x
}
}

// end hide -->
</script>

<script type="text/javascript">
<!--
                alert('WELCOME TO MY WEBSITE!');
-->
</script>
<script type="text/javascript" src="file:///D|/smester 3/DPW/Materi web/materi jquery/js/jquery-1.6.4.js">
</script>
<script type="text/javascript">
                $(document).ready (function(){
                                $(".hide").click(function(){
                                  $("#foto").hide("slow");
                });
                    $(".show").click (function(){
                      $("#foto").show("slow");
                  });
                });
   </script>
  
<title>nora rara</title>
<link rel="stylesheet" href="home.css">
<style type="text/css">
#body, html {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth508.ani), url(http://cur.cursors-4u.net/others/oth-5/oth508.png), progress !important; auto;}
body{
                /* Safari 5.1, Chrome 10+ */
                background:#0FF , -o-linear-
                gradient (45deg,#eee, #fff);
                background-repeat:repeat;
                /* Firefox 3.5+ */
                background-image:#0FF;
                background-repeat:repeat;
                /* Opera 10.11+ */
                background:#0FF , -o-linear-
                gradient (45deg,#eee, #fff);
                background-repeat:repeat;
                font-family:Verdana, Geneva, sans-serif;
                font-size:11px;
                /* chrome*/
                background-image:url(images/toybirds-floralpat2-27.png);
                background-repeat:repeat;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body bgcolor="white" text="black" onload="waktu()">
                <div id="container">
                                <div id="header-atas">
        </div>
        <div id="body">
                <div class="left">
                <div id="body-kiri">
                                <div id="menu-kiri">
                                <div id="menu-kiri-atas">
                            <div class="center">
                                <p style="font-size:18px" align="center">MENU</p>
                            </div>
                        </div>
                        <div id="menu-kiri-atas">
                                <div class="center">
                                <p style="font-size:18px" align="center"><a href="about us.html">ABOUT US</a></P>
                            </div>
                        </div>
                        <div id="menu-kiri-atas">
                                <div class="center">
                                <p style="font-size:18px" align="center"><a href="contack us.html">CONTACT US</a>
                            </div>
                          
                        </div>
                    </div>
                    <div id="conten-kalender">
                                <div id="conten-judul-kalender">
                                <center><script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="5012-black.swf";obj.TimeZone="JOG";obj.width=91;obj.height=30;obj.wmode="transparent";showClock(obj);</script>
                            </center>
                           
                           
                            </div>
                        <div id="conten-isi-kalender" align="center">
                       
                  <!-- JavaScript examples by Quackit.com -->
<script type="text/javascript">
<!--
// Pre load images for rollover
if (document.images) {
                smile = new Image
                nosmile = new Image

                smile.src = "http://www.quackit.com/pix/smile.gif"
                nosmile.src = "http://www.quackit.com/pix/nosmile.gif"
}


function swapImage(thisImage,newImage) {
                if (document.images) {
                                document[thisImage].src = eval(newImage + ".src")
                }
}
-->
</script>
<a href="http://www.quackit.com/javascript/image_rollovers.cfm"
onMouseOver="swapImage('jack','smile')"
onMouseOut="swapImage('jack','nosmile')">
<img src="http://www.quackit.com/pix/nosmile.gif"
                width="180"
                height="176"
                border="0"
                alt="Picture of Jack"
                name="jack">
</a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="left">
                <div id="body-tengah">
                                <div id="body-tengah-atas">
                                <div id="body-tengah-atas-judul">
                               
                             <p style="font-size:18px" align="center"> Latar Belakang</p>
                             <marquee onmouseover="This.stop()" onmouseout="this.start" width="500" style="margin-left:10px;">Berjalan bolak baliknews news newsBerjalan bolak baliknews news news</p></marquee>
                           
                        </div>
                        <div id="body-tengah-atas-isi" align="center"><b><br/>Era informasi memberikan ruang lingkup yang sangat besar <br/>untuk mengorganisa sikan segala kegiatan melalui cara baru,<br/>
 inovatif, instan, transparan, akurat, <br/>tepat waktu, lebih baik, memberikan kenyamanan yang lebih dalam <br/>mengelola dan menikmati kehidupan.<br/>
 Dengan teknologi informasi dan komunikasi <br/>semua proses kerja dan konten akan ditransformasikan<br/> dari fisik dan statis menjadi digital,<br/>
 mobile, virtual dan personal.<br/>

Dalam hal multimedia dan Game Komputer .<br/> Teknologi yang sudah dikenal luas dan menjadi <br/>bagian dari gaya hidup masyarakat saat ini.
 Disisi lain,<br/> perkembangan dunia komputerpun telah memberikan dampak pada inovasi<br/> teknologi pembelajaran, baik dari sisi materi maupun prosesnya.<br/>
 Dengan demikian,<br/> sinergi antara multimedia,<br/> game dan teknologi pembelajaran akan memberikan nilai<br/> lebih bagi pemanfaatan <br/>
 teknologi komputer dalam kehidupan manusia.</b>
                        </div>
                        <div id="body-tengah-bawah">
                                <div id="body-tengah-bawah-judul">
                                <p  style="font-size:18px" align="center">BELAJAR FLASH UNTUK PEMULA</p><p style="margin-left:10px;"><marquee direction="left" width="500">terima kasih sudah mengunjungi situs kami. </marquee></p>
                               
                                </div>
                            <div id="body-tengah-bawah-isi" align="center">
                           <b><br/><br/>
                           Flash sekarang bukan hanya sebagai software saja<br/>
 dengan nama Adobe Flash, tetapi juga merupakan<br/> suatu teknologi animasi di web.<br/>
 Jadi untuk membuat animasi web dengan format Flash (SWF) <br/>
 kita tidak harus menggunakan software Adobe Flash, <br/>
 tetapi bisa menggunakan software lain seperti SwishMax, <br/>
 Vecta 3D, Swift 3D, Amara,<br/>Kool Moves dan masih banyak lagi.<br/>

Anda tidak usah bingung untuk menggunakan versi yang mana,<br/>
 kalau hanya untuk keperluan menggambar atau animasi,<br/> Flash versi 4 atau 5 pun<br/>
 lebih dari cukup kalau komputer Anda Pentium 3.<br/> Jadi silahkan menggunakan versi<br/>
 yang tidak memberatkan komputer Anda,<br/> tidak usah memaksa harus menggunakan versi terbaru.<br/></b>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left">
                <div id="body-kanan">
                                <div id="body-kanan-conten">
                                <div id="body-kanan-isi-conten">
                                <div id="body-kanan-isi-conten-judul">
                                <p style="font-size:18px" align="center">PUSLATIF</p>
                            </div>
                            <div id="body-kanan-isi-conten-isi">
                                <div class="text1" align="center" style="font-size:18px;">
                                                <br/><a href="http://informatika.ub.ac.id/index/detail/program-studi"> Seputar Info</a><br/>
  <a href="http://informatika.ub.ac.id/index/detail/riset"> Penelitian</a><br/>
   <a href="http://informatika.ub.ac.id/"> Publikasi</a><br/>
   <a href="http://www.prasetya.ub.ac.id/"> Prasetya</a>
                                </div>
                            </div>
                        </div>
                        <div id="body-kanan-isi-conten">
                                <div id="body-kanan-isi-conten-judul">
                                <div class="text1">
                                                <p style="font-size:18px" align="center">JURNAL</p>
                                </div>
                            </div>
                            <div id="body-kanan-isi-conten-isi">
                                <div align="center" style="font-size:18px ">                                      
                                <div class="text1" style="font-size:12px;">
                                                 <a href="http://www.w3function.com/blog/index.php?p=det&idn=41#"> Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)</a><br/>
        <br/>
            <a href="http://www.ilmugrafis.com/flash2.php"> Belajar Flash</a><br/><br/>
<form name="form1">
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option>Jump to...</option>
<option value=http://www.quackit.com>Quackit Homepage</option>
<option value=http://www.quackit.com/javascript/>JavaScript</option>
<option value=http://www.quackit.com/html/>HTML</option>
<option value=http://www.quackit.com/css/>CSS</option>
<option value=http://www.quackit.com/sql/tutorial/>SQL</option>
<option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option>
<option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option>
</select>
</form>

                                </div>
                                </div>
                            </div>
                        </div>
                        <div id="body-kanan-isi-conten">
                                <div id="body-kanan-isi-conten-judul">
                                <p style="font-size:18px" align="center">Game terbaru</p>
                            </div>
                            <div id="body-kanan-isi-conten-isi" align="center">
        <script type="text/javascript">
<!--
function displayMessage(firstName) {
    alert("Hello " + firstName + ", maah karena game terbaru belum kami update.")
}
//-->
</script>


 <form>
First name:
<input type="input" name="yourName" />
<input
  type="button"
  onclick="displayMessage(form.yourName.value)"
  value="Display Message" />
</form>
</div>
                           
                       </div>
                        </div>
                    </div>
                </div>
            </div>
       
        <div id="footer">
                <p style=" margin-left:250px; margin-right:20px;font-style:oblique; color:#0FC; text-align:center"><marquee direction="left"><BR/><BR/>
            TEKNIK INFORMATIKA
            <BR/>
            UNIVERSITAS BRAWIJAYA </marquee></p>
        </div>
    </div>
</body>
</html>
      screenshoot



 

 Namun bila anda.. yah taulah males buat copas segitu banyaknya source code. Disini sudah ku sedia in Download tannya word kok. ^_^ . good luck n semoga bermanfaat ..
share: pinterest
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Cara Refund Google Ads

  Non Aktifkan Akun gogle dulu. Baru semua saldo yang berada di dalamnya, akan otomatis di kembalikan, lengkap dengan tgl berapa akan di kem...

 
FREE BLOGGER TEMPLATE BY DESIGNER BLOGS