1 / 21

INFSCI 1052 XHTML: Giving Structure to Content and the U se of Forms

INFSCI 1052 XHTML: Giving Structure to Content and the U se of Forms. All About Forms. Forms Good tutorial http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml http://www.w3schools.com/html/html_forms.asp http://dev.fyicenter.com/faq/xhtml/form-Tag-Element.html

deepak
Download Presentation

INFSCI 1052 XHTML: Giving Structure to Content and the U se of Forms

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. INFSCI 1052 XHTML: Giving Structure to Content and the Use of Forms

  2. All About Forms • Forms • Good tutorial • http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml • http://www.w3schools.com/html/html_forms.asp • http://dev.fyicenter.com/faq/xhtml/form-Tag-Element.html • http://www.htmlcodetutorial.com/forms/index_famsupp_1.html • Read through one of the tutorials. Review the different types of inputs, the action attribute, the method attribute and the overall process of how forms work. • Keep in mind – use a table to help style many form inputs.

  3. How Browsers Read Content • Servers determine how browser reads the file ( as text, xml) • The server sends the page to the client • The server appends http headers before it sends the content • The http headers (usually-may omit) contain information including Content-Type • Next slide for http response header from obtaining the document at www.sis.pitt.edu/~perkoski • As you can see the http header is setting the Content-Type • The server administrator can set what Content-Type will be served based on the filename extension of the document. • With PHP code you can set the Content-Type setting in the header yourself. • If you received a document and save to hard drive and then reopen from the hard drive then the <meta> tag is used to determine Content-Type • Firebug- use the Net tab to see the header information that’s being sent when you access a document. • Online tool : http://www.webconfs.com/http-header-check.php

  4. Sample HTTP Header HTTP Response Header

  5. Servers Dictate • Content-Type tells the browser how to interpret the bytes: • Big difference in how the browser operates when trying to read a .gif file and a html file • So what happens when a browser gets a file whose DOCTYPE says it is XHTML but it is served as Content-Type text/html. • The browser uses its html parser(engine) to render it • The author may have used all of the XHTML syntax • The HTML parser is very forgiving • So what happens when a browser that is XML compliant (Firefox, Safari, Opera) gets a file whose DOCTYPE says it is XHTML and it is served with application/xhtml+xml . • The XML parser of the browser kicks in and renders the page • The parser is not forgiving • Save an XHTML file to hard drive with .xhtml extension, in meta tag you can make the Content-Type: application/xhtml+xml and change an <h1> tag to <H1>

  6. Content Type Conclusion • Conclusion • If you receive a document with an XHTML DOCTYPE, and Content-Type of application/xhtml+xml via the http header and you are using an XML compliant browser you better not have any errors in document. Now, IE won’t even open the doc, it will prompt you to download. • Same thing if you read a file from hard drive with a XHTML extension and XHTML DOCTYPE. • If you create an XHTML DOCTYPE and send as text/html you are “supposed” to follow the rules but the html parser is very forgiving. It’s a good idea to become a better coder but you don’t get crushed. • Can you see why this whole movement towards XHTML became bogged down? • Now if you really are using XML tools to do some fancy data manipulation and processing it’s a good idea. How many web designers are doing that?

  7. Another Validator • Fun Validator Add-On for Firefox • http://users.skynet.be/mgueury/mozilla/ • Everytime you view source it validates doc • Two validator engines • Same as W3C • OpenSp • Errors classified into • Errors – can’t fix • Warnings – can fix • Accessibility warnings as defined in W3C WAI • Has auto clean-up button that will “do its best” – might be scary! • Shows status in task bar.

  8. Structure XHTML’s Requirements 1) Declare a DOCTYPE. - Goes before the opening HTML tag at the top of the page. - Three types: Strict, Transitional, Frameset - Strict – Tells the browser that all markup is XHTML-compliant (always use if creating a new webpage) - Transitional – States that the markup is a mix of XHTML and deprecated HTML - Frameset – Same as transitional, but states that frames are OK. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html ...> . . . </html>

  9. Structure XHTML’s Requirements 2) Declare an XML namespace. - When a browser is handling an XHTML page and wants to know what’s in the DOCTYPE definition, this is the location on the W3C servers where it is found. - Ensures the browser reads the XHTML code as you intended. <!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” lang=“en” xml:lang=“en”> . . . </html>

  10. Structure XHTML’s Requirements 3) Declare your content type and character set - Goes in the head of the document. - States what character coding was used– almost always “UTF-8” or“ISO-8859-1” if the site is in English. - In most cases content will be "text/html" <!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” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> . . </html>

  11. Structure XHTML’s Requirements 4) Close every tag, whether enclosing or nonenclosing - Enclosing  Tags that have content within them. - Nonenclosing  Tags that do not go around text but still must be closed using space-slash <!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” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>This is an example of enclosed tags.</p> <img src=“img/nonenclosed.jpg” alt=“Example of nonenclosed.” /> . . </html>

  12. Structure XHTML’s Requirements 5) Nest tags correctly - If a tag opens before a preceding one closes, it must be closed before the preceding one. - If incorrect, it will still work (that is, no errors will be thrown by the browser), but since CSS relies on proper nesting, your page may not be rendered correctly. - Use the W3C validator to confirm all tags are nested correctly. <!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” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>This is an <strong>example</strong> of nesting tags correctly.</p> <p>This is a wrong <strong>example</p>.</strong> . . </html>

  13. Structure XHTML’s Requirements 6) Inline tags cannot contain block level tags. - Tags like <p> and <div> (block tags) automatically organize themselves one under the next. E.g. if you have two paragraphs, the 2nd one appears by default under the 1st. - Tags like <a> (inline tags) occur in the normal flow of text. - <p> Cannot occur within a block of text surrounded by <a>. <!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” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>This is <a href=“ok.html”>OK</a>.</p> <a href=“notok.html”>This is <p>wrong</p>.</a> . . </html>

  14. Structure XHTML’s Requirements 7) All tags must be in lowercase. - Old HTML allowed for (and encouraged) capital lettered tags. - XHTML is case-sensitive and all tags must be in lowercase except for 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” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>This is OK.</p> <P>This is not XHTML compliant.</P> . . </html>

  15. Structure XHTML’s Requirements 8) All attributes must have values and must be quoted. - In HTML, some tags’ attributes did not need values. - In XHTML, if your tag has an attribute that you’re using, it must have a value. <!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” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <select name=“Animals”> <option value=“Cats”>Cats</option> <option value=“Dogs” selected=“selected”>Dogs</option> </select> . . </html>

  16. Structure XHTML’s Requirements • 8) Use encoded entities for special characters. • If you want a special character to appear in your code, use its encoded equivalent. • Encoded XHTML entities begin with an ampersand &amp; and end with a semi-colon • - List can be found here  <!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” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>Encoded XHTML entities begin with an ampersand (&amp;) and end with a semi-colon (;).</p> <p>Normal XHTML tags begin with a less-than sign (&lt;) and end with a greater-than sign (&gt;).</p> . . </html>

  17. Structure XHTML’s Requirements A good XHTML template: <!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> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <title>XHTML Template</title> </head> <body> <!-- Page Content Here --> </body> </html>

  18. Structure Marking up Content - Start the process of web page development by thinking about structure of the content rather than its presentation. - Think about what the best tags are for marking up the content structure-wise. - Concern yourself more with the flow of the document. - Rather than “I want this to be blue,” think “I want this to be in an ordered list.” Simple, ordered structure; not concerned with presentation. Link to example

  19. Structure Marking up Content <!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> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <title>My First XHTML Page</title> </head> <body> <h1>Here's the biggest heading.</h1> <h2>Here's a smaller one.</h2> <p>This is a paragraph.</p> <p>This is a paragraph with some <strong>bold text</strong> and a <a href="#">link</a>.</p> <ul> <li>First list item</li> <li>Second list item</li> <li>This third one contains some <em>italics</em></li> </ul> </body> </html>

  20. Structure Marking up Content - Use <div> to further structure a page into logical groups. - Won’t do anything visible, but it makes it much easier to access different segments of a page (i.e. with scripts or the style sheet). Not much changed visually. Link to example

  21. Structure <!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> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <title>My First XHTML Page</title> </head> <body> <div id="header"> <h1>Here's the biggest heading.</h1> <h2>Here's a smaller one.</h2> </div> <div id="main_content"> <p>This is a paragraph.</p> <p>This is a paragraph with some <strong>bold text</strong> and a <a href="#">link</a>.</p> <ul> <li>First list item</li> <li>Second list item</li> <li>This third one contains some <em>italics</em></li> </ul> </div> <div id="footer"> <p>&copy; My Company 2008</p> </div> </body> </html>

More Related