HTML5 Seminar

HTML5 Seminar Ga Tech March 31, 2012 Barbara Ericson Barbara Fox

We all start here... http://www.datamation.com/img/2009/07/art-programming.jpg

"HTML5" CSS for styling colors, position, fonts wstyle.css body { background-color: gray } h2 { color:white } HTML tags and attributes whales.htm <!doctype html> <html> <head> <title>Learn About Whales</title> <meta charset="utf-8"> <link rel="stylesheet" href="wstyle.css"> <script src="whales.js"></script> </head> <body> <h1>Whales</h1> <p>Whales are mammals.</p> <h2>Orca Whale</h2> <div id="orca"> </div> </body> </html> JavaScript for interactivity and flexibility whales.js function init() { var w = document.getElementById("orca"); w.innerHTML = "Black & white whale"; } window.onload = init;

...and it looks like this <title> CSS changed background color to gray and "Orca Whale" to white JavaScript added "Black and white whale" inside of the <div>

What will I have to change when moving from HTML4 to HTML5?

HTML4 vs. HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Learn About Whales</title> <link type="text/css" rel="stylesheet" href="wstyle.css"> <script type="text/javascript" src="whales.js"></script> </head> <!doctype html> <html> <head> <title>Learn About Whales</title> ... </head>

HTML4 vs. HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Learn About Whales</title> <link type="text/css" rel="stylesheet" href="wstyle.css"> <script type="text/javascript" src="whales.js"></script> </head> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Learn About Whales</title> ... </head>

HTML4 vs. HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Learn About Whales</title> <link type="text/css" rel="stylesheet" href="wstyle.css"> <script type="text/javascript" src="whales.js"></script> </head> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Learn About Whales</title> <link rel="stylesheet" href="wstyle.css"> ... </head>

HTML4 vs. HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Learn About Whales</title> <link type="text/css" rel="stylesheet" href="wstyle.css"> <script type="text/javascript" src="whales.js"></script> </head> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Learn About Whales</title> <link rel="stylesheet" href="wstyle.css"> <script src="whales.js"></script> </head>

HTML4 vs HTML5 wstyle.css • Must use CSS for all • appearance styling • CSS3 • adds styles like drop • shadows and rounded • borders • adds selector options whales.htm • simplifies document markup • <!doctype html> • <meta charset="utf-8"> • <link rel="stylesheet" href="wstyle.css"> • <script src="whales.js"></script> • adds new element tags for • greater semantic content • deprecates tags and attributes • that were used primarily for • styling appearance vs. semantic • content whales.js API's which add JavaScript functionality: Video, Canvas, Local Storage,Audio, Forms, Drag & Drop, Geolocation, Sockets, Web Workers, Offline Caching

Deprecated HTML tags <applet> <frame> <font> <center> <u> For complete list see: http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm

Deprecated HTML attributes Attributes removed from most elements: align background bgcolor border cellpadding cellspacing width For complete list see: http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm

HTML4 vs. HTML5 Move all styling to CSS <body bgcolor="gray"> <h1>Whales</h1> <p>Whales are mammals.</p> <h2><font color="white" >Orca Whale</font></h2> <div id="orca"></div> </body> whales.htm body { background-color: gray } h2 { color:white } whales.css

"HTML5" JavaScript API's • Geolocation identify browser location • Forms can require certain fields filled in; verify email, URL's or phone numbers • Web Workers manage multiple scripts running concurrently and in the background to avoid lags • Local Storage store info on desktop computer • Canvas draw text, images, lines, circles, rectangles, patterns, and gradients • Audio & Video moreadvanced features • Offline Web Apps Applicationswhich will work even when not connected to the web

Lab 1: Convert HTML4 to HTML5 • Copy Lab1.zip to your computer & unzip it • Using code from PowerPoint slides: • Convert whale.htm to HTML5 • Move color styling to CSS • View whale.htm in your browser to verify it renders properly

Introduction to HTML Skip HTML, jump to Lab1

HTML Tags • Begin with < • End with > • Tagname in the middle < tagname > • Identify the structure of the content (paragraph, image, link, heading, etc.) • If a tag contains content (text, other tags, etc.) then it will have a closing tag </tagname>

HTML Attributes • Provide additional information • Located inside an opening tag • Syntax attributename="value of attribute"

Basic HTML Structure <!doctype html> <html lang="en"> <head> ... </head> <body> ... </body> </html> The doctype declaration is not usually referred to as a tag. Which are tags? <html> <head> <body> Name the attribute: lang What is the value of that attribute? "en"

Basic HTML Structure <!doctype html> <html lang="en"> <head> ... </head> <body> ... </body> </html> <!doctype html> required first line according to HTML 5 <html lang="en"> HTML web page in English <head> top portion contains <title> and other non-content related items <body> visible "contents" of the web page

Common HTML Tags in <head> <title> typically shows in browser tab or when minimized <meta charset="utf-8"> character-set <script src="javascript.js"> external Javascript file <link rel="stylesheet" href="mycss.css">external CSS defining colors, fonts, etc. <head> <title>Whale Info</title> <meta charset="utf-8"> <script src="javascript.js"></script> <link rel="stylesheet" href="mycss.css"> </head>

Common text tags in <body> <p> paragraph <h1> Heading 1 (Major Heading) <h2> SubHeading (subheading of <h1>) <h3> sub-SubHeading (subheading of <h2>) <h4> sub sub ... <h5> sub sub sub ... <h6> smallest sub-heading <ul> Unordered list - list items inside will have bullets in front of them <ol> Ordered lists - list items inside will be numbered <li> individual item in a list (either ordered or unordered) <h1>Mammals</h1> <h2>Whales</h2> <ul> <li>Orca</li> <li>Beluga </li> <li>Humpback</li> </ul>

HTML Miscellaneous Comments  Nesting Tags should be nested inside of each other like nesting dolls. To opening tag and closing tag create a "box" that contains other information. <p>Beginning of a paragraph <ol> <li>Orca</li> </p> <li>Beluga</li> </ol> NOT nested properly! The <ol> should be ended with </ol> BEFORE the end of the paragraph </p>

Try ItNesting Check This HTML is not nested properly. Write down the correct HTML. Indent to make the nesting more clear. . <h3>Favorite Foods</h3> <ol>Pizza</li> Cake</li> <li>Cookies</ol> <li>Sushi</li>

Nesting Solution <h3>Favorite Foods</h3> <ol> <li>Pizza</li> <li>Cake</li> <li>Cookies</li> <li>Sushi</li> </ol>

Spacing in HTML Block tags start on a new line and do a line break when finished: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ol>, <ul>, <li>, <div>, <hr> Inline tags will display beside each other: <a>, <img>, <span> To force a newline (i.e. line break): <br> HTML treats multiple spaces as one space. Add extra spaces with: <h1>Animal<br>Report<br><br>by Joey</h1> <br> <br> <h2>Mammal Report<br>by Suzanne</h2>

Images • Embed jpg, gif, and png images into web page • Image tags require the use of attributes <img src="beluga.jpg" alt="Baby Beluga Whale" > <img src="http://images.nationalgeographic.com/beluga.jpg" alt="Baby Beluga Whale"> src - location of image file alt - alternate text that will display if picture cannot display for any reason src - location of image file on internet begins with http:// alt - alternate text required for federal accessibility laws

Hyperlink aka anchor aka link • A hyperlink is text or an image that you can click on to jump to a new document (or a different part of the current web page) <a href="http://www.google.com">Click here to go to Google</a> <a href ="whales.htm">Click here to go to the local web page called whales.htm</a> <a href ="http://www.w3schools.com/" target="_blank">Great site to learn about web design</a> internet sites usually begin with http:// href - URL to website local sites do NOT begin with http:// target = "_blank" - opens the web page in a NEW window

Lab2Create website Create a 2-page web site about another teacher in the room • Create new folder/link called lab2 to hold the files • Create home page: index.htm • Create second page: interests.htm • Add proper HTML5 info in <head> • In <head> add a <title> • In <body> add headings, lists, paragraphs, images, and a link to an external website • Link index.htm and interests.htm to each other Note: Workshop site: http://coweb.cc.gatech.edu/ice-gt --> Teacher Workshops New links created with asterisks: *lab2*

Common HTML Attributes src="playlist.js" embeds the contents of this file into the web page src="marathon.jpg" href="playlist.css" hyperlink reference to an external file href="http://google.com" id="first" a unique identification for an element so it is easy to refer to it with HTML, CSS, or JavaScript class="whale" an identifier than can refer to multiple elements to make it easy to refer to those elements with HTML, CSS, or JavaScript

Tables <table> table <tr> row <th> column or row heading cell (table heading) <td> regular cell (table data) 1st row - table headings 2nd, 3rd, & 4th row - table data

with No CSS Styling <table> <tr> <th>Whale</th> <th>Length</th> <th>Weight</th> </tr> <tr> <td>Blue Whale</td> <td>100 feet</td> <td>150 tons</td> </tr> <tr> <td>Sperm Whale</td> <td>60 feet</td> <td>50 tons</td> </tr> <tr> <td>Killer Whale</td> <td>30 feet</td> <td>5 tons</td> </tr> </table> with CSS Styling

Tables - additional tags <caption> Table caption <thead> Groups the header content <tbody> Groups the body content <tfoot> Groups the footer content <colgroup> Defines a group of columns in a table (makes it easier to apply CSS) <col> Used with colgroups to define styles for columns

Tables - HTML5 attributes Removed width, cellspacing, cellpadding, and others Only supported attribute is: border="" No border border=1 border on

Tables - add'l context tags <style> table { border: 15px solid navy; border-collapse: collapse; } th, td { border: 1px solid black; padding:10px; } thead{ font-family:sans-serif, arial; text-transform:uppercase; border:5px solid gray } </style> <table> <thead> <tr> <th>Whale</th> <th>Length</th> <th>Weight</th> </tr> </thead> <tbody> <tr> <td>Blue Whale</td> <td>100 feet</td> <td>150 tons</td> </tr> ... </tbody> </table>

Tables - colgroup • Create groups columns for styling <style> .whaleinfo {background-color:LightSkyBlue; width: 300px} .whale {width:100px} ... </style> <table> <colgroup> <col class="whale"></col> <col class="whaleinfo"></col> <col class="whaleinfo"></col> <colgroup> ...

Lab 2BAdd a table • Add a table to the teacher website Note: This page will still have boring black text and the pictures will be sized poorly. That's ok! We can dress it up later with CSS.

Form Elements - text + button <form> <input type="text" id="songTextInput" size="40" placeholder="Song name"> <input type="button" id="addButton" value="Add Song"> </form> Later we'll be creating JavaScript that will respond to the button click and read the text input

Form Elements - radio buttons <form><input type="radio" name="size" value="small" />Small<br><input type="radio" name="size" value="medium" />Medium<br> <input type="radio" name="size" value="large" />Large </form>

Form Elements - drop downs <form action=""> <label>Select your favorite car</label> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form>

Form Elements - check box and Submit button <form> <input type="checkbox" name="vehicle" value="bike" />bicycle<br> <input type="checkbox" name="vehicle" value="car" />automobile<br> <input type="checkbox" name="vehicle" value="bus" />bus<br> <input type="submit" value="Submit" /> </form> Submit sends the input from the form to a web server for processing

Lab 2CAdd a form Add a form to your teacher website which includes: • input type="text" (ask for student name) • button (Add a Song, Add a Class, etc.) • radio buttons (age, gender, etc.) • checkboxes (favorite foods) • submit button Note: This page will still have boring black text and the pictures will be sized poorly. That's ok! We can dress it up later with CSS.

Div <div> • Divisions are used to separate sections of a web page for • styling (colors, fonts, etc.) • positioning on the page • Contextual sections should be specified using the new HTML5 tags: <section> sports, news, ads <article> Cure For Cancer <header> Atlanta Journal + logo <hgroup> group of headers for one topic <footer> page number, contact links <nav> navigation links <aside> pullout

Using <div> <divid="header"> <div id="links"> <divid="mainContent"> <divid="article"> <divclass="sidebar"> <divid="footer"> diagram from www.cengagesites.com/.../Transitioning to HTML5 and CSS3)Patrick Carey.ppt

Using HTML5 elements <header> … </header> <divid="header"> <article> …</article> <nav> … </nav> <div id="links"> <divid="mainContent"> <section> … </section> <divid="article"> <divclass="sidebar"> <aside> … </aside> <footer> … </footer> <divid="footer"> Note: Not block elements like <div>. Can change to block element behavior with CSS display:block diagram from www.cengagesites.com/.../Transitioning to HTML5 and CSS3)Patrick Carey.ppt

Div div id="info" div id="photos"

Div <div id="info"> <h1>Animal Report</h1> <h2>Mammals </h2> <h3>Water mammals</h3> <img src="whaleClipart2.jpg"> <h4>Whales</h4> <h5>Beluga whales</h5> <h6>Feeding habits of belugas</h6> </div> <div id="photos"> <img src="beluga.jpg"> <img src="babyBeluga.jpg"> </div> Two divisions are created

Div #photos { height:250px; width:650px; background-color:gray; border:10px solid black } #photos img { margin:20px; border:5px solid white; height:200px } only div id="photos" is affected by the CSS styling

Solution

HTML5 Seminar

HTML5 Seminar

Presentation Transcript

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5