TUTORIAL: Text

HTML Elements

  • The HTML document itself begins with <html> and ends with </html>.
  • The visible part of the HTML document is between <body> and </body>.
  • To type out an HTML tag, you need to use the angle brackets on the bottom of your keyboard - holding SHIFT + ...
  • An HTML element is defined by a start tag, some content, and an end tag:<tagname>Content goes here...</tagname>
  • The HTML element is everything from the start tag to the end tag:

Headings

  • The <h1> element defines a heading. It has a start tag <h1> and an end tag </h1>:
  • HTML headings are defined with the <h1> to <h6> tags. 
  • <h1> defines the most important (biggest) heading. 
  • <h6> defines the least important (smallest) heading.

Paragraphs

  • The HTML <p> element defines a paragraph.
  • A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Bold

There are different HTML elements to change how text looks. 

  • The main one you will use is bold <b>
  • The other one you might want to use (inside paragraphs) is italics <i>

If you want to experiment with the different types of formatting elements, click on the Try It Yourself link for the style on the w3schools page >> HTML Formatting

Lists

Unordered List

  • An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
  • The list items will be marked with bullets (small black circles) by default:

Ordered List

  • An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
  • The list items will be marked with numbers by default:

Sublists

  • You can have sublists, lists that are indented bullets/numbers
  • It's basically a list within a list by putting an opening and closing UL or OL tags inside the main UL or OL.

Colors in Notepad++

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


If you click on an opening or closing tag, they will both be highlighted in purple, if they are typed correctly.


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


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.


  • Attributes should turn red (unless you spelled it wrong).

  • What the attribute equals should be in quotation marks – then it’s in purple. If you don’t have any quotation marks, it turns orange; go back and add both quotations marks.

Notepad++ tips

Go to File>Open or click on the open toolbutton...

  • At the beginning of each class, you need to open your page in Chrome. Go to Run>Launch in Chrome

The process

  1. Change stuff in Notepad++
  2. Save it
  3. See how it looks in Chrome (refresh)

You can see if your page is saved or not by looking at the "webpage" tab.

  • red = not saved
  • blue = saved

CTRL+S to save the page (or use the toolbutton).

  • If your page is already open in a Chrome tab, refresh the page using the keyboard shortcut F5 or the Reload button.
Getting Started