Module 1 PDF

Rashtreeya Sikshana Samithi Trust RV Institute of Technology and Management ® (Affiliated to VTU, Belagavi) JPNagar,Bengaluru-560076 Department of Master of Computer Applications Course Name: WEB TECNOLOGIES...

Rashtreeya Sikshana Samithi Trust RV Institute of Technology and Management ® (Affiliated to VTU, Belagavi) JPNagar,Bengaluru-560076 Department of Master of Computer Applications Course Name: WEB TECNOLOGIES Code: 22MCA24 Prepared By: Dr.Chethan Venkatesh Associate Professor Department of MCA RVITM Bangalore Email:[email protected] Internet: The Internet is a huge collection of computers connected in a communications network. The Transmission Control Protocol/Internet Protocol (TCP/IP) became the standard for computer network connections The Internet is a network of networks. Internet Protocol Addresses The Internet Protocol (IP) address of a machine connected to the Internet is a unique 32-bit number. IP addresses usually are written (and thought of) as four 8-bit numbers, separated by periods. The four parts are separately used by Internet-routing computers to decide where a message must go next to get to its destination. Web browsers: When two computers communicate over network, one acts as a client and the other as a server. The client initiates the communication, which is a request for information stored on the server. Server then sends that information back to the client. The web, operates in this client-server configuration. Documents provided by servers on the web are requested by browsers, which are programs running on client machines. They are called browsers because they allow the user to browse the resources available on servers. Definition : A web browser is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. A browser requests a static document from a server. The server locates the document & sends it to the browser, which displays it for the user. 1|Page MASTEROFCOMPUTERAPPLICATIONS  Examples of web browser: Firefox. Google Chrome. Microsoft Edge. Apple Safari. Opera. Brave. Web servers: Web servers are programs that provide documents to requesting browsers. Servers are slave programs. They act only when requests are made to them by browsers running on other computers on the Internet. Web server is a computer where the web content is stored. Basically web server is used to host the web sites General characteristics of web server: The file structure of a web server has two separate directories The root of one of these is called document root which stores web documents The root of the other directory is called the server root which stores server and its support software's The files stored directly in the document root are those available to clients through top level URLs The secondary areas from which documents can be served are called virtual document trees. Many servers can support more than one site on a computer, potentially reducing the cost of each site and making their maintenance more convenient. Such secondary hosts are called virtual hosts. Some servers can serve documents that are in the document root of other machines on the web; in this case they are called as proxy servers 2|Page MASTEROFCOMPUTERAPPLICATIONS  Examples of web server: Apache HTTP Server Nginx Web Server Lighttpd Web Server Apache Tomcat Web Server Apache Apache is the most widely used Web server. Apache is an excellent server because it is both fast and reliable. Apache is capable of providing a long list of services beyond the basic process of serving documents to clients. IIS server is supplied as part of Windows—and because it is a reasonably good server—most Windows-based Web servers use IIS. Difference b/w web browser and web server Web Browser Web Browser is an application program that displays a World wide web document. It usually uses the internet service to access the document. The Web browser requests the server for the web documents and services. The web browser acts as an interface between the server and the client and displays a web document to the client. The web browser sends an HTTP request and gets an HTTP response. Web browser stores the cookies for different websites. Web Server A web server is a program or the computer that provide services to other programs called client. The Web server accepts, approves, and responds to the request made by the web browser for a web document or service. The web server is a software or a system which maintain the 3|Page MASTEROFCOMPUTERAPPLICATIONS  web applications, generate response and accept clients data. The web server gets HTTP requests and sends HTTP responses. Web servers provide an area to store and organize the pages of the website MIME Multipurpose Internet Mail Extension (MIME) is a standard that was proposed by Bell Communications in 1991 in order to expand the limited capabilities of email. Features of MIME MIME supports the character set other than ASCII. With the help of MIME, we can send multiple attachments in a single message. MIME also provides support for different content types and multi-part messages. It provides support of compound documents It also provides support for non-textual content in the email message. MIME Header: It is added to the original e-mail header section to define transformation. There are five headers that we add to the original header: MIME-Version – Defines the version of the MIME protocol. It must have the parameter Value 1.0, which indicates that message is formatted using MIME. Content-Type – Type of data used in the body of the message. They are of different types like text data (plain, HTML), audio content, or video content. Content-Type Encoding – It defines the method used for encoding the message. Like 7-bit encoding, 8-bit encoding, etc. Content Id – It is used for uniquely identifying the message. Content description – It defines whether the body is actually an image, video, or audio. 4|Page MASTEROFCOMPUTERAPPLICATIONS URL URL: Uniform Resource Locator. It is the resource address on the internet. URL is the character string (address) which is used to access data from the internet. A URL contains the following information: Protocol name A colon followed by double forward-slash (://) Hostname (domain name) or IP address A colon followed by port number (optional – unless specified otherwise, “:80” is the default when using HTTP, and “:443” is the default when using HTTPS) Path of the file Syntax of URL Protocol://hostname/filename Protocol: A protocol is the standard set of rules that are used to allow electronic devices to communicate with each other. Hostname: It describes the name of the server on the network. Filename: It describes the pathname to the file on the server. Http HTTP stands for Hypertext Transfer Protocol. The protocol used to transfer hypertext between two computers is known as Hypertext Transfer Protocol. HTTP provides a standard between a web browser and a web server to establish communication. It is a set of rules for transferring data from one computer to another. Data such as text, images, and other multimedia files are shared on the World Wide Web. 5|Page MASTEROFCOMPUTERAPPLICATIONS  Features of HTTP : HTTP is media independent: It specifies that any type of media content can be sent by HTTP as long as both the server and the client can handle the data content. HTTP is connectionless: HTTP client initiates a request and waits for a response from the server. When the server receives the request, the server processes the request and sends back the response to the HTTP client after which the client disconnects the connection. The connection between client and server exist only during the current request and response time HTTP is stateless: The client and server are aware of each other during a current request only. HTTP consists of two phases: the request and response. The Request phase The general form of an HTTP request is as follows: 1) HTTP method, domain part of the URL, HTTP version 2) Header fields 3) Blank line 4) Message body Method Description GET Returns the contents of the specified document HEAD Returns the header information for the specified document POST Executes the specified document, using the enclosed data 6|Page MASTEROFCOMPUTERAPPLICATIONS PUT Replaces the specified document with the enclosed data DELETE Deletes the specified document The Response phase The general form of an HTTP response is as follows: 1) Status line 2) Response header fields 3) Blank line 4) Response body The status line includes the HTTP version used, a three-digit code for the response, and a short textual explanation of the status code. For eg, most responses begin with the following: HTTP/1.1 200 Ok The status codes begin with 1, 2, 3, 4 or 5. First digit Category 1 informational 2 success 3 redirection 4 Client error 5 Server error 7|Page MASTEROFCOMPUTERAPPLICATIONS  404 Not found , means the requested file could not be found. 200 OK, means that the request was handled without error. The 500 code means that the server has encountered a problem and was not able to fulfill the request. Difference b/w HTML and XHTML HTML HTML stands for Hypertext Mark-up Language. It was developed by Tim Berners-Lee. It was developed in 1991. It is extended from SGML. The format is a document file format. All tags and attributes are not necessarily to be in lower or upper case. XHTML XHTML stands for Extensible Hypertext Markup Language. It was developed by W3C i.e World Wide Web Consortium. It was released in 2000. It Is extended from XML and HTML The format is a markup language In this, every tag and attribute should be in lower case. Difference b/w HTML and XHTML HTML Doctype is not necessary to write at the top. It is not necessary to close the tags in the order they are opened. While using the attributes it is not necessary to mention quotes. Filename extension used are.html 8|Page MASTEROFCOMPUTERAPPLICATIONS XHTML Doctype is very necessary to write at the top of the file It is necessary to close the tags in the order they are opened While using the attributes it is mandatory to mention quotes. Filename extension are.xhtml Introduction to XHTML XHTML stands for Extensible Hypertext Markup Language. It is the next step to evolution of internet. The XHTML was developed by World Wide Web Consortium (W3C). It helps web developers to make the transition from HTML to XML. Standard XHTML Document Structure Every XHTML document must begin with an xml declaration element that simply identifies the document as being one based on XML. This element includes an attribute that specifies the version number 1.0. The xml declaration usually includes a second attribute, encoding, which specifies the encoding used for the document [utf-8] Following is the xml declaration element, which should be the first line of every XHTML document: The xml declaration element is followed immediately by an SGML DOCTYPE command, which specifies the particular SGML document-type definition (DTD) with which the document complies, among other things. The following command states that the document in which it is included complies with the XHTML 1.0 Strict standard: 9|Page MASTEROFCOMPUTERAPPLICATIONS  An XHTML document must include the four tags , , , and The tag identifies the root element of the document. So, XHTML documents always have an tag immediately following the DOCTYPE command, and they always end with the closing html tag, The html element includes an attribute, xmlns, that specifies the XHTML namespace, as shown in the following element: An XHTML document consists of two parts, named the head and the body. The element contains the head part of the document, which provides information about the document and does not provide the content of the document. The body of a document provides the content of the document. The content of the title element is displayed by the browser at the top of its display window, usually in the browser window’s title bar. My first program All The Best..!! DOCTYPE: It is used to declare a DTD 10|Page MASTEROFCOMPUTERAPPLICATIONS Creating a XHTML web page, it is necessary to include DTD (Document Type Definition) declaration. There are three types of DTD : Transitional DTD Strict DTD Frameset DTD Transitional DTD: It is supported by the older browsers which does not have inbuilt cascading style sheets supports. There are several attributes enclosing the body tag which are not allowed in strict DTD. Syntax: Strict DTD: Strict DTD is used when XHTML page contains only markup language. Strict DTD is used together with cascading style sheets, because this attribute does not allow CSS property in body tag. Syntax: Frameset DTD: The frameset DTD is used when XHTML page contains frames. Syntax: 11|Page MASTEROFCOMPUTERAPPLICATIONS Elements The XHTML element is everything from the start tag to the end tag: Content goes here... Examples of some XHTML elements: My First Heading My first paragraph. Headings are defined with the to tags. defines the most important heading. defines the least important heading. Paragraphs element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph Formatting Elements Formatting elements were designed to display special types of text: - Bold text - Important text - Italic text - Emphasized text - Marked text(highlights the text) - Smaller text - Deleted text (stricke through) - Inserted text - Subscript text - Superscript text Quotation and Citation Elements element defines a section that is quoted from another source. tag defines a short quotation. Browsers normally insert quotation marks around the quotation example: 12|Page MASTEROFCOMPUTERAPPLICATIONS WWF's goal is to: Build a future where people live in harmony with nature. tag defines an abbreviation example: WWW tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc. example: Bangalore Karnataka Example.com tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image. The tag is empty, it contains attributes only, and does not have a closing tag. The tag has two required attributes: src - Specifies the path to the image alt - Specifies an alternate text the image Syntax List: Lists allow web developers to group a set of related items in lists. Types: unordered HTML list ordered HTML list Description HTML Lists 13|Page MASTEROFCOMPUTERAPPLICATIONS Unordered list : An unordered list starts with the tag Each list item starts with the tag. Value Description Disc Sets the list item marker to a bullet (default) Circle Sets the list item marker to a circle Square Sets the list item marker to a square None The list items will not be marked example: An unordered HTML list Coffee Tea Milk ordered list An ordered list starts with the tag. Each list item starts with the tag. Type Description type="1" numbered with numbers (default) type="A" numbered with uppercase letters type="a" numbered with lowercase letters type="I" numbered with uppercase roman numbers type="i" numbered with lowercase roman numbers 14|Page MASTEROFCOMPUTERAPPLICATIONS  example: Coffee Tea Milk Description list A description list is a list of terms, with a description of each term. tag defines the description list tag defines the term tag describes each term example: C lang Top down approach C++ Bottom up approach Nested HTML Lists Lists can be nested (list inside list) example: Coffee Tea Black tea Green tea Milk 15|Page MASTEROFCOMPUTERAPPLICATIONS  HTML Table A table in HTML consists of table cells inside rows and columns Each table cell is defined by a and a tag. stands for table data. Each table row starts with a and ends with a tag. stands for table row when cells are to be table header cells. Each table header starts with a and ends with a tag. stands for table header. sub1 sub2 A B 16 14 HTML Table - Colspan To make a cell span over multiple columns, use the colspan attribute marks grade < web theory web lab A 16|Page MASTEROFCOMPUTERAPPLICATIONS  java theory java lab A HTML Table - Rowspan To make a cell span over multiple rows, use the rowspan attribute example: Name A Phone 555-1234 555-8745 Cell padding is the space between the cell edges and the cell content. Syntax: example: Author Details NAME AGE BRANCH 17|Page MASTEROFCOMPUTERAPPLICATIONS  A 22 MCA B 21 CSE HTML Table - Cell Spacing Cell spacing is the space between each cell Syntax: Author Details NAME AGE BRANCH A 22 MCA B 21 CSE 18|Page MASTEROFCOMPUTERAPPLICATIONS  HTML Forms An HTML form is used to collect user input. What is HTML ? is an HTML element to collect input data containing interactive controls. It provides facilities to input text, number, values, email, password, and control fields such as checkboxes, radio buttons, submit buttons Syntax: Form elements These are the following HTML elements: : It defines label for elements. : It is used to get input data from the form in various types such as text, password, email, etc by changing its type. : It defines a clickable button to control other elements or execute a functionality. : It is used to create a drop-down list. : It is used to get input long text content. : It is used to draw a box around other form elements and group the related data. : It defines a caption for fieldset elements. : It is used to specify pre-defined list options for input controls. : It displays the output of performed calculations. : It is used to define options in a drop-down list. : It is used to define group-related options in a drop-down list. The Element The HTML element is the most used form element. An element can be displayed in many ways, depending on the type attribute. 19|Page MASTEROFCOMPUTERAPPLICATIONS  Type Description Displays a single-line text input field Displays a radio button (for selecting one of many choices) Displays a checkbox (for selecting zero or more of many choices) Textbox in HTML Form In an HTML form, we use the tag by assigning type attribute value to text to input single line input. The default value of the type attribute is “text” Syntax: Example: Name : Radio Button in an HTML Form Displays a radio button (for selecting one of many choices) Syntax: