• Crazy
  • Cool
  • Awesome
  • Angry
  • Happy
  • Hungry
  • Sad
  • Shy
  • Tired
  • User Tag List

    Thanks Thanks:  0
    Likes Likes:  0
    Dislikes Dislikes:  0
    Results 1 to 3 of 3

    Thread: Using HTML for Images - Part 1

    1. #1
      The X Universe Founder Mokonzi's Avatar
      Credits
      7,682.15
      Points
      52,464
      is working on Project X
       
      I am:
      Happy
       
      Total Contributions For

      Mokonzi Points (Total)      £ 215.00
      Total Downloaded
      0
      Total Downloaded
      0
      Main InfoStatus and ThingsPoints and CreditsOther
      Join Date
      03-01-2006
      Location
      Leeds
      Posts
      10,061
      Blog Entries
      6

      Default Using HTML for Images - Part 1

      Needless to say (but we will say it! ^-^) is that a webpage would be nothing without images. They are what make up the substance of what most people seen on the net.

      Images also introduce us to another major change in [abbr=or XHTML as noted previously]HTML[/abbr] coding. We mentioned before that all HTML has an opening tag, and a closing tag. Images introduce a new problem. There doesn't need to be a closing tag to an image, so in the latest version of HTML/XHTML the '/' has been used in a different way.

      Instead of (Please note this is wrong):
      Code:
      <img>Here would be the image URL</img>
      We use this:
      Code:
      <img>
      Please note the ' />' (The space is important). That tells the web browser that you have reached the end of the image tag. Also you will have noticed the expression 'src=""'. The URL location of the image is placed between the quotation marks ("") which tells the browser where to look for the image. Further details on the URL and how it can be formatted will be covered in the topic about hyperlinks.

      'src' is called an attribute. Attributes provide the browser with other pieces of information. As in this case the URL location. Other attributes (that are applicable here) can be:
      • alt - Defines a short description of the image
      • height - Defines the height of an image
      • longdesc - A URL to a document that contains a long description of the image
      • width - Sets the width of an image


      'alt' is an important attribute (we could call it a must) for HTML. This provides a description that the browser can use if it can't access the image, if the browser has been told not to load images, and also will be read by people with disabilities (tools that read webpages aloud to the user use this to help provide more information about what the user should be seeing).

      As will be discussed in Part 2 of this topic, we need to make good use of 'alt' and 'src' attributes.

      Last edited by Mokonzi; 10-11-2007 at 05:40 PM.
      Mokonzi
      0 0 0
       

    2. #2
      TXU Hero Woffin's Avatar
      Credits
      1,784.36
      Points
      2,149
      This user has no status.
       
      I am:
      ----
       
      Total Contributions For

      Woffin      £ 0.00
      Total Downloaded
      0
      Total Downloaded
      0
      Main InfoStatus and ThingsPoints and CreditsOther
      Join Date
      31-03-2007
      Location
      Widnes, UK
      Posts
      640

      Default

      Here's a general tip for embedding images with HTML that I always use. Make sure that you always define your image size in height and width. For example, if you have an image of Mokonzi at the beach that is 400x300px then you would use the following code:

      Code:
      <img src="http://www.website.com/subdomain/image.jpg" width="400" height="300" alt="Mokonzi at the beach">
      By doing this you are making a page easier to look at when it is loading as you are setting out a space for the image to load in, instead of forcing the page to expand as it loads all the images .

      Last edited by Woffin; 18-11-2007 at 02:25 AM.

      06/11/07: 5-08:45, 94958km, 64.4mCr, Master Industrialist 26%, Crusader 52%.
      0 0 0
       

    3. #3
      The X Universe Founder Mokonzi's Avatar
      Credits
      7,682.15
      Points
      52,464
      is working on Project X
       
      I am:
      Happy
       
      Total Contributions For

      Mokonzi Points (Total)      £ 215.00
      Total Downloaded
      0
      Total Downloaded
      0
      Main InfoStatus and ThingsPoints and CreditsOther
      Join Date
      03-01-2006
      Location
      Leeds
      Posts
      10,061
      Blog Entries
      6

      Default

      Good tip Woffin! Thanks matey!

      Mokonzi
      0 0 0
       

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •