Astro Lesson #6 : gorgeous.GIFS.and.juicy.JPEGS

There is always something new to learn when creating web pages. Today we shall venture into the wilds of image insertion. You may have come across sites that are pure text - no matter how fascinating the topic may be, without a little razzamatazz, we the audience are quick to leave. Yes, it's that fickle old human nature again - we need stimuli for our senses or we simply turn away in boredom. That's where purty photos and graphics come in handy - they are like flowers to the bee in the grassy meadows of the internet. ( Hmmm, Damn, that's good! )

Let's discuss the two main types of graphic formats supported by most browsers today - GIF and JPEG. Don't worry too much about the names - just think of them as two distinct types ( a bit like Cookies and Muffins - they both taste yummy but they don't look quite the same and are made with different recipes! )

• JPEG is a richer format that can store 16 million colors (extra chocolate!)
• JPEG is better for compressing photos and high detail
• GIF stores 256 colors ( less cholesterol! )
• GIF is better for simple graphics, animations and line drawings
• That's about all you need to know for now - if you have a moment check out the lesson on bit depth
  
  

  How do you get your chosen pic onto the web page? Use the img tag :
  
  

  <img src="myphoto.jpg">
  
  Of course, the image you want must be in the HTML directory in order for the browser to find it. If you have put images in a sub-directory, it will need to be specified like 'zis -
  
  

  <img src="/pics/myphoto.jpg">
  
  As with text, the position can be manipulated by using other tags in front of the image tag itself
  
  <p> or <center> or <blockquote> or <div>.
  
  There are also other ways to put the picture in its proper place - namely align attributes and tables. Tables we will leave for another day (they are greedy and need a lesson all to themselves!).
  
  align.a.tiger.and.a.pussycat
  
  The default is to have the graphic on the left, with its text spilling out to the right of it. The alternatives are left, top, baseline, middle and right.
  
  

  • <img src="myphoto.jpg" align=top>
    
    Text sits at the top.
    
    
  • <img src="myphoto.jpg" align=middle>
    
    
    Text sits in the middle and will wrap onto a new line.
    
    
  • <img src="myphoto.jpg" align=right>
    
    Text sits to the left. It's really a matter of experimenting and finding out what looks best for your needs.
    
    
  
  
  

  spaced.out.spacing
  
  If you want to be even more fussy, use VSPACE and HSPACE to set extra space vertically or horizontally around the graphic.
  
  

  • <img src="myphoto.jpg" align=top hspace="10" vspace="10">
    
    This pushes content out sideways by 10 pixels on both sides.
    Vspace pushes content out top and bottom by the pixels you specify
  
  

  loopy.links
  
  Instead of having 'Click Here' written all over your page - why not use images as clickable objects to take your readers where they wish to go? Simply turn the graphic into a link (see previous lesson for links) Make sure that the graphic goes in between the link tags :
  
  <a href="http://www.users.bigpond.com/retrographix/who.html">
  <img src="myphoto.jpg"></a>
  
  Click it and see - select the browser 'back' button to return here
  
  

  Now - off you go and play with these new toys. Until next time, when we shall delve deeper into this truly super topic - borders, alternative text for images, and sizing!
   

  next.pod
  copyright.wendy.phillips.1998-2000