February 2011 ~ miffaradisa

20.2.11

Studi kasus

Script css

<br />#wrapper {<br />margin: auto;<br />width: 1000px;<br />}<br /><br />#header {<br />width: 1000px;<br />height:90px;<br />border: 1px solid blue;<br />}<br /><br />#nav {<br />float: left;<br />width: 1000px;<br />height: 25px;<br />border: 1px solid red;<br />}<br /><br />#cont {<br />width: 1000px;<br />height: 450px;<br />border: 1px solid green;<br />}<br /><br />#sidebar {<br />float : left;<br />margin-top: 20px;<br />margin-right: 20px;<br />margin-left: 20px;<br />width: 650px;<br />height: 370px;<br />border: 1px dashed blue;<br />}<br /><br />#sidebar2 {<br />float: right;<br />margin-top: 20px;<br />margin-right: 20px;<br />width: 270px;<br />height: 370px;<br />border: 1px dashed purple;<br />}<br /><br />#footer {<br />clear: both;<br />width: 1000px;<br />height: 30px;<br />border: 1px solid black;<br />}<br />

Script html

<br /><!DOCTYPE HTML><br /><html lang="en"><br /><br /><head><br /><title>css2</title><br /><link rel="stylesheet" href="css2.css" type="text/css"><br /></head><br /><body><br /><div id="wrapper"><br /><div id="header"><br />header<br /></div><br /><div id="nav">nav</div><br /><div id="cont"><br /><br /><div id="sidebar">art</div><br /><br /><div id="sidebar2">art2</div><br /></div><br /><div id="footer">copyright</div></div><br /></body><br /></html><br />

Tugas praktikum

script CSS

<br />#wrapper {<br />margin: auto;<br />width: 1000px;<br />}<br /><br />.favelink {<br />float: right;<br />background-image: url(body.gif);<br /><br />}<br />#header {<br />width: 1000px;<br />height:110px;<br />background-image: url(hhh.gif);<br />font-family: verdana;<br />text-align: left;<br />font-size: 10px;<br />color: #dcc4a6;<br />}<br /><br />#nav {<br />float: left;<br />width: 1000px;<br />height: 25px;<br />background-image: url(ff2.gif);<br />}<br /><br />#cont {<br />width: 1000px;<br />height: 450px;<br />background-image: url(bg2.gif);<br />background-repeat: default;<br />}<br /><br />#sidebar {<br />float : left;<br />margin-top: 25px;<br />margin-right: 20px;<br />margin-left: 20px;<br />width: 650px;<br />height: 370px;<br />}<br /><br />#sidebar2 {<br />float: right;<br />margin-top: 10px;<br />margin-right: 10px;<br />width: 300px;<br />height: 280px;<br />background-image: url(bs3.gif);<br />font-family: verdana;<br />text-align: left;<br />font-size: 10px;<br />color: #1f130b;<br />overflow: auto;<br />}<br /><br />#sidebar3 {<br />float: right;<br />height: 120px;<br />width: 300px;<br />background-image: url(s3.gif);<br />margin-bottom: 5px;<br />margin-right: 10px;<br />margin-top:5px;<br />}<br /><br />#footer {<br />clear: both;<br />width: 1000px;<br />height: 30px;<br />font-family: verdana;<br />font-size: 9px;<br />text-align: center;<br />color: #FFFFFF;<br />background-image: url(ff.gif);<br />}<br />ul {<br />margin:0;<br />padding:0;<br />list-style: none;<br />}<br /><br />ul li {<br />position: relative;<br />float: right;<br />width:65px;<br />}<br /><br />li ul {<br />position: absolute;<br />top: 1px;<br />display: none;<br />}<br /><br />ul li a {<br />display: block;<br />text-decoration:none;<br />line-height:2px;<br />color:#cbb093;<br />padding:7px;<br />background:#2f1f14;<br />margin:1px 1px;<br />}

Script html

<br /><!DOCTYPE HTML><br /><!DOCTYPE HTML><br /><br /><html lang="en"><br /><br /><br /><br /><head><br /><br /><title>pendtoffA</title><br /><br /><link rel="stylesheet" href="css2xx.css" type="text/css"><br /><br /></head><br /><br /><body><br /><br /><body bgcolor="#c1b299"><br /><br /><div id="wrapper"><br /><br /><div id="header"><br /><br /><table><br /><br /><tr><br /><br /><td width="600px"></td><br /><br /><td><br /><br /><marquee behavior="alternate"><div align="center">♠  Welcome to  ♠ <br /><br /><br /><br /><br />...<b> S1 PTI 2009 off.A </b> Official Site ...<br /><br /><br />... its all about <i> our never ending story... </i></marquee></div></td><br /><br /></tr><br /><br /></table></div><br /><br /><br /><br /><div id="nav"><br /><br /><br /><br /><br /><br /><ul id="nav"><br /><br /><span style="font-family:sans-serif;font-size:85%;"><div align="center"><br /><br /><li><a href="">credit</a></li><br /><br /><li><a href="">gallery</a></li><br /><br /><li><a href="">news</a></li><br /><br /><li><a href="">profile</a></li><br /><br /><li><a href="">home</a></li><br /><br /><span color = "#FFFFFF"   style="font-family:tahoma;font-size:85%;"><br /><br /><div align="left"><br /><br /><b> .search</b><br /><br /><input type="”search”" name="”search”" size="20" width="15"><br /><br /></ul><br /><br /></div><br /><br /><br /><br /><br /><br /><div id="cont"><br /><br /><br /><br /><br /><div id="sidebar"><br /><br /><br /><br /><img src="all2.jpg" align="center" /></div><br /><br /><br /><br /><div id="sidebar2"><br /><br /><br /><br /><div align="center" padding="2px"> <br /><b>♥ My friends, my Inspiration..  ♥</b></div><br /><br /><br /><br /><p>Friends, Remember, when we first met..? We had such fun which I never will forget...<br /><br />Since then, the times are so good because We've always stuck together… Thanks for every little things that you’ve done for me.. And I love you friends, more than you could ever imagine..<br /><br /><br /><br /><br /><br /><b>Well, Friends come and go in our lives. But in a few find places, so deep in our hearts,  we’ll know that <br /><br />they will always be with us..</b><br /><br /><br /><br /><br /><br />Life give us friend to know that we have Rainbow..<br /><br /><br />Although in every shade of light and dark, <br /><br /><br />you’ll always have a prism to help me see the colors of my world…<br /><br /><br /><br /><br /><br />And friends are like mornings, although you can’t have them for a whole day, you can be sure that they will be there when you wake up tomorrow, next year, and forever…<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />A friend is not nessasaraly someone who acts kindly to you, a true friend is one who even if may fight with you and argue, <br /><br />will always fight for you when time comes. <br /><br />A true friend understands you without talking about it. A true friend knows your weak places. <br /><br />A true friend may laugh at you, but only to make you stronger, a true friend will laugh at your <br /><br />jokes but not at jokes made by others aimed at you. They will be happy about your victories and will share your sorrows. <br /><br /><br /><br />A friend is a person who you ultimately need, whether you realize it or not. One is lucky to have a true friend, <br /><br />one that is hard to find though he/she is always close: themselves. A seond true friend is very hard to find, <br /><br />almost imposible. some people live with only one friend (the one I mentioned first), <br /><br />some live with none, lucky ones live with two. </div><br /><br /><br /><br /><div id="sidebar3"><br /><br /><span color = "#1a0e06"   style="font-family:courier-new;font-size:85%;"><div align="center"><br /><br /><br /> <b> <blink> >>  Visit Our other pages >> </blink></b><br /><br /><br /><br /><a href="http://www.facebook.com/"><span color = "#000000"   style="font-family:courier-new;font-size:85%;"> <b> Our facebook</b></a><br /><br /><br /><a href="http://www.pendtoffa.blogspot.com/"> <span color = "#000000"   style="font-family:courier-new;font-size:85%;"><b>Our Blog </a><br /><br /></div><br /><br /></div></div><br /><br /><br /><br /><div id="footer">copyright © 2011<br /><br /><br />by Miftah Faradisa - 109533423218 - S1 PTI off.A</div></div><br /><br /><br /><br /></body><br /><br /></html>

15.2.11

PTI479

Tugas Face-mu

February 15, 2011 Unknown No comments

After Editing :

<br /><br />#wrapper {<br />margin:auto;<br />width: 100%;<br />}<br /><br />#header{<br />clear: both;<br />height: 90px;<br />border: 0px;<br />background-image: url(h.jpg); <br />background-repeat: repeat-x; <br />}<br /><br />#loginq { <br />float: right; <br />height: 30px;<br />font-weight:bold;<br />}<br /><br />#content {<br />float: right;<br />width: 100%;<br />height: 450px;<br />background: #550002;<br />background-repeat: repeat-x; <br />}<br /><br />#footer {<br />clear : both;<br />height: 50px;<br />background-image: url(h.jpg); <br />background-repeat: repeat-x; <br />}<br /><br />.cred {<br />	font-family: tahoma;<br />	font-size: 10px;<br />	text-align: center;<br />	font-weight: bold;<br />	color: #FFFFFF;<br />	padding: 5px 5px 5px 5px;<br />}<br /><br /><br />.table1 {<br />	font-family: tahoma;<br />	font-size: 11px;<br />	text-align: left;<br />	color: #FFFFFF;<br />}<br />

<br /><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional.dtd"><br /><html xlmns="htt<!DOCTYPE html PUBLIC"><br /><html xlmns="http://www.w3.org/1999/xhtml" lang="en" lang="en"><br /><br /><head><br /><title>friend</title><br /><link rel="stylesheet" href="m.css" type="text/css"><br /></head><br /><br /><body><br /><div id="wrapper"><br /><div id="header"><br /><table class="table1"><br /><tr><br /><td width ="100px"></td><br /><td><br /><img src="ff.gif" align="left" /></td><br /><br /><td width = "500px"></td><br /><br /><td><br />Email <br /><br /><input type="text" name="nme" size="20px"><br /><br /><input type="checkbox"> Biarkan saya tetap masuk </td><br /><td width="20px"></td><br /><td>Password  <br /><input type="password" name="pwd" size="20px"><br /><br />Lupa password..?</td><br /><td width="10px"></td><br /><td><br /><a href="http://www.facebook.com/"><img src="1.jpg" height="20px" border="#87bbfb" /></a></td><br /><td width="100px"></td></tr></table><br /></div><br /></div><br /><br /><div id="content"><br /><table class="table1"><br /><tr><td width="10px"><br /><td><br /><img src="cc3.jpg" height="420px" align="center" /></td><br /><td width="30px"></td><td background="img_09.jpg" width=" 550px"><br /><marquee behavior="alternate"><div align="center">Life gives us friends to make sure we have rainbows. <br /><br />Through every shade of light and dark, <br /><br />you have been a prism to help me see the colors of my world.</marquee><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div align="left">Didn't have any account..?? <b>Sign Up for free </b> its free and always free... <br /><br /><br /><br /><br />First name	: <input type="text" name="nme0" size="40px"><br /><br /><br />Last name	: <input type="text" name="nme1" size="40px"><br /><br /><br />Your email	: <input type="text" name="nme2" size="40px"><br /><br /><br />Password		: <input type="password" name="pwd2" size="40px"><br /><br /><br /><br /><a href="http://www.facebook.com/"><img src="1a.jpg" align="center" height="20px" border="#87bbfb" /></a><br /></td><br /></tr><br /></table><br /></div><br /><div id="footer"><br /><div class="cred"><br />copyright © Miftah Faradisa<br /><br />109533423218--S1 PTI 2009 off.A</div><br /></div></body><br /><br /></html>

Before Editing :

Script CSS dan html

<br /><br /><br />#wrapper {<br />margin:auto;<br />width: 1000px;<br />border: 1px solid white;<br />}<br /><br />#header{<br />height: 90px;<br />background: #87bbfb; <br />}<br /><br />#loginq { <br />float: right; <br />height: 30px;<br />font-weight:bold;<br />}<br /><br />#content {<br />float: right;<br />width: 1000px;<br />height: 420px;<br />background-image: url(bg.jpg);<br />background-position: center top;<br />background-repeat: repeat-x; <br />}<br /><br />#footer {<br />clear: both;<br />height: 50px;<br />background: #87bbfb;<br />}<br />.cred {<br />	font-family: tahoma;<br />	font-size: 10px;<br />	text-align: center;<br />	font-weight: bold;<br />	color: #FFFFFF;<br />	padding: 5px 5px 5px 5px;<br />}<br />.pic {<br />padding: 1px 5px 5px 1px;<br />}<br /><br />.table1 {<br />	font-family: tahoma;<br />	font-size: 11px;<br />	text-align: left;<br />	color: #FFFFFF;<br />	border: 0px;<br />}<br />

<br /><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional.dtd"><br /><html xlmns="htt<!DOCTYPE html PUBLIC"><br /><html xlmns="http://www.w3.org/1999/xhtml" lang="en" lang="en"><br /><br /><head><br /><title>Desain Layout Sederhana</title><br /><link rel="stylesheet" href="m.css" type="text/css"><br /></head><br /><br /><body><br /><div id="wrapper"><br /><div id="header"><br /><div id="”loginq”"><br /><img src="fb.jpg" align="left" /><br />     <br /><div align="right"><br /><br /><table class="table1" width="500"><br /><br /><tr><br /><td>Email <br /><input name="”nama”" size="”20" type="”text”/"><br /><br /><input type="checkbox"> Biarkan saya tetap masuk </td><br /><td>Password   <br /><input type="”password”" size="”20" name=" psd"><br /><br />Lupa password..?</td><br /><td><a href="home.html"><img src="1.jpg" height="20px" border="#87bbfb" /></a></td><br /><td><img src="b2.jpg" height="15px" /></td></tr></table><br /></div><br /></div><br /></div><br /><br /><div id="content"><br /><br /></div><br /><div id="footer"><br /><div class="cred"><br />copyright © Miftah Faradisa<br /><br />109533423218--S1 PTI 2009 off.A</div><br /></div></body><br /><br /></html>

Printscreen :

8.2.11

PTI479

Pemrograman Berbasis Web

February 08, 2011 Unknown No comments

===STUDI KASUS ===

Dibuat menggunakan beberapa halaman html yang di-link-kan dengan source code :

<br /><html><br /><head><br /><title>exframe</title><br /><frameset rows="15%,*, 10%"><br /><br /><!--frame atas --><br /><frame src="topp.html" name="top" id="top"><br /><br /><frameset cols="20%,*, 20%"><br /><br /><!--frame atas --><br /><frame src="lft.html" name="top" id="top"><br /><!--frame kiri --><br /><frame src="index.html" name="left" id="left"><br /><!--frame kanan --><br /><frame src="mid.html" name="right" id="right"><br /><br /><!--frame mid --><br /><frame src="indo.html" name="mid" id="mid"><br /></frameset><br /><!--frame bawah --><br /><frame src="bot.html" name="bot" id="bot"><br /><br /><br /></html> <br />

Setelah diedit :

Sebelum diedit :

20.2.11

Modul 3- Design Web CSS

15.2.11

Tugas Face-mu

8.2.11

Pemrograman Berbasis Web

Popular Posts

Labels

Blog Archive

My Blog List

This is me