Guidance portal

World of Guidance and Education

Insert image:

Images in the content of webpage hels to demonstrate the ideas and concepts in an elaborative way. We can insert several formats of images in our web page like gif, jpeg, png, ico, bmp and so on. The syntax for inserting image in webpage along with the explanation is given below.

     <img src="your image" width="your width" height="your height">

"your image": this is the path where your image is stored. For writting this path there are two concepts to be remembered.

Concept 1 If your image is located in your windows drive (usually c: drive), you do not need to add c: drive in your path. For example if your image "abc.jpeg" is located at "my documents" in c: drive (windows drive); your path should be my document/abc.jpeg. Note that we ignored c:/my documents/abc.jpeg.

Concept 2 If your image is located in other than windows drive; you have to write the full path of image location. For example of your image "abc.jpeg" is stored at "my documents" in e: drive which is not windows drive than your path should be e:/ my documents/abc.jpeg. Note that complete path has been written as compared to above example where c:/ was ignored.

"your width": This sets the width of the image i.e how many pixels wide 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.

"your height": 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.

     <img src="Main Home/logo copy.jpg" width="370" height="131">


Note that the syntax written above shows the image location and its height & width.

Note

While using notepad your image must be in the folder where you save your web page file.

Full sytanx of a simple web page is given below. Lets see how it looks like on browser.

    <!DOCTYPE HTML>
    <html>
    <head>

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

    <body>

    <p>
    <img src="Main Home/logo copy.jpg" width="370" height="131">
    </p>
    </body>
    </html> >

     Browser view

 

comments powered by Disqus