Guidance portal

World of Guidance and Education

Insert image links:

Image links in the content of webpage hels to demonstrate the ideas and concepts in an elaborative way. We can insert linked images in our web page. Usully we inset links on logo images but you can insert links on any image. The syntax for inserting linked image in webpage along with the explanation is given below.

     <img src="your folder image is/image name.jpg">

Complete explanation inserting image is shown on the chapter:6 you learn.

"your folder image is/imge name.jpg": this is the path where your image is stored.

Insert Link Image

Just insert the link tag with image tag to make a linked image. Procedure of inserting links are same as text links you learn in the previous chapter:9 and complete syntax is shown below with explanation.

    <a href="your path">
    <img src="your folder of image/name of image.jpg">
    </a>

"your path": Here provide the complete path of the web page or location of file you want to link with.

"your folder of image/name of image.jpg":Here provide the link image you want to be displayed on the webpage.

Note

Remember your image is must be in your folder where you save the html page.

Size of image

This sets the width of the image i.e how many pixels wide it should be displayed on the web page. This sets the height of the image i.e how many pixels high it should be displayed on the web page.Normally the person inserting the image is well aware of his requirements regarding height and width of image. You may use any number in accordnace with your website display.

    <a href="a">
    <img src="Main Home/logo copy.jpg" width="400" height="265">
    </a>

Now its time to see how its looks like on browser.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <a href="a"><img src="Main Home/logo copy.jpg" width="404" height="172"></a>
    </body>
    </html>

    browser view

    Note

    If you want to insert image from your website then code is litly change like this.

    <img src="http://your website.com/your folder/your image name.jpeg"/>

Table image

If you want to insert images in table view or div view then first insert table or div tag ane then insert your image according to your Requirment.You learn in the next chapter:13 how to insert table .If you feel difficalty inserting the table move to chapter:13 Insert table. complete syntax is shown below to insert image in table.

    <table width="360" height="192" border="2">
    <td width="354">
    <a href="a"><img align="middle" src="Main Home/logo copy.jpg" width="312" height="117"></a>
    </td>

Now we see how the table image lools like in the browser .

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <table width="360" height="192" border="2">
    <td width="354">
    <a href="a"><img align="middle" src="Main Home/logo copy.jpg" width="312" height="117"></a>
    </td>
    </table>
    </body>
    </html>

    Browser view

Note

If you want to align image then insert align tag in such a way

<img src="your folder/your image.jpeg" align ="center"/>

 

 

comments powered by Disqus