Embed an image in a web page
when you want to add or embed an image in your HTML page you need to use the <img> element.<img> element dose not need to ending tag becasuse it is a void element with in HTML.<img> element has some specific attributes those are
1.src attributes
The src attributes know as abbreviation for source .it use to set the path of image or an absolute or relative URL reference to the image that is to be displayed.
2.alt attributes
this alt attributes know as abbreviation for alternate, it is use for image title or names which is show
at the web page when any use move the mouse over the image.the alt attribute to show alternate text to be displayed when the image is not available due to slow connection or other mishap.
here present some example of the <img> element.
<img src="/image/mypic.png" alt="mypic" />
<img src="http://internationalyouthacuity.blog.com/logo.png" alt="Logo" />
that is very important to understand that the image is not added in the webpages.
Instead, firstly you provide a reference to the images. When the web browser reads your HTML document code, then the browser will reach at <img> element and then retrieve the image that based on the src attribute. When the image is retrieved, the web browser will merge the image into the final rendering web pages that is show at the web browser window. If the web browser cannot display any image then it will display the alternate text at the web pages.
types of Image file
When you using the <img> element in Html programs, you can put JPEG (.jpg or .jpeg), GIF (.gif), PNG (.png),or SVG (.svg) files.
The brief description of each file that are put in HTML file it should help you You take a good decision which file use in you HTML programs
(A)JPG
it is also known as JPEG,JPEG is the best for photographs because JPEG offers high compression and up to 16.8 million color combinations, but its compression algorithm is loss, it means that you lose detail every time and save the file.
B)GIF
it is great to use on small images and have a fixed number of colors. it is also supports transparent color and it is uses lossless compression .GIF is best for logos.It is also supports the ability to encapsulate multiple images in one file,and has more layers which is commonly used to provide animated GIF's images.
C) PNG
it is a best of all-around file because it is lossless high compression. it can be 48-bit true color or 16-bit gray scale .it is supports transparent color and offers variable transparency. its photos are not compressed to be as small as like JPG photos. PNG being lossless makes it worth the extra size . SO you can use png as your storage type for photos that you want to edit,when PNG displaying at the web pages, you want to save the PNG as JPG to achieve the you find best compression images.
D) SVG
SVG is know as Salable Vector Graphics.it is good for drawings.it is not good for photos.you can resize it up or down without losing it.its images are composed of color in form dots that make up the images. If you want to use scale a raster-based image up or down then you will see color.
Making image links
if you want to create a hyper link by using an images the then you place <img> element with in
<a href=""></a> tages.
as like <a href="<img src="ok.png" alt="ok image"/></a>
how to insert an image at web page a good example
you can see simple videos how to insert image in a HTML programs.
0 comments:
Post a Comment