Graphics

  BACK   HOME NEXT | Lists 

Table of Contents

  • The Tag
  • Align The Image
  • Align Text With Images
  • AN Image Link
  • AN Image Background
  • Image Tag :

    If you have your images included in a file, then add the file's name to the code as follows:

    <img src="filename/graphic name">

    If you don't have a picture file, then the tag will be :

    <img src="graphic name">

    Be sure the graphic is on the same directory (folder) where the file you are working on is found.

     Top

    Aligning The Image :

    The image always aligns to the left margin. For example :

    <img src="star.jpg"">

    will appear as :

    star

    To have it centered on the page, simply use the

    <div align=center> </div> tags


    For example :

    <div align=center><img src="star.jpg"></div>


    will appear as :

    Star

     Top

    Aligning Text With Images :

    Align = Left :

    <img src="star.jpg"> + Text

    Star

    It is a good idea to create your own Web Site from scratch. These tutorials will help you get started with the job of building a website.

    Remember :'Align = Left' is the default case, so it is not included in the code.

    Align = Right :

    <img src="star.jpg"align=right> + Text

    Star It is a good idea to create your own Web Site from scratch. These tutorials will help you get started with the job of building a website.

    Align = Middle :

    <img src="star.jpg"align=middle> + Text

    StarIt is a good idea to create your own Web Site from scratch. These tutorials will help you get started with the job of building a website.

    Align = Top :

    <img src="star.jpg"align=top>

    StarIt is a good idea to create your own Web Site from scratch. These tutorials will help you get started with the job of building a website.

    Align = Bottom :

    <img src="star.jpg"align=bottom>

    StarIt is a good idea to create your own Web Site from scratch. These tutorials will help you get started with the job of building a website.

    + <br >:

    <img src="star.jpg"> <br > + Text

    Star
    It is a good idea to create your own Web Site from scratch. These tutorials will help you get started with the job of building a website.

    Height and Width :

    It is a good idea to specify the height and width attributes for each image in the page. These attributes help you change the size of your images. For example :

    <img src="blue2.gif" width=50 height=22>


    will appear as :   Button

    But

    <img src="blue2.gif" width="40" height="17">


    will appear as :   

     Top

    Using An Image As A Link

    <a href="colors.html"> <img src="batm4.gif"> </a>

    colors

    Now, you will note that a border is around the image. To get rid of the border, simply add (border=0) to the img src tag.

    <img src="batm4.gif"border=0 >

    basics

     Top

    Using An Image As A Background of the page

    Type the command :

    <body background="$">

    The mark $ stands for an image'sname + the extention ( gif or jpg ).

    Important :

    • The background color of the page should be set side by side with the background image. If a background image can not be loaded for some reason, then the background color will be loaded instead.
    • Remember to have a background color well-matched with your font color so that people can read your page.

      BACK   HOME  Top NEXT | Lists