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

We all start here...

"HTML5" Learn About Whales Whales Whales are mammals. Orca Whale HTML tags and attributes function init() { var w = document.getElementById("orca"); w.innerHTML = "Black & white whale"; } window.onload = init; body { background-color: gray } h2 { color:white } CSS for styling colors, position, fonts JavaScript for interactivity and flexibility whales.htm whales.js wstyle.css

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

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

HTML4 vs. HTML5 Learn About Whales Learn About Whales...

HTML4 vs. HTML5 Learn About Whales Learn About Whales...

HTML4 vs. HTML5 Learn About Whales Learn About Whales...

HTML4 vs. HTML5 Learn About Whales Learn About Whales

API's which add JavaScript functionality: Video, Canvas, Local Storage,Audio, Forms, Drag & Drop, Geolocation, Sockets, Web Workers, Offline Caching HTML4 vs HTML5 simplifies document markup adds new element tags for greater semantic content deprecates tags and attributes that were used primarily for styling appearance vs. semantic content Must use CSS for all appearance styling CSS3 adds styles like drop shadows and rounded borders adds selector options whales.htm whales.js wstyle.css

Deprecated HTML tags For complete list see:

Deprecated HTML attributes Attributes removed from most elements: align background bgcolor border cellpadding cellspacing width For complete list see:

HTML4 vs. HTML5 Whales Whales are mammals. Orca Whale body { background-color: gray } h2 { color:white } whales.css whales.htm Move all styling to CSS

"HTML5" JavaScript API's Geolocation identify browser location Forms can require certain fields filled in; verify , 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 more advanced features Offline Web Apps Applications which 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 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

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

Basic HTML Structure Which are tags? Name the attribute: What is the value of that attribute? lang "en" The doctype declaration is not usually referred to as a tag.

Basic HTML Structure required first line according to HTML 5 HTML web page in English top portion contains and other non-content related items visible "contents" of the web page......

Common HTML Tags in typically shows in browser tab or when minimized character-set external Javascript file external CSS defining colors, fonts, etc. Whale Info

Common text tags in paragraph Heading 1 (Major Heading) SubHeading (subheading of ) sub-SubHeading (subheading of ) sub sub... sub sub sub... smallest sub-heading Unordered list - list items inside will have bullets in front of them Ordered lists - list items inside will be numbered individual item in a list (either ordered or unordered) Mammals Whales Orca Beluga Humpback

Beginning of a paragraph Orca Beluga 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. NOT nested properly! The should be ended with BEFORE the end of the paragraph

Favorite Foods Pizza Cake Cookies Sushi Try It Nesting Check This HTML is not nested properly. Write down the correct HTML. Indent to make the nesting more clear..

Favorite Foods Pizza Cake Cookies Sushi Nesting Solution

Spacing in HTML Block tags start on a new line and do a line break when finished:,,,,,,,,,,, Inline tags will display beside each other:,, To force a newline (i.e. line break): HTML treats multiple spaces as one space. Add extra spaces with: Animal Report by Joey Mammal Report by Suzanne

Images Embed jpg, gif, and png images into web page Image tags require the use of attributes 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 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) Click here to go to Google Click here to go to the local web page called whales.htm Great site to learn about web design local sites do NOT begin with target = "_blank" - opens the web page in a NEW window internet sites usually begin with href - URL to website

Lab2 Create website Create a 2-page web site about another teacher in the room 1. Create new folder/link called lab2 to hold the files Create home page: index.htm Create second page: interests.htm 2. Add proper HTML5 info in 3. In add a 4. In add headings, lists, paragraphs, images, and a link to an external website 5. Link index.htm and interests.htm to each other Note: Workshop site: --> Teacher Workshopshttp://coweb.cc.gatech.edu/ice-gt 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=" 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 row column or row heading cell (table heading) regular cell (table data) 1st row - table headings 2nd, 3rd, & 4th row - table data

Whale Length Weight Blue Whale 100 feet 150 tons Sperm Whale 60 feet 50 tons Killer Whale 30 feet 5 tons with No CSS Styling with CSS Styling

Tables - additional tags Table caption Groups the header content Groups the body content Groups the footer content Defines a group of columns in a table (makes it easier to apply CSS) 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 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 } Whale Length Weight Blue Whale 100 feet 150 tons...

.whaleinfo{background-color:LightSkyBlue; width: 300px}.whale {width:100px}... Tables - colgroup Create groups columns for styling...

Lab 2B Add 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 Later we'll be creating JavaScript that will respond to the button click and read the text input

Form Elements - radio buttons Small Medium Large

Form Elements - drop downs Select your favorite car Volvo Saab Fiat Audi

Form Elements - check box and Submit button bicycle automobile bus Submit sends the input from the form to a web server for processing

Lab 2C Add 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 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: sports, news, ads Cure For Cancer Atlanta Journal + logo group of headers for one topic page number, contact links navigation links pullout

Using diagram from to HTML5 and CSS3)Patrick Carey.ppt

Using HTML5 elements … diagram from to HTML5 and CSS3)Patrick Carey.ppt Note: Not block elements like. Can change to block element behavior with CSS display:block

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

Div Animal Report Mammals Water mammals Whales Beluga whales Feeding habits of belugas 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

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 Inline CSS affects one line of HTML located within an HTML tag Internal CSS aka Embedded CSS affects one web page located in the.... External CSS affects multiple pages of a web site located in an external file and linked to each page with the tag in CSS

CSS - w3schools.com

CSS Inline CSS affects one line of HTML located within an HTML tag no selector since it is inside a tag Teal Not teal CSS - inline

CSS Internal CSS aka Embedded CSS affects one web page located in To change ALL CSS - internal h2{ color:teal; background-color:yellow } Killer Whale Beluga

CSS External CSS affects every web page that include to the CSS file Do NOT specify is in of web page CSS - external /* This is the file whale.css */ h2{ color:teal; background-color:yellow } Killer Whale Beluga

CSS 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 CSS with ids h2{ color:red; } #orca { background-color:LightBlue } Killer Whale Beluga

CSS The HTML attribute class=" " is used to identify multiple HTML elements so JavaScript, CSS, and other HTML can refer to them easily.classname is the CSS selector for a class CSS with classes.whale { color:red; } Killer Whale Another name for a killer whale is an orca

Whale Length Weight Blue Whale 100 feet 150 tons Sperm Whale 60 feet 50 tons Killer Whale 30 feet 5 tons with No CSS Styling with CSS Styling

Whale Length Weight Blue Whale 100 feet 150 tons Sperm Whale 60 feet 50 tons Killer Whale 30 feet 5 tons with CSS Styling table { border: 5px solid red; border-collapse: collapse; } th, td { border: 1px solid black; padding:10px; }

CSS3 - border-radius Whales #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 Blurred Sharp #blurred { background-color:LightSkyBlue; box-shadow: 10px 10px 5px gray; } #sharp { background-color:LightSkyBlue; box-shadow: 10px 10px black; }

Lab 2D Create a CSS file called lab2.css in the labs folder Add the following line in the section of index.htm and interests.htm : Change the styling (See example CSS on next page or to be more creative)

Sample lab2.css /* lab2.css */ body { background-color: gray } h2 { color: red } h3 { text-align:center} img { border: 9px solid blue; width:200px } p { font-style: italic } a:hover {color:blue} /* hover over link color */

What can you do with JavaScript?

Three places to add JavaScript JavaScript statement(s) JavaScript statement(s) internal script - put in section external JavaScript file inline script - put in section

var temp=98.6; // fahrenheit var firstName = "Adam"; var lastName = "Zigler"; temp = (temp - 32) * 5 / 9; var fullname = firstName + " " + lastName; var randomNum = Math.random(); var count=5; count=count+1; Make a statement Use functionality built into JavaScript Do math Store a value in a variable Concatenate strings Add comments Add one to an existing variable

Pop up an alert window alert("Please enter a song");

Try It Simulate a baseball game. Create homeScore with value of 10 Create visitorScore with value of 8. Pop up an alert stating "Game Over" Challenge: Pop up an alert that prints the current scores Hint: "\n" prints a newline

Solution Learn JavaScript homeScore=10; vistorScore=5; alert("Game Over"); // Newline created with \n alert("Home: " + homeScore + "\nVisitors: " + vistorScore);

Do things more than once (while loop) beanCounter = 5; while (beanCounter > 0 ) { alert("Dropped a bean"); beanCounter = beanCounter - 1; }

Do things more than once (for loop) var weight=130; for (scoops = 0; scoops < 10; scoops++) { weight=weight+1; } This loop will execute 10 times ( 1st Iteration: scoops = 0 weight=131 2nd iteration: scoops = 1 weight= th iteration: scoops = 8 weight=139 10th iteration: scoops = 9 weight=140 then scoops=10 so loop exits

Try It Simulate strikeouts with a for loop. Alert popups that say: Strike 1 Strike 2 Strike 3 You're out

Solution for (strike = 3; strike >0; strike--) { alert("Strike " + strike); } alert("You're out!");

Make decisions and get input from popup prompt var name=prompt("Please enter your name","Jane Doe"); if (name!=null && name!="") { alert("Thank you, " + name) } else { alert("Name entered improperly"); } !=not equal ""empty string &&AND (both conditions must be true)

DOM - Document Object Model html head title body h1 ul id="playlist" li id="song1" li id="song2" li id="song3" p. 82 My awesome playlist

JavaScript code samples

Before changing DOM, page must be completely loaded function init() { var nm = document.getElementById("name"); nm.innerHTML = "Jessie"; } window.onload = init; This function changes the value of an existing HTML element Your Name Here

Create a function function show_prompt() { var name=prompt("Please enter your name","Jane Doe"); if (name!=null && name!="") { var greet = document.getElementById("greetings"); greet.innerHTML = "Hello, " + name ; } innerHTML changes the contents of the element with id="greetings" greet refers to element with id="greetings" Function name This function changes the value of an existing HTML element

Try It Prompt the user for their hometown and then display the result on the webpage.

Potential Solution function init() { var tn = document.getElementById("town"); tn.innerHTML = prompt("Enter your town","Atlanta"); } window.onload = init; Your Hometown Here

Respond to a button click function show_prompt() { var name=prompt("Please enter your name","Jane Doe"); if (name!=null && name!="") { var greet = document.getElementById("greetings"); greet.innerHTML = "Hello, " + name; } window.onload = show_prompt; Find id="greetings" and change content to "Hello, Jane Doe"

Looping function countdown() { var newtext = "Countdown" var blast = document.getElementById("blastoff"); for (var i = 10; i > 0; i--) { newtext = newtext + " " + i; } blast.innerHTML = newtext; } window.onload = countdown; // no parentheses

Arrays var tempByHour = new Array(); tempByHour[0] = 59.2; tempByHour[1] = 60.1; tempByHour[2] = 63; tempByHour[3] = 65; tempByHour[4] = 62; var temps = [59.2, 60.1, 63, 65, 62]; index 0

Arrays // Add to existing array tempByHour[5] = 61; // Get the value of one element of the array var message = "The temp at 5 pm was " + tempByHour[5]; // Retrieve the size of the array var numItems = tempByHour.length; p. 67

Creating an object with properties...iterating through the properties function count_animals() { var animal1={species:"cow",type:"mammal", weight:300}; var d = document.getElementById("data"); var newdata = "Animal Properties "; for (x in animal1) { newdata = newdata + " " + animal1[x]; } d.innerHTML = newdata; } window.onload = count_animals; // no parentheses empty is filled with: Animal Properties cow mammal 300

Webville Tunes - Chapter 3 Ask user to enter songs and then add them to a songlist

Webville Tunes - Chapter 3 Webville Tunes /* playlist.js */ window.onload = init; function init() { var button = document.getElementById("addButton"); button.onclick = handleButtonClick; } function handleButtonClick(e) { var textInput = document.getElementById("songTextInput"); var songName = textInput.value; alert("Adding " + songName); if (songName == "") { alert("Please enter a song"); } else { alert("Adding " + songName); var li = document.createElement("li"); li.innerHTML = songName; var ul = document.getElementById("playlist"); ul.appendChild(li); }

Lab 3 Copy the folder lab3 to your computer Assignment: Add a line to the bottom of the web page which displays the total number of songs entered into the play list Hints: 1. Edit lab3-playlist.htm and add an with an id="numSongs" that will eventually hold the number of songs. Give it temporary text that says THIS WILL HOLD NUMBER OF SONGS IN PLAYLIST 2. Test to make sure your displays...continued on next slide...

Lab 3 (cont.) 3. Edit lab3-playlist.js 4. Create a global variable called total_songs and set its initial value to 0 5. Find the part of the code that gets executed when a song is successfully entered. Inside that block of code, immediately after the new gets appended into the, add code which Adds one to the total_songs variable 7. Creates a variable called sTotal to hold the element identified by id="numSongs" 8. Change the innerHTML value of sTotal to "Total songs: " + total_songs.toString() (note: solution can be found in the folder lab3-solution)

Solution - Lab 3 lab3-playlist.html <!-- Create an h2 here with an id called "numSongs" that will hold the number of songs in your playlist --> Total Number of Songs in Playlist will be displayed here

Solution - Lab 3 lab3-playlist.js function handleButtonClick() { var textInput = document.getElementById("songTextInput"); var songName = textInput.value; if (songName == "") { alert("Please enter a song"); } else { alert("Adding " + songName); var li = document.createElement("li"); // create new object li li.innerHTML = songName; // give it text of user entered songName var ul = document.getElementById("playlist"); // create new object attached to id=playlist ul.appendChild(li);// append the li object to end of ul id=playlist // Solution Additions///////////////////////////////////// total_songs=total_songs+1; var sTotal = document.getElementById("numSongs"); sTotal.innerHTML = "Total songs: " + total_songs.toString(); } var total_songs = 0;...

Supplemental Lab 4 Copy the folder called lab4 to your computer Add another input text box and button which creates a list of Musicians. Make it work just like the Song list. Hints: Edit lab4-playlist.htm and copy the form used for songs. Change the data to reflect musicians. Edit lab4-playlist.js and add code to allow users to also enter a list of musicians (note: solution can be found in the folder lab4-solution)

Solution - Lab 4 lab4-playlist-solution.html

Solution - Lab 4 lab4-playlist-solution.js function init() {... var mbutton = document.getElementById("addMusicianButton"); mbutton.onclick = handleMusicianClick; } function handleMusicianClick() { var textInput = document.getElementById("musicianTextInput"); var musician = textInput.value; if (musician == "") { alert("Please enter a musician name"); } else { alert("Adding " + musician); var li = document.createElement("li"); li.innerHTML = musician; var ul = document.getElementById("musicianlist"); ul.appendChild(li); }