1 / 12

Mastering HTML Basics: Web Design Essentials

Learn about web design elements, special fields, and design objects in HTML. Explore simple HTML page structure, tags, and formatting tips for better design. Discover how to enhance your HTML skills and avoid common mistakes. Join Mike Hanson at the OES Web Workgroup Conference in Chicago on 10/27/2010 for a fun and informative session.

eagan-becker
Télécharger la présentation

Mastering HTML Basics: Web Design Essentials

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Hard to Reach HTML Mike Hanson AO, OES Web Workgroup Conference Chicago 10/27/2010

  2. 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

  3. What we’ll cover • Web design elements (& where they appear) • Special fields • Design objects • Other stuff!

  4. Simple HTML Page <html> <head> Header stuff. Meta tags, CSS, JS </head> <body> Content </body> </html>

  5. Web design elements $$HTMLFRONTMATTER (field) <head> HTML Head Content (design object) JS Header (design object) </head> <body> HTML Body Content (design object) Content </body>

  6. 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!

  7. 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\" />

  8. 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

  9. Cure for empty Meta tags? Add fields or computed text!

  10. JS Header Not HTML. Important to know its content will end up in the <head> section.

  11. 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.

  12. And I’m spent. Questions? Mike Hanson AO,OES Hanson.michael@epa.gov (202) 564-1320

More Related