Structured Content Philosophy

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

Text Meaning Tags abbraddressblockquotecaptioncitecoded ddeldfndivdldtemh1- h6inskbdliolpqsampstrongsubsupulvar

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

HTML 5 Tags articleasideb *datagriddetailsdialogheaderi *figurefootermeternavoutputsection summarytime

Tags Worth Using aabbraddressareabbaseblockquotebodybrbuttoncaptioncitecoded ddeldfndivdldtemfieldsetformh1- h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscripto bjectoloptgroupoptionpparampreqsampscriptselectspanstrongs tylesubsuptabletbodytdtextareatfootththeadtitletrulvar

The Object Perspective How a programmer might think of HTML

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;

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

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

Images

GIF interlacing, transparent colors, animation colors ONLY JPG (JPEG) PNG (sometimes pronounced “ping”) Images

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

IMG tag attributes

Background Images

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

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)

colors Transparency (uses one color) ANIMATION Great for small or low color images (small file) GIF

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

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

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

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

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