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

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

3. HTML 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

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

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

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

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

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

9. 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

10. Deprecated HTML tags For complete list see: http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm

11. 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

12. 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 more advanced features Offline Web Apps Applications which will work even when not connected to the web

13. Introduction to HTML Skip HTML, jump to Lab1

14. 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

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

16. 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.

17. 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......

18. 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

19. 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

20. 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

21. 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

22. 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 http:// alt - alternate text required for federal accessibility laws

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

24. 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

25. Tables table row column or row heading cell (table heading) regular cell (table data) 1st row - table headings 2nd, 3rd, & 4th row - table data

26. 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

27. 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

28. Tables - HTML5 attributes No width, cellspacing, cellpadding, etc. Only supported attribute is: border="" No border border=1 border on

29. Tables - advanced 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...

30. Tables - colgroup Create groups columns for styling Attribute span specifies how many columns to include in the group (default is one) 1st Group - Column 1 2nd Group - Columns 2 & 3

31. Form Elements Later we'll be creating JavaScript that will respond to the button click and read the text input

32. Form Elements Later we'll be creating JavaScript that will respond to the button click and read the text input

33. 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

34. Div div id="info" div id="photos"

35. Div Animal Report Mammals Water mammals Whales Beluga whales Feeding habits of belugas Two divisions are created

36. 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

37. 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,, and 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.

38. Lab 1 Create a new folder that begins with your lastname: lastname_animal Download two small animal pictures into this folder and rename them to short names like cat.jpg Inside this folder create an HTML file called animal-noCSS.htm Make sure to include,, and Create a web page using many of the HTML tags (leave table and div for last) Note: This page will be boring black text and the pictures will be sized poorly. That's ok! Lab 2 will dress it up.

39. Introduction to CSS Skip CSS, jump to Lab 2

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

41. 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

42. CSS - w3schools.com

43. 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

44. 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

45. 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

46. 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

47. 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

48. 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; }

49. 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 }

50. CSS3 - drop shadows Blurred Sharp #blurred { background-color:LightSkyBlue; box-shadow: 10px 10px 5px gray; } #sharp { background-color:LightSkyBlue; box-shadow: 10px 10px black; }

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

52. Sample animal.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 */

53. Lab 2 In the lastname_Lab1 folder, create a CSS file called style.css Add the following line in the section of index.htm and interests.htm : Change the styling See next slide and http://w3schools.com for examples of CSS properties.http://w3schools.com

54. Sample animal.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 */

55. What can you do with JavaScript?

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

57. 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

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

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

60. 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=132... 9th iteration: scoops = 8 weight=139 10th iteration: scoops = 9 weight=140 then scoops=10 so loop exits

61. Make decisions 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)

62. 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

65. JavaScript code samples http://www.blogohblog.com/wp-content/pop/2008/07/funnyjavascript.gif

66. 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

67. 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 ; } Find id="greetings" and change content to "Hello, Jane Doe"

68. Results on the screen

69. 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

70. 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

71. 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

72. 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

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

74. 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); }

75. Lab 3 Copy the folder called lab3 to your computer Add a line to the bottom of the web page which displays the total number of songs entered into the play list Hints: 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 1. Test to make sure your displays...continued on next slide...

76. Lab 3 (cont.) 3. Edit lab3-playlist.js 4. Create a global varible 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... 6. 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: solutions can be found in lab3-playlist-solution.js and lab3-playlist-solution.htm)

77. 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. 1. Edit lab4-playlist.js and add code to allow users to also enter a list of musicians (note: solutions can be found in lab4-playlist-solution.js and lab4-playlist-solution.htm)