FULLSTACK

DEVELOPMENT
(22IS503)
Frontend
Frontend Backend
Frontend Backend Database
Frontend Backend Database

Full-Stack
 ORIGINS OF THE INTERNET
 1960s: U.S. Department of Defense (DoD) initiated a large-
scale computer network for communication and research
purposes.
 Key Development:
 1969: First node of ARPAnet at UCLA, connecting ARPA-funded
research labs.
 Late 1970s and 1980s: BITNET and CSNET developed but did not
become widely used.
 1986: NSFnet created, replacing ARPAnet by 1990 for non-
military uses.
 1995: Transitioned to the modern Internet, connecting over 1
million computers globally.
WHAT IS THE INTERNET?
 Definition: A vast collection of computers and devices
connected through a communications network.
 Key Point: Devices communicate using the
Transmission Control Protocol/Internet Protocol (TCP/IP).
 Structure:
 Internet is a network of networks, not a network of
individual computers.
 Devices on the Internet must be uniquely identifiable.
INTERNET PROTOCOL (IP)
ADDRESSES
 Definition: A 32-bit unique numeric address for each device.
 Structure: Written as four 8-bit numbers (e.g., 192.168.0.1).
 IP Assignment:
 Organizations receive blocks of IP addresses.
 Example: Department of Defense may be assigned 16 million IPs.

 IPv6: Introduced to expand IP addresses from 32 bits to 128 bits due to a

shortage of available addresses.
DOMAIN NAMES
 Definition: Textual names assigned to machines, easier to remember than
IP addresses.
 Structured as hostname followed by progressively larger domains.
 Example:
 mcehassan.ac.in

 Top-level Domains:.edu, .com, .gov, .org in the U.S.

 Country Codes: e.g., .se (Sweden), .kz (Kazakhstan)., .in (India)
 DOMAIN NAME CONVERSION

 How it Works:
 Fully Qualified Domain Names (FQDN) are converted to IP addresses by name servers.
 Name servers perform lookups to match domain names with their corresponding IP
addresses.
 Example Process:
 Browser sends a domain name request.
 Nearest name server translates it to an IP address, and the message is routed to the Web
server.
 Click Here - https://15.206.108.170/(IP Address of mcehassan.ac.in)
 INTERNET PROTOCOLS
 Early Protocols Running on TCP/IP:
 Telnet: Remote login to another computer.
 File Transfer Protocol (FTP): Transfer files between computers.
 Usenet: Electronic bulletin board system.
 Mailto: Send messages between users on different machines.
GROWTH AND THE WORLD
WIDE WEB
 Limitations of Early Protocols:
 Different protocols required separate user interfaces, hindering Internet growth.

 Solution:
 The development of the World Wide Web, a unified platform, improved
accessibility and usability.
THE WORLD WIDE WEB
(WWW)
 A system for exchanging documents over the Internet, created by Tim
Berners-Lee and his team at CERN in 1989.
 Purpose: To allow scientists worldwide to share their work using the
Internet.
 Key Feature: Hypertext for nonsequential browsing of documents.
 Key Milestones
 1990: Web fully developed and implemented at CERN.
 1991: Web system ported to other platforms and released globally.
 Hypertext: Links embedded in text for easy browsing.
WHAT IS A WEB
DOCUMENT?
 Documents are units of information accessed through browsers and
provided by servers.
 Can contain text, images, sounds (hypermedia).
Difference between Web and Internet?
DIFFERENCE BETWEEN WEB
AND INTERNET
 Internet: A collection of computers/devices connected globally.
 Web: Software and protocols using the Internet, primarily web servers and
browsers.
WEB BROWSERS
 Client-Server Interaction: Browsers (clients) request documents, servers
provide them.
 Mosaic (1993): First graphical browser, major milestone in Web growth.
 Modern Browsers: Internet Explorer, Firefox, Safari, Google Chrome, Edge etc.
WEB SERVERS

 A Web server is a program that generates and transmits responses to client

requests for Web resources.
 Handling a client request consists of several key steps:
 Parsing the request message
 Checking that the request is authorized
 Associating the URL in the request with a file name
 Constructing the response message
 Transmitting the response message to the requesting client

 The server can generate the response message in a variety of ways:

 The server simply retrieves the file associated with the URL and returns the
contents to the client.
 The server may invoke a script that communicates with other servers or a back-
end database to construct the response message.
 POPULAR WEB SERVERS
 Apache: Fast, reliable, open-source, widely used.
 IIS (Microsoft): Popular for Windows platforms, includes GUI-based
management.
IIS WEB SERVER APACHE TOMCAT SERVER
IIS Webserver is operating system dependent. It runs Apache webserver is operating system independent.
in only windows environment (i.e.) Apache can run on almost any OS including UIX,
Apple OS, and on Linus OS

IIS is developed by Microsoft Apache is developed by Apache Foundation

IIS server runs in user space and kernel space Apache server runs in user space

IIS is not Open Source Apache Webserver is open source

IIS is both webserver and application server Apache tomcat server is only webserver

IIS has a dedicated staff to answer most problems Support for Apache comes from the community itself
UNIFORM RESOURCE
LOCATORS
 URL Formats
 General format: scheme:object-address
 Common schemes: http, ftp, telnet, mailto, file, etc.
 For HTTP: //fully-qualified-domain-name/path-to-document
 For file protocol: file://path-to-document
 Host name: Identifies the server that stores the document.
 Port numbers: Default is 80 for Web servers. A custom port (e.g., 800) is
specified by appending :800 to the host name.
 URL rules: No embedded spaces; certain characters must be percent-encoded
(e.g., %20 for space).
UNIFORM RESOURCE
LOCATORS
 URL Paths
 Paths resemble file system paths, with / separators for UNIX and \ for Windows.
 Eg.: http://www.gumboco.com/files/f99/storefront.html
 Complete path: Includes all directories.
 Partial path: Server base path is pre-configured, e.g., /storefront.html.
 If the path is a directory, it ends with /.
 The home page (often index.html) is served if no specific file is requested.
 Eg.: http://www.gumboco.com/
XHTML: ORIGINS AND
EVOLUTION OF HTML AND
XHTML
 What is HTML?
 HTML (HyperText Markup Language): A language used to describe web pages,
but it is not a programming language. Instead, it's a markup language, which uses a
set of tags to structure and display content.
 HTML Tags:
 Typically, HTML tags come in pairs, such as <b> and </b>, with the first tag being the
opening (start) tag and the second being the closing (end) tag.
 Tags are enclosed in angle brackets like <html>. These markup tags help format and
organize the web page content.
 Origins of HTML
 Tim Berners-Lee: Developed the original idea of HTML while working at CERN in 1980,
proposing a system called ENQUIRE. Later, in 1989, he conceptualized an Internet-based
hypertext system, which led to HTML's creation.
 First Specifications: The first public description of HTML, called HTML Tags, appeared in
1991 and introduced 20 elements that formed the basis for modern HTML, many influenced
by the SGML documentation format at CERN.
XHTML: ORIGINS AND
EVOLUTION OF HTML AND
XHTML
 HTML's Evolution
 HTML evolved from its simple early version to more advanced ones:
 HTML 2.0 (1995): This was the first version to be formalized as a standard.
 HTML 3.2 (1997): Introduced more visual formatting tags and reconciled competing proprietary
extensions from browsers.
 HTML 4.0 and 4.01 (1997-1999): Introduced variations such as strict, transitional, and frameset
versions, while also aiming to deprecate older, proprietary visual formatting tags.
 HTML 5 (2008): Introduced as a working draft, marked a shift from HTML’s roots as an SGML-
based application, defining its own serialization instead.
 XHTML and Standardization
 XHTML: An XML-based version of HTML developed by the W3C to bring more structure and
formality to HTML. HTML eventually became an international standard with ISO/IEC 15445:2000,
but XHTML was introduced in the early 2000s as part of efforts to move towards XML-based
standards.
 Version Timeline Highlights:
 1993: The first HTML+ draft was released, introducing support for forms, tables, and inline images.
 1995: HTML 2.0 introduced standardized web page structuring elements.
 1997-1999: HTML 3.2 and 4.01 marked significant standardization milestones, addressing browser-
specific discrepancies.
 2008: HTML 5 began its development, focusing on modern web development needs and diverging
from SGML.
XHTML
 XHTML (Extensible Hypertext Markup Language): A family of XML-
based languages mirroring or extending HTML.
 Ensures well-formed documents that can be parsed with standard XML
parsers.
 W3C Recommendation: XHTML 1.0 (Jan 2000), XHTML 1.1 (May 2001),
XHTML5 (under development since Sept 2009).
ORIGIN AND BACKGROUND
 XHTML 1.0: Reformulation of HTML 4 document types as XML applications.
 Developers could leverage XML’s benefits while ensuring backward and
forward compatibility.
 HTML5 Standardization: Due to limited browser support for XHTML 2.0,
focus shifted to HTML5 (recognized by W3C in 2007).
XHTML 1.0 DTDS
 XHTML 1.0 Strict: XML equivalent to strict HTML 4.01.
 XHTML 1.0 Transitional: Allows presentational elements (e.g., center,
font).
 XHTML 1.0 Frameset: Allows the definition of frameset documents.
MODULARIZATION OF
XHTML
 Introduced in April 2001 to extend XHTML’s reach to devices like mobile
phones.
 Modularization of XHTML led to languages like XHTML 1.1 and XHTML Basic.
 XHTML-Print (2006): Designed for printing from mobile devices.
XHTML 1.1
 Built on XHTML 1.0 Strict with added ruby annotation for East-Asian
language support.
 Limited use due to browser incompatibility with application/xhtml+xml.
 Allowed serving XHTML 1.1 as text/html after January 2009.
XHTML BASIC AND MOBILE
PROFILE
 XHTML Basic: A minimalist version for limited devices (Recommendation
in 2000).
 XHTML-MP (Mobile Profile): Extended XHTML Basic for richer form
controls and scripting on mobile devices.
XHTML 2.0
 Drafted between 2002–2006 but discarded due to incompatibility with
HTML 1.x.
 New Features: Replaced forms with XForms, frames with XFrames, and
introduced “nl” for navigation lists.
 Development halted by W3C in 2009.
TRANSITION TO
HTML5/XHTML5
 HTML5: Initially developed by the Web Hypertext Application Technology
Working Group (WHATWG) for dynamic web apps.
 Adopted by W3C in 2007, and HTML5 Working Draft published in January
2008.
 XHTML5: XML serialization of HTML5, more compatible with previous
HTML/XHTML standards than XHTML 2.0.
INTRODUCTION TO HTML
AND XHTML SYNTAX
 HTML and XHTML are both markup languages.
 HTML: More lenient syntax rules, tag names are case-insensitive.
 XHTML: Follows strict XML syntax rules, case-sensitive.
 Key differences between HTML and XHTML will be covered in this
presentation.
THE DOCUMENT TREE
STRUCTURE
 A web page consists of nested HTML elements.
 Example: <html>, <head>, <body>, <p>, etc.
 Tags must be properly opened and closed in the right order.
 Example of valid and invalid markup:
 Valid:
 <p>Content <em>with emphasis</em></p>
 Invalid:
 <p>Content <em>with emphasis</p></em>
CASE SENSITIVITY IN HTML
AND XHTML
 <P>Paragraph</P> and <p>Paragraph</p> are both valid.
 XHTML: Tags must be written in lowercase.
 <p>Paragraph</p> is valid, but
 <P>Paragraph</P> is not.
IMPORTANCE OF OPENING
AND CLOSING TAGS
 HTML: Some closing tags can be omitted.
 Example: <p>Paragraph 1<p>Paragraph 2

 XHTML: All tags must be explicitly closed.

 Example: <p>Paragraph 1</p><p>Paragraph 2</p>

 Example for Empty Tags:

 HTML: <img src="image.jpg">
 XHTML: <img src="image.jpg" />
READABILITY
CONSIDERATIONS
 Use of whitespace and attribute quoting:
 <img src="image.jpg" alt="description" /> (preferable in both HTML and XHTML)

 In XHTML, attribute values must be quoted.

 Example: class="gallery", not class=gallery.
COMMENTING IN HTML AND
XHTML
 Syntax: <!-- This is a comment -->
 Comments must not contain double hyphens (--) within the content.
 Example of valid comment:
 <!-- Look out for the castle -->

 Invalid:
 <!-- Look out for -- the castle -->
STANDARD XHTML
DOCUMENT STRUCTURE
 DOCTYPE: Declares the document type.
 <html>: Root element.
 <head>: Contains metadata, title.
 <body>: Contains the page content.
 Example:
EXAMPLE
 Create a simple HTML web page that includes:
 A title and headers using <h1>, <h2>, and <h3> tags.
 Several paragraphs of text with proper formatting.Line breaks between different
sections.
 A form that collects basic information (name, email, and a short message).

 The goal is to practice using the basic structure of HTML, including

headers, paragraphs, line breaks, and forms, while ensuring the HTML is
well-formed.

 Click here for Solution