1. © Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com

2. © Anselm SpoerriInfo + Web Tech Course Lecture 4 – Overview Basic HTML –Transition to HTML5 and Key Rules –Doctype, encoding (XHTML, HTML5) –Tables, Links, Images (XHTML, HTML5) Demo of Exercise 2 –Transition from XTHML to HTML5 Web Services Google Analytics Demo Lectures – Week 4 Content http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week4 http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week4

3. © Anselm SpoerriInfo + Web Tech Course HTML – Big Picture Page Design  Progressive Enhancement –Create HTML structure  Add CSS  Add JavaScript Transition to HTML5  Markup with Meaning –HTML 4, XHTML : use tags to structure the content –HTML5 : use tags to structure and describe meaning of content –New semantic elements:,,,,,,, –Redefines existing tags or eliminates others –More forgiving than XHTML: /> optional and and are back –Still true and necessary –HTML elements must be properly nested –HTML elements should have closing tag

4. © Anselm SpoerriInfo + Web Tech Course HTML – Examples HTML elements must be properly nested Content  Content HTML elements must close Content  Content and acceptable HTML elements best be lowercase 

5. © Anselm SpoerriInfo + Web Tech Course HTML – Examples Semantic Meaning emphasis Content important Content Visual Appearance Content

6. © Anselm SpoerriInfo + Web Tech Course HTML – Page Layout Two methods for creating Web Page Layout ‒ Tables (this lecture) ‒ HTML5, DIVs and CSS (next lecture) Table ‒ table ‒ row ‒ header ‒ cell ‒

7. © Anselm SpoerriInfo + Web Tech Course Table Example 1.11.21.3 2.12.22.3 3.13.23.3

8. © Anselm SpoerriInfo + Web Tech Course Basic XHTML – Essential Elements to Include – – My Page –Headers: –Paragraphs: –Tables: –Lists:, (can be nested) –Adding visual emphasis to text :, Font specification: Text

9. © Anselm SpoerriInfo + Web Tech Course Basic HTML5 – Essential Elements to Include – – My Page – –Headers: –Paragraphs: –Tables: –Lists:, (can be nested) –Adding semantic emphasis to text :,., Font specification: use CSS

10. © Anselm SpoerriInfo + Web Tech Course Hyperlinks hyperlink tag Use Attributes and Values Text of Hyperlink Create Anchor: Link to Anchor:

11. © Anselm SpoerriInfo + Web Tech Course Images image tag Use Attributes and Values (src and alt are required to be valid HTML) <img src="pathname" alt="my image" [text to appear if image does not show] height="100" width="100" [improves time to load page] align="left" [image floats on left, text flows on right … deprecated in HTML5 for CSS] hspace="5" [deprecated in HTML5 for CSS] vspace="5" [deprecated in HTML5 for CSS] /> [XHTML requires />] Floating image needs to be placed right before text that needs to flow or wrap around it.

12. © Anselm SpoerriInfo + Web Tech Course Exercise 2 Exercise 2: HTML – Create Information Resource ‒ Create at least 3 web pages. ‒ Use a table to structure the page so that it has: ‒ 3 columns: 50 | 500 | 100 pixels wide ‒ 4 rows: 50 | 50 | 500 | 50 pixels high ‒ Each page has one h1 tag and at least one h2 tag Sans-serif font is used at least one word is bolded and italized ‒ Simple navigation structure using relative hyperlinks. ‒ Include at least one absolute hyperlink per page. ‒ Edit images found on flickr.com using free online tool. Embed at least one image per page and text flows around it

13. © Anselm SpoerriInfo + Web Tech Course Exercise 2 Demo – Step 1 Create folder = “ex2” inside your “550” folder Open New File with Notepad++ / TextWrangler –Save as type – All files (otherwise saves it as.txt by default) –File name - ex2_page1.html –Add doctype, encoding and title and essential elements (make sure to have closing tags) Upload File to Eden, Set Permissions, Test in Browser

14. © Anselm SpoerriInfo + Web Tech Course Exercise 2 Demo – Step 2 Create Table –One row with three cells and height = 50 and widths as indicated in Ex2 –Add following text “1.1”, “1.2”, “1.3” to respective cells Add Font specification so that text in table is shown Arial and dark blue Save Page Upload File to Eden and Test in Browser

15. © Anselm SpoerriInfo + Web Tech Course Exercise 2 Demo – Step 3 Copy 1 st Row code Create 2 nd Row by pasting copied code and customize –Height = 50 and widths as indicated in Ex2 –Add following text “2.1”, “2.2”, “2.3” to respective cells Create 3 rd Row by pasting copied code and customize –Height = 500 and widths as indicated in Ex2 –Add following text “3.1”, “3.2”, “3.3” to respective cells Create 4 th Row by pasting copied code and customize –Height = 50 and widths as indicated in Ex2 –Add following text “4.1”, “4.2”, “4.3” to respective cells Save Page Upload File to Eden and Test in Browser

16. © Anselm SpoerriInfo + Web Tech Course Exercise 2 Demo – Step 4 Enter Following Content into 3 rd Row and 2 nd Column: Heading 1 tag “Heading1” Paragraph tag “Intro paragraph” Heading 2 tag “Heading2” Paragraph “Follow-up paragraph” Save Page Upload File to Eden and Test in Browser Make sure content in 3 rd row is top aligned

17. © Anselm SpoerriInfo + Web Tech Course Exercise 2 Demo – Step 5 Find Image and Save to Hard Disk Insert Image before “follow-up” paragraph Specify Height, Width, Alternate Text, Left Alignment Save Page Upload File to Eden and Test in Browser Make sure there is visual gap between image and text

18. © Anselm SpoerriInfo + Web Tech Course Exercise 2 Demo – Step 6 Enter Following Content into 1 st Row and 2 nd Column: “Page1 | Page2” Attach relative hyperlink to “Page1” so that it links to page “ex2_page1.html” Attach relative hyperlink to “Page2” so that it links to page “ex2_page2.html” Save Page Upload File to Eden and Test in Browser Create “ex2_page2.html” page using Save As Customize page Upload File to Eden, Set Permissions and Test in Browser

19. © Anselm SpoerriInfo + Web Tech Course Exercise 2 Demo – Step 7 Create “you are here” indicator in Navigation Structure Select “PageN” on “ex2_pageN” and remove hyperlink Select “PageN” and make it bold Select “PageN” and set font color to red ["#FF0000"] Save Page Upload File to Eden and Test in Browser You will need to Validate Your Pages using http://validator.w3.org/http://validator.w3.org/ [instructor will let you know which errors you can ignore]

20. © Anselm SpoerriInfo + Web Tech Course Exercise 2 – Transition from XTHML to HTML5 What Changes ‒ DOCTYPE and encoding ‒ Font specification ‒ Width and Height of Table Cell specification ‒ Font color of “you are here” indicator specification  Need to use CSS ‒ body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000099;} ‒ td { width: 50px; height: 50px;} ‒.wide1 {width: 500px;} ‒.wide2 { width: 100px;} ‒.high1 { height: 500px;} ‒.here { color: #FF0000;}

21. © Anselm SpoerriInfo + Web Tech Course Web Services Google Analytics Demo ‒ Log into Your Google Account ‒ Add Analytics to your set of tools ‒ In Accounts bar, click on “Add New Account” or Use “Select an account” pull down menu in top right corner ‒ Analytics: New Account Signup dialog : Specify URL ‒ Track: Single Domain ‒ Copy Embed code (consult “common question” links) ‒ Paste at bottom of web page before

22. © Anselm SpoerriInfo + Web Tech Course Example of Google Analytics Tracking Code var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); try { var pageTracker = _gat._getTracker("UA-16139265-1"); pageTracker._trackPageview(); } catch(err) {}