Results 1 to 2 of 2

Thread: How to Insert an Image into a Web Page with XHTML

  1. #1
    Join Date
    Dec 2007
    Posts
    71

    How to Insert an Image into a Web Page with XHTML

    With the influx of high-speed connections in homes, Internet sites have never been so rich in images and other graphics.

    This tag is the tag <img /> is a tag that do not require a closing tag. This tag must always two required attributes:
    • src, which indicate the source of the image by a relative path or absolute
    • alt, which will provide an alternative text if the image can be displayed


    <Img src = "images / car.jpg" alt = "My Car" />

    Alternative text and tooltips

    The alternative text, evidenced by the alt attribute is very important. On the one hand, it is mandatory to comply with XHTML strict recommendations, on the other hand, it is more than just text used for " be standards. "This text should contain an accurate description of the image that accompanies it. Indeed, if the image does not appear (for whatever reason), the browser will replace it by its alternative text. Another important point is the blind using voice synthesizers can only be based on the text to read a page because they do not see the images. The alternative text is very important to them. Think about it when you realize your web pages.

    To place a tooltip on the image, use as we have seen for links, the title attribute.

    <Img src = "images / car.jpg" alt = "My Car" title = "It is not beautiful?" />

    Different image formats used on the web

    There are different image formats. The most famous being the BMP can be achieved with any image editor. The disadvantage of this format is cumbersome. Indeed, an image coded on 24 bits in 800 * 600 will occupy 1.37 MB With a 56k connection operating at 5 kb / s, there were more than 280 seconds to load. You imagine that even the most patient of visitors eventually go away.

    It was therefore necessary to find a solution to reduce the weight of the images in the least losing quality. Different sizes are apparent. The most used on the web are the following formats:
    . gif
    . jpeg
    . png

    Gif format is based on the principle of indexing. It can store 256 colors maximum (with a color used to make the transparency if you wish). This format is not suitable for photos because the maximum number of colors is too low. However, it is perfectly suited for icons or animated images (the only format to the web). You will have the opportunity in the photo editing software to specify a number of colors to be stored. The more you reduce the number of colors, plus the image is slightly less but the quality is good. You have to find a compromise.

    Jpeg format is suitable for photos. Any good photo editing software will allow you to specify a quality level ranging from 0 to 100. The higher the quality is low, the better the weight status of the image on the disc, and therefore the image is quick to download. Again, we must find a compromise between quality and weight.

    Png format has several advantages: there are 8-bit PNG using a process similar to gif, png, but also a 24-bit to save pictures. PNG compresses better than gif and can handle different levels of transparency (unlike gif, who manages a single fact: it is transparent, or it is not).

  2. #2
    Join Date
    Nov 2005
    Posts
    344

    Re: How to Insert an Image into a Web Page with XHTML

    You can determine the position of the image on your web page. You are provided with three alignment attributes, where you can place an image in your Web page:
    • align=”left” – this will place the image at the left margin of your web page
    • align=”center” – this will place the image at the center of your web page
    • align=”right” – this will place the image at the right margin of your web page


    An image is called an inline image because it is capable of sharing a line with text.
    • <img src=”graphics/smile.gif” align="top"> - Text will appear on top side of the image
    • <img src=”graphics/smile.gif” align="middle"> - Text will appear at the center of the image
    • <img src=”graphics/smile.gif” align="bottom"> - Text will appear on bottom side of the image

Similar Threads

  1. How to insert FLV page in Flash
    By GracieSingh in forum Software Development
    Replies: 6
    Last Post: 25-02-2010, 02:32 PM
  2. How to Create page in XHTML
    By Rebeccak in forum Guides & Tutorials
    Replies: 3
    Last Post: 07-07-2009, 11:50 AM
  3. wmv, pps insert into a web page
    By filldirt in forum Windows Software
    Replies: 6
    Last Post: 19-06-2009, 09:15 PM
  4. how to insert a image in mysql
    By cnu0870 in forum Software Development
    Replies: 5
    Last Post: 28-04-2009, 05:15 PM
  5. How do I insert an image in HTML?
    By Pikachoo in forum Software Development
    Replies: 3
    Last Post: 05-02-2009, 11:09 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Page generated in 1,713,629,660.82450 seconds with 17 queries