Basic HTML for Internet entrepreneurs

Having a basic knowledge of HTML (HyperText Markup Language) can be a huge help for bloggers, online entrepreneurs, or anyone who might be asked to put a WORD document onto the company website (for example).

HTML is super easy to learn and we're going to show you how it works and then run through some of the more useful tags that will allow you to create hyperlinks, format an online document, and even embed media - like YouTube clips.

How HTML works

HTML code is used to control how content should be presented on a Web page. This could be anything from a plain paragraph to a table or a bullet list.

A generic piece of HTML code looks like this:

<tag>content</tag>

It has:

• an opening tag that specifies what you want the code to do
• content between the tags
• a closing tag that is the same as the opening tag with an extra backslash (/)

Pretty simple right? You can try it out for yourself by putting some text between an opening and closing <strong> tag, like this:

<strong>strong text</strong>

which gets displayed like so:

strong text

So HTML consists of lots and lots of different tags like this - each of which does it's own thing. Although, there are a few optional extras you'll need to know too.

Attributes

HTML tags also have attributes, which are optional. But certain tags, like the anchor (hyperlink), need an attribute in order to be useful.

Attributes are added to the opening tag and take the following form:

name="value"

So a tag with an attribute would look something like this:

<tag name="value">content</tag>

We'll look at how the href attribute makes links do what you want in a moment. But first, we need to quickly talk about a few really important attributes that are used in conjunction with CSS in order to style HTML elements.

IDs, classes & CSS

ID and class attributes tell your browser to apply certain CSS styles, and in this way you can control the look and feel of any HTML element on a page.

Including CSS in your Web pages is beyond the scope of this article, but there is a great beginner guide on YouTube that will show you how to link a CSS file to an HTML page in the page header:

If you are still unsure how to create a CSS file and associate it with a Web page then drop me a line in the comments or go to our forums and ask a question.

There's a great example of how class and ID attributes can convert a plain hyperlink into a professional looking button in the section entitled hyperlinks section below.

Useful HTML tags

Some tags are much more commonplace and useful than others, and some of the more obscure ones can often be copied and pasted into your HTML document without requiring you to memorize them.

Great tip: If you see another website doing something you want for your own site, right click on the page and select 'View source', or 'inspect element'. Then copy and paste the snippet of code you want.

Here's a list of the most commonplace HTML tags that are important for every day use...

Hyperlinks

A hyperlink tag, denoted with an a, allows a visitor to jump to a new Web page. You can create internal links, which go to another page on your own site, or external links which direct the browser to another website.

Where a hyperlink points to is determined by the href attribute, like so:

<a href="URL">link text</a>

Now, the URL value can be relative, which means it points to another page on the same domain, or absolute, which means it includes everything from http:// onwards (used to link to other websites).

For example, the following link:

<a href="/development/basic-html">Basic HTML</a>

is a relative one and links directly back to this page (click it and you'll come straight back here):

Basic HTML

I could just as easily linked out to anywhere else on the Internet using an absolute URL, like this:

<a href=" http://en.wikipedia.org/wiki/ David_Mercer_%28writer%29"> Basic HTML </a>

which would take you to my author page on Wikipedia.

Now, because I use CSS to style elements on this site, there's a great example of how to create a class attribute to alter the look and feel of the link. In this case, I can use a combination of classes to create different buttons using the button class plus a predefined color class, like this:

<a class="button red" href="/web-design/how-build-website-free-weebly-website-builder" > How to build a wesbite with Weebly </a>

rendering:

or:

<a class="button blue" href="/websites/how-create-free-website-wix" > How to build a wesbite with Wix </a>

rendering:

Headings

Headings are really easy, and come in a hierarchy. The most important heading is h1. This is usually reserved for the title of the page.

From h1, we move down through the ranks - h2, h3, h4, and so on.

Headings can be used to structure a document and break up the text into logical sections.

Paragraphs

The paragraph tag is denoted with a p. Simple enclose any text you like within a paragraph and away you go.

Emphasis

The emphasis tag is denoted with em. And if you enclose text within it, it comes out looking like this:

This is emphasized text

You can also emphasize text using the strong tag to make it stand out. Text that is enclosed within strong tags looks like this:

This is strong text

Rich media

Ok, so here's where things get a bit funky. It's not really a good idea to try an learn every bit of obscure HTML or HTML5 that gets invented. Instead, most media can be embedded using a snippet.

For example, YouTube makes their videos embeddable and all you need do is copy and paste the HTML snippet they provide into your Web pages and the video will appear.

YouTube uses the iframe tag to create a frame within a Web page that displays the video, like this:

<iframe width="640" height="360" src="//www.youtube.com/embed/bWPMSSsVdPk" frameborder="0" allowfullscreen></iframe>

Copy and paste that into your site and it will show you a pretty neat video introduction to HTML by Jake Wright, which you can watch here:

Different media may use different tags, and HTML5 has a whole range of cool new features that can be used to display rich media. You can start learning about HTML5 with this tutorial video:

Good online CSS generators

Because HTML and CSS are so powerful, and many people want to make better use of these without having to spend months and years becoming a Web developer, there are plenty of great free tools available online.

I use a few of these myself because more complex effects like color gradients, can be a pain to write by hand and are much easier to get right with a graphical interface. In particular:

• CSS gradient generator: Create a wide variety of color gradients with preset color schemes and a live preview.
• CSS3 generator: Take advantage of the power of CSS3 to implement incredible features like transformations, drop shadows, scaling, rotations, and more.

So that should get you through much of what you'll need for every day usage as a blogger, or business person maintaining a website.

Remember that basic HTML is not enough to develop a professional quality site. It takes too long to learn all the skills required. If you are thinking of designing a website from scratch I strongly urge you to look at an online website builder instead.

Website builders will get you up and running at a fraction of the time and cost it takes to do a site from scratch even if you make use of a CMS (Content Management System).

What other HTML tags do you use on a day to day basis? Share your HTML and CSS design tips in the comments.