HTML 5 Seminar Ga Tech March 31 2012

HTML 5 Seminar Ga Tech March 31, 2012 Barbara Ericson Barbara Fox

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

CSS for styling colors, position, fonts "HTML 5" HTML tags and attributes whales. htm Whales

Whales are mammals.

. . . and it looks like this . . .

HTML 4 vs. HTML 5 . . .

HTML 4 vs. HTML 5 . . .

HTML 4 vs. HTML 5

HTML 4 vs HTML 5 whales. htm • simplifies document markup wstyle. css • Must use CSS for all appearance styling • CSS 3 • adds styles like drop shadows and rounded borders • adds selector options • 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 Java. Script functionality: Video, Canvas, Local Storage, Audio, Forms, Drag & Drop, Geolocation, Sockets, Web Workers, Offline Caching

Deprecated HTML tags For complete list see: http: //www. tutorialspoint. com/html 5_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/html 5_deprecated_tags. htm

Whales Whales HTML 4 vs. HTML 5 Move all styling to CSS Whales

Whales are mammals.

Orca Whale

body { background-color: gray } h 2 { color: white } whales. htm whales. css

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

Lab 1: Convert HTML 4 to HTML 5 l l Copy Lab 1. zip to your computer & unzip it Using code from Power. Point slides: l l l Convert whale. htm to HTML 5 Move color styling to CSS View whale. htm in your browser to verify it renders properly

Introduction to HTML Skip HTML, jump to Lab 1

HTML Tags l l l 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

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

. . . . . ." src="https://present5.com/presentation/0ab2cf26040de76b9aa97215eeb2c70c/image-19.jpg" alt="Basic HTML Structure . . . . . ." /> Basic HTML Structure . . . . . . The doctype declaration is not usually referred to as a tag. Which are tags? Name the attribute: lang What is the value of that attribute? "en"

. . . . . ." src="https://present5.com/presentation/0ab2cf26040de76b9aa97215eeb2c70c/image-20.jpg" alt="Basic HTML Structure . . . . . ." /> Basic HTML Structure . . . . . . required first line according to HTML 5 HTML web page in English top portion contains

Common text tags in

paragraph Heading 1 (Major Heading) Sub. Heading (subheading of ) sub-Sub. Heading (subheading of ) sub. . . sub sub. . . smallest sub-heading

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

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.

Beginning of a paragraph

1. Orca
2. Beluga

be l> should he BEF ith < ended w /p> agraph < par

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
1. Cookies

Sushi

Nesting Solution Favorite Foods

1. Pizza
2. Cake
3. Cookies
4. Sushi

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 l l Embed jpg, gif, and png images into web page Image tags require the use of attributes n src - locatio of image file y t will displa ate text tha any reason alt - altern display for nnot if picture ca src - location of image file o n internet beg ins with http: / / alt - alternate text required for federal ac cessibility law s

  Hyperlink aka anchor aka link l 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) internet sites usually begin with http: // Click here to go to Google href - U RL to w ebsite local sites do NOT begin with http: // Click here to go to the local web page called whales. htm Great site to learn about web design targe t = "_blank" - opens the w eb page in a NEW window

  Lab 2 Create website Create a 2 -page web site about another teacher in the room 1. l l 2. 3. 4. 5. Create new folder/link called lab 2 to hold the files Create home page: index. htm Create second page: interests. htm Add proper HTML 5 info in In add a

  Do things more than once (while loop) bean. Counter = 5; while (bean. Counter > 0 ) { alert("Dropped a bean"); bean. Counter = bean. Counter - 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 ( 1 st Iteration: scoops = 0 2 nd iteration: scoops = 1. . . 9 th iteration: scoops = 8 10 th iteration: scoops = 9 then scoops=10 so loop exits weight=131 weight=132 weight=139 weight=140

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

  Solution

  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 My awesome playlist

  html head title body h 1 ul id="playlist" li id="song 1" li id="song 2" li id="song 3" p. 82

  

  

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

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

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

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

  Potential Solution Your Hometown Here

  Respond to a button click

  

  0; i--) { newtext = newtext + " " + i; } blast. inner. HTML = newtext; } window. onload = countdown; // no parentheses

  Arrays var temp. By. Hour = new Array(); temp. By. Hour[0] = 59. 2; temp. By. Hour[1] = 60. 1; temp. By. Hour[2] = 63; temp. By. Hour[3] = 65; temp. By. Hour[4] = 62; var temps = [59. 2, 60. 1, 63, 65, 62]; index 0

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

  Creating an object with properties. . . iterating through the properties

  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

  " src="https://present5.com/presentation/0ab2cf26040de76b9aa97215eeb2c70c/image-92.jpg" alt="Webville Tunes - Chapter 3 " /> Webville Tunes - Chapter 3

  /* playlist. js */ window. onload = init; function init() { var button = document. get. Element. By. Id("add. Button"); button. onclick = handle. Button. Click; } function handle. Button. Click(e) { var text. Input = document. get. Element. By. Id("song. Text. Input"); var song. Name = text. Input. value; alert("Adding " + song. Name); if (song. Name == "") { alert("Please enter a song"); } else { alert("Adding " + song. Name); var li = document. create. Element("li"); li. inner. HTML = song. Name; var ul = document. get. Element. By. Id("playlist"); ul. append. Child(li); } }

  Lab 3 l l Copy the folder lab 3 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 lab 3 -playlist. htm and add an with an id="num. Songs" 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. 4. 5. 6. 7. 8. Edit lab 3 -playlist. js Create a global variable called total_songs and set its initial value to 0 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 Creates a variable called s. Total to hold the element identified by id="num. Songs" Change the inner. HTML value of s. Total to "Total songs: " + total_songs. to. String() (note: solution can be found in the folder lab 3 -solution)

Solution - Lab 3 lab 3 -playlist. html

Total Number of Songs in Playlist will be displayed here

Solution - Lab 3 lab 3 -playlist. js var total_songs = 0; . . . function handle. Button. Click() { var text. Input = document. get. Element. By. Id("song. Text. Input"); var song. Name = text. Input. value; if (song. Name == "") { alert("Please enter a song"); } else { alert("Adding " + song. Name); var li = document. create. Element("li"); // create new object li li. inner. HTML = song. Name; // give it text of user entered song. Name var ul = document. get. Element. By. Id("playlist"); // create new object attached to id=playlist ul. append. Child(li); // append the li object to end of ul id=playlist // Solution Additions/////////////////// total_songs=total_songs+1; var s. Total = document. get. Element. By. Id("num. Songs"); s. Total. inner. HTML = "Total songs: " + total_songs. to. String(); }

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

Solution - Lab 4 lab 4 -playlist-solution. html

Solution - Lab 4 lab 4 -playlist-solution. js function init() {. . . var mbutton = document. get. Element. By. Id("add. Musician. Button"); mbutton. onclick = handle. Musician. Click; } function handle. Musician. Click() { var text. Input = document. get. Element. By. Id("musician. Text. Input"); var musician = text. Input. value; if (musician == "") { alert("Please enter a musician name"); } else { alert("Adding " + musician); var li = document. create. Element("li"); li. inner. HTML = musician; var ul = document. get. Element. By. Id("musicianlist"); ul. append. Child(li); } }