BCA SEE411 (INTERNET AND WEB TECHNOLOGY)

Lecture notes –

1) WWW stands for "World Wide Web." It is a system of interlinked,

hypertext documents that are accessed via the internet. The World
Wide Web, or simply Web, is a way of accessing information over
the medium of the Internet. It is an information-sharing model that
is built on top of the Internet. The Web uses the HTTP protocol, only
one of the languages spoken over the Internet, to transmit data, and
HTML, XML, CSS, JavaScript are some of the languages used to
create web pages and other information that can be displayed in a
web browser. Websites, which are collections of web pages, are the
most common way to access the Web. A user can access a website
by typing in a URL (Uniform Resource Locator) into a web browser,
such as Chrome, Firefox, Safari, and Internet Explorer.

History of World Wide Web

The World Wide Web (WWW or Web) was created in 1989 by Sir Tim
Berners-Lee while he was a computer scientist at CERN, the
European physics research organization. Berners-Lee developed the
Web as a system for scientists to share and collaborate on research
documents. He wrote the first web browser and server software, and
also created the first website, which remains online to this day. The
Web grew slowly at first, but by the mid-1990s it had become widely
used and had a significant impact on communication and
commerce. The first commercial website was launched in 1993, and
the first search engine, Archie, was created in 1990. The Web has
continued to evolve and expand, with the development of new
technologies such as social media, mobile devices, and the Internet
of Things. Today, the Web is an essential part of daily life for billions
of people around the world.
The first website created by Sir Tim Berners-Lee was located at
http://info.cern.ch/. It was a simple website that provided
information about the World Wide Web project and the software
used to access it. The website was hosted on a NeXT computer at
CERN (the European Organization for Nuclear Research) in
Switzerland. The website was launched on August 6, 1991, and it is
considered to be the first website ever created. It no longer exist
today but you can find a replica of the website which was created
for historical reference.
2) Protocols governing the World Wide Web
The World Wide Web (WWW) is based on a set of protocols that
govern the way information is transmitted and accessed on the
Internet. The most important protocols for the Web are:

HTTP (Hypertext Transfer Protocol): This is the backbone of the

Web, and is used for transmitting data between web browsers and
web servers. It defines how messages are formatted and
transmitted, and what actions Web servers and browsers should
take in response to various commands.

HTML (Hypertext Markup Language): This is the standard markup

language used for creating web pages. It provides a way to
structure and format text, images, and other content, and is used to
create the layout and design of web pages.

URL (Uniform Resource Locator): This is the standard way to specify

the location of a web resource, such as a webpage or image. URLs
are used to request web pages from servers, and are also used to
link to other web pages.

DNS (Domain Name System): This is the system that translates

domain names (such as www.example.com) into IP addresses, which
are used to identify servers on the Internet.
The domain name www is managed by the Internet Corporation for
Assigned Names and Numbers (ICANN), a non-profit organization
that is responsible for coordinating the maintenance and
methodologies of several databases related to the namespaces of
the internet, ensuring the network's stable and secure operation.

ICANN is responsible for managing the top-level domain (TLD) name

space, which includes the assignment of domain names to specific
organizations, such as registrars and registries. Registrars, such as
GoDaddy, Namecheap, Network Solutions, etc, are responsible for
registering domain names and linking them to IP addresses, while
registries, such as Verisign, Afilias, Public Interest Registry, etc, are
responsible for maintaining the databases of registered domain
names.

In summary, the DNS for www is managed by ICANN through the

coordination of registries and registrars.
HTTPS (HTTP Secure): This is an extension of HTTP that provides
secure communication by encrypting the data being transmitted. It
is commonly used for online transactions and login pages, to protect
sensitive information such as credit card numbers and personal
data.

These are the main protocols that govern the World Wide Web but
there are many other protocols that work together to make the web
work such as FTP, SMTP, and more.

Domain names are resolved to IP addresses in the World Wide Web

(WWW) through a process called the Domain Name System (DNS)
resolution. The process works as follows:
 When a user types in a domain name (such as www.example.com)
into their web browser, the browser sends a request to a DNS
resolver, which is typically provided by the user's internet service
provider (ISP).

The DNS resolver starts by checking its cache to see if it has

recently resolved the domain name to an IP address. If it has, it
returns the IP address to the browser.

If the DNS resolver does not have the IP address in its cache, it
sends a request to a root nameserver. The root nameserver
responds with the IP address of a top-level domain (TLD)
nameserver, based on the TLD of the domain name (such
as .com, .org, .edu, etc).

The DNS resolver then sends a request to the TLD nameserver,

which responds with the IP address of the authoritative nameserver
for the domain name.

The DNS resolver then sends a request to the authoritative

nameserver, which responds with the IP address that is associated
with the domain name.

The DNS resolver caches the IP address for a certain period of time
and returns it to the browser, which then uses it to establish a
connection to the web server associated with the domain name.

It's worth noting that this process is done in a fraction of a second

and the whole process is done automatically by the browser. Also,
the IP address associated with a domain name can change over
time, so the DNS resolver may need to repeat this process in the
future when the IP address changes.

3) syntax of URLs
[scheme]://[host]:[port]/[path]?[query]#[fragment]

 scheme: This specifies the protocol used to access the resource,

such as http, https, ftp, or others.
 host: This is the domain name or IP address of the server where the
resource is located.
 port: This is an optional component that specifies the port number
to be used to connect to the server.
 path: This specifies the location of the resource on the server.
 query: This is an optional component that specifies additional
parameters for the resource. It starts with a ? and is followed by a
string of key-value pairs separated by &
 fragment: This is an optional component that specifies a specific
location within the resource. It starts with a # and is used to link to
a specific section of a web page.

It's important to note that while the syntax of URLs is standardized,

different servers may have different requirements and may use
different conventions for specifying resources.

Example –
http://www.example.com:8080/path/to/resource?
key1=value1&key2=value2#section2

scheme: http
host: www.example.com
port: 8080
path: /path/to/resource
query: key1=value1&key2=value2
fragment: section2
In this example, the URL is using the http protocol to access the
server at www.example.com on port 8080. The resource being
requested is located at /path/to/resource on the server. The query
component is used to pass additional parameters to the resource, in
this case key1 and key2 with values value1 and value2 respectively.
The fragment section2 is used to specify a specific location within
the resource, in this case a section with the name 'section2' on the
webpage.

It's worth noting that many websites use https instead of http to
secure the connection between the client and the server and the
port number for https is 443. Also, the query and fragment parts are
optional and may not be present in every URL, and the port number
may also be omitted if it is using the default port for the protocol.

4) web page and browsers

A web page is a document that can be viewed in a web browser. It is
written in a markup language such as HTML (Hypertext Markup
Language) and may also include other languages such as JavaScript
and CSS (Cascading Style Sheets) to provide additional functionality
and styling.

Web pages are typically accessed using a web browser, which is a

software application that allows users to view and interact with web
pages. Some examples of popular web browsers are Google
Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera.

When a user types a URL into the browser's address bar or clicks on
a link, the browser sends a request to the server where the web
page is located. The server then sends the web page back to the
browser, which renders it and displays it on the user's screen.
Browsers use various technologies to display web pages, such as
HTML, JavaScript and CSS. They also use web page rendering
engines such as Blink, Gecko and Webkit, which are responsible for
interpreting and rendering the code of the web page.

Web browsers also provide features such as bookmarks, history, and

extensions, which allows users to save and access frequently visited
pages and add additional functionality to the browser.

Web browsers also have built-in developer tools, which allows web
developers to inspect and debug web pages, and also to optimize
web pages for better performance and accessibility.

Example –
An example of a web page would be a search engine like Google.
When you type "google.com" in the browser's address bar and hit
enter, the browser sends a request to the server where the Google
website is located. The server then sends the HTML, JavaScript, and
CSS code for the Google homepage to the browser. The browser
then renders the code and displays the Google homepage on the
user's screen.

The Google homepage allows users to type in a search query and

also has links to other Google services like Gmail, Google Drive,
Google Maps and more. The homepage also includes several other
elements like images, videos, and advertisements. All of these
elements are included in the HTML code and rendered by the
browser to create the final page that the user sees.

In addition to the web page, Google also uses JavaScript to provide

additional functionality such as autocomplete suggestions as you
type in the search query, and it also uses CSS to control the layout
and styling of the page.

Web browsers also provide features such as bookmarks, history, and

extensions, which allows users to save and access frequently visited
pages and add additional functionality to the browser.

HTML Example –
HTML (Hypertext Markup Language) is the standard markup
language used for creating web pages. It provides a way to
structure and format text, images, and other content. Here is an
example of a simple HTML document:

<!DOCTYPE html>
<html>
<head>
<title>My Simple HTML Page</title>
 </head>
<body>
<h1>Welcome to my website!</h1>
<p>This is a simple example of an HTML document.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<img src="image.jpg" alt="Example Image">
<a href="https://www.example.com">Visit example.com</a>
</body>
</html>

This example includes the basic structure of an HTML document. It

starts with a <!DOCTYPE> declaration, which tells the browser that
this is an HTML document. The <html> element is the root element
of the document, and it contains the <head> and <body>
elements.

The <head> element contains metadata about the document, such

as the title of the page, which is displayed in the browser's title bar
or tab.

The <body> element contains the content that is displayed on the

web page, such as text, images, and links. In this example, it
includes a heading, a paragraph, an unordered list, an image, and a
hyperlink.

This is a very basic example, but HTML documents can include

many other elements and attributes, such as forms, tables, and
more, that provide additional functionality and layout options.

HTML 5-
The latest version of HTML (Hypertext Markup Language) is HTML5.
HTML5 was first published as a W3C Recommendation in October
2014.

HTML5 is the fifth and current major version of HTML, and it has
been designed to improve the language with support for the latest
multimedia, while keeping it easily readable by humans and
consistently understood by computers and devices. It aims to
reduce the need for proprietary plug-in-based rich internet
application (RIA) technologies such as Adobe Flash and Microsoft
Silverlight.

HTML5 includes new features such as semantic tags, multimedia

support, offline storage, and improved forms. It also includes
support for WebSockets, a technology that allows for real-time, two-
way communication between a web browser and a server.
Additionally, it also introduced Web Workers, which enables multi-
threading in web pages, and WebSockets which allow for real-time
communication between browser and server.

HTML5 introduced several new tags and attributes that are not
present in previous versions of HTML. Some of the main differences
between HTML5 and previous versions of HTML include:

New semantic tags: HTML5 introduced several new tags that

provide additional meaning to the content they enclose. Examples
include <header>, <nav>, <article>, <section>, <aside>,
<footer>, and <figure>. These tags allow developers to create
more meaningful and structured documents, which can improve
accessibility and search engine optimization.

New multimedia tags: HTML5 also introduced new tags to handle

multimedia content, such as <audio> and <video>, which allow
developers to embed audio and video content directly into web
pages without the need for third-party plug-ins.

New form elements: HTML5 also introduced new form elements,

such as the <search>, <tel>, <url>, <email>, and <date> input
types, as well as the <datalist> and <output> tags.

Deprecated tags: HTML5 has deprecated some tags that were

present in previous versions of HTML. These tags are still supported
by web browsers, but their use is discouraged in favor of the new
semantic tags. Examples of deprecated tags include <center>,
<font>, <frame>, and <strike>.

New attributes: HTML5 also introduced new attributes to existing

tags, such as the "placeholder" attribute for the <input> tag, which
allows developers to provide a hint to the user about the expected
value of an input field.

Changes in the doctype: HTML5 also introduced a simplified

doctype, which is just <!DOCTYPE html> compared to the longer
doctype of previous versions of HTML.

In summary, HTML5 introduced a number of new tags, attributes

and elements to improve the structure and semantics of web pages,
new multimedia tags for handling audio and video, new form
elements for improved forms functionality, deprecated some older
tags and introduced a simplified doctype.

There are many tutorials available to help you learn HTML5. Here
are a few resources that you can use to get started:
W3Schools: W3Schools is a popular web development site that
provides tutorials, quizzes, and references on various web
development topics, including HTML5. The site provides a
comprehensive guide to HTML5, including new tags, attributes, and
features.

Codecademy: Codecademy is an online learning platform that offers

interactive coding lessons on various programming languages,
including HTML5. The platform is designed to help beginners learn
HTML5 in a fun and interactive way.

MDN Web Docs: MDN Web Docs (formerly Mozilla Developer

Network) is a comprehensive resource for web developers. It
provides detailed documentation and tutorials on HTML5 and other
web technologies, including interactive examples and explanations.

FreeCodeCamp: FreeCodeCamp is a non-profit organization that

provides a comprehensive curriculum for learning web
development, including HTML5. The curriculum is designed to take
you from beginner to advanced, and it includes hands-on coding
challenges and projects.

HTML5 Rocks: HTML5 Rocks is a website created by Google, which

provides tutorials and articles on HTML5, including best practices,
case studies, and a comprehensive reference section.

These tutorials will give you a good foundation in HTML5 and guide
you through the process of creating web pages using the latest
version of HTML. They will also help you to understand the new tags,
attributes, and features that are available in HTML5 and how to use
them effectively.

Why learn HTML when we have editors(WYSIWYG)”?

While visual editors like WYSIWYG (What You See Is What You Get)
can make creating web pages more accessible, learning HTML
(Hypertext Markup Language) is still important for several reasons:

Understanding of the underlying structure: Understanding the

underlying structure of a web page is important for making informed
design decisions and for troubleshooting issues that may arise.
HTML provides the basic structure of a web page, including
headings, paragraphs, images, links, and other elements.

Control over the final outcome: While visual editors can be useful for
quickly creating simple web pages, they can also limit your control
over the final outcome. By learning HTML, you can have full control
over the layout, design, and functionality of your web pages.
Search engine optimization: Search engines use the HTML code of a
web page to understand its content and to determine its relevance
to certain keywords. By learning HTML, you can optimize the code of
your web pages for search engines, which can improve their
visibility and ranking in search results.

Accessibility: HTML is designed to be accessible to all users,

including those with disabilities. By learning HTML, you can create
web pages that are accessible to a wide range of users and devices,
which can help to ensure that your content is available to as many
people as possible.

Career opportunities: Understanding HTML is a key skill for many

web development and digital marketing jobs.

In summary, while visual editors can be useful for creating simple

web pages quickly, learning HTML can give you greater control over
the final outcome, help with search engine optimization,
accessibility, and open up career opportunities in web development
and digital marketing.

WYSIWYG (What You See Is What You Get) HTML editors are tools
that allow users to create and edit web pages using a visual
interface, rather than writing code. Some of the leading WYSIWYG
HTML editors include:

Adobe Dreamweaver: Dreamweaver is a professional web

development tool that offers both a visual editing interface and a
code view. It includes a wide range of features, including support for
responsive design, CSS and JavaScript editing, and integration with
other Adobe tools.

Wix: Wix is a popular website builder that allows users to create and
edit web pages using a drag-and-drop interface. It includes a wide
range of templates, design elements, and e-commerce features.

Webflow: Webflow is a web design tool that allows users to create

and edit web pages using a visual interface. It includes features
such as responsive design, CSS and JavaScript editing, and built-in
CMS.

Bootstrap Studio: Bootstrap Studio is a web design tool that makes

it easy to create responsive websites using the Bootstrap
framework. It includes a range of pre-designed components, and the
ability to export clean, semantic HTML and CSS.

BlueGriffon: BlueGriffon is a free, open-source WYSIWYG editor that

is based on the Firefox browser. It includes support for HTML, CSS,
and JavaScript, and includes a range of editing and design tools.
Weebly: Weebly is a website builder that is easy to use, and It
includes a drag-and-drop interface, a wide range of templates and
design elements, and e-commerce features.

These are some of the leading WYSIWYG HTML editors available,

each with its own set of features and capabilities. They can be
useful for creating and editing web pages quickly and easily, without
needing to write code.

Here are a few popular free WYSIWYG HTML editors:

BlueGriffon: BlueGriffon is a free, open-source WYSIWYG editor that

is based on the Firefox browser. It includes support for HTML, CSS,
and JavaScript, and includes a range of editing and design tools.

KompoZer: KompoZer is a free, open-source WYSIWYG editor that is

similar to Dreamweaver. It includes a visual editing interface, a code
view, and support for HTML, CSS, and JavaScript.

SeaMonkey: SeaMonkey is a free, open-source web browser and

web development tool that includes a WYSIWYG editor, a code view,
and support for HTML, CSS, and JavaScript.

Amaya: Amaya is a free, open-source web development tool that

includes a WYSIWYG editor, a code view, and support for HTML, CSS,
and JavaScript.

Aptana Studio: Aptana Studio is a free, open-source web

development tool that includes a WYSIWYG editor, a code view, and
support for HTML, CSS, and JavaScript.

Nvu: Nvu is a free, open-source WYSIWYG editor that is similar to

Dreamweaver. It includes a visual editing interface, a code view,
and support for HTML, CSS, and JavaScript.

These are a few examples of free WYSIWYG HTML editors that can
be useful for creating and editing web pages, without having to
write code. They may not have all the features of paid software but
they can be suitable for basic web development or personal use.

HTML5 is now widely supported by web browsers, including Chrome,

Firefox, Safari, and Internet Explorer, making it the go-to version for
web development