[Basics I] [Basics II] [Emailing] [Graphics] [Lists] [Tables] [Linking] [Marquee] [Backgrounds] [Music] [Email Me] [Home]
Zog’s HTML Made Easy
HOW TO ADD & EDIT GRAPHICS / IMAGES
 THINGS YOU SHOULD KNOW 1ST ABOUT GRAPHICS
THINGS YOU SHOULD KNOW 2ND ABOUT GRAPHICS
HOW TO ALIGN YOUR GRAPHICS ON YOUR WEB PAGE
HOW TO ALIGN TEXT WITH GRAPHICS ON YOUR WEB PAGE
HOW TO CONTROL THE SIZE OF YOUR GRAPHICS
HOW TO ADD HORIZONTAL LINES


GRAPHICS
  • To have a cool and appealing Web Page you really need to add Graphics (Images). You can find Graphics for free all over the Internet. I recommend Cool Archive. But please don't take graphics from other people's Web sites without their permission. After you learn HTML, you may want to think about creating your own graphics. Email Me if you interested in obtaining more information in different kinds of software that will enable you to creating your own graphics. I have several cheap and user friendly recommendations.

    RETURN TO THE TOP
    RETURN HOME


    THINGS YOU SHOULD KNOW 1ST
    • SAVING GRAPHICS
      Right mouse-click on the link to the graphic.
      Then Select "Save link as" or "Save target as".
      Select where you want to store the file on your computer. Re-name the file if you want.
      Click "SAVE".
      The last thing to do is in your EDITOR upload the graphics into your file directory.

    • FILE FORMATS:
      You should only work with graphics file names that in are in the .jpeg and .gif formats. All EDITORS recognize these formats.
      (Note: Remember that GRAPHIC FILENAMES ARE CASE SENSITIVE.)

    • PLACING IMAGE:
      Use this tag to place the image on your page (NO closing tag is needed).
      <img src="filename.jpg">
      <img src="filename.gif">

    • COURTESY:
      If the site or owner does not specify the graphics are for free, you should always create a link back to their page.
    RETURN TO THE TOP
    RETURN HOME


    HOW TO ALIGN YOUR GRAPHICS ON YOUR WEB PAGE
    • If you want your graphic to ALIGN IN THE CENTER of the page use <center> and </center> tags.
    • EXAMPLE:
      <center> <img src="OSU.jpg"> </center>

    • If you want it to ALIGN ON THE RIGHT or LEFT SIDE OF THE PAGE, use the tag:
      <img src="filename" align=right>
      <img src="filename" align=left> (Note: Left is also your DEFAULT)
    RETURN TO THE TOP
    RETURN HOME


    HOW TO ALIGN TEXT WITH GRAPHICS
    • If you wish to have text next to your image, you may want to set the alignment of the text.
      No alignment specified / DEFAULT

      <align=top>

      <align=middle>

      <align=bottom>

    • NOW TRY working with:
      <align=left> and <align=right>
      This can be used to help wrap your text fields around your images.
    RETURN TO THE TOP
    RETURN HOME


    HOW TO CONTROL THE SIZE OF YOUR GRAPHICS
    • Adjust the Height and Width: For faster page loading it is a good idea to specify the height and width attributes for each image in the each page. Height and width are set in pixels.

      <img src="OSU.jpg" width=64 height=64>

    • You do not have to use the original size of any of your images Adjust the values of your height and widths to change the size of your images.
      If you do not specify a width or a height, the original image size will be displayed.
      Don’t be afraid to try adjusting your images!
      If you have trouble adjusting your height and width, make sure you browser is compatible.

    • Creating “blank spaces” around your images is very easy by using HSPACE & VSPACE tags.
      Use the HSPACE AND VSPACE just like you used height and width tags.

      <img src="imagename" hspace=10 vspace=10>
    RETURN TO THE TOP
    RETURN HOME


    ADDING HORIZONTAL LINES
    • Adding horizontal lines to your web page is very easy. Just use the following code:

      <center><hr width=## size=##> </center>

    • Width is a percentage (%) of the width of your page, and size (thickness) is expressed in the number of pixels.
    • Here is an example: <hr width=25% size=15>


    • The Horizontal bar will always default to the center unless you add align=right within your <hr> tag. For example <hr width=35% size=10 align=right> will look like this


    • Try adding color to your Horizontal line. This will make your web page more appealing to the viewer. Just add color=”#xxxxxx” within your <hr> tag.

      <HR size=5 width=75% color="##FA8072"> will look like this:



      Created by
      Zog's Web Design
      Resides on Yahoo!
      Yahoo! Rights Apply