HTML Basics

This page will give you examples of how to format things in HTML. You use something called tags to format your text. A tag is something enclosed in a set of <>.

Here is an example of a very simple HTML file with almost no formatting.

Example Code
For plain text you can just type. Notice that extra blanks are ignored as are return characters. 
<HEAD>
   <TITLE>HTML Basics</TITLE>
</HEAD>

<BODY>
For plain text you can just
type. Notice     that extra blanks
are  ignored as are return characters.  
</BODY>

The head and title tags are used to tell the web browser what title to put at the top of the browser. The actual information that goes in the web page goes between the two body tags. You'll notice that almost all HTML tags come in pairs. The ending of the pair will be the same as the start except that it will have a slash character in front of it.

Headings

A heading appears on a line by itself and in a bold font. You can also specify what size you want the heading to be. Here is an example.

Example Code

Largest

Next Largest

Medium

Small

Smaller
Smallest
 
<H1>Largest</H1>
<H2>Next Largest</H2>
<H3>Medium</H3>
<H4>Small</H4>
<H5>Smaller</H5>
<H6>Smallest</H6>

Here is a small example using everything we've seen so far.

Example Code

What We've Seen

Here is an example of a large heading. You could use this for a title at the start of a page.

Sub-Heading

This would be for a subsection in the page. It would be a fairly major subsection. You would use smaller headings for less important subsections.		 
<HEAD>
   <TITLE>What We've Seen</TITLE>
</HEAD>

<BODY>
<h1>What We've Seen</h1>
Here is an example of a large heading.
You could use this for a title at the start of a page.
<h2>Sub-Heading</h2>
This would be for a subsection in the page.  It
would be a fairly major subsection.  You would
use smaller headings for less important subsections. 
</BODY>

Formatting Text

Example Code
bold
italic
underline
bold & italic
   to get 3 spaces 
To get       the
text
to look
just like you typed
it.
 
<HEAD>
   <TITLE>Formatting Text</TITLE>
</HEAD>

<BODY>
<b>bold</b><br>
<i>italic</i><br>
<u>underline</u><br>
<b><i>bold & italic</i></b><br>
&nbsp;&nbsp;&nbsp;to get 3 spaces
<pre>To get       the
text
to look
just like you typed
it.</pre>  
</BODY>

Links

Example Code
The school website
The Computer Science website
The Research Report which is located in the same directory as this html page is.		 
<HEAD>
   <TITLE>HTML Basics</TITLE>
</HEAD>

<BODY>
<a href="http://ntci.on.ca">The school website</a><br>
The <a href="http://ntci.on.ca/compsci">Computer Science</a> website<br>
<a href="a5_2017.html">The Research Report</a> which is located
in the same directory as this html page is.  
</BODY>

Colour & Graphics

Example Code
This will be in red.
This will be medium purple.
See the web site for all the colours you can choose. There is a very extensive list. yellow		 
<HEAD>
   <TITLE>Colour</TITLE>
</HEAD>

<BODY>
<font color=red>This will be in red.</font><br>
<font color=mediumPurple>This will be medium purple.</font><br>
<font color=burlyWood>See the web site for all the colours you can choose.
There is a very extensive list.</font><br>
<font color=#FFFF00>yellow</font> 
</BODY>

You can also specify colours using the RGB colour scheme. You specify how much red, green and blue you want the colour to have. You specify this by giving three hexadecimal numbers between 0 and FF. For example the colour yellow can be specified as #FFFF00. This means maximum red and green and no blue.

You can insert graphics that are saved in jpeg or gif format.

Example Code
Here's the old icon computer in 104
 
<HEAD>
   <TITLE>Graphics/TITLE>
</HEAD>

<BODY>
Here's the old icon computer in 104<br>
<img src="iconbw.jpg">  
</BODY>

For this to work the image file must be saved in the same directory as the html file. You could also specify a web address like we did for links.

Lists

Example Code
Ordered List:
  1. one
  2. two
  3. three
Unordered List:
  • first
  • second
Lettered List:
  1. one
  2. two
  3. three
Roman Numerals Start Specified
  1. five
  2. six
  3. seven
  4. eight
 
<HEAD>
   <TITLE>Lists</TITLE>
</HEAD>

<BODY>
Ordered List:
<ol>
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ol>
Unordered List:
<ul>
   <li>first</li>
   <li>second</li>
</ul>
Lettered List:
<ol type=a>
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ol>
Roman Numerals Start Specified:
<ol type = i start = 5>
   <li>five</li>
   <li>six</li>
   <li>seven</li>
   <li>eight</li>
</ol>  
</BODY>

Tables

Tables are just like 2-D arrays. You specify rows and columns. Here is a table with 2 rows and 3 columns.

Example Code
row 1 col 1row 1 col 2row 1 col 3
row 2 col 1row 2 col 2row 2 col 3
 
<HEAD>
   <TITLE>Tables</TITLE>
</HEAD>

<BODY>
<table border=1>
   <tr><td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td></tr>
   <tr><td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td></tr>
</table>  
</BODY>

You make a table using the table tag. The border is the size of the lines that surrounds the elements of the table. If you don't specify a border size or enter a value of 0 then the table will have invisible borders. This can be useful to align things on the page. A table consists of rows (<tr> stands for table row) and columns. The columns are called table data (<td>).

It is possible to put tables inside of tables. Indeed, you can generally nest any tag inside another tag. The example of the table and the code to generate it above is in fact inside a table.