View
22
Download
0
Category
Preview:
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
Structured Content Philosophy
Structure 4 Meaning
•Content meaning is tagged: <strong> <em> <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.<p><b></b></p> ≈
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
Recommended