web application development note.pdf

Unit 1 History of Internet Internet originated from ARPANET. ARPANET Stands for Advanced Research Projects Agency Network. A project funded by the U.S. Department of Defense in the late 1960s. This project enabled resource sharing among universities and research instituti...

Unit 1 History of Internet Internet originated from ARPANET. ARPANET Stands for Advanced Research Projects Agency Network. A project funded by the U.S. Department of Defense in the late 1960s. This project enabled resource sharing among universities and research institutions. Internet An internet is defined as a global network of linked computers, servers ,phones, and smart appliances. All these communicate with each other using the transmission control protocol (TCP) TCP stands to enable the faster exchange of information and files ,along with other types of services. World wide web  The World Wide Web -- also known as the web, World wide web refers to all the public websites or pages that users can access on their local computers and other devices through the internet.  These pages and documents are interconnected by means of hyperlinks that users click on for information.  This information can be in different formats, including text, images, audio and video. Some key points about the internet Global Network : The internet connects millions of private, public, academic and government networks. Services :It supports a wide range of services such as web browsing, online shopping, banking etc. Information Access: Users can access vast amounts of information through websites, search engines. Communication :It facilitates various forms of communication, including email, instant messaging, video calls, and social media. Infrastructure : It relies on physical infrastructure like servers, data centers, undersea cables , and satellites Things related to Web 1) World Wide Web (WWW):A system of interlinked hypertext documents accessed via web browsers. 2) Uniform resource locator: i) A Uniform Resource Locator (URL) is the address used to access resources on the internet. ii) It specifies the location of a resource and the protocol used to retrieve it. 3) Web browsers: A web browser is a software application used to access and navigate. 4) Web Server: A web server is a computer system or software that delivers web pages to users' browsers via HTTP (Hypertext Transfer Protocol) or HTTPS (HTTP Secure). Website Website: Website is a collection of related web pages that contains text, images, audio and video. The first page of a website is called home page. Each website has specific internet address (URL) that is used to enter in the browser to access a website. A website can be of two types: o Static Website o Dynamic Website Static website: Static website is a type of website that is easy to create. Its web pages are coded in HTML. The codes are fixed for each page so the information contained in the page does not change and it looks like a printed page. Dynamic website Dynamic website is a collection of dynamic web pages whose content changes dynamically. It accesses content from a database or Content Management System (CMS). Therefore, when the content of the database is altered or updated, the content of the website is also altered or updated. Dynamic website uses client-side scripting or server-side scripting, Client-side scripting generates content at the client computer on the basis of user input. The web browser downloads the web page from the server and processes the code within the page to render information to the user.  Static vs Dynamic website Static Website Dynamic Website The content is same every time when the page is The Content changes regularly. loaded. It uses the server-side languages such It uses the HTML code for developing a website. as PHP,SERVLET, JSP, etc It sends same response for every request. It generates different response for every request. The page contains "server-side" code which allows The content is only changed when someone updates the server to generate the unique content when the the file. page is loaded. Server: Web vs. Application Server is a device or a computer program that accepts and respond to the request made by other program, known as client. It is used to manage the network resources and for running the program or software that provides services. There are two types of servers: 1. Web Server 2. Application Server Differences Between Web Servers and Application Servers Web Server  Deliver static content.   Content is delivered using the HTTP protocol only.  Serves only web-based applications.  No support for multi-threading.  Facilitates web traffic that is not very resource intensive. Application Server  Delivers dynamic content.  Provides business logic to application programs using several protocols (including HTTP).  Can serve web and enterprise-based applications.  Uses multi-threading to support multiple requests in parallel.  Facilitates longer running processes that are very resource-intensive MIME  MIME stands for Multipurpose Internet Mail Extensions.  It is used to extend the capabilities of Internet e-mail protocols such as SMTP.  The MIME protocol allows the users to exchange various types of digital content such as pictures, audio, video, and various types of documents and files in the e-mail. MIME was created in 1991 by a computer scientist named Nathan Borenstein at a company called Bell Communications. HTTP The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. o HTTP stands for Hyper Text Transfer Protocol. o It is a protocol used to access the data on the World Wide Web (www). o HTTP is used to carry the data in the form of MIME-like format. o The HTTP protocol can be used to transfer the data in the form of text, hypertext, audio, video etc. There are 5 phases of the HTTP protocol 1. Connection Establishment 2. Request Phase 3. Server Processing 4. Response Phase 5. Connection Termination Connection Establishment: Before any communication can occur, a connection must be established between the client (web browser) and the server. This connection uses TCP protocol, which allows for reliable data transmission. It helps in the exchange of HTTP messages between the two devices. Request Phase: Once the connection is established, the client sends an HTTP request to the server. This request includes several important components. First, there is a request method, which indicates the desired action to be performed on the server's resource (e.g., retrieving, updating, or deleting). Then, there is the request URI, which specifies the location of the desired resource. Server Processing :On receiving the client's request, the server begins processing it. This involves performing the requested action on the specified resource. For example, if the client requested a web page, the server would retrieve the appropriate file and prepare it for the response. Response Phase :Once the server has processed the request, it generates an HTTP response to send back to the client. The response consists of several key elements. indicating the outcome of the request (e.g., success or failure),the response carries the data or resource requested by the client. Connection Termination : After the response is transmitted to the client, the server closes the TCP connection. This signifies the end of the communication for that specific request-response cycle. Client Request Server Response Internal Hyperlinking and External Hyperlinking Internal hyperlinking :Internal links that direct the readers to a targeted page on a website. Internal link links from one page to another page on the same domain. External hyperlinking : External links are the links which directs the user away from the same page of website. HTML(Hyper Text Markup Language ) Tags are the instructions embedded directly into the text of the document. An HTML tag is a signal to the browser that it should do.all html tags begins with open angle bracket (). Paired Tags : A tag is said to be a paired tag if it is usually used in pairs E g:. Singular Tags : these tags are stand-alone tags.they do not have companion Tag. E g :  An html file is saved with.html extension.  Editors such as Notepad , Notepad ++, Visual studio etc. The structure of an HTML program The entire web page is enclosed within tags a) : The Doctype declaration specifies the version of XHTML b) tag : The tag is the root element of an HTML or XHTML document. c) tag : The head element contains metadata about the document. d) tag : It contains the content of the document, such as headings, paragraphs, Images etc. Text Formatting tag , ,,, Emphasizing material in a web page: HTML supports six different levels of headings. The highest -level header format is and the lowest level of heading is Using this all the text appears in BOLDFACE and the size of the heading depends on the level chosen ,i. e to. Drawing lines tag draws lines and horizontal rules. Align : It Aligns the line on the browser screen , 1) Align -left : will aligns the line to the left of the screen. 2) Align-Right : will aligns the line to the right of the screen. 3) Align-Center: will aligns the line to the center of the screen. Text Styles Bold :Displays the text in BOLDFACE style. Input: Welcome to our home page! Output: Welcome to our home page! Italics :Displays the text in ITALICS. Input: Welcome to our home page! Output: Welcome to our home page! Underline: Displays the text as UNDERLINED. Input: Welcome to our home page! Output: Welcome to our home page! Font 1) Font-family: sets the text to the specific font name. 2) Font-size: sets the size of the text. 3) Color: it sets the color of the text. Lists Types of Lists 1.Ordered list: An ordered list is used when the sequence of items is important. An ordered list starts with the tag. Each list item starts with the tag Floppies Hard disks Monitors Output 3.Floppies 4.Hard disks 5.Monnitors 2. Unordered lists : An unordered list is used when the sequence of items is not important. An ordered list starts with the tag. Each list item starts with the tag. Floppies Hard disks Monitors Output  Floppies  Hard disks  Monitors 3.Definition Lists :A description list is used to define something. A description list starts with the tag. Each list item starts with the tag. Definition of a tag starts with the tag. Frames HTML frame is a feature that enables a web page to be broken into different sections these sections are called frames. The tag : The splitting of a browser screen into frames is accomplished with the help and tag embedded in the HTML document. This tag requires one of the two attributes depending on whether the screen has to be divided into rows or columns. Rows : This attribute is used to divide the screen into multiple rows. Cols : This attribute is used to divide the screen into multiple columns. The symbol “ * “ indicates the remaining space. Example 1: Example 2:  Adding graphics to HTML Documents Using the border attribute Working with the image < img style = “border-width:3px” ”scr=”a.jpeg”> Using the width and height attribute Working with the image < img style = “height=200;width=200” scr=”a.jpeg”> Form 1.The action attribute defines the action to be performed when the form is submitted. 2. Target i) Opens the linked document in a new window or tab. ii) Opens the linked document in the parent frame. iii) Opens the linked document in the same frame when it is clicked (this is default). 3. The method attribute specifies the HTTP method to be used while submitting the form data. a) GET is used to request data from a specified resource. b) POST is used to send data to a server to create/update a resource.  The HTML tag is used to group the large section of HTML elements together. Div Example.d1 { background-color: red; height: 300px; width: 500px; color: white; text-align: center; line-height: 25px; margin: 5px; } This is Div 1   In HTML, the span tag is a generic inline element. With span tag, we can wrap a particular text and provide the style with the help of a CSS property. The span element Span is a css property. XHTML Form Elements: Label, Text boxes - password, button, submit, reset, Placeholder, Textarea , Radio button, Checkboxes, Button, Dropdown Example showing all the form elements Form Travel Registration Full name // here input type =”text ”is used to create a textfield e-mail id Phone number Attached id proof  select the tour package select INR 5000 INR 4000 INR 3000 INR 2000 INR 1000 INR 500 Arrival Date No. of persons Terms and conditions (agree or not agree) 1)Don't carry any expensive item. 2)Animals not allowed. // here input type =”button ”is used to create a button. CSS introduction  CSS stands for Cascading Style Sheet.  CSS is used to design HTML tags.  CSS is a widely used language on the web. CSS Properties CSS background property is used to define the background effects on element. 1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position CSS background-color The background-color property is used to specify the background color of the element. background-color: red CSS background-image The background-image property is used to set an image as a background of an element. background-image: url("name_of _the_file"); A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector. Example of selector Css h1 // here h1is the selector { background-color:red; color: blue; } Welcome to the page Types of selector 1. Class selectors target an element that has a specific value for its class attribute: 2. Id selector: target an element that has a specific value for its id attribute: 3.Attribute selector: This group of selectors gives different ways to select elements based on the presence of a certain attribute on an element: 4.Pseudo-classes selector : This group of selectors includes pseudo-classes, which style certain states of an element. a:hover { }.The :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer: 5. combinator (>): the final group of selectors combine other selectors in order to target elements within the documents. The following, for example, selects paragraphs that are direct children of elements using the child combinator (>): A>p { } A pseudo-class is a selector that selects elements that are in a specific state. e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping to cut down on excess classes in the code. CSS Box Model The CSS Box Model is a fundamental concept in web designing that describes how elements are structured and how their sizes are calculated. Box Model is crucial for effectively styling and positioning elements on a web page. Content: This is the innermost part of the box, where text and images appear. The size of the content area can be controlled using properties like width and height. Padding: Padding is the space between the content and the border. It creates a buffer around the content inside the element. You can set padding using padding property and it can be applied to all sides or individually (e.g., padding-top, padding-right, padding-bottom, padding-left). Border: The border wraps around the padding and content. You can control the border’s width, style (e.g., solid, dashed), and color with properties like border-width, border-style, and border-color. Borders can be set for each side separately as well. Margin: Margin is the outermost space, creating distance between the element’s border and adjacent elements. It pushes other elements away from the element with margins. Margins can be set using margin, and individual margins can be adjusted with margin-top, margin-right, margin-bottom, and margin-left.