Post on 14-Jan-2016
transcript
HTMLpart 2
HTML File Formats
HTML 3.2
HTML 5.0
HTML 4.0.1 TransitionalHTML 4.0.1 FramesetHTML 4.0.1 Strict
XHTML 1.0 TransitionalXHTML 1.0 FramesetXHTML 1.0 Strict
XHTML 1.1
XHTML 2.0
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
XHTML v1.0-1.1-2.0•2000
•XML based HTML (instead of SGML)
•All tags MUST have END TAGS <br />
•XML dtd, schema, relax-ng file format definition files can be used to validate it
•Far more details specified so browsers act more similar
XML•eXendable Markup Language
•Concept was 1st, formal language came much later
•Make your own HTML-like language!
•Validate files for errors generically (XML)
•Also Validate against standard definition files
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
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
Goofy File Header
•<!DOCTYPE> 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
•XHTML 1.0 Transitional:
•<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
•<html>…rest of page…</html>
•BEST version of HTML to use right now
•XHTML works better but strict isn’t fun
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 *figurefootermeternavoutputsectiontime
Tags Worth Usingaabbraddressareabbaseblockquotebodybrbuttoncaptioncitecodedddeldfndivdldtemfieldsetformh1-h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscriptobjectoloptgroupoptionpparampreqsampscriptselectspanstrongstylesubsuptabletbodytdtextareatfootththeadtitletrulvar
The Object Perspective
•var X= new TagObject(“p”);
•X.setAttribute(“align”, “center”);
•X.innerHTML= “Paragraph of text”;
•document.appendChild( X );
OOP might be like:
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
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;
Images
•<img src = “filename” width=”9” height=”#”/>
•GIF
• interlacing, transparent colors, animation
•2 - 256 colors ONLY
• JPG (JPEG)
•PNG (sometimes pronounced “ping”)
Images
•<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
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…