Formatting: Breaks And Image Wrap

You have mastered most of the basics; now there are just a few other issues that you should understand notable among them are breaks and image wrap.

Using Breaks

The only breaks you need to worry about in HTML are paragraph breaks, line breaks, and hard spaces. You will never do a hard page break, as HTML doesn't paginate that way; you will also never mess with tab spacing. If you need to set up something tabbed out, you can only do it two ways: with hard spaces or with tables (which will be discussed across multiple lessons, as they are complex.)

Paragraph breaks are simply denoted <p>. You don't need to use an end code most of the time, but if you're inserting a table or an image, it's not a bad idea to put an end code in: </p>. Nothing else should go into the tag. A long time ago, that <p> could be accompanied by paragraph alignment code, but today all those special bits are carried inside <span> and <div>.

Line breaks are even simpler. Unlike a paragraph break, which puts in a double space between paragraphs unless it's set differently with CSS (see below for definitions) a line break simply breaks the line at a given spot and sends text to the next line. It's denoted <br>. It never has an end tag.

Line breaks are often misused by inexperienced web designers to put in a paragraph break: <br><br>. This is bad HTML and should not be used.

Hard spaces are denoted by ASCII Code 255 or HTML Entity 'nbsp'. This forces a space in HTML, when it translates on the page, will turn all consecutive regular spaces into one single space. If you need more than that, you'll need to use the HTML Entity 'nbsp'. This also helps do a number of other things, like hold space in tables and separate elements like images. If for any reason your spaces aren't staying put, just slip this code in where you're having trouble, and you will get your space.

How To Wrap Text Around Images

Every image dropped into HTML uses some form of text wrap. Text wrap refers to the way text flows anywhere on the page: narrow margins wrap text from one short line to the next, tables contain text so that it wraps inside cells. Images can have text wrap from above the image to below the image, or text can flow on either the left or right side of the image. If you need fancier wrapping than these three basics, you'll need to use a table to set it up.

Here is what your image formatting should look like:

<img alt="x" src="image.jpg" align="right">

If your image is align="right", your image will be on the right side of the page and your text will wrap to the left of it. If your image is align="left", it will be on the left side, with text wrapping to the right. Center puts the text above and below the image.

You can also have images appear in-line; for this, you need to set your align for top, middle, and bottom. If your image code is in the middle of a paragraph, this will set your image to flow right along with the rest of the paragraph. Experiment with it to see what you like the best.

Hopefully, this lesson has given you some insight into some of the HTML formatting tricks especially breaks and image wrap.