Computer Laboratory

Basic HTML tags

When you first start working on an HTML webpage, you will probably only be editing a few lines of text.

For this reason you will probably only need the very basic HTML tags to get you started. 

A good HTML coder will always put the tags in pairs.  Whilst many browsers will forgive some missing </ > tags, it is good practice to always write in tag pairs.

The following should help you on your way

Note:
Your webpages, when posted live, will be attached to the Computer Lab stylesheet to maintain consistency across the site. 

So long as you mark your text with a heading type (i.e heading 1), the stylesheet will set the appropriate style for you.

Formating Code Example
Paragraph <p>
Your text in here
</p>
Put your text in here
Enbolden <b> Your text is now bold</b> Your text is now bold
Italics <i> Your text is now in italics </i> Your text is now in italics
Underline <u> Your text is now underlined</u> Your text is now underlined
Centring text <center>Your text is now centred
</center> 		 Your text is now centred
Headings
(See how these headings have taken the Computer Lab style)		 <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Heading 1

Heading 2

Heading 3

Heading 4
Bulleted list:
unordered list		 <ul>
     <li> Item 1 </li>
     <li> Item 2 </li>
</ul>
  • Item 1
  • Item 2
Bulleted list:
nested unordered
list		 <ul type="disc">
     <li> Item 1 </li>
     <li> Item 2 </li>
     <ul type="circle">
          <li> Nested item 1 </li>
          <li> Nested item 2 </li>
     </ul>
     <li> Item 3 </li>
</ul>
  • Item 1
  • Item 2
    • Nested item 1
    • Nested item 2
  • Item 3
Bulleted list:
ordered list		 <ol>
     <li> Item 1 </li>
     <li> Item 2 </li>
</ol>
  1. Item 1
  2. Item 2
Bulleted list:
nested ordered list		 <ol type="1">
     <li> Item 1 </li>
     <li> Item 2 </li>
     <ol type="a">
          <li> Nested item 1 </li>
          <li> Nested item 2 </li>
     </ol>
     <li> Item 3 </li>
</ol>
  1. Item 1
  2. Item 2
    1. Nested item 1
    2. Nested item 2
  3. Item 3
Hyperlink <a href="http://www.cl.cam.ac.uk">
Computer Lab website</a>		 Computer Lab website
Horizontal rule 
(for dividing sections
on a page)		 <hr> </hr> which is abbreviated
to just <hr/>
Horizontal rule with properties
 <hr/ width="50%" size="5">
Line break <br> </br> which is abbreviated
to just <br/>:
This is your text <br/>
And here is more text		 This is your text
And here is more  text