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 … DOCTYPE XML Namespace Content Type & Character Set
3
Overview Page consists of: DOCTYPE xml namespace head section title tags meta tag content type character set body section All enclosed in html tags Lets discuss purpose of each section
4
DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 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/ Some browsers will switch to Quirks mode if DOCTYPE not present Examples of Quirks vs Standards (bottom of page) http://www.quirksmode.org/css/quirksmode.html http://www.quirksmode.org/css/quirksmode.html 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
5
DOCTYPES exists for different versions of HTML and XHTML but wait they also have different levels. 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 Look at Dreamweaver settings for new files. Firefox tells you the mode in upper right corner: checkmark for standards and an x for quirks mode.
6
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!!!!!
7
xml namespace An attribute of the html tag It is an XML thing. Namespaces help clarify confusion around tags with the same name. “any tag within this document which doesn't have a namespace explicitly specified exists within the http://www.w3.org/1999/xhtml namespace - and therefore can be interpreted as XHTML. http://archivist.incutio.com/viewlist/css-discuss/32705 http://www.w3.org/1999/xhtml The URL is actually a unique identifier – no code is read from the site or interpreted by the browser
8
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
9
<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
10
<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
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/
16
Create a XHTML 1.0 Strict webpage using all of the tags from the HTML Beginner Section of HTML Dog website. http://htmldog.com/ As always run it through and post validator results. BTW, don’t copy the one on the site! NO CSS!!!http://htmldog.com/ Create a XHTML 1.0 Strict webpage using all of the tags from the HTML Intermediate Section (Excluding JavaScript) of HTML Dog website. http://htmldog.com/ As always run it through and post validator results. NO CSS!!! http://htmldog.com/ Create a HTML 4.01 Transitional website using the table tag for layout purposes. Your site should have at a minimum a header, two columns, and a footer. Content is not the emphasis of the assignment - You can use basic, simple, made-up content. BTW – don’t just copy the Knuckles site. NO CSS!!! Evaluation: Validation, Use of semantic html, correct usage of tags, correct syntax, indentation/formatting of code, correct DOCTYPES, ability to create a table layout and its formatting and appearance.
Similar presentations
