Selasa, 22 Februari 2011

tugas rumah modul 4

1. Script html

< !DOCTYPE html >
< html lang="en" >
< head >
< title > Tugas Rumah < /title >
< link rel="stylesheet" href="stylerumah.css" type= "text/css" / >
< /head >
< body >
< header >
< div id="gambaratas" > < /div >
< div id="teksatas" > < /div >
< /header >
< nav >
< div id="search" > Search < /div >
< div id="formsearch" > < input type="text" maxlength=80 > < /div >
< div id="download" >
< a href="download.html" > Download < /a > < /div >
< div id="community" >
< a href="community.html" > Community < /a > < /div >
< div id="guide" >
< a href="Guide.html" > Guide < /a > < /div >
< div id="theworld" >
< a href="theworld.html" > The World < /a > < /div >
< div id="news" >
< a href="news.html" > News < /a > < /div >
< /nav >
< section >
< div id="tengah" >
< article >
< /article >
< aside > < p > Dragonica (Dragon Saga Online di AS) adalah tindakan 3D sisi-bergulir MMORPG (massively multiplayer online role-playing game) yang dikembangkan oleh Barunson Interaktif. Development has been ongoing since March 2006. [ 1 ] Operation of Dragonica is relegated to different publishers for their respective regions. Pembangunan telah berlangsung sejak Maret 2006. [1] Pengoperasian Dragonica adalah diturunkan ke penerbit yang berbeda untuk daerah masing-masing. It is a free-to-play game which includes a cash shop that allows for unique customization of player's characters. [ 3 ] The game has been in Open Beta across Europe since June 10, 2009 [ 4 ] , has implemented the Kundara Content Update during August 2009 [ 5 ] and has announced that the "Tales of the Damned" expansion will be introduced during October 2009 [ 6 ] . Ini adalah free-to-play game yang termasuk toko kas yang memungkinkan penyesuaian unik's karakter pemain. [3] Permainan telah Open Beta di Eropa sejak 10 Juni 2009 [4] , telah menerapkan Konten Kundara Update pada Agustus 2009 [5] dan telah mengumumkan bahwa "Tales of the Damned" ekspansi akan diperkenalkan selama Oktober 2009 [6] . The North American Open Beta Test began on August 18, 2009. [ 7 ] Characters created during the Open Beta Test will carry over to the commercial release. [ 8 ] Amerika Utara Open Beta Test dimulai pada tanggal 18 Agustus 2009. [7] Karakter diciptakan selama Open Beta Test akan terbawa ke rilis komersial. [8]
< /aside >
< /div >
< div id="event" >
< b > EVENT < /b >
< font face=arial black color=#33cccc >
< ul >
< li > < b > < a href="puisi.html" > Puisi Vallentine Dragonica < /a > < /b >
< li > < b > < a href="imlek.html" > Event Imlek < /a > < /b >
< li > < b > < a href="masq.html" > Event Masquerade < /a > < /b >
< /ul >
< /font >
< /div >
< /section >
< footer >
< div id="bawah" >
< a href="news.html" > News < /a > | < a href="theworld.html" > The World < /a > | < a href="Guide.html" > Guide < /a > | < a href="community.html" > Community < /a > | < a href="download.html" > Downloads < /a >
< /div >
< /footer >
< /body >
< /html >


2. css

body {
margin: 10px auto;
width: 1300px;
}
header{
height:120px;
border: green;
background-image:url(gambar7.png);
background-repeat: repeat-x;}
#gambaratas{
float:left;
width:100px;
height:80px;
background-image:url(gambar5.png);
background-position:center center;
background-repeat:no-repeat;
margin-left:75px;
margin-top:20px;
}
#teksatas{
float:left;
width:500px;
height:120px;
background-image:url(gambar8.png);
margin-left:20px;
}
nav {
height:35px;
border: 1px solid green;
background-color:#ffff66;
}
#search {
float:left;
width:60px;
height:25px;
margin-top:3px;
margin-left:80px;
}

#formsearch {
float:left;
margin-left:2px;
width:140px;
height:25px;
margin-top:3px;
}
#news {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#theworld {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#guide {
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#community{
float:right;
width:80px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#download{
float:right;
width:100px;
height:25px;
margin-right:500px;
border:1px solid brown;
margin:2px;
text-align:center;
background-color:#993300;
}
#tengah {
width:1300px;}
section {
height:558px;
border: 1px solid green;
}
article {
float:left;
border: 1px solid red;
width:300px;
height:550px;
background-image:url(gambar4.jpg);
background-position:center center;
background-repeat:no-repeat;
border:4px solid black;
}
aside {
height:413px;
width:950px;
float:left;
margin-left:5px;
}
#event {
height:145px;
width:988px;
float:right;
border: 1px solid brown;
background-color:#ffff66;
}
footer{
height:30px;
border:1px solid blue;
padding-left:450px;
background-image:url(gambar6.png)
}
#bawah {
float:left;
width:500px;
height:20px;
font-weight:bold;
margin:2px;
text-align:center;
}


3. hasil printscreen

studi kasus modul 4

1. script html

< !DOCTYPE html >
< html lang="en" >
< head >
< title > desain layout html 5 < /title >
< link rel="stylesheet" href="stylestudi.css" type= "text/css" / >
< /head >
< body >
< header >
header < /header >
< nav >
nav < /nav >
< section >
< div id="tengah" >
< article >
article < /article >
< aside >
aside < /aside > section
< /div >
< /section >
< footer >
footer < /footer >
< /body >
< /html >

2. css

body {
margin: 25px auto;
width: 1300px;}
header{
height:100px;
border: 1px solid green;}
nav {
height:35px;
border: 1px solid blue;}
#tengah{
width:1300px;}
section {
height:450px;
border: 1px solid red;}
article {
margin-top:20px;
margin-left:20px;
float:left;
border: 1px dashed red;
width:950px;
height:400px}
aside {
height:400px;
width:275px;
float:right;
border: 1px dashed black;
margin-right:20px;
margin-top:20px;}
footer{
height:20px;
border:1px solid green;}

3. hasil printscreen

Selasa, 15 Februari 2011

modul 3 : tugas rumah

1. Script :

html :

< !DOCTYPE html >
< html lang="en" >
< head >
< title > FeisBugh < /title >
< link rel="stylesheet" href="style.css" type="text/css" / >
< link rel="icon" href="Fb.png" type="image/x-icon" / >
< div id="atas" >
< div id="feisbugh" >
< font color="white" face="Bradley Hand ITC" size=10 > < b > FeisBugh < /font > < /b >
< /div >
< div id="isikanan" >
< font color="white" face="Bradley Hand ITC" size=3 >
< table >
< tr >
< td > < u > Email : < /td > < /u >
< td > < u > Password : < /td > < /u >
< /tr >
< tr >
< td > < input type="text" maxlength=25 > < /td >
< td > < input type="password" maxlength=25 > < /td >
< td > < input id="button" type="button" maxlength=10 value="Let's Go" > < /td >
< /tr >
< tr >
< td > < input type="checkbox" checked > Keep inside < /td >
< td > Forgot ur Pass < /td >
< /tr >
< /table >
< /font >
< /div >
< /div >
< /head >
< body >
< div id="tengah" >
< /div >
< div id="bawah" >
< font color="white" face="Bradley Hand ITC" size=4 >
FeisBugh ™ 2011 Hendi Eko Ginanjar Home Industries
< /font >
< /div >
< /body >
< /html >

css :

#atas{
height:100px;
background-color:#cc66ff;}
#feisbugh{
float:left;
height:80px;
width:200px;
padding-left:80px;
padding-top:20px;
}
#isikanan{
padding-top:20px;
padding-right:100px;
float:right;
}
#button{
background-color:#ffffff;
color:#cc66ff;
}
#tengah{
height:540px;
}
#bawah{
padding-left:10px;
padding-top:10px;
height:30px;
background-color:#cc66ff;}


2. printscreen

modul 3 : studi kasus

1. Script

< !DOCTYPE html >
< html lang="en" >
< head >
< title > Studi Kasus < /title >
< style type="text/css" >
< !--
.box1 {
padding: 50px;
width: 225px;
height: 225px;
background: aqua;
border: 10px double blue;
-moz-border-radius: 250px;
}
#content{
width: 100px;
height: 100px;
}
.box2 {
padding: 10px;
width: 500px;
height: 100px;
background: pink;
border: 5px dashed purple;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
text-align: center;
}
.box3 {
padding: 10px;
width: 500px;
height: 100px;
background: white;
border: 5px solid black;
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,2);
text-align: center;
}
-- >
< /style >
< /head >
< body >
< div class="box1" align="center" >
< p id="isi" >
saya bingung mau nulis apa, tapi di dalam lingkaran ini tulisannya harus banyak supaya nanti hasilnya bagus, kalo tulisannya sedikit nanti hasilnya jelek,
lebih baik dikasih tulisann yang banyak biar tampak penuh dan indah dan rapi dan sehat dan teratur. hehe .
< /p >
< /div >
< br >
< br >
< div class="box2" > < font color="red" >
saya bingung mau nulis apa, tapi di dalam kue lapis ini tulisannya harus banyak supaya nanti hasilnya bagus, kalo tulisannya sedikit nanti hasilnya jelek,
lebih baik dikasih tulisann yang banyak biar tampak penuh dan indah dan rapi dan sehat dan teratur. hehe .
< /font >
< /div >
< br >
< br >
< div class="box3" > < font color="brown" >
saya bingung mau nulis apa, tapi di dalam kotak ini tulisannya harus banyak supaya nanti hasilnya bagus, kalo tulisannya sedikit nanti hasilnya jelek,
lebih baik dikasih tulisann yang banyak biar tampak penuh dan indah dan rapi dan sehat dan teratur. hehe .
< br >
< /div >
< /body >
< /html >


2. Printscreen

Selasa, 08 Februari 2011

TUGAS PEMROGRAMAN BERBASIS WEB


1. Studi kasus
membuat frame


Script :

1. Frame atas
< !DOCTYPE html >
< html lang="en" >
< head >
< title > frame atas< /title >
< /head >
< body >
< h1 > Modnoc's Web< /h1 >
< font color=red > < marquee > Pendidikan Teknik Informatika Universitas Negeri Malang< /marquee > < /f >
< /body >
< /html >

2. Frame kiri
< !DOCTYPE html >
< html lang="en" >
< head >
< title > frame kiri< /title >
< /head >
< body >
< h3 > Category< /h3 >
< ul > < li > < a href="http://www.facebook.com/unsterbliche" target="main" > Me .. < /li >
< li > < a href="main hendi.html" target="main" > Study< /li > < /ul >
< /body >
< /html >

3. Frame utama (tengah)
< !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 aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequataaaaaaaaaaaaaaaaaaaaaaaaaa .
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 consequataaaaaaaaaaaaaaaaaaaaaaaaaa .
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 consequataaaaaaaaaaaaaaaaaaaaaaaaa .

< h3 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 consequatbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb.
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 consequataaaaaaaaaaaaaaaaaaaaaaaaaa .
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 consequataaaaaaaaaaaaaaaaaaaaaaaaaa .
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 consequataaaaaaaaaaaaaaaaaaaaaaaaa .

< h3 id="kesimpulan" > Kesimpulan< /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 consequatcccccccccccccccccccccccccccccccccccccc.
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 consequataaaaaaaaaaaaaaaaaaaaaaaaa .
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 consequataaaaaaaaaaaaaaaaaaaaaaaaaa
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 consequataaaaaaaaaaaaaaaaaaaaaaaaaa.
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 consequataaaaaaaaaaaaaaaaaaaaaaaaaa.
< /body >

< /html >

4. Frame kanan
< !DOCTYPE html >
< html lang="en" >
< head >
< title > frame kanan< /title >
< /head >
< body >
< h3 > Searching< /h3 >
< ul > < li > < a href="http://www.google.com/" target="main" > Google< /li >
< li > < a href="http://www.yahoo.com/" target="main" > Yahoo< /li > < /ul >
< /body >
< /html >

5. Frame bawah
< !DOCTYPE html >
< html lang="en" >
< head >
< title > frame kanan< /title >
< /head >
< body >
Untuk kembali ke halaman pertama
< a href="main hendi.html" target="main" > Klik di sini< /a >
< /body >
< /html >

6. Penggabungan frame
< !DOCTYPE html >
< html lang="en" >
< head >
< title > nyoba frame< /title >
< /head >
< frameset rows="17%,*,10%" >
< frame src="atas hendi.html" name="atas" id="atas" / >
< frameset cols="20%,*,15%" >
< frame src="kiri hendi.html" name="kiri" id="kiri" / >
< frame src="main hendi.html" name="main" id="main" / >
< frame src="kanan hendi.html" name="kanan" id="kanan" / > < /frameset >
< frame src="bawah hendi.html" name="bawah" id="bawah" / >
< /frameset >


2. Tugas Rumah
membuat tabel grafik



Script :
< !DOCTYPE html >
< html lang="en" >
< head >
< title > nyoba tabel< /title >
< /head >
< body >
< table align="left" cellspacing=1 cellpadding=5 >
< caption > Label dari tabel< /caption >
< tr >
< td colspan=40 > < hr color="black"/ > < /td >
< /tr >
< tr >
< th colspan=5 > Perusahaan< /th >
< th colspan=35 > Pendapatan< /th >
< /tr >
< tr >
< td colspan=40 > < hr color="black"/ > < /td >
< /tr >
< tr >
< td > Angin Reboot Ltd< /td >
< td colspan=20 > < /td >
< td width="120" bgcolor="pink" colspan=15 > < /td >
< td > + 150% < /td >
< /tr >
< tr >
< td > Command Prompt Inc< /td >
< td colspan=20 > < /td >
< td width="25" bgcolor="purple" colspan=5 > < /td >
< td > + 55% < /td >
< /tr >
< tr >
< td > Hibernate Ltd< /td >
< td colspan=16 > < /td >
< td > - 25% < /td >
< td width="10" bgcolor="red" colspan=3 > < /td >
< /tr >
< tr >
< td > Shutdown Ltd< /td >
< td colspan=12 > < /td >
< td > - 75 %< /td >
< td width="75" bgcolor="brown" colspan=7 > < /td >
< /tr >
< tr >
< td colspan=40 > < hr color="black"/ > < /td >
< /tr >
< /table >
< /body >
< /html >


3. Tugas rumah
membuat tabel



Script :

< !DOCTYPE html >
< html lang="en" >

< head >
< title > nyoba tabel nomer 3< /title >
< /head >

< body >
< table border="3" cellspacing=1 frame="hsides" rules="groups" >
< caption > PERBANDINGAN FITUR< /caption >
< colgroup align="center" >
< colgroup align="center" >
< colgroup align="center" >
< thead valign="middle" >

< tr > < th width="35" > No
< th width="150" > Fitur
< th width="100" > Enterprise
< th width="50" > Pro
< th width="50" > Free< /tr >

< tbody >
< tr > < td > 1
< td > Garansi Seumur Hidup
< td align="center" > X
< td align="center" > -
< td align="center" > -< /tr >
< tr > < td > 2
< td > Multiuser
< td align="center" > X
< td align="center" > -
< td align="center" > -< /tr >
< tr > < td > 3
< td > Update Otomasi
< td align="center" > X
< td align="center" > X
< td align="center" > -< /tr >
< tr > < td > 4
< td > Cetak Laporan
< td align="center" > X
< td align="center" > X
< td align="center" > -< /tr >
< tr > < td > 5
< td > Notifikasi
< td align="center" > X
< td align="center" > X
< td align="center" > X< /tr >
< tbody >
< tr > < td > 6
< td > Ubah Tema
< td align="center" > X
< td align="center" > X
< td align="center" > X< /tr >
< tr > < td > 7
< td > Try Ikon
< td align="center" > X
< td align="center" > X
< td align="center" > X< /tr >

< /table >
< /body >
< /html >