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

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

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 For many elements, the following have been removed: align background bgcolor border cellpadding cellspacing width For complete list see: http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm

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

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>

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 begin with http:// href - URL to website local sites do NOT begin with http:// target = "_blank" - opens the web page in a NEW window

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 No width, cellspacing, cellpadding, etc. Only supported attribute is: border="" No border border=1 border on

Tables - advanced <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 • Attribute span specifies how many columns to include in the group (default is one) <colgroup style="width:100px"></colgroup> <colgroup span="2" style="background-color:LightSkyBlue; width: 300px"></colgroup> 1st Group - Column 1 2nd Group - Columns 2 & 3

Form Elements <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

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

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

Lab 1 • Pair up with a partner. You will be creating an informational page about your partner. Create a new folder that begins with your lastname: smith_Lab1 • Create a home page in that folder called index.htm • Create a second page in that folder called interests.htm • Interview your partner to determine some biographical information, favorite hobbies, where they teach, etc. • Download a photograph of your partner (if available). Download images related to favorite hobbies or activities. • Create 2 HTML5 web page that link to each other and include images, a link to a website, a list, headings, and a paragraph as a minimum • Make sure to include <head>, <title>, and <body> • Add a table and div if you have time • Note: This page will be boring black text and the pictures will be sized poorly. That's ok! Lab 2 will dress it up with CSS.

Introduction to CSS Skip CSS, jump to Lab 2

CSS • Cascading Style Sheets • Control the appearance or style of the web page • color, font, border • width, height, position • margin, padding

CSS CSS • Inline CSS • affects one line of HTML • located within an HTML tag • Internal CSS aka Embedded CSS • affects one web page • located in the <head> • <style> .... </style> • External CSS • affects multiple pages of a web site • located in an external file and linked to each page with the <link> tag in <head>

CSS - w3schools.com CSS - w3schools.com

CSS CSS - inline • Inline CSS • affects one line of HTML • located within an HTML tag • no selector since it is inside a tag <h2 style="color:teal">Teal</h2> <h2>Not teal</h2>

CSS CSS - internal • Internal CSS aka Embedded CSS • affects one web page • located in <head> • To change ALL <h2> • <style> • h2 { • color:teal; • background-color:yellow • } • </style> <h2 id="orca">Killer Whale</h2> <h2> Beluga</h2>

CSS CSS - external • External CSS • affects every web page that include <link> to the CSS file • Do NOT specify <style> • <link> is in <head> of web page • /* This is the file whale.css */ • h2 { • color:teal; • background-color:yellow • }  <head> <link rel="stylesheet" href="whale.css"> </head> <body> <h2 id="orca">Killer Whale</h2> <h2> Beluga</h2> </body>

CSS CSS with ids • The HTML attribute id=" " is used to uniquely identify an HTML element so JavaScript, CSS, and other HTML can refer to it • #idname is the CSS selector for an id <h2 id="orca">Killer Whale</h2> <h2> Beluga</h2> • <style> • h2 { • color:red; • } • #orca { • background-color:LightBlue • } • </style>

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

<style> table { border: 5px solid red; border-collapse: collapse; } th, td { border: 1px solid black; padding:10px; } </style> <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

CSS3 - border-radius <div id="whale"> <h1>Whales<h1> <img src="babyBeluga.jpg"> </div> #whale { width:400px; height:250px; background-color:LightSkyBlue; padding:15px; border-radius: 20px; } #whale img { width:50%; border:15px solid gray; border-radius: 15px }

CSS3 - drop shadows <h1 id="blurred">Blurred<h1> <h1 id="sharp">Sharp</h1> #blurred { background-color:LightSkyBlue; box-shadow: 10px 10px 5px gray; } #sharp { background-color:LightSkyBlue; box-shadow: 10px 10px black; }

Lab 2 • Create a CSS file called lab2.css • Add the following line in the <head> section of index.htm and interests.htm: <link rel="stylesheet" href="lab2.css"> • Create lab2.css • Change the styling (See example CSS on next page or http://w3schools.com to be more creative)

HTML5 Seminar

HTML5 Seminar

Presentation Transcript

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5 Seminar

HTML5

HTML5

HTML5

HTML5