1. Structured Content Philosophy

2. Structure 4 Meaning Content meaning is tagged: Tag application is more consistent Special browsers can act smarter Aids in language translation, localization Presentation usually follows meaning

3. Text Meaning Tags abbraddressblockquotecaptioncitecoded ddeldfndivdldtemh1- h6inskbdliolpqsampstrongsubsupulvar

4. Presentation Tags areabblockquote *brdivh1-h6 *hrimapprespanstylesub *sup *tabletbodytdtfootththeadtr

5. HTML 5 Tags articleasideb *datagriddetailsdialogheaderi *figurefootermeternavoutputsection summarytime

6. Tags Worth Using aabbraddressareabbaseblockquotebodybrbuttoncaptioncitecoded ddeldfndivdldtemfieldsetformh1- h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscripto bjectoloptgroupoptionpparampreqsampscriptselectspanstrongs tylesubsuptabletbodytdtextareatfootththeadtitletrulvar

7. The Object Perspective How a programmer might think of HTML

8. Parsing Overview Generic SGML / XML parsed: Parsed TAG data: 1. Tag/Element name 2. attributes 3. Construct New Object( with these attributes ) 4. Attach this new Object to its Parent Object to maintain the relationship between the tags: 5. ≈ 6. p.children[0]= b;

9. A Tag Element Object Cell object. nodeType HTMLElement object. nodeName TD object. attributes[] rowspan=“2” object. innerHTML Cell object. style inherited style

10. X= new TagObject(“p”); X.setAttribute(“align”, “center”); X.innerHTML= “Paragraph of text”; document.appendChild( X ); OOP might be like:

11. Images

12. GIF interlacing, transparent colors, animation 2 - 256 colors ONLY JPG (JPEG) PNG (sometimes pronounced “ping”) Images

13. Binary Data Images are LARGE binary files If HTML can’t contain it: HTML refers to them EXTERNALLY External data means you can place it anywhere in the world separate of your html document

14. IMG tag attributes

15. Background Images

16. Make sure a user can still read the text. Avoid putting text into an image. Do not use a large image file. (Less than 20 KB) More will increase load times. Background must look seamless, not tiled. Don’t link to another site for an image Care in Selecting an Image

17. JPGs can be compressed and yield smaller file sizes in some cases Primarily used when you want to have all 16.7 million colors JPEG 2000 is not widely supported NO transparency! NO animation JPEGs (JPG)

18. 2 - 256 colors Transparency (uses one color) ANIMATION Great for small or low color images (small file) GIF

19. PNG (ping) Portable Network Graphic zero quality loss 8-bit (2-256 color) OR 24-bit (16.7 million) Transparency (8-bit alpha mask) Animation MS IE <7 had trouble with transparency

20. APNG PNG with animation Similar to GIF animation LARGE FILES-- useful only on small things Browsers lack support for it (2008)

21. Reduce image file sizes Reduce number of colors in images Use smallest file type Thumbnails Reuse images and backgrounds Quicker Pages

22. Flash Flash is NOT an image Flash is a plug-in which is widely distributed Flash STARTED as a vector image format animation was supported Flash grew into a means to force macromedia’s multimedia software (Director/Shockwave) onto the web

23. SVG XML based Vector graphics Animation supported Images supported - external images, like HTML does it Text supported CSS used for text & graphic presentation Possible to INTEGRATE inside XHTML