HTML part 2

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

HTML Based loosely around SGML; v4 more so Both beyond browser tech Less specific standards 1997: 4.0 minor complaints turned into 4.01 around 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 v 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

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

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 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: 1-transitional.dtd …rest of page… 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: 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 *figurefootermeternavoutputsectiontime

Tags Worth Using aabbraddressareabbaseblockquotebodybrbuttoncaptioncitecodedd deldfndivdldtemfieldsetformh1- h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscriptobje ctoloptgroupoptionpparampreqsampscriptselectspanstrongstylesub suptabletbodytdtextareatfootththeadtitletrulvar

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 Cell object. nodeType HTMLElement object. nodeName TD object. attributes[] rowspan=“2” object. innerHTML Cell object. style inherited style

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;

Images

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

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

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…