Intro to html

HTML stands for Hyper Text Markup Language. HTML has its own set of tags to mark up text. If you want something bolded or centered, you have to indicate so with HTML tags.

Tags are in angled brackets <>, and they are blue. You can have them all capitals (stand out more) or lowercase, doesn't matter. 

  • add an opening tag before what you want to affect.
  • go to the end of what you want to affect, and add a closing tag (same thing but with the / before the tag).

Attributes are in red - they are in the opening tags only. They change how something looks (color, size, etc.)

Colors in Notepad++

we are using Notepad++ which gives you feedback to let you know if you entered tags and other code elements correctly with the use of colors. The following are some helpful tips (just read through them) so you know if you're doing things correctly, and what to do if things go wrong...


HTML tags should be in blue. If not spelled right, they turn black. Example the BODY tag below.

Opening & Closing Tags

If you click ON an opening or closing tag, they will both be highlighted in purple, if they are typed correctly. If you haven't put a "/" before the closing tag, it won't turn purple, and the tag is not closed.

A common mistake is forgetting a bracket at the end of a tag. Then the HTML tag will turn red in the next tag.


Attributes should turn red (unless you spelled it wrong – watch out for color = American not Canadian spelling). What the attribute equals should be in quotation marks – then it’s in purple. 

Make sure you don’t have just one quotation mark, then it won’t be happy. If you do, the next Tag will be purple instead of blue.

Intro to HTML COlors

  • HTML uses American spelling so spell color instead of colour.
  • To set the color for something, either use one of the 216 web safe colors using a hexademical code (0-9 and a-f), or one of the color names such as black, white, red, aqua, lime, yellow, etc.

Opening your page in Notepad

There are 2 ways to open your page in Notepad++.

  1. Go to your folder and right-click on the file, choose "Edit in Notepad++", or
  2. From Notepad, go to Open...

The process

Working on your page, you will go back and forth between Notepad and Chrome...

  1. NOTEPAD: Change something in Notepad. You can see your document is not saved because the file icon is red instead of blue. Save using the toolbutton or the keyboard shortcut CTRL+S.
  2. CHROME: See how it looks in Chrome. Go to the Chrome window and hit the Refresh button  or use the keyboard shortcut F5.

The entire project is just repeating Steps 1 & 2.

CHROME: Refresh
CHROME: Refresh