Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Powerpoint: Intro to XHTML
Document related concepts
Transcript
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. -The Web browser interprets these tags to decide how to format the text onto the screen. HTML Review -Basic tag syntax <tag attribute=“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> Anatomy of a Tag (standalone tags) <tag attribute=“value” /> See how the tag still has a beginning and ending /> No content Not a “containing” tag Ex. <br /> <img src=“homer.jpg” /> Anatomy of a web page HTML – HyperText Markup Language WHAT content goes 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 HOW your content is depicted in the web browser. .css files XHTML The newest version of HTML Has many requirements Makes sites more consistent across browsers (this will increase with time) 1. Declare a DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> This tells the browser what kind of markup it is dealing with 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. 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. 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 4. Close EVERY tag Standalone: <img src=“pixie.jpg” /> <br /> Tag pairs: <p> </p> <table> </table> 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> 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. Block vs Inline Tags Inline tags Block-level tags <a> <p> <strong><em> <h1><h2> etc <big><small> <ol><ul> <span> <div> 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> 7. Lowercase tags No capital letters in tags or attribtues. – The Doctype tag is the only exception to this. 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” /> 9. Use encoded equivalents for & ‘ and < You must use special characters when you want to use these in your document 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.
