SET-I
Ans no. 1.
The internet and the World Wide Web (WWW) are sometimes thought of as the same thing.
While they both refer to communication over computers globally, they actually mean two
very different things. To properly understand digital communications technology, how it
works within our societies, and how it is developed and used, we must first understand this
distinction.
Basic Difference
The Internet is a worldwide network of interconnected computer networks. While the Internet
is composed of cables, routers, servers, and protocols that allow different computers around
the globe to communicate with one another, the World Wide Web is a service or application
that runs on top of the Internet. In a manner of speaking, the Internet has a highway, with the
World Wide Web, along with other services such as email and FTP, as the vehicles that travel
along the highway.
2. Roles in Digital Communication and Information Sharing
o Purposes of the Internet: The Internet is the basic medium of networking for all
communications over the Internet. More than just hosting the World Wide Web, it
supports e-mail, chat, VoIP through such programs as Skype, file transfers through
FTP, and media streaming. Its primary purpose is to provide a connectivity platform
that orchestrates data exchanges between computers across different networks.
o World Wide Web's Role: The Internet's role as a means of distributing and accessing
information to the general public is primarily through the World Wide Web. The
World Wide Web structures information through hyperlinks and multimedia, enabling
users to access and navigate through this repository of knowledge using Web
browsers. It has evolved into the main forum for disseminating information to the
public, participating in e-commerce, communicating with others via social
networking, and utilizing cloud-based applications to accomplish various tasks.
Using different underlying technologies to create the Internet
o Internet Technologies: The Internet consists primarily of many low-level protocols
that define the transmission and networking of data. Among these protocols is TCP/IP,
which specifies how data is packaged, addressed, transmitted, routed, and received.
Other protocols that are also critical to the Internet include the DNS protocol, which
translates domain names into IP addresses; however, the actual physical
infrastructures of the Internet include fibre-optics and radio wave networks.
o Web Technology: The most fundamental way to interact with the web is through some
type of protocol (i.e., application layer protocol) using the internet as a connection
point. The two main protocols used to communicate between a client and a server are
HTTP and HTTPS. Information on the web is structured using HTML, styled (visual
aesthetics) using CSS, and made interactive (behavior) using JavaScript.
"Understanding the difference is important in the field of Web Development. In the
development community and among information technology professionals, the ability to
distinguish between the two areas is critical in the processes of debugging and designing.
1. Diagnosis: If the user is unable to access a site, it is a function of diagnosing whether
the issue is with the network (Internet – DNS errors, servers not accessible, packet
loss) or with the app (Web – 404 errors, HTML issues, flawed JavaScript).
2. Performance optimization: Essentially, "optimizing the Internet side is talked about in
terms of bandwidth and latency; that's network engineering." Optimizing the Web side
is all about "reducing image sizes and code minification; that's frontend stuff."
3. Security: Internet security deals with firewalls and the restriction of the usage of
certain ports, whereas web security focuses on flaws on the inside of the logic of the
web application itself, for example, cross-site scripting and SQL injection.
Ans no. 2.
Key Internet Services
The Internet provides access to many types of digital communication and connection
technologies. Popular services include Email, File Transfer Protocol (FTP), and Web
Browsing. Each service serves different purposes in supporting communication between
individuals around the world.
1. Email (Electronic Mail):
Email provides users with the ability to send and receive messages, documents, and images
around the world. The use of digital email is based on a storing-and-forwarding process, with
standardized electronic communication protocols such as SMTP (Simple Mail Transfer
Protocol) for sending and IMAP (Internet Message Access Protocol) or POP3 (Post Office
Protocol version 3) for receiving. Email enables instantaneous, asynchronous, and low-cost
communication globally and supports many personal and other types of business
communications, and reduces distance and time, providing a foundation for notifications,
formal and informal business communication, and collaborative work processes.
2. File Transfer Protocol (FTP):
File transfers from a client to a server via the Internet are made possible via the FTP
standard. It uses two different channels: one for file transfers and another for commands.
Large volumes of data can be reliably and effectively sent and received by individuals and
businesses worldwide thanks to FTP..
3. Web browsing through the World Wide Web:
Although the Web is an Internet service, web browsing is the act of accessing and interacting
with hypertext documents. It retrieves and displays data from web servers using browsers like
Chrome or Firefox and the HTTP/HTTPS protocol. Online education, social networking, e-
commerce, and real-time news are all made possible by web browsing, which continues to be
the primary means of accessing global information. It is the most visible layer of the digital
world, facilitating connectedness through an active, globally accessible platform where users
may browse, post, and interact on material.
Cybersecurity Threat: Phishing and its Effects
Phishing is a type of social engineering where the attacker deceitfully pretends to be someone
trustworthy, (for example, the attacker may pretend to be a bank, your boss, Netflix, etc.) in
order for the victim to give the attacker sensitive information (like login information, credit
card numbers, or Social Security information). While hacking is a software-based attack
based on taking advantage of weaknesses in the software, phishing attacks are based on
exploiting human emotions (usually fear or a sense of urgency), thus allowing the attacker to
bypass logical reasoning.
o If an individual user falls victim to a phishing attack, the first consequence is usually a
monetary loss:
o Loss of Identity and Money: The immediate financial loss is an apparent effect. The
attacker has used the stolen credentials to empty bank accounts and/or open fraudulent
lines of credit in the victim's name.
o Data Breach: Once a phishing attack has successfully compromised an account within
a company's network, the attacker can extract confidential corporate data or customer
information at will, creating a significant opportunity for organizations to suffer
considerable legal and reputational consequences.
Ans no. 3.
A Uniform Resource Identifier (URI) is essentially a short string of characters used to refer to
a specific resource on the World Wide Web. There are two ways to create a URI for a
resource - using a location (URL) or using a name (URN). The term URI is used frequently in
both HTML and Web Development to refer to all types of web documents including web
pages, images, scripts, stylesheets, form targets, and even parts of web pages (fragment
identifiers). As described in the course notes, URL is just one of the many ways to define a
URI and the basic parts of a URL are the scheme( protocol), hostname domain, path to the
document(s) and optional fragment.
HTML Structure is made up of some different parts; These include;
➢ Scheme: the protocol, such as: http, https, ftp, mailto (e.g. https:).
➢ Authority or Host: The domain, also known as the hostname (example:
[Link]).
➢ Path: The folder structure or file location on the Host (/folder/[Link]).
➢ Query (optional): This will be prefixed with a '?' and followed by one or more
parameters; e.g. ?key=value&...
➢ Fragment (optional): This will be prefixed with a '#' and will point to a specific
section within a document (named anchor).
Below is an Example of what a full URL looks like;
[Link] The course notes will explain each of
these components and provide examples of how the '#' Fragment is used to jump to anchors
located within the same page.
Why URIs matter for linking
URIs are the glue of the web: browsers use them to find and download resources. Correct
URIs mean that resources will load, links will work, forms will post to the correct endpoint,
and users—and, importantly, search engines—can navigate your site reliably. The notes
mention linking documents, style sheets, scripts, and images with URIs.
Using URIs in <a> tags
The HTML anchor element uses the href attribute to hold the URI of the target resource:
<a href="[Link] W3Schools</a>
<a href="[Link]">Go to page2 (relative)</a>
<a href="#section2">Jump to section 2 (fragment)</a>
The clickable anchor text is any text or image that appears between <a> and </a>. This
precise syntax is demonstrated in the course materials, which also describe named anchors
and href="anchor" behavior.
Comparing absolute and relative URIs (as well as best practices)
• Absolute URI: whole path, including host and scheme ([Link] Use
CDN materials, external links, including links from emails or other domains.
• Relative URI: Path relative to the current document (/images/[Link] or ../[Link])
is known as a relative URI. Use it for internal site links; it keeps URLs shorter and
makes switching between development, staging, and production easier.
The best methods: Use fragment identifiers for same-page navigation; avoid hard-coding
environment-specific domains (use <base> carefully); percent-encode special characters;
prefer https absolute links for external resources; use relative links for site-internal navigation
to improve portability; maintain meaningful anchor text for accessibility/SEO; test for broken
link.
SET-II
Ans no. 4.
Inserting Images in HTML and the Function of <address> Tag
The <img> is the HTML tag for properly embedding images in a web page, as it is a self-
closing or empty HTML tag. Therefore, no closing </img> tag is needed. An actual picture is
not added to the page; instead, a link to the image is made with the tag. The image will
appear on the page in the location designated by the <img> tag.
The tag's src attribute is its most significant attribute, indicating where the image file is
located. The image can be located in the same folder as the file containing the <img> tag, in a
subdirectory of that folder, or on another computer on the internet. If the src attribute points
to an incorrect location or the image does not exist, the browser will display a broken image
icon.
Another significant attribute of an <img> tag is the alt attribute, which specifies alternative or
descriptive text that will be shown when the image cannot load because of a technical
difficulty, slow internet connection, etc. The alt attribute is critical for people with disabilities
that require a screen reader to read text to them, as well as for Search Engine Optimization
(SEO), since search engines cannot "read" images; they depend on the alt text to assist them
in gauging an image's content so that they can rank the web pages accordingly.
The dimensions of an image on a web page can be set by assigning values to the width and
height attributes. Alternatively, these same attributes can also be controlled via the style
attribute of your image. Controlling the dimensions of an image will minimize the flickering
that occurs during loading of the image and improve the user experience. However, when
increasing the size of the image to exceed its original size, you will also decrease the overall
quality of the image.
It is also possible to reference an image that exists in a different folder or to an external site,
so long as you follow copyright laws, and this is achievable by entering the appropriate
directory or URL in the src attribute.
The HTML tag is often used for information on how to contact the author/owner of the
document/article. The tag can contain information such as the author's name, email, telephone
number, street address, and/or social media accounts. Use of the tag means that all contact
information is available in a semantic HTML format. Because the content has a specific
meaning rather than a purely visual display, the <address> tag is accessible, and it allows
search engines and screen readers to properly identify the contact information and provide
better meaning and usability of a web page.
Ans no. 5.
The following are the Main structural elements of a standard HTML Document
Web pages are designed and structured using Hyper Text Markup Language (HTML). HTML
works in conjunction with other technologies like Cascading Style Sheets (CSS) for
presentation and JavaScript for interactivity. HTML uses tags and elements to describe the
manner in which a web browser displays content such as text, images, and other materials.
The basic structure of a standard HTML document is predetermined. The main structural
components of a standard HTML document are as follows: DOCTYPE declaration, <html>,
<head>, <title>, and <body> are each a crucial component of building a correctly functioning
and valid web page.
When creating an HTML document, the first line of code should be the DOCTYPE
declaration. This is not simply another <html> Tag but an instruction to tell the browser what
version of HTML is being used for that document. Most modern web pages use the
DOCTYPE declaration to specify that their content is being created using HTML5 so that
when the HTML file is opened, it will be presented to the user correctly according to the
standard rendering rules applicable to the type of document being presented.
The tag denotes the root element of an HTML document, where all content is created.
Everything except for the DOCTYPE declaration goes inside a pair of opening and closing
tags. In addition to providing a clear boundary between what belongs in the <html> document
and what should not be, it also signifies the beginning and ending of an HTML document
while also indicating to the browser that everything between those two tags is to be processed
as HTML.
The <head> section of an HTML document provides non-visible data and other configuration
information to the browser, and includes data required for the webpage to function properly,
as well as many of the supporting files that are necessary for it to function properly. Common
elements found in the head section include the title (including the titles), meta data, style
files, scripts, links, base tag, and noscript tags. These elements are also useful to browsers,
search engines, and other software programs for correctly interpreting the page and
improving overall accessibility and ranking performance in search engines.
The <title> tag appears within the head section of the HTML document and provides the user
with a title for the webpage that appears in the browser's title bar and/or tab, as well as in
search engine results. Title tags are critical for both user experience and search engine
optimization (SEO) because they assist both users and search engines in understanding the
content of the webpage and ranking the webpage on search engines.
The <body> section of an HTML document contains all content that is viewable by a user;
this includes text, images, hyperlinks, tables and forms, etc. The body enables users to view a
webpage when they open it in the browser. Only one body element is permitted in an HTML
document, and therefore is the primary area for presenting content to users.
Ans no. 6.
Web Designers can Achieve Many Benefits by Utilizing CSS.
Cascading Style Sheets (CSS), are a means of defining the look and feel of a website,
including the placement of elements, fonts, colours, etc., and how those elements will be
presented to visitors to the site. In contrast, HTML defines how to organize content, but does
not include many of the aspects that allow for an optimal user experience. Therefore, it is
through CSS's ability to provide a professional appearance to a website that the designer can
provide the user with the most appealing and usable experience possible.
The benefits of CSS are numerous.
One of the most prominent benefits associated with CSS is an enhanced user experience
through improved aesthetics. It provides designers with the ability to customize their web
pages through the addition of various visual elements. The five key elements of visual
elements that improve the user's experience are colours, fonts, background images, borders,
and spacing. When utilized together, these elements help create visually appealing and easy-
to-read web pages that maximize the user's experience when visiting a website.
A major advantage of using CSS is that it creates a consistent look between multiple web
pages. By using an external CSS file to store your styles, you can have the same style applied
to many different web pages at once. This creates equal design elements (i.e., font size, color,
layout) across all web pages, creating a professional and uniform appearance of the web site.
CSS also allows web developers to maintain and update the designs of their web pages easily.
Any time a change to the design is needed, the web developer only has to edit the CSS file
since it will affect all pages on the site (versus having to modify each page's HTML file). This
eliminates the need for repetitive coding and saves valuable time when maintaining a web
site.
CSS also enables web developers to make their web pages load faster than traditional HTML.
When the browser caches the CSS files after the first time a user visits a page, the next time
that user visits the same page, it will load faster than the first time. Because CSS separates the
design code from the HTML, the HTML code is also cleaner and less bulky than HTML.
CSS also supports development of responsive designs. Web developers can create web pages
that can automatically resize to fit multiple screen sizes (i.e., mobile phones, tablets,
desktops), enhancing accessibility and usability.
The Role of CSS In Visual Appearance, Consistent Style, and Separation Between
Content and Style
When you use CSS to control the way your web pages look, you can influence how users see
and perceive your site. Fonts, font sizes, colors, spacing, positioning, and layout are all
controlled via CSS. Properties (such as margins, padding, background colour and font style)
provide a means by which web page content can be displayed in an easy to read and visually
pleasing manner.
By using external style sheets, CSS helps maintain design consistency across a number of
different web pages. If several different HTML pages link to the same CSS file, they will all
be compliant with the same CSS rules. This allows for better management of web pages and
promotes a consistent visual presentation across the entire site.
The separation of presentation (or design) from content (or structure) is one of the main
benefits of CSS. The HTML Coding Language is used to structure content, while CSS is used
to determine how that content should look when it is displayed on a computer screen. This
clear separation results in a more organized, easier to read and easier to make updates to code
structure.
Accessibility increase due to the separation between design and content benefits users with
varying types of devices (tablets, desktop computers, laptops), as well as users who have
different sizes of screens.