1 / 16

The anatomy of a WebPage

The anatomy of a WebPage. Structure Content Presentation Semantics. Template Analysis. DOCTYPE. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns ="http://www.w3.org/1999/xhtml"> <head>

alena
Download Presentation

The anatomy of a WebPage

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. The anatomy of a WebPage Structure Content Presentation Semantics

  2. Template Analysis DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p>… Your HTML content here …</p> </body> </html> XML Namespace Content Type & Character Set

  3. Template Analysis • 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. Template Analysis • 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/ • 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 • Great Timeline of Browser: • 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

  5. Template Analysis • 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 • 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. Template Analysis • 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. Template Analysis • xml namespace • <html xmlns="http://www.w3.org/1999/xhtml"> • 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 • The URL is actually a unique identifier – no code is read from the site or interpreted by the browser

  8. Template Analysis • head section <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> • 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. Template Analysis <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. Template Analysis <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://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. Early HTML • 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_things_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. Web Standards • 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, 2nd edition) • In other words write semantic HTML • http://www.456bereastreet.com/archive/200711/posh_plain_old_semantic_html/ • http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/ • 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/ • 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. Some Basic HTML Authoring Guidelines • From CSS: The Missing Manual 2nd edition • Use HTML for structure • Use CSS for presentation • Stop using <font>, <b>, <i>, <table> for layout and body tag attributes like background, bgcolor, text, link, alink, vlink • Stop using leftmargin, topmargin, marginwidth, marginheight attributes • Don’t overuse the <br /> 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. Some More Basic HTML Authoring Guidelines • From CSS: The Missing Manual 2nd edition • Only use one H1 tag per page • Use headings to indicate relative importance of text. Ex. All headers of equal importance should share a <h2> or <h3> tag. Use the next level down for lesser important text. Try not to skip levels. • Use <p> for paragraphs of text • Use <ul> for list of related items • Use <ol> for steps or order of importance

  15. Some More Basic HTML Authoring Guidelines • For glossary of terms use <dl>, <dt>, <dd> • For quotes use either <blockquote> or <q> • Be specific if you can: <cite> for book title, newspaper article, website <address> for contact information • Avoid using tags to simply add presentation • If a tag doesn’t fit the bill look to the <div> and <span> tag • Don’t overuse <div> tag • Develop good coding habits !!!! • http://css-tricks.com/what-beautiful-html-code-looks-like/

  16. Homework 2 • 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!!! • 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!!! • 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.

More Related