Download presentation
Presentation is loading. Please wait.
1
Structure Content Presentation Semantics
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> An XHTML 1.0 Strict standard template <meta http-equiv="content-type" content="text/html;charset=utf-8" /> … Your HTML content here … http://www.blooberry.com/indexdot/html/tagpages/d/doctype.htm DOCTYPE XML Namespace Content Type & Character Set
3
DOCTYPE Provides info for browsers and validators An attempt to deal with code written according to standards versus legacy code from 1990’s Browsers can operate in three modes ( render the page differently): Standards Mode Quirks Mode Almost Standards Mode Excellent article http://hsivonen.iki.fi/doctype/http://hsivonen.iki.fi/doctype/ http://www.upsdell.com/BrowserNews/res_doctype.htm http://www.upsdell.com/BrowserNews/res_doctype.htm Some browsers will switch to Quirks mode if DOCTYPE not present Great Timeline of Browser: http://meyerweb.com/eric/browsers/timeline-structured.html http://meyerweb.com/eric/browsers/timeline-structured.html Not valid HTML if you leave DOCTYPE out Different DOCTYPES for each version of HTML and XHTML http://www.w3.org/QA/2002/04/valid-dtd-list.html http://www.w3.org/QA/2002/04/valid-dtd-list.html
4
Common Doctypes declarations: Strict This is what you should be using. Doesn’t allow HTML tags being used for presentational purposes – Ex. center, font, iframe, strike, u, align bgcolor, noshade, nowrap, text, link, vlink, vspace http://24ways.org/2005/transitional-vs-strict-markup http://24ways.org/2005/transitional-vs-strict-markup Transitional Good for legacy code Helpful for people moving from older HTML to web standards Frameset Not recommended Firefox tells you the mode in upper right corner: checkmark for standards and an x for quirks mode.
5
Things to remember about DOCTYPEs Copy your DOCTYPE from a standardized template because typos or spacing errors could invalidate the DOCTYPE If a browser reads an HTML file without a DOCTYPE it may think this is a very old html file and the browser may use its old rules (Quirks mode) to try to display it. You may waste time fixing the HTML in a document because of a faulty DOCTYPE Use the DOCTYPE to help you validate your page – find typos, syntax errors and deprecated tags For this class use XHTML 1.0 Strict!!!!! As HTML% becomes more popular, all this DOCTYPE stuff looks like it will go away.
6
xml namespace An attribute of the html tag It is an XML thing. Namespaces help clarify confusion around tags with the same name. The URL is actually a unique identifier – no code is read from the site or interpreted by the browser
7
head section An XHTML 1.0 Strict standard template <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Head section does not display on rendered document. Why?? Head section at a minimum consists of a title and a meta tag containing content type and charset
8
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> content=“text/html” - MIME (Multipurpose Internet Mail Extensions) is a standard that describes content being sent. http://www.w3schools.com/media/media_mimeref.asp Content can be text, images, audio or application specific The server can send a message in the HTTP header stating the content type Or the document (in web design) can have a attribute in the meta tag stating the type The server overrules the document Remember XHTML 1.1 expected a document of type application/xhtml+xml - never really worked Browser has different “engines” and rules and needs to know how to interpret the bits and bytes Firebug – Net panel shows headers with content types
9
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> What is this charset stuff?? http://articles.sitepoint.com/article/guide-web- character-encoding/2 http://articles.sitepoint.com/article/guide-web- character-encoding/2 http://www.joelonsoftware.com/articles/Unicode. html http://www.joelonsoftware.com/articles/Unicode. html ASCII – Unicode – UTF8 – More acronym soup For most html documents you create use utf-8 Very good article
10
Sometimes you may see the following before the DOCTYPE: This is called an xml declaration The W3C stated it is optional. This declaration causes IE6 to jump into quirks mode Most web designers seem to have dropped this declaration. http://learningtheworld.eu/2008/farewell-xml-declaration/ http://learningtheworld.eu/2008/farewell-xml-declaration/
11
When HTML was only used by scientists the emphasis was on the structure of a page – no need for the page to look “pretty” Headers(h1), sub-headers(h3), paragraphs(p), lists(ol). However, users and browser manufacturers allowed users to apply certain HTML tags for presentational (look pretty) purposes. HTML House of Horror: http://www.goer.org/Journal/2003/10/html_house_of_horror_t hings_that_go_blink_in_the_n.html#26 http://www.goer.org/Journal/2003/10/html_house_of_horror_t hings_that_go_blink_in_the_n.html#26 Header tags to make something bold and big even if it wasn’t a header. Blockquote (blockquote) tags to make some text indented even though it wasn’t a quote. Font (font) tags to change the size and color of text. Table (table) tags to make the layout of a page!
12
Use HTML for structure Try to use a tag that comes close to the role the content plays on the page ( CSS: The Missing Manual, 2 nd edition) In other words write semantic HTML http://www.456bereastreet.com/archive/200711/posh_plain_old_sem antic_html/ http://www.456bereastreet.com/archive/200711/posh_plain_old_sem antic_html/ http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/ http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/ http://www.webdesignfromscratch.com/html-css/semantic-html/ http://www.webdesignfromscratch.com/html-css/semantic-html/ HTML 4.01/XHTML 1.0 list of allowed tags for Strict, Transitional and Frameset http://www.w3schools.com/tags/ http://www.w3schools.com/tags/ Note the deprecated tags – won’t pass validator in Strict mode Use CSS (Cascading Style Sheets) for presentation Apply CSS to the HTML tag
13
From CSS: The Missing Manual 2 nd edition 1. Use HTML for structure 2. Use CSS for presentation 3. Stop using,,, for layout and body tag attributes like background, bgcolor, text, link, alink, vlink 4. Stop using leftmargin, topmargin, marginwidth, marginheight attributes 5. Don’t overuse the tag Rule of thumb: Stop using attributes assigned to tags to control color, borders, backgrounds, and alignments. List of deprecated tags and attributes: http://www.codehelp.co.uk/html/deprecated.html
14
From CSS: The Missing Manual 2 nd edition 1. Only use one H1 tag per page 2. Use headings to indicate relative importance of text. Ex. All headers of equal importance should share a or tag. Use the next level down for lesser important text. Try not to skip levels. 3. Use for paragraphs of text 4. Use for list of related items 5. Use for steps or order of importance
15
6. For glossary of terms use,, 7. For quotes use either or 8. Be specific if you can: for book title, newspaper article, website for contact information 9. Avoid using tags to simply add presentation 10. If a tag doesn’t fit the bill look to the and tag 11. Don’t overuse tag 12. Develop good coding habits !!!! http://css-tricks.com/what-beautiful-html-code-looks- like/ http://css-tricks.com/what-beautiful-html-code-looks- like/
Similar presentations
