HTML5 Open Academy



Session 2
HTML5 Elements

Daniel Sternlicht
Front End Developer, Conduit
www.danielsternlicht.com
@dsternlicht

We're going to talk about

Just before we start

Markup

<important> HTML Rules </important>
<silly> I like the Simpsons! </silly>
<heading> Luke, I am your father </heading>

A few points to remember

Container tags examples

/* Container tags */ 

<body></body> 
<div></div> 
<p></p>
        
<header></header> 
<li></li>

The one rule you don't want to forget...

Why?...

Because HTML tags are evil...

Any Exceptions?

Empty tags examples

/* Empty tag */ 

<img /> 
<br /> 
<input />

Basic HTML page structure

<!DOCTYPE html> 
<html> 
 <head> </head> 
 <body> 


        Page content goes here... (Including more HTML elements)

 </body> 
</html>

The Peter Griffin's HTML page

Attributes

HTML Attribute syntax

<tagname attribute="property" ></tagname>

<a href="http://danielsternlicht.com" ></a>

<input type="text" />

Layouts

Web layout

Examples

Examples

HTML5 Layout

HTML5 Layout example

HTML5 Layout example

Live Coding

Beer Break
right before we're getting our hands dirty...

Practice

Layout: Header, footer, sidebar, menu,
content area

Content: Article, paragraphs, image,
headings, list, link

Signup form: Name, last name, gender,
country, password, interests, signup button

Pricing table: Columns: features, basic,
advanced, pro. Rows: photo, amount,
price, buy button

Advanced: YouTube video, Facebook like,
Tweet button

www.w3schools.com

http://bit.ly/openacademy

← →

/

#