IST 561 Spring 2009 Session4, March 2, 2009

443 views

Published on

The presentation covering CSS formatting and images for XHTML web pages.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
443
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IST 561 Spring 2009 Session4, March 2, 2009

  1. 1. ! quot; # $% & $ %' % (' $ % $) ! $ %) $ $ &$ & %% $ (' $ # $! $ & $ ' $ !% (' $ & # $! $ & $ *%$ $ ! * )$ && % % ( ' % $ $! % ) ! $$ (' $ 2
  2. 2. # $! + <hr /> 3
  3. 3. # $! '% $ ' & % % & # ' % ,) % '%, '%, h2 { border: 2px solid #ff0000 }
  4. 4. - & % ! )% & . % ') &$ / %) % 0 & -% ! & h2 { border: 2px solid #ff0000; } a { border: 2px solid #ff0000; }
  5. 5. 1 # $! & % & ' % ,' & ' % , ' % ,$ ' % , h2 { border-bottom: 2px solid #ff0000 }
  6. 6. # $! & ') 23 & % '% .' % ! h2 { border: 2px solid #ff0000; padding: 5px; } 4 %% $ $! %quot;
  7. 7. 1 # $! %% $ & % & %% $,' & %% $, %% $, $ %% $, h2 { border: 2px solid #ff0000; background-color: #cccccc; padding-left: 5px; padding-bottom: 10px; padding-top: 10px;}
  8. 8. ) !& 5! $ 5! $! %' & %% $ %5 ! $! %$ %% $ h2 { border: 2px solid #ff0000; background-color: #cccccc; padding: 20px 10px; }
  9. 9. *! !& 5! $ # $! $ ' & % %% $ h2 { border: 2px solid #ff0000; width: 250px; background-color: #cccccc; padding: 30px 10px 5px 20px; }
  10. 10. h1 { background-color:#191970; color:#E6E6FA; padding: 15px; font-family: Georgia, quot;Times New Romanquot;, serif; } h2 { background-color:#AEAED4; color:#191970; font-family: Georgia, quot;Times New Romanquot;, serif; border-bottom: 2px dashed #191970; }
  11. 11. ' % (' $ . & 5 ') %5 & 67. ( (' $ $ ! ' ) %% ') '% % % ') ) ) $ %quot; h2 { background-color: #ff0000 border-top: thin solid #000000} } 13
  12. 12. && !% (' $quot; * 89 94 14
  13. 13. $*& - !% %$ . & !& : ' $! % # ' & % 1 & # ' % 15
  14. 14. 8 9 $ 7. ! - !% $ 1 ;& 1 & # ' & % # '&% 9$ 58 97 < & %% 16
  15. 15. 9 ' 4) ! & ! &! 5 / ') '! % ,, & ( '% 0 ! $ 1 & # &' ' *= 8 97 -) ! $)$ 17
  16. 16. # $! $ (' $ <img src=“hat.gif” alt=“top hat” height=“100” width=“100” /> '! * & $ '! # $! . % ' $ $ '! 3$ $ . )% '! (% $ . 18
  17. 17. %% $ > 5 '! %% $ 3 + '! 4 ! ! # %% $ & & !
  18. 18. ? @! %quot; # $! '! . 5 & $A &$ 4: & &$ 1 BC D ! % 5&$ : quot; # $! $% '! 1 %) & $ ' 5 % . 1! 1? (' $) .
  19. 19. &$ ! & &$ & <a href=quot;index.htmlquot;><img src=quot;home.gifquot; height=quot;19quot; width=quot;85quot; alt=quot;Homequot; /></a> -) !& %% '% &$ # $! # & '% img {border:0 } 22
  20. 20. # $! ' $ ! %, & $ -% ! ' $ !%& $ / 0 body { background-image: url(background1.gif); }
  21. 21. !& '! $quot; h2 { background-color: #d5edb3; color: #5c743d; font-family: Georgia, quot;Times New Romanquot;, serif; padding-left: 30px; background-image: url(trilliumbullet.gif); background-repeat: no-repeat; }
  22. 22. !' % ' # $! $ &% E$ % ' $ !% FG & 6 # !% ' # $! & % '$ $ 5 %) ' $ !% ( ' $6 H ! * 6( % $& $ ! &! $! &$ $) ' % BI I 5% % ! '! ' % 26
  23. 23. 1 ) ! ! ! &' % $ . / $ E$ E $ $0 J ! & '! % 5 &$ '' & & $) &&& ) $ $ $ & &) $& 'E ! '! $
  24. 24. <img src=“images/home.gif” alt=“Home” height=“100” width=“200”/> 28
  25. 25. & &$ $! % $5 &$ 30
  26. 26. F& G & & F G & & # ' $ $ '! '! % '! 31
  27. 27. <map name=quot;boatquot; id=quot;boatquot;> <area href=quot;http://boat.comquot; shape=quot;rectquot; coords=quot;24, 188, 339, 283quot; alt=“fishing boatquot; /> </map> <img src=quot;boat.jpgquot; usemap=quot;#boatquot; alt=“Lake Michiganquot; width=quot;416quot; height=quot;350quot; />
  28. 28. # & ! ! $ $ quot; %' 9 %' * ) $ K9 / quot;A A $ $ &A0 ) %$ & 9! A) % % ,@! $ 9! $ # %$ $ ! $ !% ) $ 3 $ %$ $ 33
  29. 29. # %& $ %& ?! &$ # %& $ +) &$ @! ? ! %& && < ' $ = 34
  30. 30. L & 5 & 5 % 1 $ ') ' $ !% % . 9 5% . @! 5 ,. & 1 '! !&$ & ! 5$ ! &$ 5% & . ' & $ 35
  31. 31. #5 % %! ! $5 ! & %$ (' $ ? & &' $! % % ' ! % $ 4!& ' 5 5)' $ $ %) % & ,,) ! ! $& $ ' ! & &+ ! ) 5% 5 &$ /! . 0 %! '! ! $ 36

×