HTML in a nutshell

by Tony Cosentino - Student ID 14086641


recipe - background colour - bold, italic & underline - headings - paragraphs - links - email - lists

Welcome to my brief overview of html. If this was being compared to a meal I would call it an apetizer just to get your taste buds woken up to the opportunites available with HTML. If you want to move onto the main course I would reccomend going the this website which has a much more in depth tutorial on HTML.


The recipe

The recipe for every HTML page start with the following basic ingredients

<html>

<head>

<title>The title of this page goes here</title>

</head>

<body>

The main content that is actually presented goes here

</body>

</html>

The BODY is where this overview will be concentrating on.
So take note of the other elements and always include them but the rest will be about the BODY.


Background colour

To change the background colour add the following to the <body> tag:

OutputCode required
This background colour
<body bgcolor="#90ee90">



Bold, Italic and Underline

To get the following effects you need to add the following tags on with side of the word or letter you want to effect

OutputCode required
Bold <b>Bold</b>
Italic<i>Italic</i>
Underline<u>Underline</u>



Headings

To add a heading use the following tags for the different sizes of heading

OutputCode required

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>



Paragraphs

The paragraph tag is used when a seperate paragraphs are needed. When used a new line is started and a space is left in between it and the previous item or text

Example

This is the first papragraph. Which could be very long and have a lot of text. Lorem ipsum dolor sit amet, consectetuer adipis cing elit, sed diam nonummy nibh euismod tinci dunt ut laorenim ad minim veniam, quis nostrud exerci tation ullam corper suscipit lobortis nisl ut aliq eet dolore magna aliquam erat volut pat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipis cing elit.

This is the second papragraph. Which could also be very long and have a lot of text.Lorem ipsum dolor sit amet, consectetuer adipis cing elit, sed diam nonummy nibh euismod tinci dunt ut laorenim ad minim veniam, quis nostrud exerci tation ullam corper suscipit lobortis nisl ut aliq eet dolore magna aliquam erat volut pat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipis cing elit.

OutputCode required

This is the first papragraph ...

<p>This is the first paragraph ...</p>

This is the second papragraph ...

<p>This is the second paragraph ...</p>



Links

Linking to other webpages or websites requires the format as per the table below.

The 'A' stands for anchor and the 'HREF' is a 'hyperlink reference' which generally means that the webpage can jump to another item from here. These items can be webpages, images or an email response. This example is about jumping to another website.

OutputCode required
Yahoo<a href="http://www.yahoo.com">Yahoo</a>



Email

Adding an email link is done in the similar manner to the website link as per the code in the table below

The 'MAILTO' term is used to indicate a email going to be started with the default email program of the person clicking on the link

The actual email address is then entered

OutputCode required
email me<a href="mailto:tony@justbecos.com">email me</a>



Lists

List can be created to appear in a similar format to word documents. With either dots, numbers to accent each list item

Each item in a list has the same html code used.
That code is <li>

To create a list with bullet point or 'unordered' lists for each it use the <ul> code

To create a list with numbered points or 'ordered' list for each it use the <ol> code

OutputCode required
unordered list:  
  • bread
  • milk
  • potatoes
  • pasta
 
<ul>
<li>bread</li>
<li>milk</li>
<li>potatoes</li>
<li>pasta</li>
</ul>
ordered list:  
  1. bread
  2. milk
  3. potatoes
  4. pasta
 
<ol>
<li>bread</li>
<li>milk</li>
<li>potatoes</li>
<li>pasta</li>
</ol>



Created on ... April 04, 2008
Using NoteTab Light and a lot of typing by hand