Modul 3- Design Web CSS ~ miffaradisa

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>

20.2.11

Modul 3- Design Web CSS

0 comments:

Popular Posts

Labels

Blog Archive

My Blog List

This is me