Basic guide to html

What is HTML?

HTML is the standard formatting language for creating web pages and formatting text online. It gives your browser instructions on what font to use, the colours, position, images and links.

This page is written in HTML. What you are currently viewing is however the end result of the browser reading HTML and rendering it.

In this guide you'll find a brief overview of the structure and examples for everyday formatting, for example within survey pages.

 

 

 

 

 

HTML Tags

All text in an HTML file is displayed with the exception of text enclosed in angle brackets, < >, known as tags. These tags are used to give formatting instructions to the browser.

A simple example is the bold tag.

in html we write

This next word will be <b>bold</b>

 

which is rendered

This next word will be bold

 

 

 

 

Basic Text Tags

in html we write

Which is rendered

 

Note how all the text runs together, even though we put the text on separate lines. HTML sees all white space the same and renders it as a single space.

Below are some examples of putting line breaks

 

Line Breaks and Paragraphs

The simplest way to put text on another line is using the line break tag <BR>

in html we write..

 

Which is rendered

 

you can also group text using the paragraph tag <P>

 

Which is rendered

 

 

Font and Size

There are 3 major font families available online. these are Courier, Times and Arial. All other font faces cannot be relied on to display correctly because the need to be installed on the end-users machine.

To display a font you need to use a 'span' tag to mark out the text you want to format and specify the font-family as below.

 

Font size works in a similar way

rendered as

 

Colour

Colour may be applied to text and background.

for example

rendered as

 

Colour, font and size may also be combined

for example

rendered as

For specific colours, you will need to specify the hexcode , e.g. instead of red, we use #ff0000. Hex code colours are beyond the scope of this guide.

Headings

Headings are defined by the H1, H2 to H6 tags.

Which is rendered

Hyperlinks

One of the revolutions of the web is linking pages together. In order to do this you use the anchor tag <A> and </A>. The text between the tags will become an active link.

If for example we want to link to Wikipedia, which is http://www.wikipedia.com

for example

rendered as

 

Lists

There exist 2 main types of lists: ordered (with numbers) and unordered (with simple bullets).

the code for an ordered list is below.

rendered as

 

the code for an un ordered (bulleted) list is below.

rendered as

Images

In order to use images, you need to upload them first on to a server. On this server we have an image which is at web location http://surveyengine.com/images/star.gif

the code for an un ordered (bulleted) list is below.

rendered as

 

• Each HTML element has an element name (body, h1, p, br)
• The start tag is the name surrounded by angle brackets: <b>
• The end tag is a slash and the name surrounded by angle brackets </b>
• The element content occurs between the start tag and the end tag
• Some HTML elements have no end tag (line break)

 

Useful Tips

When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.
HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space. 
Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't use the <br> tag to create lists. Wait until you have learned about HTML lists.)
HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.
We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.