Structured Content Philosophy

Structured Content Philosophy

Structure 4 Meaning

•Content meaning is tagged: <h1> <del>

•Tag application is more consistent

•Special browsers can act smarter

•Aids in language translation, localization

•Presentation usually follows meaning

Text Meaning Tagsabbraddressblockquotecaptioncitecodedddeldfndivdldtemh1-h6inskbdliolpqsampstrongsubsupulvar

Presentation Tagsareabblockquote *brdivh1-h6 *hrimapprespanstylesub *sup *tabletbodytdtfootththeadtr

HTML 5 Tagsarticleasideb *datagriddetailsdialogheaderi *figurefootermeternavoutputsectionsummarytime

Tags Worth Usingaabbraddressareabbaseblockquotebodybrbuttoncaptioncitecodedddeldfndivdldtemfieldsetformh1-h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscriptobjectoloptgroupoptionpparampreqsampscriptselectspanstrongstylesubsuptabletbodytdtextareatfootththeadtitletrulvar

The Object Perspective

How a programmer might think of HTML

Parsing Overview• Generic SGML / XML parsed: <findsTags>

• 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

<td rowspan=“2”>Cell</td>object.nodeType HTMLElement

object.nodeName

TD

object.attributes[]

rowspan=“2”

object.innerHTML

Cell

object.styleinherited <td>

style

•X= new TagObject(“p”);

•X.setAttribute(“align”, “center”);

•X.innerHTML= “Paragraph of text”;

•document.appendChild( X );

OOP might be like:

Images

•<img src = “filename” width=”9” height=”#”/>

•GIF

• interlacing, transparent colors, animation

•2 - 256 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 src=“picture.gif" align=“middle" vspace="value" hspace="value" />

•<img src=“http://ibm.com/picture.gif" height="value" width="value" />

IMG tag attributes

•<body background="image.gif">

•<body bgcolor="color" background="image.gif" >

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)

• 2 - 256 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

Documents

Structured Content Philosophy