The document provides an overview of web programming and XML presented by Prof. Venkat Krishnan. It covers topics like HTML, CSS, JavaScript, ASP, XML, DOM and data binding, XSL, XSLT. It also discusses the history of the internet, technical terms like servers, clients, URLs, protocols. It explains markup languages and the basic structure of an HTML document with examples.

1. Web Programming & XML Module Presented by Prof Venkat Krishnan

2. Who am I??? Prof Venkat Krishnan SCJP SCJD Weblogic Certified Trainer IBM Certified Trainer NCST Trainer S P Jain Management Trainer MET eMBA Trainer K J Somaiya Management Trainer

3. Visiting Faculty at: S.P.Jain Inst of Management Somaiya Institute of Management CMIT Corporate Trainings offered at: Air India ABN Amro Kale Consultants Supreme Technologies IDBI Associated with: Champlain College (UK) Southern New Hampshire (UK) Malboro College (US) Charles Strut University (Aus) Northwood University (US) Prof.Venkat Krishnan

4. Topics Covered in this Module Internet & HTML CSS JavaScript ASP XML DOM & Data Binding XSL XSLT

5. Brief history of the Internet The Internet has revolutionized the computer and communications world like nothing before. The invention of the telegraph, telephone, radio, and computer set the stage for this unprecedented integration of capabilities. The Internet is at once a world-wide broadcasting capability a mechanism for information dissemination and A medium for collaboration and interaction between individuals and their computers without regard for geographic location.

6. The first recorded description of the social interactions that could be enabled through networking was a series of memos written by J.C.R. Licklider of MIT in August 1962 discussing his "Galactic Network" concept. He envisioned a globally interconnected set of computers through which everyone could quickly access data and programs from any site. In late 1966 MIT researcher Lawrence G. Roberts went to DARPA (Defense Advanced Research Projects Agency) to develop the computer network concept and quickly put together his plan for the "ARPANET" , publishing it in 1967.

7. In October 1972 Kahn organized a large, very successful demonstration of the ARPANET at the International Computer Communication Conference (ICCC). This was the first public demonstration of this new network technology to the public. It was also in 1972 that the initial "hot" application, electronic mail, was introduced.

8. Technical Words Client side v/s Server side Programming Web Server Web Server Software Web Client / Browser URL Domain (Physical Domain / Virtual Domain) wwwroot / index.html

9. TCP / IP Physical Layer (pure Hardware) Data Link Layer (splitting data into packets) Network Layer (sending to the correct network address and best route) Transport Layer (routing data) Application Layer

10. Host InterNIC ISP Structure of an IP Address (Eight bits each) WWW FTP Telnet

11. What is Markup? HTML is one of many markup languages that have appeared in recent years. In brief, a markup language provides guidelines for adding markup—in the form of special symbols—to text documents. These symbols describe the parts of the document. Markup is needed because computers are quite stupid when it comes to understanding text. A computer can’t really tell whether a certain portion of a text is an abstract, a title, a heading, or a paragraph. Without some kind of additional coding, the computer doesn’t know how to display the text so that it looks like an actual document.

12. Word processing programs provide the necessary coding by means of proprietary formatting codes, but these have a gigantic downside: They work only if you’re looking at the document using the same word processing program and type of computer that created it. If you ever tried to exchange a WordPerfect file with a Macintosh MS Word user, you can understand the difficulties involved.

13. HTML—a hypertext markup language What’s hypertext? In brief, hypertext is a way of organizing information so readers can choose their own path through the material. Instead of clicking through sequentially organized pages, a hypertext user clicks specially highlighted text, called a hyperlink (or just a link for short), to go directly to information of interest. When you mark up a document with HTML, you can define some of the text as a link, within which you embed the computer address of another resource on the Internet. This could be a document, a movie, a sound, an animation, or a file to download.

14. Eroding the structure/presentation distinction The whole purpose of a markup language lies in separating structure from presentation and, in so doing, enabling content developers to create documents that can be displayed faultlessly on any type of computer. But this distinction hasn’t fared well. By the time HTML got to Version 3.2, it had been seriously eroded. The reason lies in the Web’s rapid commercialization. Actually, HTML was initially designed to enable physics researchers to make their preliminary papers available to other physics researchers. Realizing that something drastic had to be done to rescue HTML, the World Wide Web Consortium (W3C)—the nonprofit, standards-setting body responsible for HTML—has published a specification for a new version of HTML, Version 4.01.

15. Every organization has its own rule-making body. In the case of the Web, the rule-making body is the World Wide Web Consortium (W3C). The W3C is composed of representatives from over 400 member companies who want to have a say in the standards. The W3C tries to balance the interests of the academy, the companies producing the Web browsers (notably Netscape and Microsoft), and the technology.

16. Syntax of HTML When you learn a language, you need to learn rules, called syntax . When you write your HTML, you use elements to define the structure of the document to define the presentation of your document, to define links to other documents and to specify desired behavior. Elements vs. Tags Understanding Your Options: Attributes

17. Even elements have parts – Nesting (Table) Every element has a name . The start tag is the element name surrounded by angle brackets. The end tag always starts with a slash, has the element name, and is surrounded by angle brackets. Most elements have content, which occurs between the start and the end tags. Some elements have no content. (BR) Some elements have no end tags. ( LI and p)

18. Features of Elements Couples only Always shop from a list (valign in images) In the case of valign (an attribute frequently used to tell the browser where on the page you want an image or a table to appear, relative to text), your choices are top, middle, bottom, and baseline. Please take a number (when you define a table, you may want the first column to be 25 percent of the screen width, the second column to be 50 percent of the screen width, and the third column to be 25 percent of the screen width.) The colors of the world

19. Using Special Characters: Entities entities are simply characters you may want to display that don’t appear on your keyboard or are characters with special significance to HTML (notably <,>,&, and “). The most common of these are ( © ) (copyright) and ( ™ ) (trademark). Whichever way you choose, you will find all entities begin with an ampersand (&) and end with a semicolon ( ; ): Using character notation. &copy; is the entity for the copyright symbol Using decimal notation. The decimal representation of a copyright symbol is &#169; <p>The paragraph element identifies some text as a paragraph:</p> <p>&lt;p&gt;This is a paragraph.&lt;/p&gt;</p>

20. Adding Comments to Your HTML Begin your comment with <!--. Any text you put after the two dashes is comment. The browser will not even try to read it. Even if you use special characters, such as ampersands and slashes and quotation marks and angle brackets, your browser ignores everything it comes across until it sees -->. Line Break and Horizontal Lines

21. The Basic Structure of an HTML Document: 1. Version information. This is also called the document type declaration used by this document. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4-01 Frameset//EN”“http://www.w3.org/ TR/html4/frameset.dtd”> 2. The HEAD. The HEAD, in addition to being part of the HTML element, is an element of its own. The HEAD element can contain the title and Metadata. 3. The BODY. Everything else you want to put into an HTML document belongs in the BODY . The BODY, like the HEAD, is also an element.

22. First Html <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4-01 Frameset//EN” “ http://www.w3.org/TR/html4/frameset.dtd”> <HTML> <HEAD> <TITLE>My Valid HTML document</TITLE> </HEAD> If this had been an actual HTML document, this is where we would have put the content. </BODY> </HTML>

23. What we haven’t mentioned yet is that HTML itself is an element. The HTML element has both a start tag and an end tag. The start tag should be placed after the version information and before the start tag of the HEAD element. The end tag goes at the very end of your document, after the end tag of the BODY element.

24. Title Search engines use the contents of the <title> bar when they list Web pages in response to a query. The title is also used for Bookmarks and in a browser’s History; therefore, keeps your titles short and sweet.

25. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN&quot; “ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Venkat IT Consulting Service</title> <meta name=&quot;kwrd&quot; content=&quot;IT consulting, SCJP, java guru, SCWCD&quot; /> <meta name=&quot;desc&quot; content=&quot;Training organization with experise&quot; /> </head> </html>

26. Although keywords and page descriptions are optional, search engines commonly use them to collect information about your Web site. Be sure to include detailed and concise information in your <meta /> tag if you want your Web site discovered by search engine robots.

27. Automatically redirecting users to another page You can use metadata in your header to send messages to Web browsers about how they should display or otherwise handle your Web page. Web builders commonly use the <Meta /> element this way to automatically redirect page visitors from one page to another. For example, if you’ve ever come across a page that says this page has moved. Please wait 10 seconds to be automatically sent to the new location. (Or something similar), you’ve seen this trick at work.

28. To use the <meta /> element to send messages to the browser, here are the general steps you need to follow: 1. Use the http-equiv attribute in place of the name attribute. 2. Choose from a predefined list of values that represents instructions for the browser. These values are based on instructions that you can also send to a browser in the HTTP header, but changing an HTTP header for a document is harder than embedding the instructions into the Web page itself.

29. To instruct a browser to redirect users from one page to another, here’s what you need to do in particular: 1. Use the <meta /> element with http-equiv=”refresh” . 2. Adjust the value of content to specify how many seconds before the refresh happens and what URL you want to jump to.

30. Older Web browsers may not know what to do with <meta /> elements that use the http-equiv element to create a redirector page. Be sure to include some text and a link on your page to enable a visitor to link manually to your redirector page if your <meta /> element fails to do the job. If a user’s browser doesn’t know what to do with your redirector information, the user simply clicks the link in the page body to go to the new page.

31. Attributes of Horizontal Line width: Specifies line width either in pixels or by percentage of display area width (which we call “the page” in discussion that follows) . For example, a rule can be 50 pixels wide or take 75 percent of the page. size: Specifies the height of the line in pixels. The default is 1 pixel. align: Specifies the horizontal alignment of the rule as either left (the default), center, or right. If you don’t define a width for your rule, it takes the entire width of the page. The alignment won’t make any difference. noshade: Specifies a solid line with no shading. By default, most browsers display hard rules with a shade.

32. Text Formatting Pre-Formatted Text Text Direction

33. Paragraphs Paragraphs are used more often in Web pages than any other kind of text block. HTML browsers don’t recognize the hard returns that you enter when you create your page inside an editor. You must use a <p> element to tell the browser to separate the contained block of text as a paragraph. To create a paragraph, follow these steps: 1. Add <p> in the body of the document. 2. Type the content of the paragraph. 3. Add </p> to close that paragraph.

34. Paragraph Alignment By default, the paragraph aligns to the left. You can use the align attribute with a value of center, right, or justify to override that default and control the alignment for any paragraph

35. Headings HTML includes six elements to help you define six different heading levels in your documents: <h1> is the most prominent heading (Heading 1) <h6> is the least prominent heading (Heading 6)

36. Quotation A block quote is a long quotation or excerpt from a printed source that you set apart on your page. Most Web browsers display block-quote content with a slight left indent.

37. Delete – Insert Text Most browsers will overstrike deleted text and underline inserted text. Some older browsers will display deleted or inserted text as plain text.

38. Hyper Links Within a page on the same site Link to a page on the internet Images as a link Opening Link in a New Window Linking to a location in the same page Mail to link Complicated Mail to link

39. Framesets The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy

40. Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done.

41. Multiple Columns Multiple Rows NoFrame Tag Mixing Frames NoResize Attribute of Frame Inline Frames

42. Tables Sample Examples of multiple rows and columns Vertical Header Cell Padding Cell Spacing Background Color / Image to a Table Background Color / Image to a Cell in the Table Table Align Table Frame

43. Lists Un-Ordered Lists Ordered Lists Definition Lists Numbered Lists Nested Lists

44. HTML Forms Text Field Password Field Checkbox Drop Down List Text Area Radio Button

45. Images Background Image Aligning Images Floating Images Image Maps