+ All Categories
Home > Documents > HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML...

HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML...

Date post: 14-Jan-2016
Category:
Upload: bruce-manning
View: 261 times
Download: 4 times
Share this document with a friend
32
HTML part 2
Transcript
Page 1: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

HTMLpart 2

Page 2: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 3: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 4: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 5: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 6: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 7: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 8: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 9: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

•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

Page 10: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

Structured Content Philosophy

Page 11: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 12: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

Text Meaning Tagsabbraddressblockquotecaptioncitecodedddeldfndivdldtemh1-h6inskbdliolpqsampstrongsubsupulvar

Page 13: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 14: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

HTML 5 Tagsarticleasideb *datagriddetailsdialogheaderi *figurefootermeternavoutputsectiontime

Page 15: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

Tags Worth Usingaabbraddressareabbaseblockquotebodybrbuttoncaptioncitecodedddeldfndivdldtemfieldsetformh1-h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscriptobjectoloptgroupoptionpparampreqsampscriptselectspanstrongstylesubsuptabletbodytdtextareatfootththeadtitletrulvar

Page 16: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

The Object Perspective

Page 17: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

•var X= new TagObject(“p”);

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

•X.innerHTML= “Paragraph of text”;

•document.appendChild( X );

OOP might be like:

Page 18: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 19: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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;

Page 20: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

Images

Page 21: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

•GIF

• interlacing, transparent colors, animation

•2 - 256 colors ONLY

• JPG (JPEG)

•PNG (sometimes pronounced “ping”)

Images

Page 22: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

•<img src=“picture.gif" align=“middle" vspace="value" hspace="value" />

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

IMG tag attributes

Page 23: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

•<body background="image.gif">

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

Background Images

Page 24: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

•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

Page 25: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

•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)

Page 26: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

• 2 - 256 colors

• Transparency (uses one color)

• ANIMATION

• Great for small or low color images (small file)

GIF

Page 27: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 28: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

APNG

•PNG with animation

•Similar to GIF animation

•LARGE FILES-- useful only on small things

•Browsers lack support for it (2008)

Page 29: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

•Reduce image file sizes

•Reduce number of colors in images

•Use smallest file type

•Thumbnails

•Reuse images and backgrounds

Quicker Pages

Page 30: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 31: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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

Page 32: HTML part 2. HTML File Formats HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset.

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…


Recommended