Wraping text around image in HTML



Home Video Tutorials Setting up your first website How to create a podcast Using Freeway software Wordpress Get Going Software Skills HTML4 Coding Introduction to HTML History of HTML Creating HTML Domains and Hosts HTML management File Names Uploading your site First web pages Basic HTML Advanced web pages HTML validation Meta Data Leaving Notes in your code Colour in HTML Hexadecimal colour Backgrounds Background colour Background images Text in HTML Fonts Font families Font sizes Changing colours Alignment Complex control Text links Text and images Horizontal rules Images Gif and PNG JPEG Images in HTML Text wrap Alt tags Buttons Lists Unordered Lists Ordered Lists using your own icon Nested Lists Tables Basic table Horizontal Merged Cells Vertical Merged Cells Framesets Basic frameset Fixed column Interactive panel Borders 3 page frameset Scrolling frame CSS What is CSS Basic CSS Changinging Links Embedded CSS CSS and Classes text styles DIVs Basic DIV Page control with DIVs Page layout control tables Page layout control DIV DIV and CSS Layout DIV and Classes Page layout No tables Overlaying DIVs Fixed layouts Java Rollover HTML5 Coding HTML5 Doctype Refresh page Adding java files Embedding Java HTML5 pages HTML5 header CSS and HTML5 Header Add image to Header HTML5 Footer HTML5 Footer navigation HTML5 Articles HTML5 Asides Navigation panels HTML5 Fallback Nav bar on the left Geolocation Canvas Canvas background Shapes and fills Draw a square Draw a triangle Draw a circle Add a stoke Stroke and fill Drawing outside the canvas Transparent fill Linear gradient Diagonal gradient Radial gradient Pattern fill Drawing Drawing lines Line ends Joining styles Curves Bezier curves Text Adding text Stroke text Drop shadow Freeway Overview Introduction Support Getting started Set-up First page FTPset-up Previewing your site Tool bar Site management Site panel options Pages New pages Master pages Meta Data Images Placing images Controlling images File Formats Effects Combined images Layers Text HTML text CSS Images and text Flowing text Graphic text Special effects Changing text format Interaction Hyperlinks Buttons Image Maps Actions Overview Page Actions Meta Data Action Insert Actions Item Actions Rollovers Slaves CSS Menus HTML code Add to header Add to page Joomla 1.5 Installing CPanel Installing Making changes Articles Creating Home Page Editing Articles Using Parameters Adding images Contact page Adding a YouTube video Menus Creating Menus Changing names Adding more menus Sub Menus DropDown Menus Multiple menus Templates Modifying templates Editing templates Installing templates Creating template Using Modules Adding search engines Adding logins Managing Users Search Engines Metadata SEO Global Local Site add-ons Custom 404 Flavicon AdSense Mobile Sites Phone redirect Phone browser control Screen rotation 3rd party solutions IE compatibility Social Media Resources Add a Tweet button Add a follow button Add Facebook like button Google Fonts Google Fonts example Get Going Downloads HCI/UCD slides Introduction to coding Typography File Formats Photorealism Colour Games Industry Xbox packaging from Xbox website From this site Contact me


		Wraping text around image in HTML If you just place an image on your web page and then follow it with text the text will start at the bottom of the picture. Normally this would not be very satisfactory and splits up the page. By adding a simple alinment code to your image you can overcome this. Not you can not do this with a centred page design unless you are placing this in a DIV layout or a table, see later examples.

		<html> <head> <title> Text wrap</title> </head> <body> <img src="yourimage.jpg">loads and loads of text loads and loads of text loads and loads of text loads and loads of text loads and loads of text loads and loads of text loads and loads of text </br> <img src="yourimage.jpg" align="left">loads and loads of text loads and loads of text loads and loads of text loads and loads of text loads and loads of text loads and loads of text loads and loads of text </body> </html>