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 Seminar

HTML5

HTML5

HTML5

HTML5

Introduction to HTML5, HTML5 Basics, HTML5 Introduction, HTML5 Tutorials - Prism Multimedia