Html ,css,xml
-
Upload
shweta-wankhade -
Category
Technology
-
view
3.658 -
download
0
description
Transcript of Html ,css,xml
![Page 1: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/1.jpg)
1
HTML ,CSS,XMLHTML
![Page 2: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/2.jpg)
2
HTML
A text editor called Notepad is built into Windows.It can be found inside the Accessories panel of your Program list, inside the Start menu.
All HTML files typically have either the .htm or the .html file name extension.
Supporting browsers are Internet Explorer 9, Google Chrome, Mozilla Firefox, Opera, Safari.
![Page 3: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/3.jpg)
3
HTML
<HTML><!- - main.html - -><!- -First Program - -><HEAD><TITLE>Internet Programming</TITLE></HEAD><BODY><P>Welcome!</P></BODY></HTML>
![Page 4: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/4.jpg)
4
HTML
Headers are a simple form of text formatting that vary text size based on the headers “ level ”. The six header elements (H1 through H6) are often used to delineate new sections and subsections of a page.
Actual size of the text of each header element is selected by the browser and can infact vary significantly between browsers
![Page 5: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/5.jpg)
5
HTML Contd.
<HTML><!- - Header.html - -><!- - HTML headers - -><HEAD><TITLE>How to program headers</TITLE></HEAD><BODY><!- - Centers everything in the CENTER
element - -><CENTER>
![Page 6: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/6.jpg)
6
HTML
<H1>Level 1 Header</H1><H2>Level 2 Header</H2><H3>Level 3 Header</H3><H4>Level 4 Header</H4><H5>Level 5 Header</H5><H6>Level 6 Header</H6></CENTER></BODY></HTML>
![Page 7: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/7.jpg)
7
HTML Contd..
Text Styling In HTML , text can be highlighted with bold, underlined, and/or italicized styles.
ALIGN tag is the method by which any single element of the page can be aligned . The HTML convention is to enclose the ALIGN value (left , center , or right) in quotation marks.
<U>…</U> tags display underlined text.<P>…</P> tags forms one paragraph.
![Page 8: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/8.jpg)
8
HTML Contd.
<B>…</B> The text becomes Bold.<I>…</I> The text becomes Italics.
<HTML><HEAD><TITLE> Text Style </TITLE></HEAD><BODY><H1 ALIGN = “center”> <U>Welcome to our site!
</U></H1><P>We have designed this site to teach
<I>HTML</I>We are using HTML since version <B> 2.0 </B></P>
![Page 9: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/9.jpg)
9
HTML
<H2> ALIGN = “center” >Have fun with the site </H2>
</BODY></HTML>
![Page 10: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/10.jpg)
10
HTML
Linking creates hyperlink to the document on the server and different servers to make a world wide network.
Links are inserted using the A(anchor) element.
To specify the address to link to , insert the HREF attribute into the anchor tag as follows: <A HREF = “address”>
![Page 11: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/11.jpg)
11
HTML
<HTML><HEAD><TITLE> Links </TITLE></HEAD>
<BODY><CENTER><H2>Search Engines</H2><P><B>Click on address<B></P><P> Yahoo: <A HREF = http://www.yahoo.com
>http://www.yahoo.com</A></P>
![Page 12: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/12.jpg)
12
HTML
<P>AltaVista:<A HREF = http://www.altavista.com>http://www.altavista.com</A></P>
</CENTER></BODY></HTML>
![Page 13: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/13.jpg)
13
HTML
<HTML><!- - Email Hyperlink - -><HEAD><TITLE>Contact page</TITLE></HEAD><BODY><P>My email address is <A HREF =
“mailto:[email protected]”> [email protected] </A>
Click on the address and your browser will open an email message and address it to me.
![Page 14: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/14.jpg)
14
HTML
</P></BODY></HTML>
![Page 15: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/15.jpg)
15
HTML
<HTML><!- - picture.html- -><!- - Adding images with HTML - -><HEAD><TITLE>Welcome</TITLE></HEAD><CENTER><!- - FORMAT FOR ENTERING IMAGES, KEEP
THE IMAGE IN THE SAME FOLDER OR CREATE THE FOLDER- ->
![Page 16: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/16.jpg)
16
HTML
<IMG SRC = "images/Winter.jpg" BORDER = "1" HEIGHT = "144" WIDTH = "200" ALT = "Harvey and Paul Deitel"/>
</CENTER></BODY></HTML>
IMG SRC: Is used for the location of Image file.
![Page 17: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/17.jpg)
17
HTML
Formatting text with <FONT>
<HTML><HEAD><TITLE>WELCOME</TITLE></HEAD><BODY><H1 ALIGN = "Center"><U>Welcome to
our Website</U></H1>
![Page 18: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/18.jpg)
18
HTML
<P><FONT COLOR = "red" SIZE = "+1" FACE = "aRIEL">We have designed this site to teach <B>HTML</B>.</FONT>
<FONT COLOR = "purple" SIZE = "+2" FACE = "vERDANA">We have been using<B>HTML</B> since<U>version<STRONG>2.0</STRONG></U>,and we enjoy the features</FONT>
![Page 19: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/19.jpg)
19
HTML
<FONT COLOR = "blue" SIZE = "+1" FACE = "Helvetica">It seems only a short time ago<B>HTML</B>book.</FONT>
<H2 ALIGN = "center">Have fun with the site</H2></P>
</BODY></HTML>
![Page 20: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/20.jpg)
20
HTML
Special Characters We insert special character and symbol by using the form &code.
<HEAD><!- - INSERTING SPECIAL CHARACTERS- -><HEAD><TITLE>Contact Page</TITLE></HEAD>
![Page 21: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/21.jpg)
21
HTML
<BODY><P>My email address is <A HREF =
"mailto:[email protected]">[email protected]</A>.Click on the address and your browser will open an email message and address it to my address,</P>
<P>All information on this site is<B>©</B>Deitel<B>&</B>Associates, 1999.</P>
![Page 22: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/22.jpg)
22
HTML
<DEL><P>You may copy up to 3.14 * 10<SUP>2</SUP>characters worth of information from this site.</P></DEL><BR>Just make sure you<SUB> do not copy more information</SUB>than is allowable.
<P>No permission is needed if you only need to use<B>< ¼</B>of the information presented here.</P>
</BODY></HTML>
![Page 23: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/23.jpg)
23
HTML
<DEL> </DEL> Text can be struck out.<SUB> </SUB> Text can be subscript.<SUP> </SUP> Text can be superscript.
![Page 24: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/24.jpg)
24
HTML
Line Breaks and Horizontal rule <HR> inserts a horizontal rule, indicated
by the <HR> tag.WIDTH attribute adjust the width of the
horizontal rule.SIZE attribute determines the height of the
horizontal rule.ALIGN can be left center or right.NOSHADE eleminates shading effect and
displays horizontal rule as a solid color bar.
![Page 25: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/25.jpg)
25
HTML
Unordered Lists Here the unordered list element creates a list in which every line begins with a bullet mark.<UL>…</UL> opens and close the unordered list.
<LI>..</LI>Inserts a new entry in the List.
<HTML><!- - Unordered Lists- -><HEAD>
![Page 26: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/26.jpg)
26
HTML Contd.
<TITLE>Links</TITLE></HEAD><BODY><CENTER><H2>Internet Search Engines</H2><P><B>Click on search engine
address</B></P><UL>
![Page 27: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/27.jpg)
27
HTML Contd.
<LI>Yahoo:<A HREF = "http://www.yahoo.com">
http://www.yahoo.com</A></LI>
<LI>Alta Vista: <A HREF = "http://www.altavista.com">
http://www.altavista.com</A></LI>
<LI>Ask Jeeves: <A HREF = "http://www.askjeeves.com">
http://www.askjeeves.com</A></LI>
![Page 28: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/28.jpg)
28
HTML
</UL></CENTER></BODY></HTML>
![Page 29: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/29.jpg)
29
HTML Contd.
Ordered and Nested List <OL>..</OL>tag is for ordered list, the list
is defined by the TYPE attribute. The default type is “1”,”I”,”i”,”A”,”a”.
<HTML><!- - Nested and ordered list- -><HEAD><TITLE>LIST</TITLE></HEAD>
![Page 30: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/30.jpg)
30
HTML Contd.
<BODY><CENTER><H2><U>The best feature of the
Internet</U></H1></CENTER><UL><LI>You can meet new people from
countries around the world.</LI></LI>You have access to new media as it
becomes public:</LI><!- - Nested List- ->
![Page 31: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/31.jpg)
31
HTML Contd.
<UL><LI>New games</LI><LI>New applications</LI>
<UL><LI>For business</LI><LI>For pleasure</LI></UL>
![Page 32: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/32.jpg)
32
HTML Contd.
<LI>Around the clock news</LI><LI>Search engines</LI><LI>Shopping</LI><LI>Programming</LI><UL><LI>HTML</LI><LI>Java</LI><LI>Dynamic HTML</LI>
![Page 33: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/33.jpg)
33
HTML Contd.
<LI>Scripts</LI><LI>New languages</LI></UL></UL><LI>Links</LI><LI:Keeping in touch with old friends</LI><LI>It is technology of the future</LI></UL>
![Page 34: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/34.jpg)
34
HTML
<BR><CENTER><H2>My favourite 3 <I>CEO</I></H2></CENTER>
<OL><LI>Bill Gates</LI><LI>Steve Jobs</LI><LI>Michael Dell</LI></OL></BODY></HTML>
![Page 35: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/35.jpg)
35
HTML
HTML Tables The table organizes data into rows and columns.
<THEAD> is used to format table header area.
<TH>.. </TH>Inserts a header cell and displays bold text<TR>..</TR>Inserts a table row.<TD>..</TD>Inserts a data cell.
![Page 36: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/36.jpg)
36
HTML Contd.
<CAPTION>…</CAPTION>Summarizes the table contents.
<HTML><!- - Table design - -><HEAD><TITLE>Tables</TITLE></HEAD><BODY><CENTER>
![Page 37: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/37.jpg)
37
HTML Contd.
<H2>Table example</H2></CENTER><TABLE BORDER = "1" ALIGN = "center"
WIDTH = "40%"><CAPTION>Here is a sample
table.</CAPTION><THEAD><TR><TH>This is head.</TH></TR></THEAD><TBODY>
![Page 38: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/38.jpg)
38
HTML
<TR><TD ALIGN = "center">This is the body,</TD></TR>
</TBODY></TABLE></BODY></HTML>
![Page 39: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/39.jpg)
39
HTML
HTML Forms to collect the information on site we use forms.
<FORM METHOD = “POST” ACTION = “/cgi-bin/formmail”>
Form is the element, Method attribute indicates the way the web server will organize and send you the form output. METHOD = “post” causes changes to server data.METHOD = “get” should be used when your form does not cause any changes in server-side data.
![Page 40: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/40.jpg)
40
HTML
The INPUT element always requires the TYPE attribute.Two other attributes are NAME which provides a unique identification for the INPUT element, and VALUE which indicates the value that the INPUT element sends to the server upon submission.
URL /cgi-bin/formmail for making database request.
![Page 41: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/41.jpg)
41
HTML Contd.
<HTML><!- -Form design- -><HEAD><TITLE>Forms</TITLE></HEAD><BODY><H2>Feedback Form</H2><P>Please fill out this form to help us
improve our site.</P><FORM METHOD = "POST" ACTION = "/cgi-
bin/formmail">
![Page 42: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/42.jpg)
42
HTML Contd.
<INPUT TYPE = "hidden" NAME = "recipient"
VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect"VALUE = "main.html"><P><B>Name:</B>
![Page 43: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/43.jpg)
43
HTML Contd.
<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>
<INPUT TYPE = "submit" VALUE = "Submit your entries">
<INPUT TYPE = "reset" VALUE = "Clear your entries">
</FORM></BODY></HTML>
![Page 44: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/44.jpg)
44
CSS
Cascading Style Sheets (CSS) allow you to specify the style of your page elements (spacing, margins, etc) separately from the structure of your document (section headers, body text , links etc.)This separation of structure from content allows greater manageability and makes changing the style of your document easier.
Save the file with extension .css and to see the display save it with .html extension.
![Page 45: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/45.jpg)
45
CSS
.css ext is used for embedding the css file into html code. The file with the .css file extension can be created and saved using the Notepad. When saving, however, make sure you are not saving the file as a text with the .txt file extension but as a file with the .css file extension. External CSS files contain only the CSS code and are saved with the CSS file extension. The file with the .css file extension is then referenced in your HTML by using the <link> instead of the <style>.
![Page 46: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/46.jpg)
46
CSS
Internal CSS Cascading Style Sheets come in three
flavors: internal, external, and inline. We will cover internal and external, as they are the only flavors a designer should utilize. In this lesson, we cover the basics of the easier type, internal. When using internal CSS, you must add a new tag, <style>, inside the <head> tag.
![Page 47: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/47.jpg)
47
CSS
External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>.
Why Use External CSS? 1) It keeps your website design and
content separate. 2) It's much easier to reuse your CSS code
if you have it in a separate file. Instead of typing the same CSS code on
![Page 48: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/48.jpg)
48
CSS
every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
3) You can make drastic changes to your web pages with just a few changes in a single CSS file.
CSS Inline It is possible to place CSS right in the thick
of your HTML code, and this method of CSS usage is referred to as inline css.
![Page 49: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/49.jpg)
49
CSS
Inline CSS has the highest priority out of the three ways you can use CSS: external, internal, and inline. This means that you can override styles that are defined in external or internal by using inline CSS. However, inline CSS detracts from the true purpose of CSS, to separate design from content, so please use it sparingly.
![Page 50: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/50.jpg)
50
CSS Contd.
Example on Inline CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<!-- The EN stands for the language used in the DTD-->
<HTML><!--Inline styles--><HEAD><TITLE>Inline
Styles</TITLE></HEAD><BODY><P>Here is some text</P>
![Page 51: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/51.jpg)
51
CSS
<P >Here is some more text</P><!- - Style attribute allows you to declare
inline, it specifies a style for an element, semicolon specifies two properties - ->
<P STYLE = "font-size: 20pt; color: #0000FF">Even more text</P>
</BODY><HTML>
Save the file with .html extension and it is declared using STYLE attribute
![Page 52: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/52.jpg)
52
CSS Contd.
Example on Internal CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML><!--Advanced style sheets--><HEAD><TITLE>More Styles</TITLE><!- - This begins the style sheet section - -><STYLE TYPE = "text/css">
![Page 53: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/53.jpg)
53
CSS
A.nodec {text-decoration:none}<!- - Applies the text decoration property to
all A elements whose class attribute is set to nodec.Default browser rendering of an A element is to underline,but here it is set to none.The text-decoration property applies decorations to text within an element.Other possible values are overline(line above),line-through(strike) and blink.The .nodec appended to A is an extension of class styles - ->
![Page 54: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/54.jpg)
54
CSS Contd.
A:hover {text-decoration: underline; color: red; background-color: #CCFFCC}<!-- Property is followed by colon (:) and
multiple properties by semicolon--><!- - hover is a pseudo-class.Pseudo-classes
give the author access to content not specifically declared in the document.The hover pseudo-class is dynamically activated when the user moves the mouse cursor over an A element.- ->
![Page 55: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/55.jpg)
55
CSS
<!–- CSS is a powerful tool for universal formatting, each rule body begins and ends with curly braces-->
LI EM {color:red; font-weight:bold}<!- - declare a style for all EM(stress emphasis) elements
that are children of LI elements,Mushrooms will be red and bold, to apply style for both LI and EM separate the elements with comma.- ->
UL {margin-left: 75px}UL UL{text-decoration: underline; margin-left:15px }</STYLE></HEAD>
![Page 56: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/56.jpg)
56
CSS Contd.
<BODY><H1>Shopping list for
<EM>Monday</EM>:</H1><UL><L1>Milk</LI><LI>Bread<UL><LI>White bread</LI><LI>Rye bread</LI><LI>Whole wheat bread</LI>
![Page 57: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/57.jpg)
57
CSS
</UL></LI><LI>Rice</LI><LI>Potatoes</LI><LI>Pizza <EM>with mushroom</EM></LI></UL><P><A CLASS = "nodec" HREF =
"http://food.com">Go to the Grocery store</A></P>
</BODY></HTML>
![Page 58: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/58.jpg)
58
CSS
In Internal CSS STYLE tag is used in HEAD tag.
![Page 59: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/59.jpg)
59
CSS Contd.
Example on External CSS
Create a CSS file with the STYLE tag as below and save it with .css extension.
<!-- This begins the stylesheet--><STYLE TYPE = "text/css">EM{background-color:
#8000FF;color:white}H1{font-family: Arial, sans-serif}
![Page 60: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/60.jpg)
60
CSS
P{ font-size: 18pt}.blue{ color: blue}</STYLE>
Now create an HTML file with .html extension having a Link tag for linking
.css file, the advantage is as such that we can call the . css file as many times as we want in html file just like macros.
![Page 61: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/61.jpg)
61
CSS Contd.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><!--Style sheet in the header section.--><HEAD><TITLE>Style Sheets</TITLE><link rel="stylesheet" type="text/css"
href="Stylesheet.css" media="screen" /><!- - link rel is linking relationship- -></HEAD><BODY>
![Page 62: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/62.jpg)
62
CSS
<H1 CLASS = "blue">A Heading</H1><P >Here is some text . Here is some text .
Here is some text.<H1>Another Heading</H1><P CLASS = "blue">Here is some more
text<EM>more</EM>text . Here is some more text.</P>
</BODY></HTML>
![Page 63: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/63.jpg)
63
CSS Contd.
Linking External Style sheets
Create styles.css file as below
A{text-decoration:none}
A:hover{text-decoration: underline;color: red;background: #CCFFCC}
![Page 64: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/64.jpg)
64
CSS
LI EM{color:red; font-weight:bold}
UL{margin-left:2cm}
UL UL {text-decoration:underline; margin-left: .5cm}
![Page 65: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/65.jpg)
65
CSS Contd.
Create styles.html file with below code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML><!--Linking external style sheets--><HEAD><TITLE>Importing style sheets</TITLE>
![Page 66: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/66.jpg)
66
CSS Contd.
<LINK REL = "stylesheet" TYPE = "text/css" HREF = "styles.css">
</HEAD><BODY><H1>Shopping list for
<I>Monday</I>:</H1><UL><LI>Milk</LI><LI>Bread</LI><UL>
![Page 67: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/67.jpg)
67
CSS Contd.
<LI>White bread</LI><LI>Rye bread</LI><LI>Whole wheat bread<LI></UL></LI><LI>Rice</LI><LI>Potatoes</LI><LI>Pizza <I>with mushrooms</I> </LI></UL><A HREF = "http://food.com">Go to the
Grocery store</A>
![Page 68: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/68.jpg)
68
CSS
</BODY></HTML>
![Page 69: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/69.jpg)
69
CSS
Positioning Elements
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML, 5.0 Transitional//EN">
<HTML>
<!--Absolute positioning of elements--><HEAD><TITLE>Absolute Positioning</TITLE></HEAD>
![Page 70: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/70.jpg)
70
CSS
<BODY><IMG SRC = "images/Winter.jpg STYLE =
"position: absolute; top; 0px;left: 0px; z-index: 1><H1 STYLE = "position: absolute; top: 50px;
left: 50px;z-index: 3">Positioned Text</H1><IMG SRC = "images/Winter.jpg" STYLE =
"position: absolute; top:;25px;left: 100px; z-index: 2">
![Page 71: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/71.jpg)
71
CSS
<!- - position absolute removes normal flow of the document and gives greater control over how the document is displayed , position relative gives normal flow to the document - ->
<!- - z-index attribute allows you to properly layer overlapping elements . higher z-index value are displayed in front like 3 in front 1 at back- ->
</BODY></HTML>
![Page 72: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/72.jpg)
72
CSS Contd.
Backgrounds
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML>
<!-- Adding background images and identation-->
<HEAD><TITLE>Background Images</TITLE>
![Page 73: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/73.jpg)
73
CSS Contd.
<STYLE TYPE = "text/css">BODY { background-image:
url(images/Sunset.jpg); background-position:bottom right; background-repeat: no-repeat; background-attachment: fixed}P { font-size: 2em; color: #AA5588;text-indent: lem;<!—(lem)web page read more like a novel,first
line of every paragraph is indented- ->
![Page 74: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/74.jpg)
74
CSS
<!- - Position can be top, bottom, center, left, right. - ->
<!- - Background repeat controls the tiling of the background image,no repeat
only one copy of image is placed on screen,x-repeat tile horizontal image,y-repeat tile the vertical image - ->
<!- - Background-attachment:fixed fixes the image, scroll-moves the image- ->
![Page 75: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/75.jpg)
75
CSS Contd.
font-family: Arial,sans-serif}
.dark { font-weight: bold}<!—bold and normal--></STYLE></HEAD><BODY><P>This is sample text to fill in the page.<SPAN CLASS = "dark">This is some sample
text to fill in the page</SPAN>
![Page 76: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/76.jpg)
76
CSS
<!—SPAN is to apply styles or ID attributes to a block of text, with no line breaks,it is similar to DIV
This is some sample text to fill in the page.This is some sample text to fill in the page.This is some sample text to fill in the page.</P></BODY></HTML>
![Page 77: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/77.jpg)
77
CSS Contd.
Element Dimensions The dimensions of each element on the
page can be set using CSS.
<!DOCTYPE html><html><head><style>div.Scroll{background-color:#00FFFF;
![Page 78: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/78.jpg)
78
CSS Contd.
width:100px;height:100px;overflow:scroll;}
div.hidden {background-color:#00FF00;width:100px;height:100px;overflow:hidden;}
![Page 79: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/79.jpg)
79
CSS
</style></head>
<body><p>The overflow property specifies what to do if
the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p><!—This adds scroll bar to the text<div class="scroll">You can use the overflow
property when you want to have better control of the layout. The default value is visible.</div>
![Page 80: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/80.jpg)
80
CSS
<p>overflow:hidden</p><div class="hidden">You can use the
overflow property when you want to have better control of the layout. The default value is visible.</div>
</body></html>
![Page 81: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/81.jpg)
81
CSS
Borders
<!DOCTYPE html><html><head><style>p{border:5px solid red;}
![Page 82: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/82.jpg)
82
CSS
</style></head>
<body><p>This is some text in a paragraph.</p></body></html>
![Page 83: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/83.jpg)
83
CSS Contd.
User Style sheets
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML><!--User styles--><HEAD><TITLE>User Styles</TITLE><STYLE TYPE = "text/css">
![Page 84: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/84.jpg)
84
CSS Contd.
.note{font-size:1.5em}</STYLE></HEAD></BODY><P>Thanks for visiting my website<P/><P CLASS = "note">Please Note:This site
will be moving soon.Please check periodically for updates.</P>
<!—we multiply by 1.5 the font size of all elements with CLASS = “note”
![Page 85: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/85.jpg)
85
CSS
</BODY></HTML>
![Page 86: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/86.jpg)
86
XML
XML What is XML?XML stands for EXtensible Markup
LanguageXML is a markup language much like HTMLXML was designed to carry data, not to
display dataXML tags are not predefined. You must
define your own tagsXML is designed to be self-descriptiveXML is a W3C Recommendation
![Page 87: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/87.jpg)
87
XML
The Difference Between XML and HTMLXML is not a replacement for HTML.XML and HTML were designed with different
goals:XML was designed to transport and store
data, with focus on what data isHTML was designed to display data, with
focus on how data looksHTML is about displaying information, while
XML is about carrying information.
![Page 88: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/88.jpg)
88
XML Contd.
Display XML Data in an HTML Page
In the following example, we open an XML file ("cdcatalog.xml"), then we loop through each CD element, and display the value of the ARTIST element and the TITLE element in an HTML table:
XML File
![Page 89: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/89.jpg)
89
XML Contd.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy? --><CATALOG> //Root element
<CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY>
//Child elements.
![Page 90: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/90.jpg)
90
XML Contd.
<COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR> //Sub child elements</CD>
<CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY>
![Page 91: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/91.jpg)
91
XML Contd.
<COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR>
</CD></CATALOG>
HTML File
<html><body>
![Page 92: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/92.jpg)
92
XML Contd.
<script>if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera,
Safari
xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP"); }
![Page 93: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/93.jpg)
93
XML Contd.
xmlhttp.open("GET","cdcatalog.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");var
x=xmlDoc.getElementsByTagName("CD");for (i=0;i<x.length;i++)
![Page 94: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/94.jpg)
94
XML Contd.
{ document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>"); }
![Page 95: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/95.jpg)
95
XML
document.write("</table>");</script>
</body></html>
![Page 96: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/96.jpg)
96
XML
XML and XSL XML also has it's own styles language - XSL.
XSL stands for Extensible Styles Language and is a very powerful language for applying styles to XML documents. XSL has two parts - a formatting language and a transformation language.
The formatting language allows you to apply styles similar to what CSS does. Browser support for the XSL formatting language is limited at this stage.
![Page 97: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/97.jpg)
97
XML
The transformation language is known as XSLT (XSL Transformations). XSLT allows you to transform your XML document into another form. For example, you could use XSLT to dynamically output some (or all) of the contents of your XML file into an HTML document containing other content.
![Page 98: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/98.jpg)
98
XML
XSL (Extensible Style Language)
XSL defines the layout of an XML document much like CSS defines the layout of an HTML document-although XSL is much more powerful. An XSL style sheets provides the rules for displaying or organizing an XML documents data. The XML document that uses only HTML elements and attributes.This part of XSL concerned with transformation is called XSL Transformation(XSLT)
![Page 99: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/99.jpg)
99
xml
Navigate through XML nodes
Create the cdcatalog xml file
<?xml version="1.0" encoding="ISO-8859-1"?><!-- Edited by XMLSpy? --><CATALOG><CD>
<TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY>
![Page 100: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/100.jpg)
100
XML
<COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR>
</CD><CD>
<TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY>
![Page 101: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/101.jpg)
101
XML
<PRICE>9.90</PRICE><YEAR>1988</YEAR>
</CD>
</CATALOG>
![Page 102: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/102.jpg)
102
XML Contd.
Create HTML file of cdcatalog.html<!DOCTYPE html><html><head>
<script>if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera,
Safari xmlhttp=new XMLHttpRequest();
![Page 103: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/103.jpg)
103
XML Contd.
}else {// code for IE6, IE5 xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","cdcatalog.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML;
![Page 104: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/104.jpg)
104
XML Contd.
x=xmlDoc.getElementsByTagName("CD");i=0;
function displayCD(){artist=(x[i].getElementsByTagName("ARTIS
T")[0].childNodes[0].nodeValue);title=(x[i].getElementsByTagName("TITLE")
[0].childNodes[0].nodeValue);
![Page 105: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/105.jpg)
105
XML Contd.
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br>Title: " + title + "<br>Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}
function next()
![Page 106: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/106.jpg)
106
XML Contd.
{if (i<x.length-1) { i++; displayCD(); }}function previous(){
![Page 107: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/107.jpg)
107
XML Contd.
if (i>0) { i--; displayCD(); }}</script></head><body onload="displayCD()“>
![Page 108: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/108.jpg)
108
XML
<div id='showCD'></div><br><!--The <div> tag defines a division or a
section in an HTML document. The <div> tag is used to group block-
elements to format them with CSS.<input type="button" onclick="previous()"
value="<<" /><input type="button" onclick="next()"
value=">>" />
</body></html>
![Page 109: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/109.jpg)
109
XML
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:
![Page 110: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/110.jpg)
110
XML Contd.
Take a look at this XML file: The CD catalog
Then look at this style sheet: The CSS fileFinally, view:
The CD catalog formatted with the CSS file
XML FILE<?xml version="1.0" encoding="ISO-8859-
1"?><!-- Edited by XMLSpy? --><CATALOG>
![Page 111: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/111.jpg)
111
XML Contd.
<CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR>
</CD>
![Page 112: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/112.jpg)
112
XML Contd.
<CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR>
</CD>
</CATALOG>
![Page 113: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/113.jpg)
113
XML
Create CSS FileCATALOG{background-color: #ffffff;width: 100%;}CD{display: block;margin-bottom: 30pt;margin-left: 0;}
![Page 114: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/114.jpg)
114
XML
TITLE{color: #FF0000;font-size: 20pt;}ARTIST{color: #0000FF;font-size: 20pt;}COUNTRY,PRICE,YEAR,COMPANY{
![Page 115: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/115.jpg)
115
XML Contd.
display: block;color: #000000;margin-left: 20pt;}
HTML File to implement<?xml version="1.0" encoding="ISO-8859-1"?><!-- Edited by XMLSpy? --><?xml-stylesheet type="text/css"
href="cdcatalog.css"?><CATALOG>
![Page 116: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/116.jpg)
116
XML Contd.
<CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR>
</CD>
![Page 117: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/117.jpg)
117
XML
<CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR>
</CD></CATALOG>
![Page 118: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/118.jpg)
118
XML
XML Schema An XML Schema describes the structure of
an XML document.A schema is Microsofts expansion of the DTD is written in a format dis-similar to the format of XML.The W3C is currently developing a schema format called Document Content Description.(DCD).
![Page 119: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/119.jpg)
119
XML
An XML DocumentXML document called "shiporder.xml“<?xml version="1.0" encoding="ISO-8859-
1"?><shiporder orderid="889923"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="shiporder.xsd">
<!– xsd is xml schema definition file,ns is Namespaces provide a method to avoid element name conflicts.
![Page 120: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/120.jpg)
120
XML
<orderperson>John Smith</orderperson> <shipto> <name>Ola Nordmann</name> <address>Langgt 23</address>
<city>4000 Stavanger</city> <country>Norway</country> </shipto> <item> <title>Empire Burlesque</title>
<note>Special Edition</note> <quantity>1</quantity>
![Page 121: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/121.jpg)
121
XML
<price>10.90</price> </item> <item> <title>Hide your heart</title>
<quantity>1</quantity> <price>9.90</price> </item></shiporder>
Create an XML Schema
![Page 122: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/122.jpg)
122
XML
schema file ("shiporder.xsd")<?xml version="1.0" encoding="ISO-8859-
1" ?><xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
< - - xmlns is xml namespace,xs is xml schema- -><xs:simpleType name="stringtype"> <xs:restriction base="xs:string"/></xs:simpleType>
![Page 123: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/123.jpg)
123
XML
<xs:simpleType name="inttype"> <xs:restriction base="xs:positiveInteger"/></xs:simpleType>
<!- - The restriction element defines restrictions on a simpleType, simpleContent, or complexContent definition. - ->
<xs:simpleType name="dectype"> <xs:restriction base="xs:decimal"/></xs:simpleType>
<xs:simpleType name="orderidtype"> <xs:restriction base="xs:string">
![Page 124: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/124.jpg)
124
XML
<xs:pattern value="[0-9]{6}"/> </xs:restriction></xs:simpleType>
<xs:complexType name="shiptotype"> <xs:sequence> <xs:element name="name" type="stringtype"/>
<xs:element name="address" type="stringtype"/> <xs:element name="city" type="stringtype"/>
![Page 125: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/125.jpg)
125
XML
<xs:element name="country" type="stringtype"/> </xs:sequence></xs:complexType>
<xs:element name="shiporder" type="shipordertype"/></xs:schema>
![Page 126: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/126.jpg)
126
XML
Why Use XML Schemas?
XML Schemas Support Data TypesOne of the greatest strength of XML Schemas is the
support for data types.With support for data types:It is easier to describe allowable document contentIt is easier to validate the correctness of dataIt is easier to work with data from a databaseIt is easier to define data facets (restrictions on
data)It is easier to define data patterns (data formats)It is easier to convert data between different data
types
![Page 127: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/127.jpg)
127
XML
XML Schemas Secure Data Communication
When sending data from a sender to a receiver, it is essential that both parts have the same "expectations" about the content.
With XML Schemas, the sender can describe the data in a way that the receiver will understand.
![Page 128: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/128.jpg)
128
XML
XML Schemas are ExtensibleXML Schemas are extensible, because
they are written in XML.With an extensible Schema definition you
can:Reuse your Schema in other SchemasCreate your own data types derived from
the standard typesReference multiple schemas in the same
document
![Page 129: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/129.jpg)
129
XML
XML Advanced
XML on the Server
XML files are plain text files just like HTML files.
XML can easily be stored and generated by a standard web server.
![Page 130: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/130.jpg)
130
XML
XML files can be stored on an Internet server exactly the same way as HTML files.
<?xml version="1.0" encoding="ISO-8859-1"?><note> <from>Jani</from> <to>Tove</to> <message>Remember me this weekend</message></note> // Save with note.xml
![Page 131: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/131.jpg)
131
XML
Generating XML with ASP
<%response.ContentType="text/xml"response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>")response.Write("<note>")response.Write("<from>Jani</from>")response.Write("<to>Tove</to>")response.Write("<message>Remember me this weekend</message>")response.Write("</note>")%>
![Page 132: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/132.jpg)
132
XML
Generating XML with PHP<?php
header("Content-type: text/xml");echo "<?xml version='1.0' encoding='ISO-8859-1'?>";echo "<note>";echo "<from>Jani</from>";echo "<to>Tove</to>";echo "<message>Remember me this weekend</message>";echo "</note>";?>
![Page 133: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/133.jpg)
133
XML
Generating XML From a Database
<%response.ContentType = "text/xml"set conn=Server.CreateObject("ADODB.Connection")conn.provider="Microsoft.Jet.OLEDB.4.0;"conn.open server.mappath("/db/database.mdb")
sql="select fname,lname from tblGuestBook"set rs=Conn.Execute(sql)
response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")response.write("<guestbook>")while (not rs.EOF)
![Page 134: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/134.jpg)
134
XML
response.write("<guest>")response.write("<fname>" & rs("fname") & "</fname>")response.write("<lname>" & rs("lname") & "</lname>")response.write("</guest>")rs.MoveNext()wend
rs.close()conn.close()response.write("</guestbook>")%>
![Page 135: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/135.jpg)
135
XML
Transforming XML with XSLT on the Server
<%'Load XMLset xml = Server.CreateObject("Microsoft.XMLDOM")xml.async = falsexml.load(Server.MapPath("simple.xml"))
'Load XSLset xsl = Server.CreateObject("Microsoft.XMLDOM")xsl.async = falsexsl.load(Server.MapPath("simple.xsl"))
'Transform fileResponse.Write(xml.transformNode(xsl))%>
![Page 136: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/136.jpg)
136
XML
Example explainedThe first block of code creates an instance of
the Microsoft XML parser (XMLDOM), and loads the XML file into memory.
The second block of code creates another instance of the parser and loads the XSL file into memory.
The last line of code transforms the XML document using the XSL document, and sends the result as XHTML to your browser. Nice!
![Page 137: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/137.jpg)
137
XML
XML Related Technologies
Below is a list of XML technologies.XHTML (Extensible HTML)
A stricter and cleaner XML based version of HTML.
XML DOM (XML Document Object Model)A standard document model for accessing and manipulating XML.
![Page 138: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/138.jpg)
138
XML
XSL (Extensible Style Sheet Language) XSL consists of three parts:
XSLT (XSL Transform) - transforms XML into other formats, like HTML
XSL-FO (XSL Formatting Objects)- for formatting XML to screen, paper, etc
XPath - a language for navigating XML documentsXQuery (XML Query Language)
An XML based language for querying XML data.DTD (Document Type Definition)
A standard for defining the legal elements in an XML document.
XSD (XML Schema)An XML-based alternative to DTD.
![Page 139: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/139.jpg)
139
XML
XLink (XML Linking Language)A language for creating hyperlinks in XML documents.
XPointer (XML Pointer Language)Allows the XLink hyperlinks to point to more specific parts in the XML document.
SOAP (Simple Object Access Protocol)An XML-based protocol to let applications exchange information over HTTP.
WSDL (Web Services Description Language)An XML-based language for describing web services.
RDF (Resource Description Framework)An XML-based language for describing web resources.
RSS (Really Simple Syndication)A format for syndicating news and the content of news-like sites.
SVG (Scalable Vector Graphics) Defines graphics in XML format.
![Page 140: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/140.jpg)
140
XML
XML in Real Life
XMLNews is a specification for exchanging news and other information.
Using such a standard makes it easier for both news producers and news consumers to produce, receive, and archive any kind of news information across different hardware, software, and programming languages.
An example XMLNews document:
![Page 141: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/141.jpg)
141
XML
<?xml version="1.0" encoding="ISO-8859-1"?><nitf> <head> <title>Colombia Earthquake</title> </head> <body> <headline>
<hl1>143 Dead in Colombia Earthquake</hl1> </headline> <byline>
<!- - Solves the co/multi-author problem without modifying the theme. Uses a custom taxonomy, "Byline," that replaces the Display Author. - ->
![Page 142: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/142.jpg)
142
XML
<bytag>By Jared Kotler, Associated Press Writer</bytag>
<!-- Provide sidebar widgets that can be used to display posts from a set of tags in the sidebar.
</byline> <dateline> <location>Bogota, Colombia</location> <date>Monday January 25 1999 7:28 ET</date> </dateline> </body></nitf>
<!-- NITF. News Industry Text Format instance. Holds head and body.
![Page 143: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/143.jpg)
143
XML
XML Weather Service An example of an XML national weather
service from NOAA (National Oceanic and Atmospheric Administration):
<?xml version="1.0" encoding="ISO-8859-1" ?><current_observation>
<credit>NOAA's National Weather Service</credit>
![Page 144: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/144.jpg)
144
XML
<credit_URL>http://weather.gov/</credit_URL>
<image> <url>http://weather.gov/images/xml_logo.gif</url> <title>NOAA's National Weather Service</title> <link>http://weather.gov</link></image>
![Page 145: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/145.jpg)
145
XML
<location>New York/John F. Kennedy Intl Airport, NY</location><station_id>KJFK</station_id><latitude>40.66</latitude><longitude>-73.78</longitude><observation_time_rfc822>Mon, 11 Feb 2008 06:51:00 -0500 EST</observation_time_rfc822>
<weather>A Few Clouds</weather><temp_f>11</temp_f>
![Page 146: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/146.jpg)
146
XML
<temp_c>-12</temp_c><relative_humidity>36</relative_humidity><wind_dir>West</wind_dir>
<wind_degrees>280</wind_degrees><wind_mph>18.4</wind_mph><wind_gust_mph>29</wind_gust_mph>
<pressure_mb>1023.6</pressure_mb><pressure_in>30.23</pressure_in><dewpoint_f>-11</dewpoint_f>
![Page 147: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/147.jpg)
147
XML
dewpoint_c>-24</dewpoint_c><windchill_f>-7</windchill_f><windchill_c>-22</windchill_c><visibility_mi>10.00</visibility_mi><icon_url_base>http://weather.gov/weather/images/fcicons/</icon_url_base><icon_url_name>nfew.jpg</icon_url_name>
<disclaimer_url>http://weather.gov/disclaimer.html</disclaimer_url><copyright_url>http://weather.gov/disclaimer.html</copyright_url>
</current_observation>
![Page 148: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/148.jpg)
148
XML
XML - E4X
E4X adds direct support for XML to JavaScript. XML As a JavaScript Object E4X is an official JavaScript standard that adds direct
support for XML. With E4X, you can declare an XML object variable the
same way as you declare a Date or an Array object variable:
var x = new XML()
var y = new Date()
var z = new Array()
![Page 149: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/149.jpg)
149
XML
E4X is an ECMAScript (JavaScript) Standard
ECMAScript (European Computer Manufacturers Association Script)
ECMAScript is the official name for JavaScript. ECMA-262 (JavaScript 1.3) was standardized in December 1999.
E4X is an extension of JavaScript that adds direct support for XML. ECMA-357 (E4X) was standardized in June 2004.
![Page 150: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/150.jpg)
150
XML
The ECMA organization (founded in 1961) is dedicated to the standardization of Information and Communication
![Page 151: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/151.jpg)
151
XML
Technology (ICT) and ConsumerElectronics (CE). ECMA has developed
standards for:JavaScriptC# LanguageInternational Character SetsOptical DisksMagnetic TapesData CompressionData Communicationand much more...
![Page 152: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/152.jpg)
152
XML
Browser Support Firefox is currently the only browser with
relatively good support for E4X. There are currently no support for E4X in
Opera, Chrome, or Safari. So far there is no indication for of E4X
support in Internet Explorer.The Future of E4XE4X is not widely supported. Maybe it offers
too little practical functionality not already covered by other solutions:
![Page 153: Html ,css,xml](https://reader037.fdocuments.in/reader037/viewer/2022110115/54b430f24a795994258b4664/html5/thumbnails/153.jpg)
153
XML
For full XML processing, you still need the XML DOM and XPath
For accessing XMLHttpRequests, JSON is the preferred format.
For easy document handling, JQuery selectors are easier.