HTML Guide
Basic HTML making you quicker

This section of learning time management skills provides an HTML Guide. This guide provides you with enough information to be competent in the basics of HTML.

Often when you write a blog or want to put up a family home page it proves to be time consuming and difficult. To do it quickly you need to know a little bit about HTML.

This HTML Guide will tell you how to do the basics. It is not designed to be a full HTML course. Instead it should allow you to do basic things, like know how to make text bold or add in an image. The focus is on the things that might prove time consuming if you don’t know about them.

An HTML Page

Behind every web page is a special language called HTML. This language tells the computer what to put onto the screen. It does this by adding what are called tags around the text.

The first tag we’ll cover is the bold tag. This tag makes a piece of text bold. There are two parts to the tag an opening tag <b> and a closing tag </b>.

<b> Bold </b>

Produces:

Bold

<i> italic </i>

Produces

italic

With HTML all the tags work in a similar manner. There is an opening tag which takes the form <tag> and a closing tag which takes the form </tag>. These tags go at either side of the text that you want them to affect.

<h1> </h1> through to <h6> </h6> define a set of level headings. They look like this:

H1

H2

H3

H4

H5

H6

You can see that H1 is the biggest and most important leading down to H6 the smallest and least important.

Applying these tags is a great way to control the headings in a document. Imagine you had a document like this:

Learning time management skills

The purpose of learning time management is to improve your time management and allow you more time for fun.

Learning time management skills benefits

There are many benefits from time management. Perhaps the most important is you gain time to spend with your family and friends.

Now this document contains two headings which both have an<h1>tag. If I want to change the look and feel of the document I can simply change the look and feel of the <h1> tag. The changes will then be automatically applied to all the <h1> tags.

Tags With Style

To apply changes to tags you first need to know about something called style. At the start of most HTML pages there is a style section. It’s enclosed in two tags <style> and </style>. Inside these tags there is a series of commands that tell the web browser how to display the text. So for our H1 to H6 example we have:

<style type="text/css">

h1     {font-size:26px;}

h2     {font-size:22px;}

h3     {font-size:18px;}

h4     {font-size:14px;}

h5     {font-size:10px;}

h6     {font-size:6px;}

</style>

You’ll notice first that I’ve added an attribute to the <style> tag. This is just to tell the browser how to handle what follows. The above will work without the type=”text/css” attribute but I think since this is an HTML guide proper usage should be given.

Beside each of the styles (H1 to H6) is a given font size. I’ve picked some arbitrary sizes. However if we go back to our “learning time management skills” example you can see the power of the tags. Now if we want to change the size of the headings we can simply change the font size in one place and we’ll get a bigger or smaller text.

I could do many different things including changing the color of the text:

h1 {font-size:26px;

color: red;}

If I apply this to a piece of text:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

h1 {font-size:26px;

color: red;}

</style>

</head>

<body>

<H1>Learning time management skills in red </H1>

</body>

</HTML>

I’ve not only changed the color of the text in red but I’ve also added a few other tags. In practise you don’t need to worry too much about them.

The HTML tag is an HTML guide for the browser that tells it that the stuff between the tags should be treated as HTML.

The Head tag is an HTML guide for the browser to tell it that this is the heading material for the site. It contains the style and other information.

<body> tag is an HTML guide for the browser to tell it that the stuff inside the tags is the main body of the page.

The possibilities for using the tags effectively in your HTML pages are endless.

I imagine that most people won’t use HTML directly all of the time. However when you are editing HTML and want to make it work in the way you want it is essential to have these basics in mind.

To finish this HTML Guide I thought I’d add a list of the main HTML tags that you might use.

Tag Guide

Tag	Description
<!--...-->	Allows you to add a comment between the tags
<!DOCTYPE>	Tells the browser the document type
<a>	Anchor tag
<b>	Makes text between the tag bold
<blockquote>	Allows you to handle an area of text, for example to indent it.
<body>	Body tag to tell browser where body of the page is
<br>	Adds a dingle line break
<div>	Sets a section in a document
<em>	Allows you to emphasize text between the tags
<font>	Sets text font, size, and color
<form>	Used for setting up forms for users to provide information to the web site
<h1> to <h6>	Headers 1 to 6
<head>	Key information about the document
<html>	Tells the browser this is an html document
<i>	Italic text
<img>	Tells the browser what follows is an image
<li>	Tells the browser what follows is a list item
<meta>	Meta information used to tell the browser about the document
<p>	Sets a paragraph
<script>	Sets up a script such as Javascript to allow user interaction with the web page
<span>	Similar to <Div> setting up a section in a web page
<strong>	Tells the browser what follows is strong text
<style>	Style setting for headings and other areas of the page
<table>	Starts up a table
<tbody>	Set up the table body
<td>	Sets up a table cell normally preceded by a <tr>
<tfoot>	Table footer
<th>	Table header
<title>	Sets the page title
<tr>	A table row is set by this with <td> tags inside to represent the rows cells
<u>	Underlined text

If you found this useful or have ideas about what to add to it then I’d love to hear from you. You can contact me at: This e-mail address is being protected from spambots. You need JavaScript enabled to view it '; document.write( '' ); document.write( addy_text7309 ); document.write( '<\/a>' ); //-->\n This e-mail address is being protected from spambots. You need JavaScript enabled to view it

If you'd like to go back to the main learning page then please click on this HTML Guide back link.

HTML Guide Basic HTML making you quicker