At Eident we not only deliver standard Microsoft Office training courses – we adapt and integrate training programmes to incorporate the tools and software people need to use every day. Quite often people face a gap in their skill set – they need to know a little bit about a few things without always requiring the detail to become a technical expert. As well as our specialised programming courses we offer a range of “Office User” overviews – basic introductions to more technical areas. HTML is a prime example of this requirement – the people who update their organisation’s web pages are not web developers or graphic design artists with specialised skills, but do often need to enhance the presentation of the content they publish beyond the settings of many standard website CMS kits. Learning simple HTML is within reach of anyone with even basic word processing skills.

What is HTML?

HTML stands for Hypertext Markup Language. It consists of a set of codes which are inserted in a document to control the way the document is displayed by a “web browser” such as Firefox, Chrome, Edge or Internet Explorer.

If your Browser has a “view source” feature, you can see what web pages look like with the codes showing.

An HTML document must have the proper form, so that it will be recognized and interpreted properly by the browser software. The basic form is:

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

main_part_of_document_goes_here

</BODY>

</HTML>

You should notice two things here. Opening codes are enclosed in brackets (< >), and closing codes include a slash (</ >).

For example, an HTML document is opened by <HTML> and closed by </HTML>.

This is true of most (but not all) codes.

Colors

Colors, background images, and some other features are controlled by the <BODY> tag. You can control the color of the background, text, and links in your home page by using the <BODY> tag. To control the various colors on your page, the <BODY> tag is written like this :

You may include any of the items (bgcolor, text, link, vlink or alink), or leave any of them out. To set the color of the background, text, link, visited link, or active link, substitute a color value for the xxxxxx in the sample above. Do not make them all the same color, or you won’t be able to see anything on your page.

Here are a few colors that you can use:

White = FFFFFF

Yellow = FFFF66

Red = FF0000

Grey = CC9999

Blue = 0000FF

Green = 00FF00

Black = 000000

Purple = CC33FF

Lt. Blue = 00CCFF

These values represent the hexidecimal value of the red/green/blue combination that makes up the color. When you see a color you like on another home page, you can use the “view source” feature of your browser to see the code for that color.

SUGGESTION: Start out by adding the tag

Background Images

To add background images instead of background colors, you need to use the attribute BACKGROUND in the BODY tag instead of BGCOLOR. For example, if you wanted to use an image named “bg.gif” for your background, the tag would look something like this:

Note: the image must be located in your own directory in the example above. If it’s located somewhere else, you’ll need to give the entire path in order for it work successfully.

Horizontal lines

You can insert a horizontal line (horizontal rule) in your document by inserting a <hr> tag.

Enhancements to this tag, which are recognized by most browsers, allow more control of the appearance of the line. By adding SIZE=NUMBER, the thickness of the line can be controlled. The alignment can be controlled by adding ALIGN=LEFT/RIGHT/CENTER. The width of the line can be adjusted by adding WIDTH=PERCENT. A black line can be created by adding NOSHADE.

Combining these enhancements,

will produce a line at the left margin, half page width.

Note: The “fancy” lines used on many web pages are not produced by the <hr> tag. They are graphic images.

Bullet lists

You can create bullet lists by using the <ul> (unordered list) tag. The format is:

<ul>

<li>item one

<li>item two

<li>item three

</ul>

The list will look like this:

item one
item two
item three

Numbered lists

You can create numbered lists by using the <ol> (ordered list) tag. The format is:

<ol>

<li>item one

<li>item two

<li>item three

</ol>

The list will look like this:

item one
item two
item three

Headers

Web browsers recognise six levels of headers.

<h1>Level one header </h1>

<h2>Level two header </h2>

<h3>Level three header </h3>

<h4>Level four header </h4>

<h5>Level five header </h5>

<h6>Level six header </h6>

will look like this:

Level one header

Level two header

Level three header

Level four header

Level five header

Level six header

Centering text

You can cause text to be centered by enclosing it in <CENTER> tags.

This line:

will appear like this:

This is a test

If more than one line of text is enclosed in the tags, all enclosed lines will be centered.

Bold and italics

You can cause text to be bolded or italicised by enclosing it in tags for those attributes.

will appear as:

Bold text

<i> Italic text </i>

will appear as:

Italic text

<b><i> Bold and italic text </i></b>

will appear as:

Bold and italic text

Note: It is very important that you close the tags in the same order that you opened them. In other words, in the last example, it was important that I closed the “Italics” tag before I closed the “Bold” tag (put the </i> before the </b>).

Paragraph and line breaks

Web browsers do not respect the way you have formatted your text. They ignore carriage returns and line feeds. Unless given specific instruction, your text will be fitted to the line length of the browser.

Inserting a <br> tag will cause the current line to end and a new one to start. Inserting a <p> tag will cause the current line to end, a blank line to be inserted, and a new line to start.

Preformatted text

There are times when it is nice to have your text appear just the way you have typed it. You can do this by placing a <PRE> tag at the beginning of the passage, and a </PRE> tag at the end. Your text will appear in a fixed-pitch (typewriter) font and retain any tabs, line feeds, multiple spaces, etc. that you may have included. For example:

first line left aligned

    second line indented

         third line indented again

Logical Tags

Logical tags are used to indicate to the visually impaired that there is some emphasizes on the text. Each browser has its own technique as to how to indicate to its viewer that the text between the tags are different.
The syntax or format for using a LOGICAL TAG is as follows:

<Tag Name> text to be formatted. </Tag Name>

For example:

<EM> Indicates that characters should be emphasized in some way. Usually displayed in italics. </EM>
<STRONG> Emphasizes characters more strongly than <EM>. Usually displayed in a bold font </STRONG>
<CITE> Indicates short quotes or citations. Often italized by browsers. </CITE>

Creating a jump within your document

It is easy to create “hot links” within your document that can be “clicked” by the reader to jump to another part of the document. There are two steps involved.

1.INSERT A TARGET at the point to which you want the link to jump. A target looks like this:

2.INSERT A LINK to be clicked to cause the jump. The link looks like this:

<a href=”#target_name_here”>hotlink_text</a>

The hotlink_text will appear underlined and in the “link” color. When the user clicks the hotlink, the web browser will jump to the target_text. Go to index. is a good example of a hotlink. Use the VIEW, SOURCE feature of your browser to see the HTML tags surrounding the hotlink and the target text at the top of the index.

Jump to another file on the same system

It is easy to create a “hotlink” that will cause the web browser to open another file located on the same server as the file from which it is being called. The tag format for this kind of link is:

<a href=”relative_path_and_filename”>hotlink_text </a>

If the file is in the same directory as the calling file, it is only necessary to specify the filename. If the file being called is in a different directory, give the “relative path and filename”. For example, if the calling file is in a directory called “schmoo” and the called file is named “chick.gif” and is in “schmoo/graphics”, the tag would be written <a href=”graphics/chick.gif”>. If the calling file were in “schmoo/graphics” and the called file were in “schmoo”, the tag would be written <a href=”../chick.gif”>

Jump to a document on another system

Creating a hotlink that jumps to a document on another system anywhere on the Internet is very similar to creating a link to a document on the same system. The only difference is that instead of using the relative path and filename of the called file, the URL (uniform resource locator, or “internet address”) is used. The link:

<a href=”http://www.eident.co.uk”>Go to “Eident Training” </a>

will take you to “Eident Training” located at “http://www.eident.co.uk”:

Go to “Eident Training”

Placing graphic images on your pages

You can place graphic images on your pages, if the graphic image exists as a separate file on your server or some other server on the net. The file format must be readable by browsers. I suggest GIF or JPG. Your page shouldn’t “depend” on the graphic, since some browsers are “text only” and will not display graphics. In it’s simplest form, the tag to cause a graphic to be placed on the page looks like this:

This tag will cause a graphic file named “right.gif”, which is in the same directory as the file you are reading (index.html) to be displayed.

You can control the position of the image. The most basic way to do this is to treat it as text. For example, surrounding the image tag with center tags.

You can also combine the image tag with other elements of your document. For instance, the following combination:

Find out more on our Tutor-led training courses

WordPress.org website, blog & plugins training
WordPress.com website & blog training
Introduction to HTML
Using LinkedIn Effectively
FaceBook for Business
How to set up & use Twitter
Social Media Overview