How to Align and Wrap IMG SRC in HTML

Web pages let you present information in different ways to your visitors. Text is not the only content to worry about when designing a Web page. Visitors and even search engines notice the images in a well crafted site. It is certainly possible to just insert an image into your site above or below text. But inserting the image so it fits neatly into a block of text presents a more professional appearance to your visitors.

Instructions

1. Open the HTML page you want to edit in your preferred HTML editor. HTML pages are plain text, so you can edit them in any plain text editor such as Notepad. It is best to avoid word processing programs such as Microsoft Word or WordPad, because they add hidden tags to the text.

2. Locate the block of text where you want to place the image. Place the cursor just before the block of text. Type the following:

   <img src="myimage.jpg" alt="description"

   Replace "myimage.jpg" with the name and location of the image relative to the HTML page. For example, if the image is located in the same folder or directory as the image, just include the name of the image. Replace "description" with a description of the image for search engines and browsers that disable the images on a page. Be sure to include the quotes in both properties.

3. Press the space bar on the keyboard and type the following after the image description:

   style="float:left" />

   The "float" property tells the browser to float the image in the indicated location of the page. Text wraps around the image as necessary. You can also enter "right" to float the image on the right side of the page.

4. Save the HTML file and upload it to your hosting provider's Web server using the tools provided or an FTP client. Upload the image using the same method.

References

• W3Schools: HTML <img> Tag
• W3Schools: CSS float Property