HTML Image

by **Sfinx** Thu Nov 29, 2012 11:27 am

Code:: In this lesson we want to load internal and external images in html codes. To do this we use '<img src=…/> tag with no final tag. Below is a simple example: [center]Description In Notepad We Write Load image from the same folder as html file is in it. <img src="river.jpg"/> Load image from the folder one step higher <img src="../river.jpg"/> Load image from the folder one step higher and in its subfolder <img src="../img/river.jpg"> Load image from external server <img src="http://javascriptfreecode.com/images/logo_bg1.png>[/center] We can also determine the image height and width; And if it differs from its original size, it will be stretched to get fitted to it. If you want to save the scale, you must divide its new height by original height and multiply original width by this ratio. Here are width and height examples: [center]Description In Notepad We Write Get new height <img src="river.jpg" height="200"/> Get new height and width <img src="../river.jpg" height="200" width="300"/>[/center] You may also want to have alternative text which will be shown if the picture is not loaded because of any reasons (For example the picture cannot be found or the pictures viewing are disabled by user's browser). Here is instruction: [center]Description In Notepad We Write Get new height <img src="river.jpg" height="200" alt="<River Image>"/>[/center] You can set the image alignment. So it will be set there and other texts will come at beside of it. If you don't set the alignment, the texts come after the image not at beside of it. Or if you put the image without alignment in the paragraph tag (<p>), just the line which you set the image in it, will be at beside of the image. Now look at the examples: [center]Description In Notepad We Write Picture align left of the page and the texts are right of it. Here we have Image aligned left <img src="s.jpg" align="left"/> <br>The texts are beside it.[/center]