How To: Wrap text around images in HTML 4

Wrap text around images in HTML 4

First of all you have to open the 'notepad'. Now you have to type in "<html>" in first line. Write "<head> in second line. Write "<title>this website contains text wrapped around images</title>". In the fourth line you have to type '<body bgcolor="#999999">'. This shall add a light orange color. Now find out the name of the image. Here the name of the file is 'image.png'. Then in the next line you have to type in "<img src="image.png">this text should hopefully wrap around the outside of the image". Now go the 'file' and then click on 'save as' and then name it as 'index.html' and then click on 'save'. You can save it wherever you want but make it sure it is 'html' file. Now open this file with your 'internet browser' because it is very quick for this demonstration. When you open the webpage then you shall find that the text is appearing on the right but it is not wrapping around the image. Now again go to your notepad and then write in “<br>I want this to appear on the next line next to the image too”. Now again go to 'file' and 'save'. Now again refresh your internet browser. But this step has placed the line on the bottom whereas you want to place it at the top. To make this change you have to add the words <img align= src = "left" ...." in the second last line. Now again go to 'file' and 'save'. Now again refresh your internet browser. This step has done your work because the text is now wrapping the image. It has gone to the top and the writing will go down and around the image. Now in the line you must edit by typing "padding: 10px;". Now again go to 'file' and 'save'. Now again refresh your internet browser. But you shall find that the internet browser is not supporting the text wrapping. Now open ‘goggle chrome browser’ and open your ‘notepad’ with it. You shall find that it is working .That’s it.

Be the First to Comment

Share Your Thoughts

  • Hot
  • Latest