© IT Funda Corporation (http://www.itfundacorporation.com/) Visit http://www.dotnetfunda.com for .NET Articles, Tutorials, Forums, Career Advice & more Visit http://www.itfunda.com for .NET online training and training materials Author: Sheo Narayan Web Programming Introduction Introduction of browsers and familiarization of different browsers As per Wikipedia, a web browser or Internet browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web (The World Wide Web, abbreviated as WWW and commonly known as the Web, is a system of interlinked hypertext documents accessed via the Internet). An information resource is identified by a Uniform Resource Locator (URL) and it may be a web page, image, video, or other piece of content. Hyperlinks present in resources enable users to easily navigate their browsers to related resources. Although browsers are primarily intended to access the World Wide Web, they can also be used to access information provided by Web servers in private networks or files in file systems. Some browsers can also be used to save information resources to file systems. Mostly well-known browsers are Microsoft IE (Internet Explorer) Mozilla Firefox Google Chrome Opera Safari Netscape Navigator © IT Funda Corporation (http://www.itfundacorporation.com/) Visit http://www.dotnetfunda.com for .NET Articles, Tutorials, Forums, Career Advice & more Visit http://www.itfunda.com for .NET online training and training materials Author: Sheo Narayan How web browser works? Picture 1 -Overview of how browser works Picture 2 – Steps of communication between browser and the server What is a server? A server is a computer that serves the request of its client. There are many types of server based on what they serve, below are list of few server types © IT Funda Corporation (http://www.itfundacorporation.com/) Visit http://www.dotnetfunda.com for .NET Articles, Tutorials, Forums, Career Advice & more Visit http://www.itfunda.com for .NET online training and training materials Author: Sheo Narayan Web Server Mail server Database server Application server A web server is a computer connected to the network that hosts the website or web application and serves the html pages to its client through HTTP protocol. In order to process the request from client, a server needs a software program and that software program differs from technology to technology, being used by the server Some of the very famous server programs are Internet Information Services (IIS) -primarily used for Microsoft .NET Technologies Apache HTTP server – primarily used for Java and other technologies How a web server works? 1. Receive the page name to process from client/browser 2. Based on what is written in the page, the page is processed a. If it is a static page, web server reads the page content from the hard disk and send the response to the client b. If it is a dynamic page, process the page based on the instructions (code) written. This instruction can contain i. Connect to a database or database server and get the content ii. Perform business logics iii. Connect to another server and receive data iv. Process all the data 3. The page content is sent back to the client/browser Brief about HTTP As per W3.org, The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers. This protocol is mainly used to communicate information for web and it involves several steps comprising requests, connections, methods, status codes, responses etc. Http request structure 1. Request Line GET /path/file.html HTTP/1.0 2. Headers Host: itfunda.com Date: Fri, 23 June 2010 10:45:34 GMT © IT Funda Corporation (http://www.itfundacorporation.com/) Visit http://www.dotnetfunda.com for .NET Articles, Tutorials, Forums, Career Advice & more Visit http://www.itfunda.com for .NET online training and training materials Author: Sheo Narayan FROM: email or from address Accept: text/html User-agent: Mozilla Etc. 3. 4. Message body GET /path/file.html HTTP/1.0 Host: itfunda.com Date: Fri, 23 June 2008 10:45:34 GMT FROM: email or from address Accept: text/html User-agent: Mozilla … Http response structure 1. Status line HTTP/1.0 200 OK 2. Headers Date: Fri, 23 June 2008 10:45:34 GMT Content-Type: text/html Content-Length: 2345 3. 4. Message body HTTP/1.0 200 OK Date: Fri, 23 June 2010 10:45:34 GMT Content-Type: text/html Content-Length: 2345 … HTML Introduction of HTML HTML is a language to form the structure of the web page. HTML allows us to 1. Publish online document with paragraphs, tables, list, pictures etc. 2. Retrieve documents via hyperlink and button 3. Design forms to communicate with web server 4. Play song, video and other stuffs in the document. © IT Funda Corporation (http://www.itfundacorporation.com/) Visit http://www.dotnetfunda.com for .NET Articles, Tutorials, Forums, Career Advice & more Visit http://www.itfunda.com for .NET online training and training materials Author: Sheo Narayan Elements of HTML (Note: Please copy-paste each code snippets of following demo inside HTML tag and open the page in browser to see the output. If code snippet already has element, ignore this.) 1. A – How to display hyperlink? Hyperlink (also called link) is generally a text that appears as active text, hovering mouse changes mouse icon to hand and clicking this text executes an event. By default this text color is blue with underline style. CODE DotNetFunda.com Above code shall display DotNetFunda.com text as hyerlink. Title attribute is used to display the tooltip for the hyperlink that appears when user mouse over the hyperlink. OUTPUT Notice the hyperlink in the above output image. Demo url: http://localhost:20324/HTML/a.htm 2. How to open a page in a new window on click of a link? In case we want to open a page in a new window on click of the hyperlink, we can follow this approach. CODE Open DotNetFunda.com in new window Above code shall open DotNetFunda.com website in a new window as we have specified target=”_blank” in the a tag. Demo url: http://localhost:15533/HTML/A.htm