Webtech (Unit2 & 3) : - HTML - XML
Webtech (Unit2 & 3) : - HTML - XML
HTML XML
HTML
HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags 1.HTML uses markup tags to describe web pages 2.Markup tags define layout of web page Hypertext is text which contains links to other texts.
OUTPUT IN BROWSER
This is a first header
This is a second header
This is a third header
This is a forth header
This is a fifth header
This is a sixth header
OUTPUT IN BROWSER
This is a simple text Varsha is sweet and Jayashree is very naughty!! But Sachin is a serious guy And Harshad seems to be studious.
BULLET
<html> <body> <ul type="disc"> <li>First disc</li> <li>Second disc</li> <li>Third disc</li> <li>Forth disc</li> <li> and so on</li> </ul> <ul type="circle"> <li>First circle</li> <li>Second circle</li> <li>Third circle</li> <li>Forth circle</li> <li> and so on</li> </ul> <ul type="square"> <li>First square</li> <li>Second square</li> <li>Third square</li> <li>Forth square</li> <li> and so on</li> </ul> </body> </html>
OUTPUT IN BROWSER
First disc Second disc Third disc Forth disc and so on First circle Second circle Third circle Forth circle and so on First square Second square Third square Forth square and so on
OUTPUT IN BROWSER
A. First
B. Second C. Third D. Forth E. and so on The list is starting from 5 5. Ice cream 6. Mango 7. Juice 8. Pop Corn 9. and so on
OUTPUT IN BROWSER
This is a link
Forms inHTML
An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
OUTPUT IN BROWSER
Radio Form
<form name="myform">
<div align="left"><br> <input type="radio" name="group1" value="Mango">Mango<br> <input type="radio" name="group1" value="Apple" checked> Apple<br> <input type="radio" name="group1" value="Grapes"> Grapes <br><br><br>
OUTPUT IN BROWSER
Mango Apple Grapes Rose Lotus Jasmine
OUTPUT IN BROWSER
Mango Apple Guava
Buttons(SOURCE HTML)
<form name="myform" action="http://www.Mydomain.com/test_button.c gi" method="POST"> <div align="center"> <br><br> <input type="text" size="35" value="Enter your name "> <br><input type="submit" value="Send"> <input type="reset" value="Reset"><br> </div> </form>
OUTPUT IN BROWSER
Enter Your name SUBMIT RESET
Mail Form
<html> <body>
Mail Form
<br> Message: <br> <textarea cols="40" rows="10" name="message"> </textarea> <br> <input type="submit" value="Send"> <input type="reset" value="Reset">
TABLE
The HTML table model allows authors to arrange: Data text, Preformatted text Images, links, forms, form fields, Other tables, etc.
TABLE Contd
When we put a lot of text in a table then we find that the text tends to brush up to the border of the table and it looks a bit cramped. Cell padding puts some space between the border of the cell and the text Cell spacing puts some space between the cells themselves in the table
TABLE4(Background color )
<table border="2"> <th bgcolor=yellow>Name</th> <th bgcolor=yellow>Marks</th> <tr align=center> <td bgcolor=red>A</td> <td bgcolor=green>92</td></tr> <tr align=center> <td bgcolor=green>B</td> <td bgcolor=red>90</td></tr>
</table>
<! OUTPUT: Table_demo3.html
TABLE5 (rowspan,colspan)
<table border="5"> <tr align=center > <td colspan=2>First</td></tr> <tr align=center> <td>Third</td> <td>Fourth</td></tr> </table> <br><br> <table border="5"> <tr align=center > <td rowspan=2>First</td><td>Second</tr> <tr align=center> <td>Third</td> </tr> </table> <! OUTPUT: Table_demo5.html
Frames
Frames allows to present documents in multiple views. We can keep certain information visible, at the same time other views are scrolled or replaced. For Example 1.First form can display a company information 2.Second form can be a navigation menu. 3.Third frame may display selected document that can be scrolled or replaced by the navigating in the second frame.
Frames Example1
<html> <head> <title>My Frames Page </title> </head> <frameset cols="150,*"> <frame src="G:\\WebTech\\bulleted1.html" name="Left_Vertical"> <frameset rows="*,120"> <frame src="G:\\WebTech\\bulleted2.html" name="Right_top"> <frame src="G:\\WebTech\\bulleted3.html" name="Right_bottom"> </frameset> </frameset> </html>
Frames Example2
<html> <head> <title>My Frames Page </title> </head> <frameset cols="150,*"> <frame src="G:\\WebTech\\bulleted1.html" name="Left_Vertical"> <frameset rows="*,120"> <frame src="G:\\WebTech\\bulleted2.html" name="Right_top"> <frame src="G:\\WebTech\\bulleted3.html" name="Right_bottom"> </frameset> </frameset> </html>
Frames Example3
<html>
<head> <title>My Frames Page</title> </head> <frameset cols="150,*"> <frame src="E:\\WebTech\\HTML\\bulleted1.html" name="Left_Verical"> <frameset rows="100,*"> <frame src="E:\\WebTech\\HTML\\bulleted2.html" name="Right_top" noresize scrolling=auto> <frame src="E:\\WebTech\\HTML\\bulleted3.html" name="Right_bottom" noresize scrolling=no> </frameset> </frameset>
Frames Example2
<html> <head> <title>My Frames Page </title> </head> <frameset cols="150,*"> <frame src="G:\\WebTech\\bulleted1.html" name="Left_Vertical"> <frameset rows="*,120"> <frame src="G:\\WebTech\\bulleted2.html" name="Right_top"> <frame src="G:\\WebTech\\bulleted3.html" name="Right_bottom"> </frameset> </frameset> </html>
EXTERNAL CSS
<!- - The file name ex1.css and can be opened in notepad.--> h1 { font-family:Arial } h2 { font-family:times new roman; color:red; left:20px } h3 { font-family:arial; color:blue; } h4 {
OUTPUT IN BROWSER
This page is created using External Style Sheet This line is aligned left and red colored. The External style sheet is the compact representation of Cascading Style Sheets. This paragraph is written in Monotype Corsiva font with font size of 14. This is a blue colored line.
XML
XML stands for eXtensible Markup Language. XML is designed to transport and store data. XML is important to know, and very easy to learn. XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags
XML document is human readable and we can edit any XML document in simple text editors.
XML
The XML document is language neutral o It means a Perl program can generate an XML document and this document can be parsed by Perl.
Every XML document has a tree structure. Hence complex data can be arranged systematically and can be understood in simple manner. XML files are independent of an operating system.
XML
XML is not a replacement for HTML. XML and HTML were designed with different goals: o XML was designed to transport and store data, with focus on what data is
o
HTML was designed to display data, with focus on how data looks
XML
XML Does Not DO Anything XML is created to structure, store, and transport information The following example is a note to Tove, from Jani, stored as XML:
Partial Real Life Example XML Data to store & Transfer data
<studentinfo> <student> <stuid>2001 </stuid>. <name> Parul</name>. <address>xyz</address> <college>SRMCEM</college> <branch>CS</branch> </student> <student> <stuid>1001</stuid>. <name> Puneet</name>. <address>xyz</address> <college>SRMCEM</college> <branch>Mechanical</branch> </student>
Partial Real Life Example XML Data to store & Transfer data <student>
<stuid>2005 </stuid>. <name> Shekharan</name>. <address>mano</address> <college>SRMCEM</college> <branch>CS</branch> </student> <studentinfo> Think a scenario of 10000 student record stored in Sun Solaris system at Lucknow Send them to Mac (Apple M/C) located at UK. Receive Data at UK; retrieve info though a program (Parser?) Store the parsed data on Mac database.
In XML Basic Entity is Element. The Elements are used to defined the tags.
XML Elements
<Person> <Personal-Info> <Name>My Name is Ram</Name> <City>I live in Pune</City> </Personal-Info> <Hobby> <first>I like reading</first> <second>I like programming</second> <third>I like singing</third> </Hobby> </Person> Person is a root element. The root element is parent of all other elements
in XML documents. The other elements are called container elements. There can be one or more elements inside the container elements such elements are called the child elements. Person-info is container element which contains child elements Name and City.
XMLAttributes
In XML, like HTML, an attribute is a part of an element that provides additional information about that element. The attributes must be enclosed within quotes or single quote For example: <Person flag=true color=Fair> o <name> samit</name> o <grade>B</name> <Person>
XML
XML Separates Data from HTML If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time the data changes. With XML, data can be stored in separate XML files. This way you can concentrate on using HTML for layout and display, and be sure that changes in the underlying data will not require any changes to the HTML. With a few lines of JavaScript code, you can read an external XML file and update the data content of your web page.
XML
XML Simplifies Data Sharing In the real world, computer systems and databases contain data in incompatible formats. XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data. This makes it much easier to create data that can be shared by different applications. XML Simplifies Data Transport One of the most time-consuming challenges for developers is to exchange data between incompatible systems over the Internet. Exchanging data as XML greatly reduces this complexity, since the data can be read by different incompatible applications.
XML
XML is Used to Create New Internet Languages A lot of new Internet languages are created with XML. Here are some examples:
XHTML(XHTML combines the flexibility of HTML with the extensibility of XML) WSDL for describing available web services. It is also used to locate Web services WAP(Wireless Application Protocol. It is a specification for a set of communication protocols to standardize the way that wireless devices, such as cellular telephone and radio transceivers, can be used for Internet access, including email, the World Wide Web, newsgroups, and instatnt messaging WML(Wireless Markup Language) as markup languages for handheld devices.
XML Example
<?xml version="1.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. It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set). The next line describes the root element of the document (like saying: "this document is a note"): The next 4 lines describe 4 child elements of the root (to, from, heading, and body):
XML Structure
<bookstore> <book category="CHILDREN"> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="WEB"> <title>Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore> <bookstore> and <book> have element contents because they contain other elements. <book> also has an attribute (category="CHILDREN"). <title>, <author>, <year>, and <price> have text content because they contain text.
DTD
A Document Type Definition (DTD) defines the legal building blocks of an XML document. It defines the document structure with a list of legal elements and attributes.
Interpretation
The DTD of previous example is interpreted like th !DOCTYPE note defines that the root element of this document is note !ELEMENT note defines that the note element contains four elements: "to,from,heading,body" !ELEMENT to defines the to element to be of type "#PCDATA" !ELEMENT from defines the from element to be of type "#PCDATA" !ELEMENT heading defines the heading element to be of type "#PCDATA" !ELEMENT body defines the body element to be of type "#PCDATA"
This is the same XML document as previous example, but with an external DTD:
<!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)>
display
Catalog.dtd
<?xml version="1.0" encoding="UTF-8"?> <!ELEMENT Catalog (Book)*> <!ELEMENT Book ( Title, Author, Publication, Edition, ISBN, Price ) > <!ELEMENT Title (#PCDATA)> <!ELEMENT Author (#PCDATA)> <!ELEMENT Publication (#PCDATA)> <!ELEMENT Edition (#PCDATA)> <!ELEMENT ISBN (#PCDATA)> <!ELEMENT Price (#PCDATA)>
display
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="library.css"?> <Catalog> <Book> <Title>XML Bible</Title> <Author>Winston</Author> <Publication>Wiely</Publication> <Edition>Fifth Edition</Edition> <ISBN>0-7645-4760-7</ISBN> <Price>$40.5</Price> </Book> </Catalog>
display
this is the file "note.dtd" which contains the DTD: With a DTD, each of your XML files can carry a description of its own format. With a DTD, independent groups of people can agree to use a standard DTD for interchanging dat Your application can use a standard DTD to verify that the data you receive from the outside world is valid. You can also use a DTD to verify your own data.
XML Schema
Unlike DTDs, an XML Schema allows the content of an element or attribute to be validated against a data type. For example, an attribute might be constrained to hold only a valid date or a decimal number.
XML Schema
XML Schemas are extensible to future additions XML Schemas are richer and more powerful than DTDs XML Schemas are written in XML XML Schemas support data types XML Schemas support namespaces
Types
With support for data types:
It is easier to describe allowable document content It is easier to validate the correctness of data It is easier to work with data from a database It 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
When sending data from a sender to a receiver, it is essential that both parts have the same "expectations" about the content. A date like: "03-11-2004" will, in some countries, be interpreted as 3.November and in other countries as 11.March. <date type="date">2004-03-11</date> ensures a mutual understanding of the content, because the XML data type "date" requires the format "YYYY-MM-DD".
<?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs= "http://www.w3.org/2001/XMLSchema" > <xs:element name="Student_Name type="xs:string" /> </xs:schema> xs is qualifier to identify the schema element and types. xs:schema is root element it takes the attribute xmnls:xs which takes the value http://www.w3.org/2001/XMLSchema xs:element defines the xml element with name and Type.
Scchema
Scchema
<?xml version="1.0" encoding="UTF-8"?> <Student_Name xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "stringType.xsd"> Arun </Student_Name>
xmls:xsi indicates that XML documents is an instance of XML schema. It comes from the namespace http://www.w3.org /2001/XMLSchema-instance.
Scchema
To tie this XML document with some Schema definition use the attribute xsl:noNamespaceSchemaLocation. The value that can be passed to this attribute is the name of xsd file StudentSchemaLocation.xsd
<?xml version="1.0"?> <xs:schema xmlns:xs= http://www.w3.org/2001/XMLSchema"> <xs:element name="Student"> <xs:complexType> <xs:sequence> <xs:element name="name" type="xs:string"/> <xs:element name="address" type="xs:string"/> <xs:element name="marks" type="xs:string"/> </xs:sequence> </xs:complexType> </xs:element> </xs:schema>
<?xml version="1.0" encoding="UTF-8"?> <Student xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "StudentSchema.xsd"> <name>Anand</name> <address>Pune</address> <std>Second</std> <marks>70 percent</marks> </Student>
<?xml version="1.0" encoding="UTF-8"?> <Student xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "StudentSchema.xsd"> <name>Anand</name> <address>Pune</address> <std>Second</std> <marks>70 percent</marks> </Student>
<?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XM <xs:element name="Student"> <xs:complexType> <xs:sequence> <xs:element name="Stud_Name" type="xs:string"/ <xs:element name="Roll_No" type="xs:integer maxOccurs="3"/> </xs:sequence> </xs:complexType> </xs:element> </xs:schema>
<?xml version="1.0" encoding="UTF-8"?> <Student xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "complexType8.xsd"> <Stud_Name>Jayashree</Stud_Name> <Roll_No>10</Roll_No> <Roll_No>20</Roll_No> <Roll_No>30</Roll_No> <Roll_No>40</Roll_No> </Student>