1 / 19

XHTML

XHTML. Web page. - A Web page is a simple text file that contains a set of HTML tags (code) that describe (to the browser) what should go on a web page. It may also contain CSS styles, which tell it how the page should look.

nolan-coffey
Download Presentation

XHTML

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

  2. Web page - A Web pageis a simple text file that contains a set of HTML tags (code) that describe (to the browser) what should go on a web page. It may also contain CSS styles, which tell it how the page should look. -The Web browserinterprets these tags to decide how to format the text onto the screen.

  3. HTML Review -Basic tag syntax <tagattribute=“value”>content </tag> • tag - describes the function or format of the content • attribute – describes what aspect of the tag you are changing (there may be MANY attributes for one tag or none) • value – describes how you are changing the tag. • Content – what you want to be visible on the page, such as a welcome message. Example: <body bgcolor=“blue”> welcome!</body>

  4. Anatomy of a Tag(standalone tags) <tagattribute=“value” /> • See how the tag still has a beginning and ending /> • No content • Not a “containing” tag • Ex. <br /> <img src=“homer.jpg” />

  5. Anatomy of a web page • HTML – HyperText Markup Language • WHAT contentgoes in the web browser. • Not a programming language! But a language for programs to interpret into web pages. • XHTML – eXtensinble HTML • Latest standard of HTML • XML and HTML have a kid • Stricter, but easier to get what you want on the screen. • Still an .html file, still called “hypertext” • CSS – Cascading Style Sheets • HOWyour content is depicted in the web browser. • .css files

  6. XHTML • The newest version of HTML • Has many requirements • Makes sites more consistent across browsers (this will increase with time)

  7. 1. Declare a DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> This tells the browser what kind of markup it is dealing with

  8. 2. Declare an XML Namespace <html xmlns="http://www.w3.org/1999/xhtml"> -when a browser needs to know what in a DTD (Doctype Declaration) this is where it can find it.

  9. Character Encoding • Many possible characters (chinese, arabic, greek, latin) • To keep browsers in “the know” you should have character encoding at the top of your document <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> • (note this is only if you are saving your files in ANSI formatt in notepad!) • NOTE: Dreamweaver takes care of this for you.

  10. 3. Declare a content type <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> • This is if your text files are saved in ANSI format. (This says we are using latin, instead of chinese, japanese, greek, etc characters) • Goes in the header of your document

  11. 4. Close EVERY tag • Standalone: <img src=“pixie.jpg” /> <br /> • Tag pairs: <p> </p> <table> </table>

  12. 5. Correctly nested tags • If a tag opens before a preceding one closes, it MUST be closed before that preceding one closes: • <p> It’s <strong> very important</strong> to nest them properly </p>

  13. 6. Inline tags cannot contain block level tags. • Block level tags (<p><h2><div>) stack on top of one of each other on the page. • Inline tags (<a><em><strong>) occurs in normal flow of text and don’t force a new line. • You can do <p> <a> </a> </p> but not the other way around.

  14. Block vs Inline Tags • Inline tags • <a> • <strong><em> • <big><small> • <span> • Block-level tags • <p> • <h1><h2> etc • <ol><ul> • <div>

  15. Block usually cannot contain other block level tags. • Block level tags cannot be inside other block level or inline tags • But <div> tags and the <body> tag (also block-level) are the exception It is ok to put <div> <p> </p> </div>

  16. 7. Lowercase tags • No capital letters in tags or attribtues. – The Doctype tag is the only exception to this.

  17. 8. Attributes must have values, values must be quoted • In HTML you didn’t have to do this. In XHTML this is crucial. <img src=“images/monkey.jpg” />

  18. 9. Use encoded equivalents for & ‘ and < • You must use special characters when you want to use these in your document

  19. Validating your XHTML • Your document’s XHTML must validate at http://validator.w3.org/ • (You will want to validate via file upload). You can use the Validator to find errors you may need to convert into XHTML compliant code. • Browse to upload your file and click “check” • Problems are noted, but it may not tell you exactly what’s wrong.

More Related