120 likes | 201 Vues
Hard to Reach HTML. Mike Hanson AO, OES Web Workgroup Conference Chicago 10/27/2010. Fun Facts: a little history. HTML – product of Tim Berners-Lee. First specification was presented 1991, 20 tags. Based on SGML, an internal CERN document format specification. You can look it up!
E N D
Hard to Reach HTML Mike Hanson AO, OES Web Workgroup Conference Chicago 10/27/2010
Fun Facts: a little history HTML – product of Tim Berners-Lee. First specification was presented 1991, 20 tags. Based on SGML, an internal CERN document format specification. You can look it up! http://en.wikipedia.org/wiki/HTML#History
What we’ll cover • Web design elements (& where they appear) • Special fields • Design objects • Other stuff!
Simple HTML Page <html> <head> Header stuff. Meta tags, CSS, JS </head> <body> Content </body> </html>
Web design elements $$HTMLFRONTMATTER (field) <head> HTML Head Content (design object) JS Header (design object) </head> <body> HTML Body Content (design object) Content </body>
Special fields • $$HTMLFRONTMATTER (before head)"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">“ • $$HTMLTagElements (inside <html> tag <html "lang=en\" id=\"epa-m\“> This is not a complete list of special fields, only the ones that mystified me!
Design object • HTML Head Contentholds all your tags & references <!– Meta tags --> <meta name=\"DC.date.created\" content=\"\" /> <meta name=\"DC.date.reviewed\" content=\"\" /> <meta name=\"DC.creator\" content=\"\" /> <link rel=\"schema.DC\" href=\"http://purl.org/dc/elements/1.1/\" /> <link rel=\"meta\" href=\"http://www.epa.gov/labels.rdf\" type=\"application/rdf+xml\" title=\"ICRA labels\" /> <meta http-equiv=\"Content-Style-Type\" content=\"text/css\" /> <!-- CSS files --> <link href=\"http://www.epa.gov/hpfiles/css/common.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen,projection\" />
Design object HTML Body Attributes Info added here appears inside <body> tag <body text="#000000" bgcolor="#FFFFFF" id=page_news style="background-color:#4A5B63" style="text-align: center;" > * text & bgcolor are always defaults
Cure for empty Meta tags? Add fields or computed text!
JS Header Not HTML. Important to know its content will end up in the <head> section.
Other stuff! • Embedded HTML Views • Avoid the 30-row server default • Vastly improved formatting http://www.epa.gov/multimedia/ • HTML booboos • Duplicate <head> or <body> tagsDomino generates <head> and <body> tags. If you code them elsewhere you will generally be creating duplicates.
And I’m spent. Questions? Mike Hanson AO,OES Hanson.michael@epa.gov (202) 564-1320