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 >