HTML basics

(Achievements)

What is HTML?

HTML is a way to get some other machine to display what we want it to display
Done with tags

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

Tags must be closed

  <div>
    (notice the /div below)
  </div>
  <img src="some_image.gif" />

Tags must be closed in order

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

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

Uniquely identify something in a document
maximum of one per element
Selector is #id

Class

Shared
Any amount of classes per element
If multiple, separated by spaces (when in the attribute)
Selector is .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:

element names (div, a, li, etc...)
classes (.featured, .tab, .active)
id (#main_nav)
nested things (separated by spaces)
multiple things (separated by commas)

When styles conflict:

Order of precedence:

!important
Inline styles
The more specific one
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