You are on page 1of 39

STYLE SHEETS

HOME> TUTORIALS> HTML > Intermediate > STYLE SHEETS

By now you should be happy with altering text in terms of size, colour, font and other things. But for example if you want all your Heading tags to be italicised it can be a drag putting in hundreds and hundreds of <I> and </I> tags. If only there was a way to alter the style of these ! But there is !! These are called style sheets. They will come to no surprise to many of you who have used style sheets in other applications such as word processing or DTP packages These are not just the current in thing but are being actively encouraged as good HTML. Further revisions will take them more & more into account (other editing tags will be dropped in their favour) There are currently 3 ways of using style sheets Inline Style Sheets These are set into the document to define attributes to areas of text Document level Style Sheets Also set into document but cover the whole document External Style Sheets The document links to an external sheet. Useful if you want to create a consistent one across all your web pages You can combine them to give your document extra oomph!!. This technique is calledcascading style sheets and is described later In the examples below we use the following style sheet properties color defines text colour. Either in RGB code or colour name font-style defines special style like italic or bold

font-family defines the font type e.g. font-family: times new roman; If more than one listed e.g. font-family: comic sans ms, serif sans, arial; Then a browser will use the first it has background defines background colour. Either in RGB code or colour name. (Also can set background image see library) some more style sheet properties are listed together with RGB and colour names in our HTMLresource library

Inline Style Sheets
This is the simplest approach. In any tag you just include a style attribute which defines a style sheet property e.g. <h1 style = "color: red; font-style: bold;">This is a big italic red header</h1> <h1>Hang on I am not red or in italics.hmm.....</h1> gives rise to this

This is a big italic red header Hang on I am not red or in italics.hmm.....
As you can see the effect doesn't carry on once the defining tag is closed. You can use them in the middle of text using the <span> tag e.g. <p> <span style="color: red">I am Red</span> whereas I am not </p> I am Red whereas I am not

Why not just use physical style and content tags like font text = red and <i> I hear you say!! Well there are some advantages You can set some factors such as giving a chunk of text a background. You can divide areas of text up with <div> tags e.g. <p> <span style ="background: skyblue;">I have blue behind me</span> I am normal I have blue behind me I am normal These clearly have their limitations. But can be useful in conjunction with other style sheets

Document Level Style Sheets
Now we're motoring ! If you felt Inline style was fiddily & wishy washy, then this should impress you. With Document level style sheets you can define a consistent style for all your text components You need to place this in the <head> tags of your document here is an example (the attribute type = "text/cps" just lets the browser know its it is a text style sheet. For most browsers its not needed) <head> <title>Document level Style sheet example</title> <style type = "text/css"> h1 {color: aqua; font-style: italic; text-align: center} h2 {color: #0000FF; background: khaki; font-family: serif, sans-serif;} p {font-style: bold; font-family: comic sans ms, arial;} dt {color: aqua;} dt em {color: red;}

font-family: comic sans ms.} p {font-style: bold. Say you wanted to use the style sheet described in document level style sheets simply enter the following into notepad h1 {color: aqua. The advantage is that if you want the same style sheet across all your documents you don't have to slavishly copy (or cut and paste !) the same <style> tags and attributes. sans-serif. It also means you can also alter the layout of all linked files just by changing the .css file).</style> </head> Now view a page with this style sheet which explains everything between the <style tags> As you can see you get a document wide approach.css file) You don't need a special editor to create a . arial. font-style: italic. It can also be set to react to certain editing changes (like the use of <em> tags with defined terms in the example) External Style Sheets The principles of external style sheets only differ from document level style sheets in one respect. text-align: center} h2 {color: #0000FF. Notepad or any basic text editor will do.e. font-family: serif. Instead of defining all the styles on the document.} dt {color: aqua. You could change all files with a linked external style sheet in a website just by replacing the .css file rather than ploughing through each HTMLdocument (i. background: khaki. the style is defined by a separate style sheet file (called a .} .css file.} dt em {color: red..

Therefore Inline style sheets win over document level with external style sheets having the least power. 111111111111111111111111111 .css as its External style sheet. Then further document level or in line style sheets could be used to shape an individual document's feel If there is conflict between style sheets (e.css) To link HTML documents to external style sheets use must place a <link> tag in the <head> tags here we are using the . This is what W3C want you to be doing for page layout and it can be very effective For example your site could have a common external style sheet to give a like feel throughout your site.select save as and alter save as type to read all files. Find your web folder and in file name enter your style sheet name plus .css <head> <link rel="stylesheet" type = "text/css" href = "mystyle. Other than that the HTML editing remains the same.css file without altering HTML documents We use a .css file for this site to control our links CASCADING STYLE SHEETS You've probably seen the term before . essentially it means several style sheets can be used in a document each influencing the layout slightly (or causing a cascade of style. but what are cascading style sheets? Well.css (e.css"> </head> We've created a page which uses our mystyles. Have a look In it there is a link to an identical page but which is linked to a second style sheet file called mystyle2. mystyle. your . It gives you an idea of the effect of changing a .g.css file called mystyle.css.g.css file says all header should be blue and your <style> says red) The "closer" style sheet will take precedence.

If you are only formatting one document. then it is perhaps best to include the style sheets as a document level style sheet at the top of the document. a style could specify that all <h1> elements should be displayed in red and in a different typeface than the rest of the text. or a command. but the general rule is that the most local and/or recent style takes priority. For instance. Styles can stand alone or can be organized into style sheets. telling a browser how to display a particular HTML element. The reason they are called Cascading Style Sheets is because of how a browser resolves conflicts when more than one style appears to apply to the same element.What is a Style? A style is a rule. Which one to use? Which approach you should use to adding styles to your documents depends on what you are doing. style rule: a command that tells a user agent how to display a particular element There are three ways to include styles in documents: o o o inline styles. If you want to unify a group of documents so that they all have the same formatting. Inline Styles . then you should have your style sheets stored externally and imported into each document. normally as an exception to other style sheets. document-level style sheets. We will discuss this in more detail later. You can apply one or more of these to a given document. Inline styles should be reserved for oneshot formatting. and external style sheets.

To define an inline style.png" style="border. It is useful for circumstances where you want to format a single item in a specific way. Inline styles are also very useful where you have modularized your code and want the style rules to stay with the modules they affect. <img src="image. If you have the same menu copied as a module into every page in your site. but don't do both."> You can even use the style attribute with the <font> tag to set font attributes. This means that you don't need to account for the menu styling in every page you copy it into. fontweight: bold. The value the style attribute takes is a semi-colon separated list of style rules. Use one if you need backward compatability and the other if you need to adhere to standards. favor of style sheets. since you have to go through and change each instance of the inline style. you make use of thestyle attribute within the tag you want to format the content of. it would be redundant. However. font-weight: 500." /> <table style="max-width: 600px. Any HTML element can take inline style rules. padding-left: 2em"> could be used to get the above line of code to look like it does. One. <p style="color: #660000. For instance.2em. font-family: 'Courier New'. 2px solid red."> <b style="font-size: 1.inline style: a style that is specified within the body of a markup tag as an attribute of that tag The inline style is the easiest way to define a style. . it is also harder to maintain pages with inline styles. then it might make sense to style that menu with inline style rules. monospace. Courier. There are two <font> tags are deprecated in problems with this however. Two. wrong by way of redundancy -- <font style="color: red. I only bring it up because I often see people do just this thing."> The advantage to inline styles is that they allow formatting commands for specific elements to be immediately visible in the code and therefore easy to find.

font-style: italic } --> </style> The HTML comment tags are the only HTML that should appear in the style sheet. Everything between the tags are considered part of the style rules for the page. When using document-level style sheets. Browsers that do recognize style tags will ignore the HTML comments in the style definitions since they are not using the HTML parser to interpret them. They are both for applying styles to documents. To create a document-level style sheet you place the style rules within <style> tags in the header section of the document. This is wrong.Document Level Style Sheets document-level style sheet: a collection of style rules enclosed in <style> tags in the header of the document A preferred method of using styles is to put all the styles at the top of the document in a document-level style sheet. the style rules should appear within HTML comments. since it has an HTML tag inside it. but in slightly different ways. CSS comments look like C programming language comments (/* comment */). This way browsers that do not understand the style tags will not display the content between the tags as part of the document. but rather the CSS parser. A really simple document-level style sheet might look like this: <style> blockquote { color: blue. font-style: italic } </style> A <style> tag should not be confused with a style attribute. <style> <!-/* set blockquotes in blue italic */ blockquote { color: blue. . It is like including one document inside another. Everything else should be properly formed CSS.

It is a standard which defines how to make systems aware of the type of content being included in e-mail messages. The primary component of MIME types is a hierarchical labeling system that declares what category of content the document contains and what what specific type it is within that category. a plain text document is of type type text/plain and a JPEG image is of image/jpeg. <html> <head> <title>sample document</title> <style type="text/css"> <!-/* set blockquotes in blue italic */ blockquote { color: blue. Any included content that is not of the same MIME type as the main document should have the MIME type specified. . font-style: italic } --> </style> The <style> tag should also have a type definition indicating whether it is a CSS style sheet (type="text/css") or a JavaScript style sheet (type="text/javascript") style sheet. } /* set basic paragraph styling */ p { margin-top: 1. Our completed simple document-level style sheet looks like this.<style> <!-/* set blockquotes in blue italic */ <blockquote> { color: blue. It has proved to be a useful enough protocol that most applications these days make use of MIME types to determine what sort of document they are trying to read. since JavaScript style sheets are specific to older versions of Netscape and Netscape has ceased supporting them.0em. For instance. We are only going to talk about CSS here. MIME stands for Multipart Internet Mail Extension. I have added a few more style rules so you can get a better feel of the method. The type attribute refers to the MIME type of the content. font-style: italic } /* hide borders on image hyperlinks */ img { border: 0px. These types can then be associated programmatically with applications that can read those MIME types.

@import The @import command is (as of mid-2002) only supported by Explorer. you can use external style sheets rather than style sheets internal to you document. or you can import it. } --> </style> </head> <body> [ content goes here ] </body> </html> External Style Sheets external style sheet: a collection of style rules stored in an external fime and copied into the document when it is loaded into the application To maintain consistency across a site. External style sheets are stored in their own text file ending in a .5em. --> </style> The @import command can be used as many times as necessary to copy in additional style sheets into the same document. import style sheet rules into a document-level style sheet.css suffix.margin-bottom: 0.5em. To include an external style sheet into a document. allowing for more dynamic modification of site layouts. You can copy external style sheets into a page when loading. which is to say between the <style> <!-@import url(styles/general. you can either link it to the current document. line-height: 1. but allows you to @import command is a CSS <style> tags. as well as standardization across pages.css). The command and is used inside the CSS code. <style> .

Older browsers can only link one style sheet to a document.<!-@import url(styles/general.css"> .css). @import url(styles/special_case1. you will be able to have imported style sheets import their own style sheets. @import command should occur before all other style rules in the style Linking Style Sheets Linking style sheets does not have as much flexibility as importing them. it that it will allow you to create style sheet families. only those that understand the When importing. Newer browsers provide support for loading multiple style sheets. but it does work in most browsers. when it becomes fully supported. where basic styling is put in an inline or external style sheet and then more advanced styling rules that only work in newer browsers are imported in. --> </style> The benefit of the import tag. the sheet. <link rel="stylesheet" type="text/css" href="styles/general. rather than include duplicate code in multiple style sheets. This means that you will be able to create style sheet libraries. To link to a style sheet you use the <link> tag in the header section of the document. It is also useful for dealing with backwards compatability. Thus. @import url(styles/special_case2.css). @import command will try to import the advanced style rules. By nesting imported style sheets.css).

The external style sheet should only contain style rules. which in this case istext/css. rel The relationship of the document being linked to the current document.) . In this case. We will discuss MIME types when we talk more about the header tags. (Yes. It should not even have <style> tags. there is a reason for including commented<style> tags in an external CSS file. with no HTML content. the document in question is the style sheet for the current document. type The MIME type of the document begin linked. but this is not recommended. Although if you want to be complete to the point of overkill you can include them as comments at the top and bottom of the external document.The three attributes of the tag are as follows: href The URL for the style sheet. It has to do with bluffing some CSS editors into displaying the code with the correct color coding.

<link rel="alternate stylesheet" type="text/css" href="styles/specific. they will all be applied in the order linked to. Anyway. Use Style on the menu.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.w3. What I've done so far is declare and initialize a variable and parsed the string to an integer. In Netscape.write to display the output for each if statement. 11111111111111111 This is my first ever using mod operator. here is the code: Any suggestions? <?xml version ="1. Then I used document.css"> The alternate stylesheet value defines the style sheet being linked to. I used a if statements to determine whether the remainder is an even or odd number.0 Strict//EN" "http://www. As of Internet Explorer 6. The user can then select to use this style sheet instead of the default one. really to switch between the author's style sheets and the user's style sheets). I tried switching the left-hand side to the right-hand side but the error is still invalid on the left-hand side. MSIE does not yet appear to support alternate style sheets. But the output is not showing in the browser. If you want to provide a choice of style sheets that are applied one at a time."http://www. The other thing is I'm not sure whether I should be using the parse since I read that the mod operator attempts to convert the string to a number.dtd"> <html xmlns .org/TR/xhtml1 /DTD/xhtml1-strict.w3. You can also get there through the View menu.org/1999/xhtml> <html> <head> . The most recent versions of Netscape and Opera allow you to select between alternate style sheets. When there are alternate style sheets. then you want to use the <link> tag with a differentrel value. The error console message is that I have an invalid assignment on the left-hand side. Opera has a toggle button on the address bar to turn style sheets on and off (well.If you load multiple style sheets. select View. But I'm a little confused on this. a drop down indicator will appear next to this button indicating there are multiple options to select from.

//write to output if(num % 6 = 0){ document. HTML was designed to display data. XML was designed to transport and store data. XML is important to know.write(% + "<h2> is an even number</h2>"). What You Should Already Know Before you continue you should have a basic understanding of the following: • HTML . and very easy to learn. //converts to integer num = parseInt(num). return false. } if(num % 6 != 0){ document. } //end if </script> </head> <body> bool IsNumberEven(int number) { if (number%2 == 0) return true. } 1111111111111 XML stands for eXtensible Markup Language.<script type="text/javascript"> //Declare variables var num = 18. XML is designed to transport and store data.write(% + "<h2> is a odd number</h2>").

XML Does Not DO Anything Maybe it is a little hard to understand. while XML is about carrying information. from Jani. with focus on how data looks HTML is about displaying information. Someone must write a piece of software to send. and transport information. this XML document does not DO anything. stored as XML: <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> The note above is quite self descriptive. But still. You must define your own tags is designed to be self-descriptive is a W3C Recommendation The Difference Between XML and HTML XML is not a replacement for HTML.• JavaScript If you want to study these subjects first. With XML You Invent Your Own Tags . The following example is a note to Tove. it also has a heading and a message body. not to display data tags are not predefined. What is XML? • • • • • • XML XML XML XML XML XML stands for EXtensible Markup Language is a markup language much like HTML was designed to carry data. It is just information wrapped in tags. store. receive or display it. It has sender and receiver information. XML was created to structure. with focus on what data is HTML was designed to display data. XML and HTML were designed with different goals: • • XML was designed to transport and store data. but XML does not DO anything. find the tutorials on our Home page.

XML allows the author to define his/her own tags and his/her own document structure. 1998. That is because the XML language has no predefined tags.).0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> The first line is the XML declaration. XML is the most common tool for data transmissions between all sorts of applications. It defines the XML version (1. My best description of XML is this: XML is a software.The tags in the example above (like <to> and <from>) are not defined in any XML standard. XML is Not a Replacement for HTML XML is a complement to HTML. please read our W3C Tutorial. XML is a W3C Recommendation XML became a W3C Recommendation on February 10. To read more about the XML activities at W3C. while HTML is used to format and display the data. It is important to understand that XML is not a replacement for HTML. .0) and the encoding used (ISO-8859-1 = Latin-1/West European character set). XML is used to transport data. These tags are "invented" by the author of the XML document. An Example XML Document XML documents use a self-describing and simple syntax: <?xml version="1. HTML documents can only use tags defined in the HTML standard (like <p>.and hardware-independent tool for carrying information. The tags used in HTML are predefined. <h1>. etc. In most web applications. XML is Everywhere XML is now as important for the Web as HTML was to the foundation of the Web.

. and body): <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> And finally the last line defines the end of the root element: </note> You can assume. The elements in an XML document form a document tree. Example: .</subchild> </child> </root> The terms parent. Don't you agree that XML is pretty self-descriptive? XML Documents Form a Tree Structure XML documents must contain a root element. from. child. Parent elements have children. that the XML document contains a note to Tove from Jani. and sibling are used to describe the relationships between elements.. Children on the same level are called siblings (brothers or sisters). All elements can have sub elements (child elements): <root> <child> <subchild>.The next line describes the root element of the document (like saying: "this document is a note"): <note> The next 4 lines describe 4 child elements of the root (to.. from this example. All elements can have text content and attributes (just like in HTML). The tree starts at the root and branches to the lowest level of the tree.. This element is "the parent" of all other elements. heading.

The rules are easy to learn.The image above represents one book in the XML below: <bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.99</price> </book> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. The syntax rules of XML are very simple and logical. and easy to use. <price>. Ray</author> <year>2003</year> <price>39. <year>. Rowling</author> <year>2005</year> <price>29. All XML Elements Must Have a Closing Tag In HTML.95</price> </book> </bookstore> The root element in the example is <bookstore>. some elements do not have to have a closing tag: . All <book> elements in the document are contained within <bookstore>.00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K.< author>. The <book> element has 4 children: <title>.

<p>This is a paragraph.</p> <br /> Note: You might have noticed from the previous example that the XML declaration did not have a closing tag.. All elements must have a closing tag: <p>This is a paragraph. The tag <Letter> is different from the tag <letter>. "Properly nested" simply means that since the <i> element is opened inside the <b> element. The declaration is not a part of the XML document itself. all elements must be properly nested within each other: <b><i>This text is bold and italic</i></b> In the example above. <root> <child> <subchild>.. Use whatever you prefer.. and it has no closing tag. Opening and closing tags must be written with the same case: <Message>This is incorrect</message> <message>This is correct</message> Note: "Opening and closing tags" are often referred to as "Start and end tags". XML Elements Must be Properly Nested In HTML. it is illegal to omit the closing tag. This is not an error. you might see improperly nested elements: <b><i>This text is bold and italic</b></i> In XML. it must be closed inside the <b> element. XML Tags are Case Sensitive XML tags are case sensitive. <br> In XML. This element is called the root element.</subchild> </child> </root> . XML Documents Must Have a Root Element XML documents must contain one element that is the parent of all other elements. It is exactly the same thing..

&gt. Entity References Some characters have a special meaning in XML. The greater than character is legal. < > & ' " less than greater than ampersand apostrophe quotation mark Note: Only the characters "<" and "&" are strictly illegal in XML. 1000 then</message> There are 5 predefined entity references in XML: &lt. In XML. &amp. the attribute values must always be quoted. &quot. This will generate an XML error: <message>if salary < 1000 then</message> To avoid this error. it will generate an error because the parser interprets it as the start of a new element. Study the two XML documents below. but it is a good habit to replace it. Comments in XML . the second is correct: <note date=12/11/2007> <to>Tove</to> <from>Jani</from> </note> <note date="12/11/2007"> <to>Tove</to> <from>Jani</from> </note> The error in the first document is that the date attribute in the note element is not quoted. The first one is incorrect. replace the "<" character with an entity reference: <message>if salary &lt.XML Attribute Values Must be Quoted XML elements can have attributes in name/value pairs just like in HTML. If you place a character like "<" inside an XML element. &apos.

XML Stores New Line as LF In Windows applications. Rowling</author> <year>2005</year> <price>29. Ray</author> <year>2003</year> <price>39.. a new line is normally stored as an LF character.99</price> </book> <book category="WEB"> <title>Learning XML</title> <author>Erik T. In Unix applications. the white-space in a document is not truncated.This is a comment --> White-space is Preserved in XML HTML truncates multiple white-space characters to one single white-space: HTML: Output: Hello Hello Tove Tove With XML. Macintosh applications also use an LF to store a new line..95</price> </book> </bookstore> . XML stores a new line as LF. <!-. An element can contain: • • • • other elements text attributes or a mix of all of the above. a new line is normally stored as a pair of characters: carriage return (CR) and line feed (LF).The syntax for writing comments in XML is similar to that of HTML. <bookstore> <book category="CHILDREN"> <title>Harry Potter</title> <author>J K. What is an XML Element? An XML element is everything from (including) the element's start tag to (including) the element's end tag.

XML Elements are Extensible XML elements can be extended to carry more information. XML Naming Rules XML elements must follow these naming rules: • • • • Names Names Names Names can contain letters. Colons are reserved to be used for something called namespaces (more later). XML documents often have a corresponding database. <author>. <title>. Avoid ". Names with an underscore separator are nice: <first_name>. A good practice is to use the naming rules of your database for the elements in the XML documents. no words are reserved.In the example above. Best Naming Practices Make names descriptive. If you name something "first. <book> also has an attribute (category="CHILDREN"). Names should be short and simple. Avoid "-" characters. <last_name>. and <price> have text content because they contain text.name. <bookstore> and <book> have element contents. but watch out for problems if your software vendor doesn't support them. because they contain other elements." Avoid ":" characters. Non-English letters like éòá are perfectly legal in XML. or Xml. Look at the following XML example: <note> <to>Tove</to> <from>Jani</from> <body>Don't forget me this weekend!</body> </note> ." some software may think that "name" is a property of the object "first." some software may think you want to subtract name from first. and other characters cannot start with a number or punctuation character cannot start with the letters xml (or XML. <year>. like this: <book_title> not like this: <the_title_of_the_book>. numbers. If you name something "first-name. etc) cannot contain spaces Any name can be used." characters.

. is that it can be extended without breaking applications. and <body> elements in the XML document and produce the same output. The application should still be able to find the <to>. <from>.Let's imagine that we created an application that extracted the <to>. and <body> elements from the XML document to produce this output: MESSAGE To: Tove From: Jani Don't forget me this weekend! Imagine that the author of the XML document added some extra information to it: <note> <date>2008-01-10</date> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> Should the application break or crash? No. One of the beauties of XML. <from>.

and HTML files are used for that purpose. XML code is embedded inside HTML code </body> </message> </xml> </html> • The efficient way is to create a file and import it.11111111111111111111 XML Tutorial . Like most other HTML tags. <html> <xml Id = msg> <message> <to> Visitors </to> <from> Author </from> <Subject> XML Code Islands </Subject> <body> In this example. As HTML provides a way to format and display the data. Syntax <xml Id = msg SRC = "example1.xml"> </xml> Data Binding . The contents of the XML tag come from one of two sources : inline XML code or an imported XML file. The data contained in an XML file is of little value unless it can be displayed. XML data can be stored inside HTML pages as "Data Islands". The simple way to insert XML code into an HTML file is to use the <xml> tag. The most important attribute is the ID. the <xml> tag has attributes. The XML tag informs. You can easily do so by using the SRC attribute of the XML tag. Example Embedding XML code inside an HTML File. it's said to be inline. the browser that the contents are to be parsed and interpreted using the XML parser. • If the code appears in the current location . XML stores data inside the HTML documents.Embedding XML in HTML Page 1 of 2 Overview In this chapter you will learn : o How to embed XML into HTML? o What are the various ways to get XML data source? o What is Data Binding? XML can be used to store data inside HTML documents. which provides for the unique naming of the code.

searching. Review Questions Fill in the Blanks i. iv. When you bind data in this way. the data source provides the data. • • • • • • Data binding involves moving data from a data source to a local system. About data binding. v. and the appropriate applications retrieve and synchronize the data and present it on the terminal screen. such as. it is called as _________. The XML code can be inserted into an HTML file with the use of ______ tag. Binding data also separates the task of maintaining data from the tasks of developing and maintaining binding and presentation programs. synchronizing. to an end user's local system where the user can manipulate the data. The XML data can be placed as _______ or as an _______ file. the user can perform some minor data manipulations on their own local system. iii. you do not have to request that the remote server manipulate the data and then retransmit the results. you can perform some data manipulation locally. it on the local system. and filtering. ______ attribute of XML tag provides for the unique naming of the code. Various sources of content for XML tag. ii. Data binding is used to reduce traffic on the network and to reduce the work of the Web server. . and moving data from a data source.Data binding involves mapping. When XML data is stored inside HTML pages. and then manipulating the data. The remote server does not have to perform all the data manipulations nor repeatedly transmit variations of the same data. the applications are written so they can alter their presentation to reflect those changes. Summary In this chapter you have learnt o o o Embedding of XML into HTML. usually on a remote server. Using data binding means that after a remote server transmits data. ______ allows browser to retrieve data from the database. If the data changes. sorting. In data binding. especially for minor data manipulations.

Displaying your XML Files with CSS? It is possible to use CSS to format an XML document. Below is an example of how to use a CSS style sheet to format an XML document: Take a look at this XML file: The CD catalog Then look at this style sheet: The CSS file Finally. v. view: The CD catalog formatted with the CSS file Below is a fraction of the XML file.css"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="cd_catalog.Solutions i. ii.90</PRICE> <YEAR>1985</YEAR> . imported XML Data binding 1111111111111 With CSS (Cascading Style Sheets) you can add display information to an XML document. The second line links the XML file to the CSS file: <?xml version="1. iii. iv. Data Islands <XML> ID inline.

xml file to HTML XslTransform transform = new XslTransform( ). First.Load(@".Credentials = System.xsl stylesheet.90</PRICE> <YEAR>1988</YEAR> </CD> Formatting XML with CSS is not the most common method.html".resolver).xsl"..xml file to comma delimited format // load up the stylesheet transform. // load up the stylesheet transform.Transform(@". After that.xml. . W3C recommends using XSLT instead..\PersonnelHTML.xsl stylesheet: Collapse | Copy Code public static void TransformXML( ) { // Create a resolver with default credentials.. we are transforming some personnel data from a fictitious business stored in Personnel. // perform the transformation . See the next chapter. ..xsl". // perform the transformation transform. For example.\PersonnelCSV. // transform the personnel. // transform the personnel. resolver. XmlUrlResolver resolver = new XmlUrlResolver( ).\Personnel.\Personnel. Solution The solution for this is to use an XSLT stylesheet to transform the XML into another format using theXslTransform class.xml". we transform the data to comma-delimited format using the PersonnelCSV. In the example code. Then we perform thetransformation to HTML via XSLT using the PersonnelHTML. you have personnel data that is stored as an XML document and you need to display it on a Web page or in a text file..Load(@".@". </CATALOG> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9. we load the stylesheet for generating HTML output. 1 1111111111 Introduction You have an XML document and you need to convert it into a more readable file format.CredentialCache.resolver).resolver).Net.DefaultCredentials.

" /> </xsl:for-each> </td> <td> <xsl:for-each select="@title"> <xsl:value-of select=".xml"." /> </xsl:for-each> </td> <td> <xsl:for-each select="@companyYears"> <xsl:value-of select=".org/2001/XMLSchema"> <xsl:template match="/"> <html> <head /> <body title="Personnel"> <xsl:for-each select="Personnel"> <p> <xsl:for-each select="Employee"> <xsl:if test="position( )=1"> <table border="1"> <thead> <tr> <td>Employee Name</td> <td>Employee Title</td> <td>Years with Company</td> </tr> </thead> <tbody> <xsl:for-each select=".\Personnel./Employee"> <tr> <td> <xsl:for-each select="@name"> <xsl:value-of select=".xml file contains the following items: Collapse | Copy Code <?xml version="1.resolver)..Transform(@". } The Personnel.csv"..w3." /> </xsl:for-each> </td> </tr> </xsl:for-each> </tbody> .0" encoding="UTF-8"?> <xsl:stylesheet version="1. @".0" xmlns:xsl="http://www..0" encoding="utf-8"?> <Personnel> <Employee name="Shahab" title="Customer Service" companyYears="1"/> <Employee name="Noosha" title="Manager" companyYears="12"/> <Employee name="NavidChas" title="Salesman" companyYears="3"/> <Employee name="Mehrdad" title="CEO" companyYears="27"/> <Personnel> The PersonnelHTML.\Personnel.w3.org/1999/XSL/Transform" xmlns:xs="http://www.transform.xsl stylesheet looks like this: Collapse | Copy Code <?xml version="1.

xsl and Personnel. charset=utf-8"> </head> <body title="Personnel"> <p> <table border="1"> <thead> <tr> <td>Employee Name</td> <td>Employee Title</td> <td>Years with Company</td> </tr> </thead> <tbody> <tr> <td>Shahab</td> <td>Customer Service</td> <td>1</td> </tr> <tr> <td>Noosha</td> <td>Manager</td> <td>12</td> </tr> <tr> <td>Navid</td> <td>Salesman</td> <td>3</td> </tr> <tr> <td>Mehrdad</td> <td>CEO</td> <td>27</td> </tr> </tbody> </table> </p> </body> </html> The comma-delimited output is generated using PersonnelCSV.xml.w3. the stylesheet is shown here: Collapse | Copy Code .</table> </xsl:if> </xsl:for-each> </p> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet> Here is the HTML source: Collapse | Copy Code <html xmlns:xs="http://www.org/2002/XMLSchema"> <head> <META http-equiv="Content-Type" content="text/html.

50</price> </orderEntry> <orderEntry> <food IMAGE="SoftDrink"/> <price>1.50</price> .0" encoding="UTF-8"?> <!DOCTYPE order SYSTEM "order.1 Noosha.dtd"> <order> <orderEntry> <food IMAGE="Burger"/> <price>2.Customer Service." /> </xsl:for-each> <xsl:text> &#xd.xsl stylesheet is shown here: Collapse | Copy Code Shahab.3 Mehrdad.0" xmlns:xsl="http://www.<?xml version="1.27 <?xml version="1.50</price> </orderEntry> <orderEntry> <food IMAGE="Total"/> <price>6.<xsl:for-each select="@title"> <xsl:value-of select="." /> </xsl:for-each>.0" encoding="UTF-8"?> <xsl:stylesheet version="1.00</price> </orderEntry> <orderEntry> <food IMAGE="Pie"/> <price>1.<xsl:for-each select="@companyYears"> <xsl:value-of select=".CEO.org/2002/XMLSchema"> <xsl:output method="text" encoding="UTF-8"/> <xsl:template match="/"> <xsl:for-each select="Personnel"> <xsl:for-each select="Employee"> <xsl:for-each select="@name"> <xsl:value-of select=".Manager.50</price> </orderEntry> <orderEntry> <food IMAGE="Fries"/> <price>1." /> </xsl:for-each>.</xsl:text> </xsl:for-each> </xsl:for-each> </xsl:template> </xsl:stylesheet> The output from the PersonnelCSV.&#xa.Salesman.w3.12 Navid.w3.org/1999/XSL/Transform" xmlns: xs="http://www.

After !!! Image Kind Price Burger 2. The only difference between internal and external is in the way it's declared with DOCTYPE.50 SoftDrink 1.</orderEntry> </order> Example 1 -. <!DOCTYPE tutorials [ and ]>. the code is placed between the DOCTYPE tags (i.the same code could just as easily be part of an internal DTD or an external one.50 111111111111 Whether you use an external or internal DTD. Example Internal DTD . the actual syntax for the DTD is the same . Using an internal DTD.e.50 Total 6.50 Fries 1.00 Pie 1.

e.quackit.com/xml/tutorial</url> </tutorial> <tutorial> <name>HTML Tutorial</name> <url>http://www. Note that the "standalone" attribute is set to "no". To use the DTD.com/html/tutorial</url> </tutorial> </tutorials> . using HTTP) using an absolute reference.quackit. The URL can point to a local file using a relative reference.com/xml/tutorial</url> </tutorial> <tutorial> <name>HTML Tutorial</name> <url>http://www.quackit.url)> <!ELEMENT name (#PCDATA)> <!ELEMENT url (#PCDATA)> <!ATTLIST tutorials type CDATA #REQUIRED> ]> <tutorials type="web"> <tutorial> <name>XML Tutorial</name> <url>http://www. This URI is typically in the form of a URL.dtd"> <tutorials type="web"> <tutorial> <name>XML Tutorial</name> <url>http://www.0" standalone="yes"?> <!DOCTYPE tutorials [ <!ELEMENT tutorials (tutorial)+> <!ELEMENT tutorial (name.This is an example of an internal DTD. This is because the document relies on an external resource (the DTD): <?xml version="1.0" standalone="no"?> <!DOCTYPE tutorials SYSTEM "tutorials.quackit. Example External DTD Here's an example of an XML document that uses an external DTD.com/html/tutorial</url> </tutorial> </tutorials> 11111111 An external DTD is one that resides in a separate document. or a remote one (i. you need to link to it from your XML document by providing the URI of the DTD file. It's internal because the DTD is included in the target XML document: <?xml version="1.

Note that the external DTD file doesn't need the DOCTYPE declaration . It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set).dtd" (the external DTD file) could look like. and body): <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> .url)> name (#PCDATA)> url (#PCDATA)> tutorials type CDATA #REQUIRED> 1111 XML Tree « Previous Next Chapter » XML documents form a tree structure that starts at "the root" and branches to "the leaves". here's an example of what "tutorials.And. The next line describes the root element of the document (like saying: "this document is a note"): <note> The next 4 lines describe 4 child elements of the root (to. heading. from. An Example XML Document XML documents use a self-describing and simple syntax: <?xml version="1. using the above XML document as an example.it is already on the XML file that is using this DTD: <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT <!ATTLIST tutorials (tutorial)+> tutorial (name.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> The first line is the XML declaration.

.. child.. All elements can have sub elements (child elements): <root> <child> <subchild>.And finally the last line defines the end of the root element: </note> You can assume. The elements in an XML document form a document tree. Parent elements have children.</subchild> </child> </root> The terms parent. Example: The image above represents one book in the XML below: .. Children on the same level are called siblings (brothers or sisters). Don't you agree that XML is pretty self-descriptive? XML Documents Form a Tree Structure XML documents must contain a root element. and sibling are used to describe the relationships between elements. This element is "the parent" of all other elements. The tree starts at the root and branches to the lowest level of the tree. that the XML document contains a note to Tove from Jani. All elements can have text content and attributes (just like in HTML). from this example.

<bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30. Rowling</author> <year>2005</year> <price>29.the tree structure The great benefit about XML is that the document itself describes the structure of data.99</price> </book> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. If any of you have researched your family history. lemonade. <price>. At the top of the tree is some early ancestor and at the bottom of the tree are the latest children. XML Code.< author>. which grandchildren belong to which grandparents and many other relationships. 11 xml . <year>. All <book> elements in the document are contained within <bookstore>. often referred to as an XML Tree. The neat thing about XML is that it also fits nicely into this tree structure. Before you even think about matching up these tree terms with their XML counterparts. With a tree structure you can see which children belong to which parents.95</price> </book> </bookstore> The root element in the example is <bookstore>.00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. you have probably come across a family tree.50</price> . Ray</author> <year>2003</year> <price>39.xml document we will be using was created by a particularly enterprising kid to keep inventory of her lemonade stand. it might be helpful to see a real XML document converted into a tree structure.xml: <inventory> <drink> <lemonade> <price>$2. The <book> element has 4 children: <title>. The lemonade.

drink is the ancestor of lemonade and pop. In the lemonade. In the lemonade. inventory is the root element.<amount>20</amount> </lemonade> <pop> <price>$1. xml tree rules We've written up a set of rules to use in figuring out if an element is a child or parent of another element. all other elements are a descendent of the inventory element. you can figure out the relationship of just about any two elements in an XML document.50</price> <amount>10</amount> </pop> </drink> <snack> <chips> <price>$4. then A is a descendant of B. then B is an ancestor of A. With these basic rules. as long as you follow some basic rules. xml family tree continued .50</price> <amount>60</amount> </snack> </inventory> </chips> XML Tree: As you can see from the XML document. we can see that the inventoryelement is at the top of the tree. every element is a descendant of inventorybecause inventory is the root element.xml example. When we convert the document over to a tree format. Ancestors: If an element B contains element A. Construction of an XML tree isn't all that hard to do. In other words. • • Descendants: If element A is contained by element B.xml example.

a . The complexity of the generated code which can make it difficult to find errors. They are a convenienc beginners and experienced web masters alike. Most experienced web authors avoid using a word processo Microsoft® Word/Publisher to create their web pages. In your browser. inserting the snippet of code for a RootsWeb counter. But all HTML editors do not write identical some straight HTML editors do a very good job (I'm partial to Arachnophilia). we recommend that you carefully read through each of these lessons. parent and sibling relationships in an XML document.8 m MS Word version of the HTML for the same page will require at least 28 seconds to down Other things to consider when using a word processor or WYSIWYG editor to generate yo 1. the pages appear to be virtually but the file size for the MS Word2000 generated web page is 3-1/2 times the size of the ba page. The Mini Web Page illustrated on the right is about as simple as a web page can be. Belo versions of code for this Mini Web Page. for example. child. using much more code than is necessary and increasing y download times exponetially. You probably won't notice much difference when visiting this Mini Page. many WYSIW write what we callbloated code. If you are still attempting to grasp the notion of the XML Tree structure. ancestor. 1111111111111 Web Pages are NOT Created Equal HTML editors are great for creating web pages quickly and easily.The next few lessons will go into more detail about descendant. But an ave page containing about 25Kb of HTML requires about 7 seconds to download with a 28. or ed code manually.

} o\:* {behavior:url(#default#VML).} div.MsoNormal {mso-style-parent:"".} .shape {behavior:url(#default#VML).rootsweb. col @page Section1 {size:8.0pt.org/TR/REC-html40"> < http-equiv=Content-Type content="text/html charset=iso-8859-1"> <meta name=ProgId content=Word.MsoNormal.XHTML./* Style Definitions */ p.015 bytes * See the actual page created by this code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.} </style> <![endif]--> <title> Web Page Code .ancestry. text-underline:singl size:12.MsoHyperlinkFollowed {color:purple.2. col h1 {color:black. part of a brief tutorial on the basics of writing HTML.Sect .htm"> <i> Web Pages are NOT Created Equal </i> </a> </p> <p align="center"> And a graphic: <img src="rweb1.MsoHyperlin {color:blue.MsoNormal. t decoration:underline."> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000"> <h1 align="center"> This is a Mini Web Page </h1> <p align="center"> It includes all the basic components of any web page: <br> META tags and some links: <br> See the <a href= "http://homepages. span.com /~pasher/wpcode/xhtmlvers.mso"> <!--[if !mso]> <style> v\:* {behavior:url(#default#VML). text-decoration:underline. rootsweb.0001pt. charset=iso-8859-1"> <meta name="author" content="Copyright2000 Patricia J.Document> <meta name=Generator content="Microsoft Wo name=Originator content="Microsoft Word 9" rel=File-List href=".} a:visited. Asher"> <meta name="keywords" content="HTML.tutorial"> <meta name="description" content="HTML vs XHTML.com /~pasher/wpcode.5in 11. mso-paper-source:0.0in. font-family:"Times New Roman" fareast-font-family:"Times New Roman".0pt.w3. marginbottom:.} w\:* {behavior:url(#default#VML). span.gif" width="170" height="60" alt="RootsWeb"> </p> <br> <br> </body> </html> XHTML Code written by MSWord File size=3.2//EN"> <html> <head> <title> Web Page Code .25in.ancestry.htm"> XHTML Version </a> <br> Back to <a href= "http://freepages. mso-header-margin:.} a:link.computers. div.HTML </title> <meta http-equiv="Content-Type" content="text/html.436 bytes * See the actual page created by this <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1 Transitional//EN"> <html xmlns:v="urn:sche microsoft-com:vml" xmlns:o="urn:schemasmicrosoft-com:office:office" xmlns:w="urn: microsoft-com:office:word" xmlns="http://www.5in. li. margin: 1. You can view and compare both versions of the Mini Web Page using the actual pagelinks Basic HTML Code File size=1.0in 1.XHTML <!--[if gte mso 9]> <xml> <o:DocumentProperties> <o:Author>Patricia Asher</o:Author> <o:LastAuthor>Patricia Asher</o:LastAuthor> <o:Revision>2</o:Revi <o:TotalTime>4</o:TotalTime> <o:Created>20 12T20:20:00Z</o:Created> <o:LastSaved>2002 12T20:20:00Z</o:LastSaved> <o:Pages>1</o:P <o:Words>63</o:Words> <o:Characters>362</o <o:Lines>3</o:Lines> <o:Paragraphs> 1 </o:Paragraphs> <o:CharactersWithSpaces> 4 </o:CharactersWithSpaces> <o:Version>9.3821</o:Version> </o:Document </xml><![endif]--> <style> <!-. font-family:"Times New Roman" fareast-font-family:"Times New Roman". Proprietary code which may not work in other browsers. mso-pagination:widow-orpha size:12. margin:0in./xhtmlvers_files/file <link rel=Edit-Time-Data href="./xhtmlvers_files/editdata. te underline:single.5in. msomargin:.

com /~pasher/wpcode.gif alt=RootsWeb></p> <p class=MsoNormal style bottom:12.htm"> HTML Versio Back to <a href= "http://freepages.tu <meta name=description content="HTML vs XH part of a brief tutorial on the basics of writing HTML.ancestry.com /~pasher/wpcode/htmlvers.rootsweb.5in' alink="#ff0000"> <div class <h1 align=center style='text-align:center' Mini Web Page </h1> <p align=center style= align:center'>It includes all the basic co any web page: <br> META tags and some link the <a href= "http://homepages. .htm"> <i> Web Pages are NO Equal </i> </a> </p> <p align=center style align:center'>And a graphic: <img border=0 height=60 id="_x0000_i1025" src=rweb1.XHTML.{page:Section1.computers.rootsweb.0pt'> <![if !supportEmptyParas]> [endif]><o:p></o:p></p> </div> </body> </h * Note: File size refers to the HTML only and does not include the graphic displayed on th Page."> </head> <body bgcolor=w lang=EN-US link=blue vlink=purple style='t interval:.} --> </style> <!--[if gte <o:shapedefaults v:ext="edit" spidmax="102 </xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ex data="1"/> </o:shapelayout></xml><![endif] name=author content="Copyright2000 Patrici <meta name=keywords content="HTML.