1. HTML part 2

2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.0 Strict XHTML 1.1 XHTML 2.0

3. HTML 3.2 - 4.01 Based loosely around SGML; v4 more so Both beyond browser tech Less specific standards 1997: 4.0 minor complaints turned into 4.01 around 1999 4.01 transitional is most common HTML 4.01 strict is not forgiving (for HTML, its more lax than XHTML) 4.01 frame is for doing frameset pages only- subset for speed etc. NOT VALID XML

4. XHTML v1.0-1.1-2.0 2000 XML based HTML (instead of SGML) All tags MUST have END TAGS XML dtd, schema, relax-ng file format definition files can be used to validate it Far more details specified so browsers act more similar

5. XML eXendable Markup Language Concept was 1 st, formal language came much later Make your own HTML-like language! Validate files for errors generically (XML) Also Validate against standard definition files

6. XML Formats MathML - math notation SVG - vector graphics SMIL - generic animation (meant to be merged into other XML formats) XFORM - business forms (too complex) ODF - Office Software XSLT - Convert xml documents into other formats SOAP - XML RPC Schema - doc type def Relax-NG - doc type def PLIST - property list

7. HTML5 TWO technical flavors: XGML based and XML based (depends on file header) Despite being XGML and XML it is supposed to be basically the same Changes / fixes from the 10 years of HTML 4 use and failure of XHTML to take over Many useful content tags

8. Goofy File Header is actually from SGML (old) all HTML should have DOCTYPE at the TOP XHTML is XML based (not SGML) so no DOCTYPES needed! You don’t need to “get it” - copy paste depending on the HTML standard you use Validators depend heavily on it

9. XHTML 1.0 Transitional: http://www.w3.org/TR/xhtml1/DTD/xhtml 1-transitional.dtd …rest of page… BEST version of HTML to use right now XHTML works better but strict isn’t fun

10. Structured Content Philosophy

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

12. Text Meaning Tags abbraddressblockquotecaptioncitecoded ddeldfndivdldtemh1- h6inskbdliolpqsampstrongsubsupulvar

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

14. HTML 5 Tags articleasideb *datagriddetailsdialogheaderi *figurefootermeternavoutputsectiontime

15. Tags Worth Using aabbraddressareabbaseblockquotebodybrbuttoncaptioncitecodedd deldfndivdldtemfieldsetformh1- h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscriptobje ctoloptgroupoptionpparampreqsampscriptselectspanstrongstylesub suptabletbodytdtextareatfootththeadtitletrulvar

16. The Object Perspective

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

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

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

20. Images

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

22. IMG tag attributes

23. Background Images

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

25. 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)

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

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

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

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

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

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

32. Find Examples Any webpage you can SAVE and view the code Desktop browsers have a View Source feature view menu right click context menu VALIDATE! it might work only for you…