HTML Formatting Basics

From Lunarpages Web Hosting Wiki
Jump to: navigation, search

Once you learn how to write out the basics of an HTML web page, then the next step would be to learn how to format the content inside of the web page. This is what would be shown between the <body> and </body> tags.

Headers

You can use the tags <h1> and </h1> to create a header for your web page content. There are also reffered to as headlines. Going down the page you can also add:

<h2>Your Second Title</h2>
<h3>Your Third Title</h3>
<h4>Your Forth Title</h4>
<h5>Your Fifth Title</h5>
<h6>Your Sixth Title</h2>

The higher in the numbers you get, the smaller the title gets. As with formatting a word processor document, these are handy to have to separate your web page content form section to section.

Paragraphs and Line Breaks

To mark where a paragraph should start and end, you should wrap it in the <p> and </p> tags. This will create a double-spaced break between your blocks of text. If you want to create a single space, use <br> instead. That would be a line break.

Here is an example of a paragraph in HTML code:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>

Here is an example of how to use a line break:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Blockquote

When wrapping text with the <blockquote> and </blockquote> tags, you will be indenting it more so than your regular paragraph formatting.

Center

With the <center> and </center> tags in use in the body of an HTML document, you can align all the content on the page to the center of the document, instead of to the left (as it is by default).

Horizontal Rule

The <hr> code creates a long horizontal line across your web page. This is also helpful when you need to separate certain parts of your web page's content from the next part.

Unnumbered Lists

Need to create a list? Unnumbered lists are started with the <ul> tag, followed by the actual list items. They are marked with the <li> and </li> tag. The list is ended with the ending tag </ul>.

Here is an unnumbered list, via the HTML code:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

Here is how the unnumbered list would display:

  • list item 1
  • list item 2
  • list item 3

Numbered Lists

Numbered lists are started with the <ol> tag, followed by the actual list items. They are marked with the <li> and </li> tag. The list is ended with the ending tag </ol>.

Here is an numbered list, via the HTML code:

<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Here is how the numbered list would display:

  1. list item 1
  2. list item 2
  3. list item 3

Bold and Italics Formatting

If you want to make a specific word or series of words bold, you would wrap them in either the <b> and </b> tags or <strong> and </strong> tags. To make a word appear in italics, you would use the <i> and </i> tags or the <em> and </em> tags.

How to Create a Hyperlink

To link two or more pages together, you will need to create a link between them. You can do that like so:

<a href="http://www.yourdomain.com/file.html">Go to My File</a>

From this example, you can see that the browser will be navigated to the file named file.html once the link has been clicked.

Share |
Want to read this in another language?