Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Tech Briefing: Web Standards, XHTML, and CSS Mark Branom and Brian Young 10/23/2003 What is HTML? SGML Before HTML 4, there was SGML A language for describing markup languages HTML is an example of a language defined in SGML HTML Originally conceived for the exchange of scientific and other technical documents. Added support for hypertext and multimedia capabilities What is XHTML? Extends the HTML 4 document type XML based Allows the document to work with XML based user agents Can be viewed, edited and validated with standard XML tools By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while ensuring their content’s backward and future compatibility. What is XML? Extensible Markup Language XML is a simple, very flexible text format derived from SGML. Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. XHTML Syntax Strictly conforming XHTML example <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <title>Tech Briefing Presentation</title> </head> <body> <p>Content</p> </body> </html> Components to look out for: xml declaration in the beginning doctype shows strict or transitional xhtml xmlns declaration Differences with HTML 4 Document must be well-formed CORRECT: nested elements <p>here is an emphasized <em>paragraph</em>.</p> INCORRECT: overlapping elements <p>here is an emphasized <em>paragraph.</p></em> Differences with HTML 4 Element and attribute names must be in lower case XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <li> and <LI> are different tags. Differences with HTML 4 For non-empty elements, end tags are required CORRECT: terminated elements <p>here is a paragraph.</p><p>here is another paragraph.</p> INCORRECT: un-terminated elements <p>here is a paragraph.<p>here is another paragraph. Differences with HTML 4 Attribute values must always be quoted All attribute values must be quoted, even those which appear to be numeric. CORRECT: quoted attribute values <td rowspan=“3” width=“10”> INCORRECT: unquoted attribute values <td rowspan=3 width=10> Differences with HTML 4 Attribute Minimization XML does not support attribute minimization. Attribute-value pairs must be written in full. Attribute names such as compact and checked cannot occur in elements without their value being specified. CORRECT: unminimized attributes <input type=“radio” checked=“checked”> INCORRECT: minimized attributes <input type=“radio” checked> Differences with HTML 4 Empty Elements Empty elements must either have an end tag or the start tag must end with />. For instance, <br /> or <hr>< /hr>. CORRECT: terminated empty elements <br /><hr /> INCORRECT: unterminated empty elements <br><hr> Deprecated Tags applet (use object instead) basefont (use stylesheets instead) center (use stylesheets instead) dir (use ul instead) font (use stylesheets instead) form (use xforms instead) img (use object instead) menu (use ul instead) s (use stylesheets instead) strike (use stylesheets instead) table (only use tables for tabular data - use stylesheets for designing) u (use stylesheets instead) Cascading Style Sheets Style sheets add design control to your web pages by allowing you to pre-define how various classes of HTML tags are going to look on a web page. This adds a level of flexibility and control previously only imagined by web designers. You can customize the look of your pages by creating a style for those pages and then change the look of the entire site by making one change in one document. Style Sheets are well known to "power-users" of MSWord and Adobe Pagemaker. This same level of ease and control works on the web. CSS Basics Style sheets work by allowing you to define properties for how HTML elements (tags) appear when viewed in a Web browser. For example, you can set it up so that every <H1> on your page appears in green, Arial, 18 points, and italics -- automatically (instead of big and bold, which is the default state of H1). H1 Example If in the future you decide they should all be blue, then you just change it in one place and they can be updated throughout your site. H1 Example More basics The W3C (World Wide Web Consortium) created the standards for CSS. Their page shows some of the potential for using CSS. W3C Web Style Sheets Home Page: http://www.w3.org/Style/CSS/ Microsoft’s MSDN bulletin on CSS: http://msdn.microsoft.com/workshop/ author/css/reference/attributes.asp How does it work? Suppose you want to create that page where every <H2> tag is green, italicized, and in Arial font. Before CSS came along, you would have to write the following every time the <H2> tag was used. <H2><I><FONT face="Arial" color="green">This is a green, italicized, Arial H2</FONT></I></H2> Now, you can simply specify this in a single step by typing something like this: h2 { font-family: Arial; font-style: italic; color: green; } Then in the body of the document, you simply use the <h2> tag as usual. When the page is viewed, all the <h2> tags will appear as you wished them to automatically. If later you do decide you want the <h2>s to suddenly be blue instead of green, you simply change the style sheet command to be blue instead of green. You can set up styles for every HTML tag Defining styles: head You can set a style sheet for a single document by putting the style information in the head of the document. For example: The actual style information is included in an HTML comment tag (<!-- commented text -->) in order to hide it from browsers that don't understand CSS. The TYPE attribute of the <style> tag defines the type of style sheet being used -- in this case CSS, Cascading Style Sheets. Defining Styles: inline You can also simply include the style information in a particular tag right in the document by adding the STYLE attribute to the tag directly. This particular method is most useful if you want to change a single instance of a tag in a document that already has a style associated with it. When there are multiple styles affecting a document, the style closest to the tag in question takes precedence. In other words, if I have put a style in HEAD of the document but also included an INLINE style, that INLINE style will override the document style for that one instance of the tag. Using an external .css file If you want to set a style for an entire site of documents, you create a standalone text file (named something like basic.css) that contains the necessary style information. Then each document in that site will point to the style document. Here's how it might look. (Text that appears in the basic.css document) h2 {font-family: Arial; font-style: italic; color: green;} p {font-family: Courier; font-style: bold; color: red; } (HTML document using basic.css style sheet): <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="basic.css" style="style1"> <title>This is the title</title> </head> Classes and IDs Classes and IDs are ways for you to pre-define particular features. You define them by giving them names. For example, what if you wanted to use the color periwinkle for some, but not all, of the text in your document. The code for this color is "#6699ff" Rather putting in a <font color=“#6699ff”> every time you want it to appear, you can set it up as a class and then just reference the class when you want to use the color. Classes are preceded by a "." (dot). IDs are similar. They are preceded by a "#" Span and div You can also use classes and ids with <SPAN> and <DIV> tags. These are container tags with no formatting associated with them. You can set up a <SPAN class="whatever"> to define just part of a paragraph. The <DIV> tag will start on the next line and start a new line after itself. Positioning This is the most fun but also the most difficult part of CSS. Here's how it works: when the browser draws the object on the page, it places it into an invisible, rectangular box called a bounding box. You can set the box's exact location on the page (absolute positioning) or you can offset the box from other elements on the page (relative positioning). You can also specify the size of the box. You can layer objects on top of each other. And, you can use clipping to allow certain sections to show through from lower levels. You can make objects invisible as well. Defining positions To define the position, you must first decide if its position will be absolute or relative. If you want to absolutely define exactly where an object is, you must use position: absolute. h2 { position: absolute; top: 150px; width: 200px; height: 200px font-family: Arial; font-style: italic; color: green; } Since you probably don't want all your <H2> tags to appear stacked up on top of each other in the same spot, you will want to use in-line styles and the DIV tag to specify the differences. <DIV style="position: absolute; top: 150px; width: 200px; height: 200px; background-color: pink;">This is text in a pink 200-by-200 pixel box that is 150 pixels from the top of the window.</DIV> Position example QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture. Positioning Relative positioning places elements into the flow of the document . . . offsetting them from the previous element in the HTML code. This lets you place objects in relation to each other. On the next slide, the first line of text flows normally across the page. The <SPAN> line uses positioning to place it 50 pixels below and 25 pixels to the right of the first line. Position example 2 QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture. Layering Once you know how to set the horizontal and vertical positioning -- or X and Y axes, you now need to learn about the Z axis. This allows webmasters to layer objects. Normally, if you put multiple objects at the same spot, each object will cover the earlier ones. Using the z-axis, you can specify which layer an object resides on. By setting the z-index higher or lower, you can move an object up or down the stack. Layering Example #1 Layering Example #2 Browsers Opera 7 - Supports XHTML, most of CSS1, most of CSS2 MS IE 5.5 for Macintosh - Supports XHTML, all of CSS1, most of CSS2 Netscape 6 - Supports XHTML, all of CSS1, most of CSS2 Netscape 7- Supports XHTML, all of CSS1, all of CSS2 Mozilla - Supports XHTML - Supports all of CSS1, most of CSS2 Safari - Supports XHTML - Supports CSS1 & CSS 2 (somewhat flaky) MS IE 6 for Windows - Supports XHTML - Supports CSS1, some CSS2 MSIE 5.5 for Windows - Mostly supports XHTML - Mostly supports CSS1 Netscape 4 - Barely supports XHTML - Barely supports CSS MSIE 4 - Barely supports XHTML - Barely supports CSS XHTML in Action Examples: XHTML Page with CSS Style Sheet XHTML Page without CSS Style Sheet http://www.stanford.edu/group/itsscustomer/ip/techbriefings/web_standards/example1.html http://www.stanford.edu/group/itsscustomer/ip/techbriefings/web_standards/example2.html CSS Stylesheet http://www.stanford.edu/group/itsscustomer/ip/techbriefings/web_standards/example.css