Scribd
Upload
128 views

Internet 2nd Notes

The document provides information on HTML, DHTML, XHTML and XML. HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark up headings and paragraphs. DHTML allows changing HTML elements dynamically using scripts, CSS and the DOM. XHTML is a stricter version of HTML that follows XML syntax rules. XML is used to transport and store data, with user-defined tags, while HTML focuses on displaying data.

Uploaded by

Manoj Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
128 views

Internet 2nd Notes

The document provides information on HTML, DHTML, XHTML and XML. HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark up headings and paragraphs. DHTML allows changing HTML elements dynamically using scripts, CSS and the DOM. XHTML is a stricter version of HTML that follows XML syntax rules. XML is used to transport and store data, with user-defined tags, while HTML focuses on displaying data.

Uploaded by

Manoj Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

What is HTML:HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages

HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags.

HTML Headings HTML headings are defined with the <h1> to <h6> tags.

Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>


HTML Paragraphs HTML paragraphs are defined with the <p> tag.

Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>


HTML Links HTML links are defined with the <a> tag.

Example <a href="http://www.w3schools.com">This is a link</a>


Note: The link address is specified in the href attribute. (You will learn about attributes in a later chapter of this tutorial)

DHTML:DHTML is not a programming language, and technically not a markup language either. You don't need to add a .dhtml extension of a DHTML enabled page. DHTML pages are written in regular HTML/XHTML markup. Dynamic HTML is only a marketing term invented by Netscape and Microsoft for various technologies abilities included in their version 4 browsers. When thinking of dynamic HTML, you need to remember the qualities of standard HTML, especially that once a page is loaded from the server, it will not change until another request comes to the server. Dynamic HTML give you more control over the HTML elements and allows them to change at any time, without returning to the Web server. There are four parts to DHTML:

Document Object Model (DOM) (definition) Scripts Cascading Style Sheets (CSS) XHTML

DOM The DOM is what allows you to access any part of your Web page to change it with DHTML. Every part of a Web page is specified by the DOM and using its consistent naming conventions you can access them and change their properties. Scripts Scripts written in either JavaScript or ActiveX are the two most common scripting languages used to activate DHTML. You use a scripting language to control the objects specified in the DOM.

Cascading Style Sheets


CSS is used in DHTML to control the look and feel of the Web page. Style sheets define the colors and fonts of text, the background colors and images, and the placement of objects on the page. Using scripting and the DOM, you can change the style of various elements. XHTML XHTML or HTML 4.x is used to create the page itself and build the elements for the CSS and the DOM to work on. There is nothing special about XHTML for DHTML - but having valid XHTML is even more important, as there are more things working from it than just the browser. Features of DHTML:There are four primary features of DHTML:

1. 2. 3. 4.

Changing the tags and properties Real-time positioning Dynamic fonts (Netscape Communicator) Data binding (Internet Explorer)

Changing the tags and properties This is one of the most common uses of DHTML. It allows you to change the qualities of an HTML tag depending on an event outside of the browser (such as a mouse click, time, or date, and so on). You can use this to preload information onto a page, and not display it unless the reader clicks on a specific link. Real-time postioning When most people think of DHTML this is what they expect. Objects, images, and text moving around the Web page. This can allow you to play interactive games with your readers or animate portions of your screen. Dynamic Fonts This is a Netscape only feature. Netscape developed this to get around the problem designers had with not knowing what fonts would be on a reader's system. With dynamic fonts, the fonts are encoded and downloaded with the page, so that the page always looks how the designer intended it to. Data binding This is an IE only feature. Microsoft developed this to allow easier access to databases from Web sites. It is very similar to using a CGI to access a database, but uses an ActiveX control to function. This feature is very advanced and difficult to use for the beginning DHTML writer XHTML:XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and more strict version of HTML 4.01. If you already know HTML then you need to give littel attention to learn this latest variant of HTML. XHTML stands for EXtensible HyperText Markup Language and is the next step in the evolution of the Internet. The XHTML 1.0 is the first document type in the XHTML family. XHTML was developed by the W3C to help web developers make the transition from HTML to XML. By migrating to XHTML today, web developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility. Developers who migrate their content to XHTML 1.0 will realize the following benefits:

XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools. XHTML documents can be written to operate better than they did before in existing browsers as well as in new browsers. XHTML documents can utilize applications like scripts and applets that rely upon either the HTML Document Object Model or the XML Document Object Model.

XHTML has a more strict syntax rules in comparison of HTML. XHTML gives you a more consistent, well structured format so that your webpages can be easily parsed and processed by present and future web browsers. It also makes your website more easy to maintain, edit, convert and format in the long run. Since XHTML is an official standard of the World Wide Web Consortium (W3C), your website will more likely will be more compatible to more browsers and will be rendered more accurately. XHTML combines strength of HTML and XML and XHTML pages can be rendered by all XML enabled devices.

XHTML syntax is very similar to HTML syntax and almost all the valid HTML elements are valid in XHTML as well. But when you write an XHTML document you are have to pay a bit extra attention to make your HTML document compliance to XHTML. Here are the important points to remember while writing a new XHTML document or converting existing HTML document into XHTML document:

XHTML document must have a DOCTYPE declaration at the top of the document. All XHTML tags and attributes should be written in lower case only. All the XHTML tags will have their closing tags. All the attribute values must be quoted. Attribute minimization is forbidden. The id attribute replaces the name attribute. The language attribute of the script tag is deprecated All the tags should be properly nested Element Prohibitions

DOCTYPE Declaration:
All XHTML documents must have a DOCTYPE declaration at the top of document. There are three types of DOCTYPE which are discussed in detail in XHTML Doctypes chapter. Below is one of the examples of using DOCTYPE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Case Sensitivity:
XHTML is case sensitive markup language, more strictly all the XHTML tags and attributes should be written in lower case only

Closing Tags:
Each and every XHTML tag should have an equivalent closing tags, even empty elements should also have closing tags. Here is the example showing the difference:

<!-- This is invalid in XHTML --> <p>This paragraph is not written according to XHTML syntax. <!-- This is also invalid in XHTML --> <img src="/images/xhtml.gif">
Below is the correct way of writing above tags in XHTML. Difference is that, here we have closed both the tags properly.

<!-- This is valid in XHTML --> <p>This paragraph is not written according to XHTML syntax.</p> <!-- This is also valid now --> <img src="/images/xhtml.gif" />

Simple xhtml programme:<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en"> <head> <title>Every document must have a title</title> </head> <body> ...your content goes here... </body> </html>

XML:- XML was designed to transport and store data.HTML was designed to display
data.
XML XML XML XML XML XML stands for EXtensible Markup Language is a markup language much like HTML was designed to carry data, not to display data tags are not predefined. 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. XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is HTML was designed to display data, with focus on how data looks

HTML is about displaying information, while XML is about carrying information. XML is a software- and hardware-independent tool for carrying information. In HTML, some elements do not have to have a closing tag:

<p>This is a paragraph. <br>


In XML, it is illegal to omit the closing tag. All elements must have a closing tag:

<p>This is a paragraph.</p> <br />

XML tags are case sensitive. The tag <Letter> is different from the tag <letter>.

Opening and closing tags must be written with the same case:

<Message>This is incorrect</message> <message>This is correct</message>


In XML, the attribute values must always be quoted. Program:Display XML Data in an HTML Page In the following example, we open an XML file ("cd_catalog.xml"), then we loop through each CD element, and display the value of the ARTIST element and the TITLE element in an HTML table:

Example <html> <body> <script> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","cd_catalog.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; document.write("<table border='1'>"); var x=xmlDoc.getElementsByTagName("CD"); for (i=0;i<x.length;i++) { document.write("<tr><td>"); document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeVa lue); document.write("</td><td>"); document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeVal ue); document.write("</td></tr>"); } document.write("</table>");

</script> </body> </html>

XML namespaces:XML Namespaces provide a method to avoid element name conflicts.

Name Conflicts In XML, element names are defined by the developer. This often results in a conflict when trying to mix XML documents from different XML applications. This XML carries HTML table information: <table> <tr> <td>Apples</td> <td>Bananas</td> </tr> </table> This XML carries information about a table (a piece of furniture): <table> <name>African Coffee Table</name> <width>80</width> <length>120</length> </table> If these XML fragments were added together, there would be a name conflict. Both contain a <table> element, but the elements have different content and meaning. An XML parser will not know how to handle these differences.

Solving the Name Conflict Using a Prefix Name conflicts in XML can easily be avoided using a name prefix. This XML carries information about an HTML table, and a piece of furniture:

<h:table> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> In the example above, there will be no conflict because the two <table> elements have different names.

XML Namespaces - The xmlns Attribute When using prefixes in XML, a so-called namespace for the prefix must be defined. The namespace is defined by the xmlns attribute in the start tag of an element. The namespace declaration has the following syntax. xmlns:prefix="URI". <root> <h:table xmlns:h="http://www.w3.org/TR/html4/"> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table xmlns:f="http://www.w3schools.com/furniture"> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root> In the example above, the xmlns attribute in the <table> tag give the h: and f: prefixes a qualified namespace. When a namespace is defined for an element, all child elements with the same prefix are associated with the same namespace.

XML Schema:XML Schema is an XML-based alternative to DTD(Document Type Definition). An XML schema describes the structure of an XML document. The XML Schema language is also referred to as XML Schema Definition (XSD).

The purpose of an XML Schema is to define the legal building blocks of an XML document, just like a DTD. An XML Schema: defines defines defines defines defines defines defines defines elements that can appear in a document attributes that can appear in a document which elements are child elements the order of child elements the number of child elements whether an element is empty or can include text data types for elements and attributes default and fixed values for elements and attributes

We think that very soon XML Schemas will be used in most Web applications as a replacement for DTDs. Here are some reasons: XML XML XML XML XML XML Schemas are extensible to future additions Schemas are richer and more powerful than DTDs Schemas are written in XML Schemas support data types Schemas support namespaces Schema became a W3C Recommendation 02. May 2001.

XML Schemas are much more powerful than DTDs

One of the greatest strength of XML Schemas is the support for data types. With support for data types: It It It It It It is is is is is is easier easier easier easier easier easier to to to to to to describe allowable document content validate the correctness of data work with data from a database define data facets (restrictions on data) define data patterns (data formats) convert data between different data types

Another great strength about XML Schemas is that they are written in XML. Some benefits of that XML Schemas are written in XML: You don't have to learn a new language You can use your XML editor to edit your Schema files

You can use your XML parser to parse your Schema files You can manipulate your Schema with the XML DOM You can transform your Schema with XSLT

XML Schemas are extensible, because they are written in XML. With an extensible Schema definition you can: Reuse your Schema in other Schemas Create your own data types derived from the standard types Reference multiple schemas in the same document it must begin with the XML declaration it must have one unique root element start-tags must have matching end-tags elements are case sensitive all elements must be closed all elements must be properly nested all attribute values must be quoted entities must be used for special characters

What is the DOM(Document Object)? The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents like XML and HTML: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The DOM is separated into 3 different parts / levels: Core DOM - standard model for any structured document XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents

The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.

What is the HTML DOM? The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them. If you want to study the HTML DOM, find the HTML DOM tutorial on our Home page.

What is the XML DOM? The XML DOM is: A standard object model for XML A standard programming interface for XML Platform- and language-independent A W3C standard

The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them. In other words: The XML DOM is a standard for how to get, change, add, or delete XML elements.

In the DOM, everything in an XML document is a node.

DOM Nodes According to the DOM, everything in an XML document is a node. The DOM says: The entire document is a document node Every XML element is an element node The text in the XML elements are text nodes Every attribute is an attribute node Comments are comment nodes

The XML DOM views an XML document as a tree-structure. The tree structure is called a node-tree. All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created. The node tree shows the set of nodes, and the connections between them. The tree starts at the root node and branches out to the text nodes at the lowest level of the tree:

The image above represents the XML file books.xml.

Node Parents, Children, and Siblings The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships. Parent nodes have children. Children on the same level are called siblings (brothers or sisters). In a node tree, the top node is called the root Every node, except the root, has exactly one parent node A node can have any number of children A leaf is a node with no children Siblings are nodes with the same parent

Most browsers have a built-in XML parser to read and manipulate XML. The parser converts XML into a JavaScript accessible object (the XML DOM).
XML Parser

The XML DOM contains methods (functions) to traverse XML trees, access, insert, and delete nodes. However, before an XML document can be accessed and manipulated, it must be loaded into an XML DOM object. An XML parser reads XML, and converts it into an XML DOM object that can be accessed with JavaScript. Most browsers have a built-in XML parser.

roperties and methods define the programming interface to the XML DOM.

Programming Interface
The DOM models XML as a set of node objects. The nodes can be accessed with JavaScript or other programming languages. In this tutorial we use JavaScript. The programming interface to the DOM is defined by a set standard properties and methods. Properties are often referred to as something that is (i.e. nodename is "book"). Methods are often referred to as something that is done (i.e. delete "book").

XML DOM Properties These are some typical DOM properties: x.nodeName - the name of x x.nodeValue - the value of x x.parentNode - the parent node of x x.childNodes - the child nodes of x x.attributes - the attributes nodes of x

Note: In the list above, x is a node object.

XML DOM Methods x.getElementsByTagName(name) - get all elements with a specified tag name x.appendChild(node) - insert a child node to x x.removeChild(node) - remove a child node from x

SAX (Simple API for XML) is an application program interface (API) that allows a programmer to interpret a Web file that uses the Extensible Markup Language (XML) that is, a Web file that describes a collection of data. SAX is an alternative to using the Document Object Model (DOM) to interpret the XML file. As its name suggests, it's a simpler interface than DOM and is appropriate where many or very large files are to be processed, but it contains fewer capabilities for manipulating the data content. SAX:- is an event-driven interface. The programmer specifies an event that may happen and, if it does, SAX gets control and handles the situation. SAX works directly with an XML parser.

SAX was developed collaboratively by members of the XML-DEV mailing list (currently hosted by OASIS). The original version of SAX, which was specific to Java, was the first API for XML in Java to gain broad industry support.

XCL:- XSL stands for EXtensible Stylesheet Language. The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an XML-based Stylesheet Language. XML does not use predefined tags (we can use any tag-names we like), and therefore the meaning of each tag is not well understood. A <table> tag could mean an HTML table, a piece of furniture, or something else - and a browser does not know how to display it. XSL describes how the XML document should be displayed! XSL - More Than a Style Sheet Language XSL consists of three parts: XSLT - a language for transforming XML documents XPath - a language for navigating in XML documents XSL-FO - a language for formatting XML documents

XSLT is a language for transforming XML documents into XHTML documents or to other XML documents. XPath is a language for navigating in XML documents.

What is XSLT? XSLT XSLT XSLT XSLT XSLT stands for XSL Transformations is the most important part of XSL transforms an XML document into another XML document uses XPath to navigate in XML documents is a W3C Recommendation

XSLT = XSL Transformations XSLT is the most important part of XSL. XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element.

With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more. A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-tree. XSLT Uses XPath XSLT uses XPath to find information in an XML document. XPath is used to navigate through elements and attributes in XML documents. If you want to study XPath first, please read our XPath Tutorial.

How Does it Work? In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, XSLT will transform the matching part of the source document into the result document.

XSLT is a W3C Recommendation XSLT became a W3C Recommendation 16. November 1999.

You might also like