HTML basics

(Achievements)

What is HTML?

What is an HTML Tag?

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

They look like this:

  
  
  
  
  
  
  
  
  
  
  
  
    <div>
      This is a tag
    </div>
















    <div id="someID" class="active">
      This is a tag
    </div>

















    <div>
      <p>
        this is a p tag inside a div tag
      </p>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
      
  
    <div>
      This is a tag
    </div>



  
  
  
  
  
  
  
  
  
  
    <div>
    </div>



    
    
    
    
    
    
    
    
    
    
    
    
    <img src="example_img.png" alt="Cool!" />


    
    
    
    
    
    




    
    <div>This is incorrect
    <div>This is correct</div>
    
    
    
    



    
    
    
    
    
    
    
    <div><p>This is incorrect</div></p>
    <div><p>This is correct</p></div>

    
    
    
    
    
    
    
    
    
    
    
    
    <img src="example_img.png" alt="Cool!" />


















    <ul>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Pears</li>
    </ul>





    
    
    
    
    
    
  

And here's the html for ITP Camp

Some Rules for HTML Tags

  1. Tags must be closed
      <div>
        (notice the /div below)
      </div>
      <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>Apples</li>
        <li>Oranges</li>
        <li>Pears</li>
      </ul>
    
      ul -> li
      table -> tbody -> tr -> td
          

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

Sometimes, tags have attributes:

  <a href="http://itp.nyu.edu/camp2015/">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="http://itp.nyu.edu/camp2015/" 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>

  <style>

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

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

  </style>
  
  

A little more about styles...

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

IDs and Classes

ID

Class

Basics of using Selectors

Examples:

  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; }
  

Rules:

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

Examples:

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