Friday 21 July 2017

HOW TO ADD IMAGE IN HTML WEB PAGE?

       HOW TO LOAD IMAGE IN A HTML WEB PAGE? 

The number of benefits that internet can give you is beyond the thinking. One of them is online learning.

                       The Internet is world's largest library.
                         It's just that all the books are on the floor.
                                                                                   (John Allen Paulos)

                       The internet has always been, and  always will be,
                                              a magic box.
                                                                                    (Marc Andreessen)

 These quotes describe internet very well. For every learner, internet has something. There are so many peoples around the world trying to learn HTML.
Are you learning HTML( Hyper Text Markup Language) through online websites? Then this post can be helpful for you. Basically html is a computer language prepared to allow web site creation.

 HTML consists of a series of short codes typed into a text file by the site author - these are the tags. The text is then saved as html file and viewed through a browser like Google Chrome, Internet Explorer, Safari, Opera Mini or Mozilla Firefox etc. Then the browser reads the file and translates the text into visible form as per the author's intention.

 Learning and practicing html helps you to prepare strong foundation of coding. There are so many peoples around the world learning html on internet and the biggest problem with that is, some of html lessons are not well explained on such online sites. In order to help new html students, i write easily understandable posts related to html course. Previously i wrote about, how to create html web page? And if you want to learn the method to create html web pages, then you can read how to create a web page post.  Now in this post i will share the easiest method to add images on web pages.

Learn adding images on web pages in 3 easy steps:

As you know the method to create web page,  so we will carry forward from there.


 Step(1)

Write the code and give title to your web page
<DOCTYPE! html>
<head>
<title> title of the page  </title>
</head>
<body>
</body>
after that save file with .html extension.
To save it, click on file>save as and then save file with . html extension, ex: My hero. html.


Now you have created web page.

Step(2)

Now, make a file and you have to put the image and the html file( web page file) in the same folder.


Step(3)

Now close the opened text document and open the html file(the mozilla icon file in picture) with notepad. Now just put a code
<img src=".jpg"> between body tags ( <body> put code here </body> ).
Copy the name of image file and paste it between  " and .jpg
like this


and then save file


Simply open the html file.
Yes, you did it. 

You can also adjust image size by doing this

<img src="name.jpg" width="xx%" height="yy%" >
ex: <img src="name.jpg" width="30%" height="40%">

remember to put codes correctly.
If you have any doubt you can ask in comments section.

LIKE / SHARE / FOLLOW
 
  
                                         

No comments:

Post a Comment