Course Objectives 01 To understand different Internet Technologies 02 To learn java-specific web services architecture 03 To Develop web applications using frameworks
Course Outcomes 01 Construct a basic website using HTML and Cascading Style Sheets 02 Build dynamic web page with validation using Java Script objects and by applying different event handling mechanisms 03 Develop server side programs using Servlets and JSP 04 Construct simple web pages in PHP and to represent data in XML format 05 Develop interactive web applications
Text Book 1 Deitel and Deitel and Nieto, - “Internet and World Wide Web - How to Program. Text Book 2 Jeffrey C and Jackson, Web Technologies A Computer Science Perspective. Text Book 3 Angular 6 for Enterprise-Ready Web Applications TEXT BOOKS
UNIT 1- WEBSITE BASICS, HTML 5, CSS 3, WEB 2.0
UNIT – 1 SYLLABUS Tables – Lists – Image – HTML5 control elements – Drag and Drop – Audio – Video controls HTML 5 Inline, embedded and external style sheets – Rule cascading – Inheritance – Backgrounds – Border Images – Colors – Shadows – Text – Transformations – Transitions – Animations . CSS3 Clients , Servers and Communication – The Internet – World wide web – HTTP Request Message – HTTP Response Message – Web Clients – Web Servers Web Essentials Bootstrap Framework FRAMEWORK
Web Essentials
WEB TECHNOLOGY About building and delivering content and services over the Internet Collection of tools, methods, and software that are used to create, develop, and maintain websites and web applications What is Web Technology?
COMPONENTS Name Here Name Here Name Here Name Here Web Browsers Primary interface through which users access the internet . Web Servers Powerful computers that store and serve web content to users when requested. CSS Visual presentation of web content HTML Markup language used to structure and present content on the web. JavaScript Dynamic programming language that adds interactivity and functionality to web pages
COMPONENTS Name Here Name Here Name Here Name Here Web Development Frameworks and Libraries Tools streamline the development process, enhancing the user experience and performance Web Hosting Services Making websites and applications accessible to a global audience. Content Management Systems Simplify the process of creating and managing web content DBMS Store and retrieve data. Web Security Practices such as SSL/TLS encryption, firewalls, and vulnerability testing to protect websites and user data
What is a client? The software that resides on the remote machine, communicates with the server, fetches the information, processes it, and then displays it on the remote machine is called the client. CLIENTS WEB ESSENTIALS
What is a server? The software that distributes the information and the machine where the information and software reside is called the server SERVERS WEB ESSENTIALS With the Internet, it's possible to access almost any information, communicate with anyone else in the world, and do much more
What is a web client? The client side (user side) of the Web . WEB CLIENT WEB ESSENTIALS A Web client typically refers to the Web browser in the user's machine or mobile device
What is a web server? A web server is software and hardware that uses HTTP and other protocols to respond to client requests made over the World Wide Web. . WEB SERVER WEB ESSENTIALS Display website content through storing, processing and delivering webpages to users.
CLIENT SERVER COMMUICATION Clients and servers exchange messages in a request response messaging pattern. The client sends a request, and the server returns a response. To communicate, the computers must have a common language, and they must follow rules so that both the client and the server know what to expect.
CLIENT SERVER COMMUICATION User enters the URL(Uniform Resource Locator) of the website or file. The Browser then requests the DNS(DOMAIN NAME SYSTEM) Server . DNS Server lookup for the address of the WEB Server. DNS Server responds with the IP address of the WEB Server. Browser sends over an HTTP/HTTPS request to WEB Server’s IP. Server sends over the necessary files of the website. Browser then renders the files and the website is displayed.
It is the largest network in the world that connects hundreds of thousands of individual networks all over the world . The popular term for the Internet is the “ information highway ”. With the Internet, it's possible to access almost any information, communicate with anyone else in the world, and do much more. Rather than moving through geographical space, it moves your ideas and information through cyberspace – the space of electronic movement of ideas and information . 17 The Internet
In 1962, MIT computer scientist J.C.R. Licklider comes up with the idea for a global computer network . Work on packet-switching theory pioneers the way to the world’s first wide-area computer network - ARPANET in the year 1969 . 18 Internet - History
In 1973, Robert Kahn and Vinton Cerf collaborate to develop a protocol for linking multiple networks together called Transmission Control Protocol/Internet Protocol (TCP/IP) . TCP is followed by evolution of Ethernet and USENET . 19 Internet - History
In 1982, the PhoneNet system is established and is connected to ARPANET and the first commercial network, Telenet , allows for email communication between multiple nations of the world. In 1981, Ethernet products for both computer workstations and personal computers were announced and this allows for the establishment of local area networks (LANs ), followed by Domain Name System. 20 Internet - History
In 1990, ARPANET is decommissioned . Tim Berners-Lee and his colleagues at CERN develop hypertext mark-up language (HTML) and the uniform resource locator (URL ) , giving birth to the first incarnation of the World Wide Web . 21 Internet - History
2000 sees the rise and burst of the dotcom bubble and Google’s meteoric rise to domination of the search engine market . This decade also sees the rise and proliferation of Wi-Fi - as well as mobile internet devices like Smartphone s. 22 Internet - History
23 Uses of The Internet
24 INTERNET - Worldwide Around 63.2% of world population uses internet.
25 INTERNET - India In 2020, India had nearly 700 million internet users across the country .
26 WEB The Web (World Wide Web) consists of information organized into Web pages containing text and graphic images. It contains hypertext links , or highlighted keyword s and images that lead to related information . A collection of linked Web pages that has a common theme or focus is called a Web site . The main page that all of the pages on a particular Web site are organized around and link back to is called the site’s home page .
27 How to access the Internet? Many schools and businesses have direct access to the Internet using special high speed communication lines and equipment. Students and employees can access through the organization’s local area networks (LAN) or through their own personal computers . Another way to access the Internet is through Internet Service Provider (ISP ) .
28 How to access the Internet? To access the Internet, an existing network need to pay a small registration fee and agree to certain standards based on the TCP/IP (Transmission Control Protocol/Internet Protocol) reference model. Each organization pays for its own networks and its own telephone bills, but those costs usually exist independent of the internet. The regional Internet companies route and forward all traffic, and the cost is still only that of a local telephone call .
29 Internet Service Provider (ISP) A commercial organization with permanent connection to the Internet that sells temporary connections to subscribers. Examples: Prodigy, America Online, Microsoft network, AT&T Networks
30 How to access the Web? Once you have your Internet connection, then you need special software called a browser to access the Web. Web browsers are used to connect you to remote computers, open and transfer files, display text and images. Web browsers are specialized programs . Examples of Web browser: Netscape Navigator (Navigator) and Internet Explorer
31 Client/Server Structure of the Web Web is a collection of files that reside on computers, called Web servers , that are located all over the world and are connected to each other through the Internet . When you use your Internet connection to become part of the Web, your computer becomes a Web client in a worldwide client/server network. A Web browser is the software that you run on your computer to make it work as a web client
32 Hypertext Mark-up Language (HTML) The public files on the web servers are ordinary text files, much like the files used by word-processing software . To allow Web browser software to read them, the text must be formatted according to a generally accepted standard . The standard used on the web is Hypertext mark-up language (HTML ). HTML uses codes, or tags , to tell the Web browser software how to display the text contained in the document
33 Addressing on the WEB - INTERNET PROTOCOL Internet protocols are set of rules governing communication within and between computers on a network. The main functions of protocols are: Deciding how to announce sent and received data. Addressing the data Deciding how the data is to be sent Compressing the data Identifying errors A computer communication protocol is a detailed specification of how communication between two computers will be carried out in order to serve some purpose .
34 URL – UNIFORM RESOURSE LOCATOR A URL (Uniform Resource Locator) is a form of URI and standardized naming convention for addressing documents accessible over the Internet and Intranet . An example of a URL is https://karpagamtech.ac.in/ , which is the URL for the Karpagam Institute of Technology college website.
35 URL - OVERVIEW Below is additional information about each of the sections of the http URL for this page. https://www.karpagamtech.ac.in/academics/computer-science-engineering https:// - Protocol www - Subdomain karpagamtech.ac.in - Domain and domain sufix academics - Directories computer-science-engineering - Web Page
36 URL - http or https The “ http ” stands for Hypertext Transfer Protocol . It lets the browser to know which type of protocol it is going to use to access the information specified in the domain. An “ https ” protocol is short for “ Hypertext Transfer Protocol Secure ” and indicates that information transmitted over HTTP is encrypted and secure . After the http or https is the colon (:) and two forward slashes (//) that separate the protocol from the remainder of the URL. A URL is not explicit to an HTTP or HTTPS addresses; FTP, TFTP, Telnet, and other addresses are also considered URLs and may not follow the same syntax as our example.
37 URL - www www stands for World Wide Web and is used to distinguish the content. This portion of the URL is not required and many times can be left out. For example, typing https://karpagamtech.ac.in/academics/computer-science-engineering would still get you to the Computer Hope website. This portion of the address can also be substituted for an important sub page known as a subdomain.
38 URL - karpagamtech.ac.in kapagamtech.ac.in is the domain name for the website. The last portion of the domain is known as the domain suffix , or TLD. It is used to identify the type or location of the website. .in is short for india There are several domain suffixes available. To get a domain, you would register the name through a domain registrar.
39 URL - academics Academics - the directories where the web page is on the server. To find the file on the server, it would be in the /public_html/academics directory . With most servers, the public_html directory is the default directory containing the HTML files.
40 URL Is an IP address the same as a URL or web address? No. An IP address is a unique number that's assigned to each device on a network. On the World Wide Web, a domain name is assigned a unique IP address. When typed ( karpagamtech.ac.in ), DNS translates the domain name into an IP address that routers use to find the web server. A domain name is used instead of an IP address because it's easier for humans to remember.
The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web, and is used to load webpages using hypertext links. Hyper Text Transfer Protocol
HYPERTEXT TRANSFER PROTOCOL HTTP is a Connectionless protocol which can deliver any sort of data The basic structure of HTTP communication follows request - response model
HYPERTEXT TRANSFER PROTOCOL The HTTP’s basic structure includes two message types. The Request Message The Response Message
HTTP - REQUEST MESSAGE HTTP requests are messages sent by the client to initiate an action on the server . Every HTTP request message has the same basic structure: Request / Start line Header field(s) (one or more) Blank line Message body (optional)
45 The Request / Start line is mandatory and is structured as Method + Request URI + Protocol Version Method Tells the server what action to perform. Request URI The resourse path, usually a URL, or the absolute path of the protocol, port, and domain are usually characterized by the request context. Protocol Version Defines the structure of the remaining message, acting as an indicator of the expected version to use for the response. REQUEST MESSAGE - START LINE
46 The HTTP Method, indicates the method to be performed on the resource identified by the given Request-URI. The method is case-sensitive and should always be mentioned in uppercase. START LINE - METHODS
47 The second part of the start line is known as the Request-URI . A URI is an identifier that is intended to be associated with a particular resource (such as a web page or graphics image) on the World Wide Web. Every URI consists of two parts: the scheme which appears before the colon (:),and another part that depends on the scheme. URIs using the http scheme are both URIs and URLs. The Resource Path / Request URL follows the chosen method in the request line. The purpose of the Uniform Resource Identifier recognizes the resource of the request target. START LINE - REQUEST URI
48 HTTP has four versions : HTTP/0.9, HTTP/1.0, HTTP/1.1, and HTTP/2.0. The version in common use is HTTP/1.1 and the future will be HTTP/2.0. HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2.0 The One-line Protocol Building extensibility The standardized protocol The Future Methods supported GET GET, HEAD, POST GET , HEAD , POST , PUT , DELETE , TRACE , OPTIONS Response type Hypertext N ot limited to hypertext N ot limited to hypertext Connection nature Terminated Immediately after the response T erminated immediately after the response L ong -lived START LINE - HTTP VERSION
49 GET /test.htm HTTP/1.1 GET is the method /testpage.htm is the relative path to the resource. HTTP/1.1 is the protocol version we are using A relative path doesn’t include the domain name. The web browser uses the URL that we enter to create the relative URI of the resource. START LINE EXAMPLE
50 HTTP header fields provide required information about the request or response , or about the object sent in the message body. The Host header field is required in every HTTP/1.1 request message. HTTP/1.1 also defines a number of other header fields, several of which are commonly used by modern browsers. Each header field begins with a field name , such as Host, followed by a colon and then a field value . REQUEST MESSAGE - HEADER FIELD
51 REQUEST MESSAGE - HEADER FIELD
52 Each Request has a Response. Every HTTP Response message consists of the follwing : Status line Header field(s) (one or more) Blank line Message body (optional) RESPONSE MESSAGE
53 The start line of an HTTP response, called the status line, contains the following information: The protocol version, usually HTTP/1.1 A status code, indicating success or failure of the request. Common status codes are 200, 404, or 302 A status text. A brief, purely informational, textual description of the status code to help a human understand the HTTP message A typical status line looks like: HTTP/1.1 404 Not Found. RESPONSE MESSAGE - STATUS LINE
54 HTTP headers for responses follow the same structure as any other header: a case-insensitive string followed by a colon (':') and a value whose structure depends upon the type of the header. The whole header, including its value, presents as a single line. General headers, like Via, apply to the whole message. Response headers, like Vary and Accept-Ranges, give additional information about the server which doesn't fit in the status line. Representation metadata headers (formerly entity headers), like Content-Length that describe the encoding and format of the message body (only present if the message has a body). RESPONSE MESSAGE - HEADER FIELDS
55 RESPONSE MESSAGE - HEADER FIELDS
56 How to Check HTTP Request and Response on Chrome? Open a webpage in Google Chrome and go to “View > Developer > Developer Tools” menu. You can also open the developer console by right clicking on the page and choose “Inspect” option. Go to “Network” tab and then reload the page. Now you will see the loading time for each single component on the page. Click on the “Show Overview” icon to remove the timeline so that you can view other details clearly. Click the page URL on the left bar and go to “Response” tab. (You can also view the same details under “Preview” tab). HTTP - REQUEST & RESPONSE MESSAGE
57 HTTP - REQUEST & RESPONSE MESSAGE
Skeleton of all web pages . Provides structure to the content appearing on a website Hyper Text Mark-up Language Created by Tim Berners-Lee in 1991
59 HTML is composed of elements that structure the webpage and define its content. The elements are the building blocks of any HTML page and are represented by tags . Tags are one of the most important part in an HTML Document. HTML uses some predefined tags which tells the browser about content display property, that is how to display a particular given content. HTML - Structure
60 For Example, to create a paragraph, one must use the paragraph tags (<p> </p>) and to insert an image one must use the img tags (<img />) HTML - Structure
61 An HTML Document is mainly divided into two parts: HEAD : This contains the information about the HTML document. For Example, Title of the page, version of HTML, Meta Data etc. BODY : This contains everything you want to display on the Web Page. HTML - Structure
62 Every Webpage must contain the above code . <!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5 . <html>: This is called HTML root element and used to wrap all the code . <head>: Head tag contains metadata, title, page CSS etc . <body>: Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element . HTML - Structure
63 Example: Output: HTML – First Web Page
64 The following tags help in organization and basic formatting of elements in our script or web pages . HTML Paragraph <p> </p> - to write paragraph statements in a webpage. Break </ br > - to break line and acts as a carriage return . Horizontal Rule < hr > - to break the page into various parts, creating horizontal margins HTML Images <img src =” source_of_image “> - to insert an image into our web page HTML Attributes - to provide extra or additional information about an element HTML Comments - for inserting comments in the HTML code Basic HTML Tags & Attributes
65 Basic HTML Tags & Attributes <html> <head> <!-- Example for Basic Tags --> <title>Basic Tags</title> <meta charset="UTF-8"> </head> <body> <h1>Tags and Usages</h1> <p> Computer Science Engineering (CSE) < br >is one of the popular domains among engineering aspirants which focuses on the basic elements of computer programming.< br > </p> <hr> < img src ="download.jpg"> </body> </html>
66 Basic HTML Tags & Attributes
Introduction to HTML5
68 HTML first published 1991 2012 2002 -2009 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0 HTML5 1995 1997 1999 2014 HTML5.1 History After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. XHTML 2.0 had very strict standards but was abandoned in 2009 in favor of HTML5. HTML5 is much more tolerant and can handle markup from all the prior versions. A working draft was released in 2012 and it is scheduled to be finalized by the end of 2014.
Support all existing web pages . Reduce the need for external plugins and scripts . Improve the semantic definition. Make the rendering of web content universal and independent of the device being used. Handle web documents errors in a better and more consistent fashion. 69 GOALS
Built-in audio and video support (without plugins) Enhanced form controls and attributes The Canvas (a way to draw directly on a web page) Drag and Drop functionality Support for CSS3 (the newer and more powerful version of CSS) More advanced features for web developers, such as data storage and offline applications . 70 FEATURES
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01// EN“ "http ://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Head First Lounge</title> <meta http- equiv ="content-type" content="text/html; charset=UTF-8"> <link type="text/ css " rel ="stylesheet" href ="lounge.css"> <script type="text/ javascript " src ="lounge.js"></script> </head> <body> <h1>Welcome to Head First Lounge</h1> <p> < img src ="drinks.gif" alt="Drinks"> </p> <p> Join us any evening for refreshing <a href ="elixirs.html">elixirs</a>, conversation and maybe a game or two of Tap Tap Revolution. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> </body> </html> 71 HTML 4.1
72 DOCTYPE Declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN“ " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> Just 15 characters!
<!DOCTYPE html> <html lang =" en "> <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel ="stylesheet" href ="style.css"> </head> <body> <p>HTML5 is fun!</p> </body> </ html> 74 HTML5
Semantic Tags: A semantic element clearly describes its meaning to both the browser and the developer. HTML5 introduces many semantic elements which make the code easier to write and understand for the developer as well as instructs the browser on how to treat them. A Semantic Web “allows data to be shared and reused across applications , enterprises, and communities." 75 HTML 5 - Semantics
76 HTML - Lists A list is a record of short pieces of information , such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find. HTML offers three ways for specifying lists of information. All lists must contain one or more list elements. An unordered list - ul An ordered list - ol
77 An Unordered Lists An unordered list starts with the “ul” tag . Each list item starts with the “li” tag . The list items are marked with bullets i.e. small black circles by default . The HTML Unordered List has various List Item Markers :- Disc Circle Square < ul style=" list-style-type:disc /circle/square">
78 An Ordered Lists An ordered list starts with the “ol” tag. Each list item starts with the “li” tag . The list items are marked with numbers by default . The HTML Ordered List has various List Item Markers : Items numbered with numbers Items numbered with uppercase letters Items numbered with lowercase letters Items numbered with uppercase roman numbers Items numbered with lowercase roman numbers <ol type=“1” / “A” / “a” / “I” / “i”>
79 Lists Example Code Output
80 HTML 5 - Header The <header> tag in HTML is used to define the header for a document or a section . Syntax: The header tag contains information related to the title and heading of the related content . The browsers which supports <header> tag are : Google Chrome 6.0, Internet Explorer 9.0, Firefox 4.0, Opera 11.1, Safari 5.0
81 Header Example
82 HTML 5 - Footer The <footer> element specifies a footer for a document or section . A element should contain information about its containing element . A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc . Syntax: <footer> ... </footer >
83 Footer - Example
84 HTML 5 - NAV The <nav> element defines a set of navigation links . Websites typically have sections dedicated to navigational links, which enables users to navigate the site . These links can be placed inside a nav tag . The links in the nav element may point to other webpages or to different sections of the same webpage. Syntax: <nav> Links </nav>
85 HTML 5 - Aside The <aside> tag is used to describe the main object of the web page in a shorter way like a highlighter . It basically identifies the content that is related to the primary content of the web page but does not constitute the main intent of the primary page. The <aside> tag contains mainly author information, links, related content, and so on . The <aside> tag makes it easy to design the page and it enhances the clarity of HTML document . Syntax: < aside> < h1>Contents...</h1> </ aside>
86 HTML 5 - Article The element specifies independent, self-contained content . An article should make sense on its own, and it should be possible to read it independently from the rest of the web site . Can be used for Forum Post Blog Post Newspaper Article Syntax < article > Contents </article>
87 HTML 5 - Article
88 HTML 5 - FIGURE AND FIGCAPTION These are used to add an image in a web page with small description.
89 HTML 5 - Control Elements HTML Control Elements are responsible to accept the User input in a specified manner . These elements can be grouped together inside a form to collect data from a User in a User-friendly manner .
90 HTML 5 - Input Text Control Input text controls are used to collect User data as a free text . On the web page, it will form a rectangle box where Users can input the data . There are different types of input text controls that can be used in the HTML forms . Single line Input Text Control Multi-line Input Text Control Password Input Control
91 Single line Input Text Control This allows the user to enter only a single line of data. A typical example of such input text controls is for entering the name, search box, city, etc .
92 Multi-line Input Text Control This input control type allows the user to enter data of multiple lines. Typical usage of such input controls is for comments, addresses, description and so on.
93 Password Input Control T his is typically used for the password field . This works in the same way as the input text field but the text gets masked for safety purposes.
94 Input Type Submit When input type is of submitting it performs the action defined in the form action and sends the form data to the server.
95 Input Type Radio Radio buttons are used when you expect Users to fill data as a Boolean value or you expect only one input as true out of multiple options.
96 Input Type Checkbox A checkbox lets the User select whatever information is true in his case. It is a very convenient way of accepting the data when the possible input is already known.
97 Input Type drop-down list The drop-down list enables the user to select one option out of multiple possible options . This is a very User-friendly way to get the detail from the User as it provides an exhaustive list of possible options that helps the user to identify the option best suits him .
98 Input Type Optgroup Optgroup works in a similar way as of the drop-down list, the only difference is that the optgroup lets you to logically group certain options under one umbrella . It helps the user to quickly identify the relevant option with the help of the optgroup label.
99 Fieldset Fieldset is another useful tag in the Html form which let the developer to logically group certain controls under one legend , this help the developer to give User a clear instruction on what to expect in this section.
100 HTML output Tag It let you display the outpu t of a calculation instantly. This is quite useful when the user needs to do ay calculation instantly and see the results.
101 Input type Color It is often required in the form to just show the color instead of any text. It shows the color which you want to display in the form. Typical scenario’s where it is being used is to show the status of a project or a phase .
102 Input type Date Input type date is commonly used where a date type field as input is expected by the User, it could be anything like a Date of Birth, Hiring date, termination date and so on .
103 HTML 5 Tables The HTML table provides a way to derive or define the data such as text, images, links etc. in terms of rows and columns of cells . The HTML tables can be created by using <table> tag . The table can be created by using < th >, <td>, and < tr > tags . The < th > tag defines a heading for the table . The <td> tag specifies the table data cells which is used to make the column. The < tr > tag specifies the table rows which is used to make a row. The table data can be structured within <table>content of the table</table> with numerous table elements.