Modul I
Isi Dokumen
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Http://www.eL_yumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h2>Hai..saya
wahab..Ini Homepage percobaan saya.</h2>
</body>
</html>
1. Heading
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<H1>Wahab
eLyumi 1</H1>
<H2>Wahab
eLyumi 2</H2>
<H3>Wahab
eLyumi 3</H3>
<H4>Wahab
eLyumi 4</H4>
<H5>Wahab
eLyumi 5</H5>
<H6>Wahab
eLyumi 6</H6>
</body>
</html>
2. Paragraf
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p
align="left">
Pemakaian komputer
pada saat ini sudah sangat luas. Hampir semua kegiatan manusia tidak terlepas
dari pemakaian komputer.
Walaupun sudah banyak
manfaat yang dapat diperoleh dari pemakaian komputer, namun belum banyak yang
menyadari bahwa pemakaian komputer juga dapat menimbulkan masalah tersendiri.
Masalah yang
dimaksudkan adalah penyakit-penyakit akibat kerja dengan memakai komputer,
terutama dalam waktu
yang lama dan secara terus menerus serta dengan posisi yang kurang tepat.
pemakaian komputer
hendaknya dapat menciptakan beban kerja menjadi ringan dan suasana kerja
menjadi nyaman dan sehat.
<p
align="center">
Kursi yang baik
adalah kursi yang dapat mengikuti lekuk punggung dan sandarannya (back rest) serta
tingginya dapat diatur.
Tinggi kursi adalah
sedemikian rupa, sehingga kaki operator tidak menggantung pada saat duduk. Kaki
yang menggantung akan cepat menimbulkan kelelahan.
Selain itu, kursi operator komputer yang baik adalah
kursi yang dilengkapi dengan 5 kaki dan diberi roda,
sehingga tidak mudah
jatuh dan mudah digerakkan ke segala arah.
Hal ini penting agar
operator dapat leluasa menggeliat / meregangkan tubuh dalam rangka mengurangi
kelelahan.
<p
align="right">
Kelelahan akan sangat
berkurang bila meja dan kursi dapat diatur sedemikian rupa sehingga pada saat
bekerja sudut antara tangan dan lengan membentuk sudut tumpul (lebih dari 90
derajat),
sedangkan kaki dapat
bersandar pada sandaran kaki serta kaki dapat leluasa bergerak di bawah meja.
Yakinkan bahwa kursi
yang dipakai memiliki bagian punggung yang bisa disesuaikan dan tempat lengan
beristirahat.
Bagian belakang
sandaran kursi harus keras, tetapi berbantal empuk.
Di bawah ini, gambar
yang menunjukkan desain kursi dan meja komputer yang ergonomis
</p>
</body>
</html>
3. Blockquote
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
paragraf
BLOCKQOUTE
Ukuran Font
Warna Font
</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<font size=4>
<font
color="#CC0033"></font>
<h3>Selamat
Datang diSitus Kami</h3>
<P
align="center"></P>
<blockquote>
Selamat Datang
diSitus Kami....
Situs kami hadir
untuk membantu anda mengenal tentang dunia musik..
mulai dari musik yang
tempoe doloe sampai zaman modern saat ini..
Dari jenis musik yg
umum hingga khusus kami sediakan agar anda bisa menikmati musik sesuai dengan
selera anda..
Kami menyediakan
jenis-jenis musik disegala umur, jadi anda tidak usah ragu-ragu untuk membuka
dan memakai situs kami.
</blockquote>
</body>
</html>
4. Preformatted Text
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<pre>
Chip dan peralatan
lain di dalam komputer, sensitif terhadap suhu tinggi.
Selama kondisi kerja
normal, PC menghasilkan panas yang biasanya dapat ditoleransi oleh rangkaian.
Kadang-kadang
meninggalkan PC dalam kondisi (ON) untuk waktu yang lama tidak akan
merusakkannya,
sebab rongga-rongga
slot ekspansi dan pintu keluar udara cukup mengalirkan panas keluar dari kotak
(chasing).
Sisa udara panas
ditarik kedalam catu daya oleh kipas angin yang tersedia dan dihembuskan keluar
kebagian belakang dari chasing.
Selama komponen pada
motherboard tidak terlalu panas untuk disentuh, jumlah panas yang dihasilkan
tidak akan menyebabkan kerusakan.
Namun panas dapat
menjadi masalah bila mulai menambah board INTERFACE atau ADAPTER.
</pre>
</body>
</html>
5.Begin Row
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<title>Begin
Row</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<p
align="center"><H2>Selamat Datang disitus
kami..!!!!</H2></p></center>
<h4>Salam kenal
dari kami WWW.eL_Yumi.COM</h4>
Kata musik sudah
tidak Lazim anda dengar tapi apakah anda tahu dari semua jenis itu??
situs kami hadir
untuk memberikan semua tentang musim yang ada didunia ini..
mulai dari zaman
tempoe doloe sampai zaman sekarang..
jenis musik yang kami
berikan bermacam-macam dan berasal dari semua jenis umur.
<BR>musik berasal
dari mana??
<BR>apa
keistimewaan musik??
<BR>apa yang
membuat musik itu indah??
<BR>perbedaan
musik dengan yang lainnya???
</body>
</html>
6. Ukuran Font
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<FONT
SIZE=1>wahab eLyumi 1</FONT>
<FONT
SIZE=2>wahab eLyumi 2</FONT>
<FONT
SIZE=3>wahab eLyumi 3</FONT>
<FONT
SIZE=4>wahab eLyumi 4</FONT>
<FONT
SIZE=5>wahab eLyumi 5</FONT>
<FONT
SIZE=6>wahab eLyumi 6</FONT>
<FONT
SIZE=7>wahab eLyumi 7</FONT>
</body>
</html>
7. Jenis Font
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<Font size =6>
<Font
face="Courier">Courier, wahab eLyumi<p>
<font
face="Georgia">Georgia, uncokro palopo<p>
<Font
face="Verdana">Verdana, FT-Kom<p>
</font>
</body>
</html>
8. Warna Font
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<font
size="+4">
<Font color="#0000FF">DRUM<P>
<Font
color="#FF0000">BASS<P>
<Font
color="#00FF00">GITAR<P>
</body>
</html>
9. Link
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<a
name="lengkap"><strong><h4>Nama-nama Gitaris Top Dunia
Sepanjang Masa</h4></strong></a>
<BLOCKQUOTE>
<p>The Best Of
Decade, <a href="the best of decade"><strong>Info Lengkap</strong></a>
<p>Jimi Hendrix
- Jimi Hendrix Experience
<p>Eric Clapton
- Yardbirds, Cream, Derek & The Dominos, Solo
<p>Jimmy Page -
Yardbirds, Led Zeppelin, The Firm
<p>Jeff Beck -
Yardbirds, Jeff Beck Group, Solo
<p>Stevie Ray
Vaughan* - Stevie Ray Vaughan & Double Trouble
<p>Joe Satriani
- Solo
<p>Ritchie
Blackmore - Deep Purple, Rainbow, Blackmores Night
<p>Steve Vai -
David Lee Roth, Whitesnake, Solo
<a
href="linktujuan.html">mau tahu lebih banyak lagi. klik disini
</a>
</BLOCKQUOTE>
<P><a
NAME="The Best of Decade">The Best of Decade</a>
<BLOCKQUOTE>
<P>Dekade 50an
: Chuck Berry, Bo Diddley, Mickey "Guitar" Baker, Scotty Moore,Lowman
Pauling, Cliff Gallup, James Burton, Eddie Cochran, Link Wray, dan Carl Perkins
<br>Dekade 60an
: muncul nama-nama baru yang memberi warna baru yaitu Jimi Hendrix, Eric
Clapton, Jeff Beck, Frank Zappa, Keith Richards, Peter Green, Pete Townshend,
Dave Davies, Steve Cropper, dan George Harrison.
<br>Dekade 70an
: Jimmy Page, Richie Blackmore, David Glimour, Duane Allman, Brian May, Carlos
Santana, Tony Iommi, Angus Young, Ry Cooder, dan Mick Ronson.
<br>Dekade 80an
: Eddie Van Halen, Stevie Ray Vaughan, Joe Satriani, Steve Vai, Yngwie
Malmsteen, Randy Rhoads, Eric Johnson, Paul Gilbert, Steve Morse, dan Jason
Becker.
<br>Dekade 90an
: John Petrucci, Kenny Wayne Sheperd, Tom Morello, Buckethead, Marty Friedman,
Zakk Wylde, Vito Bratta, Dimebag Darrell, Mike McCready, dan Jerry Cantrell.
</BLOCKQUOTE>
<P><A
HREF="#lengkap">KE ATAS </A>
</body>
</html>
11. Link Tujuan
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p
align="LEFT"> <strong><h3>Maaf, tidak saya tulis semua
soalnya capekka editti</h3></strong>
<br>jhon
petrucci - Dream Theater, Liquid Tension Experiment
<br>Randy
Rhoads* - Quiet Riot, Ozzy
<br>Allan
Holdsworth - Solo
<br>Paul
Gilbert - Mr. Big, Racer X, Solo
<br>Yngwie
Malmsteen - Rising Force, Solo
<br>Phil Keaggy
- Glass Harp, Solo
<br>Jason
Becker - Cacophony, David Lee Roth Band, Solo
<br>John
Mclaughlin- Mahavishnu Orchestra
<br>Duane
Allman* - Allman Brothers Band, Derek & the Dominos
<br>Chuck Berry
- Solo
<br>eric
Johnson - Solo
<br>Steve Howe
- Yes, Solo
<br>Neal Schon
- Santana, Journey, Solo
<br>Brian May -
Queen
<br>Gary Moore
- Thin Lizzy, Colosseum II, Skid Row, Solo
<br>Bo Diddley*
- Solo
<br>Steve Morse
- Deep Purple, Dixie Dregs, Steve Morse Band, Solo
<br>Carlos
Santana - Santana
<br>Tony Iommi
- Black Sabbath
<br>buckethead
- Solo, Praxis, Thanatopsis, The Deli Creeps, Cornbugs, GNR,
<br>Mark
Knopfler - Dire Straits, Solo
<br>marty
Friedman - Cacophony, Megadeth, Solo
<br><a
href=''link.html''>KE ATAS</a>
</body>
</html>
HTML TINGKAT LANJUT
12. Ordered List
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h3>Empat Nama
Gitaris Terhebat di Dunia</h3>
<ol>
<li> jimi
Hendrix - Jimi Hendrix Experience
<li> Eric
Clapton - Yardbirds, Cream, Derek & The Dominos, Solo
<li> Jimmy Page
- Yardbirds, Led Zeppelin, The Firm
<li> Jeff Beck
- Yardbirds, Jeff Beck Group, Solo
</ol>
</body>
</html>
13. Ordered List dengan Attribut
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<font
size="+1">
<ol
type="I">
<li>Empat nama
gitaris terbaik dunia
<ol
type="i">
<li>Jimi Hendrix - Jimi Hendrix
Experience
<li>eric Clapton - Yardbirds, Cream,
Derek & The Dominos, Solo
<li>Jimmy Page - Yardbirds, Led
Zeppelin, The Firm
<li>Jeff Beck - Yardbirds, Jeff Beck
Group, Solo
<li>Eddie Van Halen - Van Halen
</ol>
<li>Terbaik ke
enam sampai sepuluh
<ol
type="1" start="6">
<li>Stevie Ray Vaughan* - Stevie Ray
Vaughan & Double Trouble
<li>Joe Satriani - Solo
<li>Ritchie Blackmore - Deep Purple,
Rainbow, Blackmores Night
<li>Steve Vai - David Lee Roth,
Whitesnake, Solo
<li>David Gilmour - Pink Floyd, Solo
</ol>
</font>
</body>
</html>
14.Unordered List
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h3>Nama-nama
Band yang Saya Suka Musiknya</h3>
<ul>
<li>Ungu
<li>Bondan and
Fade2black
<li>Avenged
Sevenfold
<li>Alter
Bridge
<li>Linkin Park
<li>Muse
<li>Saint Loco
<li>J-rocks
</ul>
</body>
</html>
15.Unordered List dengan Attribut
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h4>Jenis-Jenis
Musik (UL type Disc)</h4>
<ul
type="disc">
<li>Jazz
<li>Rock
<li>Pop
<li>RockAlternative
<li>PopRock
</ul>
<h4>Jenis-Jenis
Musik (UL type square)</h4>
<ul
type="square">
<li>Jazz
<li>Pop
<li>Rock
<li>RockAltrnative
<li>PopRock
</ul>
<h4>Jenis-Jenis
Musik (UL type circle)</h4>
<ul
type="circle">
<li>Jazz
<li>Pop
<li>Rock
<li>RockAlternative
<li>PopRock
</ul>
</body>
</html>
16.Grafik dalam Web
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h2><p
align="center">www.uncokro.com</p></h2>
<p
align="center"><img src="file:///D|/Pictures/logo/Cokro
Green.jpg"</p>
</body>
</html>
17. Atribut IMG
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><h3>UNIVERSITAS
COKROAMINOTO PALOPO</h3>
<br>
<img
src="file:///D|/Pictures/logo/Cokro Green.jpg" width="300"
height="200"</p>
<br>
<p><font
size="+1">www.uncokro.com</font></p>
<p
align="right">Jln.latamacelling no.12. kab.luwu <img
src="../../../../Pictures/logo/Cokro Green.jpg" width="300"
height="200"</p></right>
</body>
</html>
18. Table
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<table>
<caption><h3>Gitaris
Dunia</h3></caption>
<tr>
<th><h5>Nama
Gitaris</h5></th>
<th><h5>Nama
Band</h5></th>
</tr>
<tr>
<td>jimi
hendrix</td>
<td>jimi
hendrix experince</td>
</tr>
<tr>
<td>Eric Clapton</td>
<td>Yardbirds,
Cream, Derek & The Dominos, solo</td>
</tr>
<tr>
<td>Jimmy
Page</td>
<td>YardBirds,
Led Zeppelin, The Firm</td>
</tr>
<tr>
<td>Jeff
Beck</td>
<td>Yardbirds,
Jeff Beck Group, Solo</td>
</tr>
<tr>
<td>Eddie
VanHallen</td>
<td>Van Hallen</td>
</tr>
</table>
</body>
</html>
19. Table Align dan Akurat
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table
width="100%" height="200">
<tr>
<td
width="20%" height="105"
valign="baseline">malam ini valign="baseline"
<br> terasa
sunyi tidak ada kabar dari si dia
</td>
<td
width="20%" height="105" valign="top">marahan
terus kerjanya tapi sayangnya tidak terkalahkan
valign="top"<br>
</td>
<td
width="20%" height="105"
valign="middle">marahan kalau dari luar tapi dari dalam hatinya
ingin bersamanya slalu valign="middle"
<br></td></tr>
<tr>
<td width="20%"
height="115" align="left">kalau kamu
align="left"</td>
<td
width="25%" height="115"
align="center">gimana???
align="center"</td>
<td
width="30%" height="115" align="right">lebih
baik atau lebih parah??,yang pastinya sabar saja align="right"</td>
</tr>
</table>
</body>
</html>
20. Table dengan Cellspacing dan Cellpadding
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<table
border="5" cellpadding="10" cellspacing="10"
width="100%">
<tr>
<td
width="50%">ELYUMI 1, KOLOM 1</td>
<td
width="60%">ELYUMI 1, KOLOM 2</td>
</tr>
<tr>
<td
width="50%">ELYUMI 2, KOLOM 1</td>
<td
width="60%">ELYUMI 2, KOLOM 2</td>
</tr>
</table>
</body>
</html>
21. Table Colspan dan Rowspan
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<table
border="5" cellpadding="10" cellspacing="10"
width="100%">
<tr>
<td
width="50%" rowspan="4">ELYUMI 1, ELYUMI
1<p>ELYUMI 2, ELYUMI 1</td>
<td
width="60%">ELYUMI 1, ELYUMI 2</td>
</tr>
<tr>
<td width="60%">ELYUMI
2, ELYUMI 2</td>
</tr>
<tr>
<td
width="115" rowspan="4">ELYUMI 3, ELYUMI
1<p>ELYUMI 3, ELYUMI 2</td>
</tr>
</table>
</body>
</html>
22. Table Color
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<table
border="3" cellpadding="5" cellspacing="5"
width="100%" bordercolor="#FF0000">
<tr>
<td
width="60%" bgcolor="#0000FF"> </td>
<td
width="60%"> </td>
</tr>
<tr>
<td
width="60%"> </td>
<td
width="60%" bgcolor="#00FF00"> </td>
</tr>
</table>
<table
border="3" cellpadding="5" cellspacing="5"
width="100%" bordercolorlight="#FF0000"
bordercolordark="#0000FF">
<tr>
<td width="100%"> </td>
</tr>
</table>
</body>
</html>
23. Form Input dengan Text Box
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><h3>PERSONIL
ELYUMI</h3></p>
<table
border="1" cellpadding="1" cellspacing="3">
<tr>
<td
width="15%">Vokalis</td>
<td
width="5%">:</td>
<td
width="90"><input type="text"
name="vokalis" size="20"></td>
</tr>
<tr>
<td width="15%">Gitaris</td>
<td
width="5%">:</td>
<td
width="90%"><input type="text"
name="gitaris" size="20"></td>
</tr>
<tr>
<td
width="15%">Bassis</td>
<td
width="5%">:</td>
<td
width="90%"><input type="text"
name="bassis" size="20"></td>
</tr>
<tr>
<td width="15%">Drummer</td>
<td
width="5%">:</td>
<td
width="90&"><input type="text"
name="drummer" size="20"></td>
</tr>
<tr>
<h5><td
width="15%">Contact</td>
<td
width="5%">:</td>
<td
width="90%"><input type="text"
value="085242319945"</td></h5>
</tr>
</table>
</body>
</html>
24. Form Input dengan Check Box
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><h3>Personil
Yang di Suka</h3></p>
<p><h5>Nama</h5></p>
<p>
<input
type="checkbox" name="c1">ciky<br>
<input
type="checkbox" name="c2">ammink<br>
<input
type="checkbox" name="c3">wahab<br>
<input
type="checkbox" name="c4">aswar
</p>
</body>
</html>
25. Form Input dengan Radio Button
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http:www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><h3>Daftar
Lagu Elyumi</h3></p>
<p><h4>Pilih
Salah Satu</h4></p>
<p>
<input
type="radio" value="v1"
name="r1">Perasaanku<br>
<input
type="radio" value="v2"
name="r1">Dinda<br>
<input
type="radio" value="v3" name="r1">Aku Ada
Untukmu<br>
<input
type="radio" value="v4" name="r1">Sulit
Melupakanmu<br>
<input
type="radio" value="v5" name="r1">Hadapi
dengan Senyuman<br>
<input
type="radio" value="v6" name="r1">Disatu
Hati<br>
<input
type="radio" value="v7" name="r1">Tak
Bisa<br>
<input
type="radio" value="v8" name="r1">Perbedaan
Bukan Masalah<br>
<input
type="radio" value="v9" name="r1">Bukan
Pecundang<br>
<input
type="radio" value="v10" name="r1">Tentang
Dirimu<br>
<input
type="radio" value="v11"
name="r1">Temaniku<br>
</p>
</body>
</html>
26. Form Submit dan Reset
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h1>
<p
align="center">Band Kesukaan</p>
</h1>
<form method="post"
action="10.Link.html">
<table
border="1" align="center" cellpadding="1"
width="100%"
<tr>
<td
width="25%">Nama Band</td>
<td
width="1%">:</td>
<td
width="100%"><input type="text" name="nama
band" size="170"></td>
</tr>
<tr>
<td
width="25%">Lagu Kesukaan</td>
<td
width="1%">:</td>
<td
width="100%"><input type="text" name="lagu
kesukaan" size="170"></td>
</tr>
<tr>
<td
width="25%">Penggemar</td>
<td
width="1%">:</td>
<td
width="100%"><input type="text"
name="Penggemar" size="170"></td>
</tr>
<tr>
<td
width="25%">Personil Yang di Suka</td>
<td
width="1%">:</td>
<td
width="100%"><input type="radio" value="v1"
name="r1">Vokalis<br>
<input
type="radio" value="v2" name="r1">Gitaris
1<br>
<input
type="radio" value="v3" name="r1">Gitaris
2<br>
<input type="radio"
value="v4" name="r1">Bassis<br>
<input
type="radio" value="v5"
name="r1">Drummer<br>
<input
type="radio" value="v6"
name="r1">Keyboard<p> </td>
</tr>
</table>
<p
align="center">Komentar Anda<br>
<textarea
name="Komentar" cols="160" rows="10"></textarea>
</p>
</td>
<p
align="center"><input type="submit"
value="KIRIM" name="b1">
<input
type="reset" value="HAPUS"
name="b2"</p></center>
</form>
</body>
</html>
MODUL II
1. Form
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eL_Yumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<form
method="post"action="">
<center><font
color="#00FF00" size="+3"><b>
</b>
</font>
</center>
<center><h1><font
color="#0000FF">BUKU TAMU</font></h1></center>
<center><h3><font
color="#0000FF">SILAHKAN ISI DATA
ANDA</font></h3></center>
<table
border="5" align="center" bgcolor="#0000FF"
<tr>
<td>Nama</td>
<td><input
type="text" name="Nama"</td>
</tr>
<tr>
<td>Email</td>
<td><input
type="text" name="Email"</td>
</tr>
<tr>
<td>Jenis
Kelamin</td>
<td><input
type="radio" name="sex" value="Pria">Pria
<input
type="radio" name="sex" value="Wanita">Wanita
</td>
</tr>
<tr>
<td>Hobby</td>
<td>
<table border="1">
<tr>
<td><input
type="checkbox" value="musik"
name="Musik">Musik</td>
<td><input
type="checkbox" value="Film"
name="Film">Film</td>
<td><input
type="checkbox" value="Membaca"
name="Membaca">Membaca</td>
</tr>
<tr>
<td><input
type="checkbox" value="Olahraga"
name="Olahraga">Olahraga</td>
<td><input
type="checkbox" value="Belanja"
name="Belanja">Belanja</td>
<td><input
type="checkbox" value="Lainnya"
name="Lainnya">Lainnya</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Foto</td>
<td><input
type=file name="Foto"</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td><select
name="Pekerjaan">
<option
value="">Pilih Pekerjaan</option>
<option
value=PNS>PNS</option>
<option
value=Wiraswasta>Wiraswasta</option>
<option
value=Bisnis>Bisnis</option>
<option
value=Petani>Petani</option>
<option
value=Pengangguran>Pengangguran</option>
</select>
</td>
</tr>
<tr>
<td
colspan="6" align="center">Tulis Komentar Atau Saran
Anda<br>
<textarea
name="KOMENTAR" cols="70" rows="10">
</textarea>
</td>
</tr>
<tr>
<td
colspan="4" align="center">
<input
type="submit" value="KIRIM">
<input
type="Reset" value="HAPUS">
</td>
</tr>
</form>
</body>
</html>
2. Tugas Album
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<right><font
color="#0000FF" size="+3"><b></br>
ALbum Wahab eL_Yumi
</u></b></font></right>
<center><p></p>
<img
src="../../../../Pictures/wahab/300410-0841.jpg"
width="250" height="190" alt="wahab">
<img
src="../../../../Pictures/wahab/milangoa'..jpg" width="250"
height="190" alt="wahab eLyumi">
<img
src="../../../../Pictures/wahab/wahab1.jpg" width="250"
height="190" alt="abd.wahab">
<img
src="../../../../Pictures/wahab/010909-0131.jpg"
width="250" height="190" alt="wahab 1">
<img
src="../../../../Pictures/wahab/050610-0719.jpg"
width="250" height="190" alt="wahab 2">
<img
src="../../../../Pictures/wahab/Foto010.jpg" width="250"
height="250" alt="wahab 4">
<img src="../../../../Pictures/wahab/PHOT0620.JPG"
width="250" height="250" alt="wahab 7">
<img
src="../../../../Pictures/wahab/w.a.jpg" width="250"
height="250" alt="wahab 8">
<img
src="../../../../Pictures/wahab/w.a1.jpg" width="250"
height="250" alt="wahab 9">
<img
src="../../../../Pictures/wahab/wanted wahab.jpg"
width="250" height="250" alt="wahab 10">
</center>
</body>
</html>
3. Index
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body text =
bgcolor="#000000">
<font color =
color="#33FF00"></font color>
<font
size="+3"<right>selamat datang di website wahabeLyumi@yahoo.com
</right></font>
<BR><font
size="+1"<right>universitas cokroaminoto tekhnik
informatika</right></font>
</body>
</html>
4. Table (Kontak)
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<table
border="15" cellpadding="7" cellspacing="9"
width="12" align="center" bgcolor="#00FF00">
<tr>
<td
width="50%" colspan="15" align="center">Kontak
Saya</td>
</tr>
<tr>
<td
width="100%">Alamat</td>
<td
width="55%">Lumi</td>
</tr>
<tr>
<td
width="100%">Telfon</td>
<td
width="55%">085242319945</td>
</tr>
<td
width="100%">Email</td>
<td
width="55%">wahabeLyumi@yahooo.co.id</td>
</table>
</body>
</html
MODUL III
1. Index
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<table
border="4" bordercolor="#0000FF" cellpadding="10"
cellspacing="4" width="600">
<tr>
<td
width="160"><p align="center"><img src="file:///D|/Pictures/logo/Cokro
Green.jpg" width="160" height="100"
align="middle"></td>
<td
align="center" width="278"><font
face="constantina"
size="6">INDEX</font></td>
</tr>
<tr>
<td
valign="top" width="140">
<ul>
<li><font
face="kristen itc" size="4"><A
HREF="Index.html">Home</A></font></li>
<li><font
face="kristen itc" size="4"><A
HREF="About.htm">About Me</A></font></li>
<li><font
face="kristen itc" size="4"><A
HREF="Materi.htm">Materi</A></font></li>
</ul>
</td>
<td
width="278" align="center" valign="top"><u><b>WELCOME</b></u>
<br>
<p
align="justify"><font
face="constantina"> Selamat
datang pada halaman web saya. Halaman ini merupakan halaman awal untuk dua
halaman web selanjutnya.
Pada sebelah kiri
dapat kita lihat ada link yang akan menuju ke halaman lain.
Apabila kita mengklik
menu Home maka link akan tetap tersambung ke halaman ini yaitu halaman web
index.html,
kemudian saat
mengklik menu About Me maka akan tersambung ke halaman about_me.html,
begitupun saat kita
mengklik menu materi maka akan tersambung ke halaman materi.html.
</font></p>
</td>
</tr>
</table>
</body>
</html>
2. About me
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<table
border="4" cellpadding="3" cellspacing="0"
bordercolor="#00FF00" height="201"
width="804">
<tr><tr>
<td
width="140"><p align="center"><img
src="file:///D|/Pictures/logo/Cokro Green.jpg" width="160"
height="100" align="middle"><td align="center"
height="59" width="210"><font
face="constantina" size="6"><b>DATA
MAHASISWA</b></font></td>
</tr>
<tr
valign="top"><td height="120"
width="210"><ul>
<li><font
face="kristen itc" size="4"><A
HREF="Index.html">Home</A></font></li>
<li><font
face="kristen itc" size="4"><A
HREF="About.htm">AboutMe</A></font></li>
<li><font
face="kristen itc" size="4"><A
HREF="Materi.htm">Materi</A></font></li>
</ul>
</td>
<td width="563"
align="center" valign="top"><table
border="4" cellpadding="8" cellspacing="1" bordercolor="#FFFF00"width="562"
align="Middle">
<tr>
<td
width="48"
align="center"><b>NAMA</b></td>
<td width="130"
align="Center"><b>ABD.WAHAB</b></td>
<td
width="50" align="center"><img
src="file:///D|/Pictures/logo/Cokro Green.jpg" width="50"
height="50"</td>
</tr>
<tr>
<td
width="44"
align="center"><b>NIM</b></td>
<td
width="50"
align="Center"><b>0904411108</b></td>
<td
width="161"
align="center"><b>FTKOM</b></td>
</tr>
<tr
valign="top" align="center">
<td
width="364"><b>DATA PRIBADI</b>
<p>Nama :
Abd.Wahab</p>
<p>Jurusan :
Ftkom</p>
<p>Prodi :
S1</p>
<p>Alamat :
Lumi</td>
<td
colspan="3" width="253">
<table
border="2" cellpadding="1" cellspacing="1"
bordercolor="#0000FF" width="358">
<pre><font
face="Constantina" size="4"><b>NAMA MATA
KULIAH</b></Pre>
<tr
align="center">
<td
width="92"><b>KODE</b></td>
<td
width="204"><b>MATA KULIAH</b></td>
<td
width="45"><b>SKS</b></td>
</tr>
<tr
align="center">
<td
width="92">MKK1248</td>
<td
width="204">STUKTUR DATA</td>
<td
width="45">3</td>
</tr>
<tr
align="center">
<td
width="92">MKK1249</td>
<td
width="204">SISTEM BASIS DATA</td>
<td
width="45">3</td>
</tr>
<tr
align="center">
<td
width="92">MKK1246</td>
<td
width="204">PENGELOLAAN INTALASI KOMPUTER</td>
<td
width="45">3</td>
</tr>
<tr
align="center">
<td width="92">MKK1243</td>
<td
width="204">PEMROGRAMAN WEB 1</td>
<td
width="45">3</td>
</tr>
<tr
align="center">
<td
width="92">MKK1241</td>
<td
width="204">PEMROGRAMAN VISUAL 1</td>
<td
width="45">3</td>
</tr>
<tr
align="center">
<td
width="92">MKK1341</td>
<td width="210">MATEMATIKA
DISKRET</td>
<td
width="45">3</td>
</tr>
<tr
align="center">
<td
width="92">MKK1343</td>
<td width="210"><i><b>SISTEM
BERKAS</b></i></td>
<td
width="45">3</td>
</tr>
</table>
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
3. Materi
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<table
border="4" bordercolor="#FFFF00" cellpadding="3"
cellspacing="1" width="530" height="382">
<tr> <tr>
<td
width="140"><p align="center"><img
src="file:///D|/Pictures/logo/Cokro Green.jpg" width="160"
height="100" align="middle"><td height="60"
width="240">
<p
align="center"><b><font face="constantina"
size="4">MATERI LAPORAN</font></b></td>
</tr>
<tr>
<td
valign="top" height="304"
width="322"><ul><li><font face="kristen
itc" size="4"><A
HREF="Index.html">Home</A></font></li>
<li><font
face="kristen itc" size="4"><A
HREF="About.htm">About Me</A></font></li>
<li><font
face="kristen itc" size="4"><A
HREF="Materi.htm">Materi</A></font></li>
</ul>
</td>
<td
width="263" align="center" valign="top"
height="304"><p align="center"><b><font
face="georgia">PENGENALAN TUGAS WEB
I</font></b></p>
<p><b><font
size="+1">DAFTAR ISI</font></b></p>
<pre
align="left"><A HREF="#materi"
align="center">BAB I</A> <b><u><font
size="+2">Sekilas tentang tugas
ini</font></u></b></pre>
<pre
align="left"><A HREF="#materi2"
align="center">BAB II</A> <b><u><font size="+2">Materi
yang diberikan</font></u></b></pre>
<pre
align="justify"><a
name="materi"></a><font
size="+1"><b>BAB I</b></font><font
face="kriten itc"><Font size="+2">Pada bab ini
permasalahan yang akan diketengahkan adalahmembuat tiga halaman WEB yang saling
berhubungan dengan menu link.</font></font></pre>
<pre
align="justify"><a
name="materi2"></a><font
size="+1"><b>BAB II</b></font<font
face="constantina"><font size="+2">Pada laporan
ini materi-materi yang diberikan adalah tentang cara membuat tabel serta
bagaimana cara membuat link antar
webpage.</font></font></pre>
</tr>
</table>
</body>
</html>
4.Asal
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<H1>
<center>
<H2>
<center><font
color="#0000FF">
SELAMAT DATANG
</font></center>
</H2>
<center><marquee
direction="up">
<center>
<font size="4"><font
color="#CC0099">DI SITUS SAYA</font></font>
</marquee>
<p><font size="6"><fontcolor="#CC0099">www.wahabeLyumi.co.id</font></font></p>
</center>
</center>
</center></H1>
<center><font
size="8"><font color="#0000FF">www.eLyumi.com</font></font></center>
</body>
</html>
5. Menu
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<body>
<a
href="WEB.htm" target="utama"><p
align="center"><font
size="+3">PEMBUKA</font></p></a><br>
<a
href="ASAL.htm" target="utama"><p
align="center"><font
size="+3">IKLAN</font></p></a></body>
</html>
</body>
</html>
6. WEB
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p
align="center"> <font
size="45"></font><hr align="center" width="100"></p>
<p
align="center"> <font face="arial"
color="#FF0000" size="+2">BAND YANG SAYA SUKA
MUSIKNYA</font></p>
<p
align="center"><font size="+1"
color="#FF0000"> ADALAH : </font>
<center><ul
type="circle"></ul>
<font
size="+2" color="#0000FF"><li>Avenged
sevenfold</li></font>
<font
size="+2"
color="#0000FF"><li>Attack-attack</li></font>
<font
size="+2"
color="#0000FF"><li>Ungu</li></font>
<font
size="+2"
color="#0000FF"><li>Bondan</li></font></center>
</body>
</html>
7. Awalan
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<h1
align="center"><font color="#00FF00"><img
src="../../../../Pictures/logo/elyumi/hitam.bmp""
width="150" height="100">
eL_Yumi</font></h1>
</body>
</html>
8. Password
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.eLyumi.com</title>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<form
name="biodata" method="post"
action="../tugas%20web/modul%203/inisialisasi2.html">
<table border>
<tr>
<td
width="200">User Name</td>
<td><input
type="text" name="user_name" ></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password"
name="password" ></td>
</tr>
<tr>
<td>Re-type
Password</td>
<td><input
type="password" name="re_password" ></td>
</tr>
<tr>
<td>E-mail</td>
<td><input
type="text" name="e_mail"
size="40"></td>
</tr>
<tr>
<td></td></tr>
<tr>
<td>Nama</td>
<td><Input
type="text" name="nama",size="100"></td>
</tr>
<tr>
<td>NIM</td>
<td><Input
type="text" name="NIM",size="50"></td>
</tr>
<tr>
<td>Alamat</td>
<td><Input
type="text"
name="alamat",size="50"></td>
</tr>
<tr>
<td>Kota asal</td>
<td><select
name="kota_asal">
<option
selected> </option>
<option>Magelang</option>
<option>Makassar</option>
<option>Jakarta</option>
<option>Bali</option>
<option>Yogyakarta</option>
<option>Semarang</option>
</select></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td><input
type="radio" name="jenis_kelamin"
value="pria">Laki-Laki
<input type="radio"
name="jenis_kelamin" value="wanita">Perempuan</td>
</tr>
<tr>
<td>Hobi</td>
<td><input
type="checkbox" name="hobi"
value="Olahraga">Olahraga<br>
<input type="checkbox"
name="hobi" value="Main Ps">Main PS<br>
<input type="checkbox"
name="hobi" value="Koleksi Barang Seni">Koleksi Barang
Seni<br>
<input type="checkbox"
name="hobi" value="Musik">Musik<br>
<input type="checkbox"
name="hobi" value="Membaca">Membaca</td>
</tr>
<tr>
<td>Deskripsi Pribadi</td>
<td><textarea
name="descript" cols="25" rows="10"
co></textarea> </td>
</tr>
<tr>
<td><input
type="submit" name="submit" value="KIRIM">
<input type="reset"
name="reset" value="HAPUS"></td>
</tr>
</table>
</form>
</body>
</html>
9. CSS dengan Tabel
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>http://www.eLyumi.com</title>
<style type
="text/CSS">
<!--TH {
font-weight : italic; background-color : blue; color : red; }
TR { background-color : silver; color :
green; }
--></style> </head>
<body>
<table>
<TR>
<TH
width="37">dsadf</TH>
<TH
width="32">dsads</TH>
</TR>
<TR>
<TD>2fd</TD>
<TD>3sfdsd</TD>
</TR>
<TR>
<TD>3fdwef</TD>
<TD>3sdf</TD>
</TR>
</table>
</body>
</html>
Tidak ada komentar:
Posting Komentar