HTML basics

What is HTML?

What is an HTML Tag?

Common tags include: div, p, a, img, table, span

They look like this:

      This is a div tag

        this is a p tag in a div tag

And here's the html for ITP Camp

Some Rules for HTML Tags

  1. Tags must be closed
        (notice the /div below)
      <img src="some_image.gif" />
  2. Tags must be closed in order
      <div><p>This is correct</p></div>
      <div><p>This is incorrect</div></p>
  3. Sometimes order matters
      ul -> li
      table -> tbody -> tr -> td

Aight... let's take a look at an example

Sometimes, tags have attributes:

  <a href="">Click here!</a>
  <img src="example_img.png" alt="This is alt text" />

It's all about style...

By default, hyperlinks look like this. If I want to modify the style, I can do this:

  <a href="" style="color:red">Click here!</a>

Which looks like this:

Click here!

Separating Style from content...

Instead of inline styles:

  <h1 style="font-family: helvetica; font-size: 22px;">These are called</h1>
  <p style="color: red; font-weight: bold;">... inline styles</p>

How about separating the styles from the content:

  <h1>Much easier...</h1>
  <p>... to deal with</p>


    h1 {
      font-family: helvetica;
      font-size: 22px;

    p {
      color: red;
      font-weight: bold;


A little more about styles...

  selector {
    property-name: value;
    property-name: value;
    property-name: value;

IDs and Classes



Basics of using Selectors


  html, body, div, form, fieldset, legend, label { color: black; }
  #main_nav li { color: black; }
  div.bottom_container div.bottom_wrapper { color: black; }
  div.pagination a.previous_page, div.pagination a.next_page, div.pagination
span.previous_page, div.pagination span.next_page { color: black; }


When styles conflict:

Order of precedence:

  1. !important
  2. Inline styles
  3. The more specific one
  4. If they are equally specific, the one declared later wins

Advanced Selector Rules: Specificity

Selector Type Example Points
ID #main_nav 100
Class .previous_page 10
Element div 1


ul li
2 points
ul#recipe li
102 points
#recipe li
101 points
#recipe .red
110 points

Tips and Tricks

On to page 2, CSS basics