Basic HTML tutorial. A primer for website owners and content editors.

While it's becoming more commonplace for website owners and content editors to be able to manage their website's text content using WYSIWYG editors that work just like a word processor, every now and then you may still run into a situation where you'll need to know a little HTML.

HTML is not technically a computer programming language but rather a markup language. It's very easy to learn, though it does require a bit of care. While mistakes in writing HTML usually won't destroy your web page, they may make it look kind of ugly.

Basic HTML Tags (<strong> and <em>)

HTML code is usually composed of what are known as "tags". Many HTML tags come with an opening tag and a closing tag. Let's dive right in. In order to boldface something, you enclose it with the <strong> tag like this:

<strong>This sentence will be boldfaced.</strong>

Note that the closing tag is identical to the opening tag with the exception that it begins with </ instead of just <. Also note that the two tags enclose the text that you want them to operate on. So in this example:

<strong>This will be boldfaced</strong>, and this will not.

Only "This will be boldfaced" will actually be boldfaced because only those words are enclosed by the <strong> tags. This logic extends to many other tags. For example, the italicize tag is <em>:

<em>This will be italicized</em>, and <strong>this will be boldfaced</strong>.

Tags should be written in all lower case. So instead of <Strong> or <STRONG>, use <strong>.

Spaces

In HTML, you can only have one space between words. So if you write:

Hello There

When you look at it in your browser, it will look like:

Hello There

If you want to force the browser to display more than one page, you need to use the code. This stands for 'non-breaking space'. Use it like this:

Hello There

Headlines

Creating headlines is as simple as enclosing the headline text in the appropriate headline tag. There are six headline tags, in order from largest to smallest: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. In common practice, only h1, h2, and h3 are used:

<h1>Main Headline</h1>

Paragraphs

Text that is not a headline is probably part of a paragraph, as denoted by the <p> tag:

<p>This sentence is enclosed by paragraph tags.</p>

While it's possible to just have plain text that is not enclosed by any tags whatsoever, this is not a good practice. If possible, always enclose your text with at least a pair of <p> tags.

Alignment / Justification

You can align paragraphs or headlines to the left, center, right, or full justify them. The default is left justification, so if you don't specify, that's what it will be. Here's an example of a centered headline:

Here's an example of a full justified paragraph:

<p align="full">The quick brown fox jumped over the lazy frog. The quick brown fox jumped over the lazy frog. The quick brown fox jumped over the lazy frog.</p>

Here are the four different alignments / justifications:

<p>Default</p>
<p align="left">Left Justified</p>
<p align="center">Center Aligned</p>
<p align="right">Right Aligned</p>
<p align="full">Full Justified</p>

Note that full justification isn't commonly used in web pages.

Line Breaks

When you have more than one paragraph on the page (as denoted by more than one set of <p> tags) there is a noticeable space between one paragraph and the next. But if you're trying to just put in a carriage return without it looking like there's an extra space, you use the <br /> tag. This line break tag has no closing tag. You'd use it like this:

<p>This Friday I want to go to:<br />
The Museum<br />
The Park<br />
The Movies</p>

Note that there's a closing </p> tag at the end of everything.

Links to Websites

Say you want to create a link to your friend's website. First, you'll need to know the website's URL. The URL looks like this:

http://www.crunch42.com

http://www.crunch42.com/resources.html

The first example is the URL of the home page of this site, and the second example is for a specific page. You can find URLs by using your browser to go to the site or page you want to link to, then look in the browser's address bar (at top center of the browser window).

Make sure you copy or write down the full address including the http:// part, but if there's a whole bunch of stuff at the right side of the address that looks like random numbers or wierd code, just copy the address up to the .com part.

Here's how you would create a link to this website:

<a href="http://www.crunch42.com">Professional Web Design</a>

The opening <a> tag contains the link to the URL, then there are the words you want to turn into a link (Professional Web Design), and then the closing </a> tag.

Links to a Web Page on Your Own Site

This is very similar to linking to another website, but instead of using a URL for another site, you'd use your own. Use your browser to go to the page you want to link to, then copy the URL from the browser's address bar.

Visit my <a href="http://www.crunch42.com/resources.html">articles page</a> for lots of great tutorials.

In this example, only the words "articles page" will be turned into a link.

Links to Email Addresses

Email addresses use a variation of the <a> tag. Here's an example:

<p>Please write to me at <a href="mailto:julian@crunch42.com">julian@crunch42.com</a> and I'll write back to you right away!</p>

Note that instead of http:// as in the previous two linking sections, in this example we use mailto: and then the email address. You'll see the email address written twice: the first time is to tell the <a> tag where to create the link to, and the second time is the text that will be turned into a link.

Images

Images are not simple, and if you can avoid having to use HTML to put them on your website, that would be advisable. This is because there are so many variables involved with web pictures so therefore there are lots of opportunities to get frustrated. Here's the basic image tag in action. Note it has no closing tag:

Note that sample.jpg will have to also be uploaded to your server to the appropriate folder (here it's the images folder), or else this image tag will display a broken image icon.

Image tags have a whole slew of other options such as horizontal or vertical width, "alt text", and alignment options. You can also use very advanced HTML to give your pictures borders or even drop shadows. But this tutorial won't go into these.

Putting It All Together

Here's a small example web page and below it is the HTML required to create it. Note how complicated the <img> tag for the picture of the apple is -- this example shows how complex the <img> tag can be -- so avoid images if at all possible!

Apple Pie

1 Instant Crust
6 Apples (Granny Smith)
1c Sweetener
2t Cinnamon
Dash Salt

Instructions

Peel, core, and dice the apples. Mix in sweetener, cinnamon and salt. Pour mixture into crust and bake at 350 degrees for one hour. Goes great with ice cream!

- Source: Julian's Recipes

<img src="http://www.crunch42.com/images/apple.jpg" alt="Apple" width="152" height="151" align="right" />
<h1>Apple Pie</h1>
<p>1 Instant Crust<br />
6 Apples (<em>Granny Smith</em>)<br />
1c Sweetener<br />
2t Cinnamon<br />
Dash Salt</p>
<h2>Instructions</h2>
<p>Peel, core, and dice the apples. Mix in sweetener, cinnamon and salt. Pour mixture into crust and bake at 350 degrees for one hour. <strong>Goes great with ice cream!</strong></p>
<p align="right"> - Source: <a href="http://www.crunch42.com">Julian's Recipes</a></p>

Note that there are no spaces in the HTML code to denote the spaces between each headline and each paragraph. Whenever you write HTML code, it's a good idea to check your work in a browser.

<< Back to list of articles