Virtual Assistants For You - Basic HTML Guide
Virtual Assistants For You (VA 4U) Home Page - - -

Virtual Assistants For You

Virtual Assistants For You - Basic HTML Guide

Basic HTML for use in VA4U Description Fields

Welcome to VA4U Basic HTML tutorial

We allow HTML to be inserted into our description fields on the registration forms.  These in turn are used to make up the bulk of the VA4U members personal web page.  With the use of HTML some simple HTML we are able to improve the presentation of the descriptions in the members web page.

Quick Start Guide

We have created a list of the most commonly used HTML Tags for your information.  There is quite a lot of detail further down this page so we have summarised the most common tags that we feel will be useful to our members for their descriptions.

Below is a list of the tags that are most commonly used in web pages, they are listed in order of importance and simplicity to use.

 

What is HTML?

HyperText Markup Language (HTML) is a textual language that is used to create web page displays.  HTML is text that describes how text and images are to be presented in the context of a web page.

 

Top Tip!

If you can see the HTML that makes a web page display by either right-clicking on the page and selecting View Source or the same from one of the Menus.

More Detailed information about HTML and the tags in the Quick Guide can be found by following the More Information links

<P> - Paragraph

This common tag will start a new paragraph after entering a blank line.  When you press the Enter or Return key in HTML it does not register this as text formatting.  To start a new paragraph you should place your text in the <P> tag pair.

You should use these tags to put text into suitable paragraphs in your page to make the page more readable and understandable.


Simple Example

<P>This is a paragraph</P>

Back to List

More Information

Example


The Following HTML
 



Produces the Display
 

My Name is Jonathan Smith

I have been working as a Virtual Assistant for 2 Years

My Business is based in the Region of The South East of England

 

<BR> - Break

This common tag will start a new line without entering a blank line.  When you press the Enter or Return key in HTML it does not register this as text formatting.  To start a new line you should place <BR> tag in your text.


Simple Example

This is a line<BR>This is another line

 

Back to List

More Information

Example


The Following HTML
 



Produces the Display
 

My Name is Jonathan Smith
I have been working as a Virtual Assistant for 2 Years
My Business is based in the Region of The South East of England

 

<H1>, <H2>, <H3> - Headings

This common tag pair will display any text inside it in one of a number of pre-determined formats.  Text placed in the <H1> tags is the largest you can have on a web page, <H2> is still larger but small than <H1>, <H3> is smaller still, and so on until <H6>!

You should use these tags to put titles and headings in your page to make the page informative and interesting.


Simple Example

<H1>This is a Title</H1>


Note

You must use the </H1> tag to stop the heading format otherwise everything from the point you entered the <H1> tag will be in heading format.

Back to List

More Information

 

 

Example


The Following HTML
 



Produces the Display
 

My Name is Jonathan Smith

I have been working as a Virtual Assistant for 2 Years

My Business is based in the Region of The South East of England

 

<B> - Bold

This common tag pair will display any text inside it in a format.  Text placed in the <B> tags is bolder than text out side the pair.

You should use the <B> tags to put emphasise words and phrases in your page to make the page more informative and interesting.


Simple Example

<B>This is bold text</B>


Note

You must use the </B> tag to stop the bold otherwise everything from the point you entered the <U> tag will be bold.

 

Back to List

More Information

Example


The Following HTML
 



Produces the Display
 

My Name is Jonathan Smith

I have been working as a Virtual Assistant for 2 Years

My Business is based in the Region of The South East of England

 

<I> - Italic

This common tag pair will display any text inside it in an Italic format. 

You should use the <I> tags to put emphasise words and phrases in your page to make the page more informative and interesting.


Simple Example

<I>This is italic text</I>


Note

You must use the </I> tag to stop the italic otherwise everything from the point you entered the <I> tag will be italic.

Back to List

More Information

Example


The Following HTML
 



Produces the Display
 

My Name is Jonathan Smith

I have been working as a Virtual Assistant for 2 Years

My Business is based in the Region of The South East of England

 

<U> - Underlined

This common tag pair will display any text inside it underlined. 

You should use the <U> tags to put emphasise words and phrases in your page to make the page more informative and interesting.


Simple Example

<U>This is underlined text</U>


Note

You must use the </U> tag to stop the underline otherwise everything from the point you entered the <U> tag will be underlined.

Back to List

More Information

Example


The Following HTML
 



Produces the Display
 

My Name is Jonathan Smith

I have been working as a Virtual Assistant for 2 Years

My Business is based in the Region of The South East of England

 

<HR> - Horizontal Rule (Line)

This common tag will display a line across the page.  This tag will also cause the text around it to separate into separate paragraphs.

You should use the <HR> tags to put divide and separate topics on your page to make the page more coherent.


Simple Example

<HR>

 

Back to List

More Information

Example


The Following HTML
 



Produces the Display
 

My Name is Jonathan Smith


I have been working as a Virtual Assistant for 2 Years
My Business is based in the Region of The South East of England

 

<UL> and <LI> - Unordered list and List Items

These common tags are used together to create a bullet list of items on the page.  Firstly you use a <UL> tag par to indicate that you want an Unordered list and then you place <LI> List Item tags for each of the items you want to have bulleted in your list.

Note that you must terminate the <UL> tag pair with a </UL> tag!

You should use the <UL> and <LI> tags to list items on your page to make the page more coherent.


Simple Example

<UL><LI>This is item1</LI</UL>


Note

You must use the </UL> tag to stop the list otherwise everything from the point you entered the <UL> tag will be included as part of the list.

Back to List

More Information

 

Example


The Following HTML
 



Produces the Display
 
  • My Name is Jonathan Smith
  • I have been working as a Virtual Assistant for 2 Years
  • My Business is based in the Region of The South East of England

 

<OL> and <LI> - Ordered List and List Items

These common tags are used together to create a Ordered list of items on the page.  Firstly you use a <OL> tag par to indicate that you want an Ordered list and then you place <LI> List Item tags for each of the items you want to have bulleted in your list.

Note that you must terminate the <OL> tag pair with a </OL> tag!

You should use the <OL> and <LI> tags to list items on your page to make the page more coherent.


Simple Example

<OL><LI>This is item1</LI</OL>


Note

You must use the </OL> tag to stop the list otherwise everything from the point you entered the <OL> tag will be included as part of the list.

 

Back to List

More Information

Example


The Following HTML
 



Produces the Display
 
  1. My Name is Jonathan Smith
  2. I have been working as a Virtual Assistant for 2 Years
  3. My Business is based in the Region of The South East of England

 

<CENTER> - Center Alignment

These common tags are used together to align items on a web page in the center of the page, table or cell. 

You should use the <CENTER> tags to put emphasise paragraphs in your page to make the page more informative and interesting.


Simple Example

<CENTER>This is text is centered</CENTER>


Note

You must use the </CENTER> tag to stop the alignment otherwise everything from the point you entered the <CENTER> tag will be centered.

Back to List

More Information

 

Example


The Following HTML
 



Produces the Display
 

My Name is Jonathan Smith

I have been working as a Virtual Assistant for 2 Years

My Business is based in the Region of The South

 

   
 

Reference Information

From this point on there is more detailed examples of what you can do with the most common types of HTML Tags.  The list is not inclusive and is still only a basic guide.

Back to Quick Start List

 

 

HTML Common Tags

Each HTML tag is shown in capitals with an example shown below, each tag is separated by a line

 

What is a Tag?

 A Tag is a keyword surrounded by tag symbols '<' and '>'.

A Tag may come as a single tag to indicate a single item.  For example the <br> tag causes a single line return to be inserted with the text.

A tag may also come as a pair to delimit a portion of text or image.  The opening tag comes is in its standard for at the beginninig of the item it effects. The terminating tag also includes a '/' prior to the keyword to terminate the tag.  For example. 

This is <b>bold lettering</b> in a sentence

will produce

This is bold lettering in a sentence

< & > or 'Tag' Symbols

Back To Detail List

Everything in HTML is delimited or surrounded by 'Tags' which are the < and > symbols surrounding a keyword.


If you want to show the literals for < and > in the body of your test type the following in the HTML code :-
&lt; for < 
&gt; for > 

 

 

HTML Text Formatting

Back To Detail List

The text formatting tags are used in pairs around the text that requires specific format. Multiple formats may be applied to the text as required.

  • FONT - Font specification for text
  • ALIGN - Aligns the text

Below are a list of text formatting tags with Examples across.

  • ACRONYM - Acronym
  • BASEFONT - Font specification for the document
  • B - Boldface
  • BIG - Big Font
  • BLINK - Makes the text Flash
  • CITE - Used for references
  • CODE - Used for displaying program code
  • EM - Emphasises the text
  • I - Italic
  • S, or STRIKE - Applies Strikethrough formatting
  • SMALL - Small Font
  • STRONG - Strong emphasis on the text
  • SUB - Subscript Format
  • SUP - Superscript Format
  • TT - Fixed width font
  • U - Underlined
  • VAR - Used to display Variables or arguments
  • ADDRESS - Used for address information displays the text in a different font, usually italic
  • BLOCKQUOTE - Used for quotes. Indents the text on both sides and has less space between the lines
  • PRE - Used to give text a fixed width format

Formatting Examples

Back To Detail List

<FONT FACE = "Times New Roman, Arial, Courier New " SIZE = 5 COLOR = "Navy" > Sample Text
<ACRONYM TITLE = "Hypertext Markup Language">HTML</ACRONYM> - HTML
<B> Sample Text
<BIG> Sample Text
<BLINK> Sample Text
<CITE> Sample Text
<CODE> Sample Text
<EM> Sample Text
<I> Sample Text
<SMALL> Sample Text
<STRIKE> Sample Text
<STRONG> Sample Text
<SUB> Sample Text
<SUP> Sample Text
<TT> Sample Text
<U> Sample Text
<VAR> Sample Text
<ADDRESS >

10 Downing Street
Whitehall
LONDON

<BLOCKQUOTE >

If music be the food of love, play on

<PRE >

Causes the text to be of a fixed format font

 

FONT Tag

Back To Detail List

The FONT Tag can be used to change a number of attributes of the displayable text. The FONT tag allows you to alter the following attributes:-

  • SIZE = "..." - Specifies a relative font size, scaled from 1 to 7. 3 is the default size. This may be an absolute value or you may also specify the size relative to that currently in use, i.e. + or -
  • COLOR = "..." - Specifies the colour of the text.
  • FACE = "..." - Specifies the typefaces that may be used for the text. Because not all fonts are found on all computers, the FACE specification can detail a number of typefaces that they should be searched for in order of preference.   Careful consideration should be given to the allocation of font face, trying setting your default font on your browser, to something weird like wingdings, and then have a look at various pages.

 

 

 

Horizontal Rule

Back To Detail List

HR = Horizontal Rule or Line
below is a standard line


There are a number of attributes that allow for the formatting of the Horizontal rule

  • SIZE = n - Specifies the line height in pixels
  • WIDTH = n - Specifies the line width in pixels
  • WIDTH = "n%" - specifies the line width as a percentage of the documents width
  • ALIGN = LEFT, CENTER or RIGHT - Specifies the lines alignment
  • NOSHADE - Specifies that the line has no shading
  • COLOR = Specifies the lines colour

Examples

<HR size = "6">


 

<HR size = "6" color = "black">

 


<HR width = 100>


<HR width = "50%">


<HR noshade>

 

Headings

Back To Detail List

The use of the Heading tag allows the browser to display text with default attributes specified by the browser

<H1> = HEADING 1

<H2> = HEADING 2

<H3> = HEADING 3

<H4> = HEADING 4

<H5> = HEADING 5
<H6> = HEADING 6

Additional formatting may be included within the Header tags such as align (see paragraphs below) and colours.

 

Paragraphs

Back To Detail List

P = Paragraph or New Paragraph

<P> will start a new paragraph inserting a blank line first

Through the use of the attributes within the paragraph tags we can cause the paragraph to change its format within the browser

 

 

Examples

<P ALIGN = CENTER >

Causes the text to align to the centre of the browser

<P ALIGN = RIGHT >

Causes the text to align to the right hand side of the browser

<P ALIGN = LEFT >

Causes the text to align to the left hand side of the browser, this is the default

 

Breaks

Back To Detail List

BR = Break or Line Break
<BR> will start a new line without inserting a blank line. The BR tag may also have the attributes CLEAR = "LEFT", "RIGHT" or "ALL" to cause the next items to be placed below any floating images that may be before it.

 

 

Unordered lists

Back To Detail List

UL = Unordered List or Bullet list

  • list item 1
  • list item 2

By adding the type attribute to the Unordered list definition you can alter the bullet shapes used for the list items.

Examples

<UL type = disc> {list items} </ul>

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

<UL type = square>

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

<UL type = circle>

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

 

 

Ordered lists

Back To Detail List

OL = Ordered list or Numbered List

  1. list item 1
  2. list item 2

By adding the type attribute to the Ordered list definition you can alter the numbering convention used for the list items.
Another attribute that can be set is the start attribute which determines the starting value for the list items

Examples

<OL type = A>

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

<OL type = a>

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

<OL type = I>

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

<OL type = i>

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

<OL type = 1>

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

<OL start = 34>

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

 

List Items

Back To Detail List

LI = list item, within either Unordered or Ordered Lists

List items may also have the type attribute set within the tag in the same method as it can be set for the Ordered and Unordered Lists.
An Additional attribute that can be set is the value attribute which defines the number that is associated with the list item.

 

Example

<LI type = i value = 7>

  1. Example item in a list

 

Attributes

 

 

ALIGN Attribute

The ALIGN attribute allows you to align text comparative to the element within which it is present. This may be within the whole document, a table cell etc. There are a number of values that may be used for the ALIGN attribute:-

Back To Detail List

  • ALIGN = "LEFT" - The text will align to the left. This is the default.
  • ALIGN = "RIGHT" - The text will align to the right.
  • ALIGN = "CENTER" - The text will be centred.
  • ALIGN = "JUSTIFY" - The text will be fully justified.
  • ALIGN = "CHAR" - The text will be aligned to a specific character. This is used in conjunction with the CHAR attribute which details which character to use. To turn this feature off you use the CHAROFF attribute. This feature is not yet supported by most popular browsers.

Examples

Align to decimal character Aligned right Aligned justified Aligned center
1234.56 the cat sat on the mat the cat sat on the mat the cat sat on the mat
123.456 the cat sat on the mat the cat sat on the mat the cat sat on the mat
12345.6 the cat sat on the mat the cat sat on the mat the cat sat on the mat