Course Code CSC 326

Course Title Web Application Development

Course Lecturer Mr. Richard Omoniwa

1
Web Basics and Overview: Introduction to Internet, World Wide Web, Web Browsers, URL,
HTTP.

Introduction to the Internet

The Internet is the global system of interconnected computer networks that use the Internet
protocol suite (TCP/IP) to link devices worldwide. It is a network of networks that consists of
private, public, academic, business, and government networks of local to global scope, linked by
a broad array of electronic, wireless, and optical networking technologies.The Internet carries a
vast range of information resources and services.

History of Internet
This marvelous tool has quite a history that holds its roots in the cold war scenario. A need was
realized to connect the top universities of the United States so that they can share all the research
data without having too much of a time lag. This attempt was a result of Advanced Research
Projects Agency (ARPA), which was formed at the end of 1950s just after the Russians had
climbed the space era with the launch of Sputnik. After the ARPA was success in 1969, it didn’t
take the experts long to understand that how much potential can this interconnection tool have. In
1971 Ray Tomlinson made a system to send electronic mail. This was a big step in the making as
this opened gateways for remote computer accessing i.e. telnet. During all this time, rigorous paper
work was being done in all the elite research institutions. From giving every computer an address
to setting out the rules, everything was getting penned down. 1973 saw the preparations for the
vital TCP/IP and Ethernet services. At the end of 1970s, Usenet groups had surfaced. By the time
the 80s had started, IBM came up with its PC based on Intel 8088 processor, which was widely
used by students, and universities for it solved the purpose of easy computing. By 1982, the
Defense Agencies made the TCP/IP compulsory and the term ―internet‖ was coined. The domain
name services arrived in the year 1984, which is also the time around which various internet based
marked their debut. A worm, or a rust on the computers, attacked in 1988 and disabled over 10%
of the computer systems all over the world. While most of the researchers regarded it as an
opportunity to enhance computing as it was still in its juvenile phase, quite a number of computer
companies became interested in dissecting the cores of the malware, which resulted to the
formation Computer Emergency Rescue Team (CERT). Soon after the world got over with the
computer worm, World Wide Web came into existence. Discovered by Tim Berners-Lee, World
Wide Web was seen as a service to connect documents in websites using hyperlinks.

World Wide Web : The World Wide Web (abbreviated WWW or the Web) is an information
space where documents and other web resources are identified by Uniform Resource Locators
(URLs), interlinked by hypertext links, and can be accessed via the Internet. English scientist Tim
Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer
program in 1990 while employed at CERN in Switzerland. The Web browser was released outside
CERN in 1991, first to other research institutions starting in January 1991 and to the general public
on the Internet in August 1991. The World Wide Web has been central to the development of the
Information Age and is the primary tool billions of people use to interact on the Internet. Web
pages are primarily text documents formatted and annotated with Hypertext Markup Language
(HTML). In addition to formatted text, web pages may contain images, video, audio, and software
components that are rendered in the user's web browser as coherent pages of multimedia content.
Embedded hyperlinks permit users to navigate between web pages. Multiple web pages with a
common theme, a common domain name, or both, make up a website. Website content can largely
be provided by the publisher, or interactively where users contribute content or the content depends

2
upon the users or their actions. Websites may be mostly informative, primarily for entertainment,
or largely for commercial, governmental, or non-governmental organizational purposes, WWW is
another example of client/server computing. Each time a link is followed, the client is requesting
a document (or graphic or sound file) from a server (also called a Web server) that's part of the
World Wide Web that "serves" up the document. The server uses a protocol called HTTP or
Hypertext Transfer Protocol. The standard for creating hypertext documents for the WWW is
Hyper Text Markup Language or HTML. HTML essentially codes plain text documents so they
can be viewed on the Web.

Browsers: WWW Clients or "Browser": The program you use to access the WWW is known as a
browser because it "browses" the WWW and requests these hypertext documents. Browsers can
be graphical, allows seeing and hearing the graphics and audio; text-only browsers (i.e., those with
no sound or graphics capability) are available. All of these programs understand http and other
Internet protocols such as FTP, gopher, mail, and news, making the WWW a kind of "one stop
shopping" for Internet users.
Uniform Resource Locators or URLs: A Uniform Resource Locator or URL is the address of a
document found on the WWW. The browser interprets the information in the URL in order to
connect to the proper Internet server and to retrieve your desired document. Each time a click on
a hyperlink in a WWW document instructs browser to find the URL that is embedded within the
hyperlink. The elements in a URL: Protocol: //server's address/filename Hypertext protocol:
http://www.aucegypt.edu File Transfer Protocol: ftp://ftp.dartmouth.edu Telnet Protocol:
telnet://pac.carl.org News Protocol: news:alt.rock-n-roll.stones What are Domains? Domains
divide World Wide Web sites into categories based on the nature of their owner, and they form
part of a site's address, or uniform resource locator (URL). Common top-level domains are:

Additional three-letter, four-letter, and longer top-level domains are frequently added. Each
country linked to the Web has a two-letter top-level domain, for example, .fr is France, .ie is
Ireland.
MIME (Multi-Purpose Internet Mail Extensions):- MIME is an extension of the original
Internet e-mail protocol that lets people use the protocol to exchange different kinds of data files
on the Internet: audio, video, images, application programs, and other kinds, as well as the ASCII
text handled in the original protocol, the Simple Mail Transport Protocol (SMTP). In 1991, Nathan
Borenstein of Bellcore proposed to the IETF that SMTP be extended so that Internet (but mainly

3
Web) clients and servers could recognize and handle other kinds of data than ASCII text. As a
result, new file types were added to "mail" as a supported Internet Protocol file type.
Servers insert the MIME header at the beginning of any Web transmission. Clients use this header
to select an appropriate "player" application for the type of data the header indicates. Some of these
players are built into the Web client or browser (for example, all browsers come with GIF and
JPEG image players as well as the ability to handle HTML files); other players may need to be
downloaded. New MIME data types are registered with the Internet Assigned Numbers Authority
(IANA). MIME is specified in detail in Internet Request for Comments 1521 and 1522, which
amend the original mail protocol specification, RFC 821 (the Simple Mail Transport Protocol) and
the ASCII messaging header, RFC 822.
Hypertext Transport Protocol: HTTP means Hypertext Transfer Protocol. HTTP is the
underlying protocol used by the World Wide Web, and this protocol defines how messages are
formatted and transmitted, and what actions Web servers and browsers should take in response to
various commands. For example, when you enter a URL in your browser, this sends an HTTP
command to the Web server directing it to fetch and transmit the requested Web page. The other
main standard that controls how the World Wide Web works is HTML, which covers how Web
pages are formatted and displayed.
HTTP is called a stateless protocol because each command is executed independently, without
any knowledge of the commands that came before it. This is the main reason that it is difficult to
implement Web sites that react intelligently to user input.
HTTPS: A similar abbreviation, HTTPS means Hyper Text Transfer Protocol Secure. Basically, it
is the secure version of HTTP. Communications between the browser and website are encrypted
by Transport Layer Security (TLS), or its predecessor, Secure Sockets Layer (SSL).
Web development is the process of creating, building, and maintaining websites and web
applications. It involves everything from web design to programming and database management.
Web development is generally divided into three core areas: Frontend Development, Backend
Development, and Full Stack Development.
Frontend Development
Frontend development refers to everything that users see and interact with on the website. It
involves the design, structure, and layout of the website and is often referred to as the ‘client
side’ of an application.

4
Frontend Technologies
 HTML: HTML stands for Hypertext Markup Language. It is the standard markup language
used to create and design web pages, defining their structure and layout.
 CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. It is used to style our
website.
 JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our
website.

Frontend Frameworks/Libraries
 React.js : A popular JavaScript library for building dynamic, component-based user
interfaces.
 Angular : A full-fledged framework for building single-page applications (SPAs), with
features like two-way data binding and dependency injection.
 Vue.js : A progressive JavaScript framework that is flexible and can be used for building both
simple and complex user interfaces.

5
Backend Development
Backend development refers to the server side of a website, where the logic and data are
processed and stored. Users do not directly interact with this part, but it ensures that the website
works properly.

Server-side Programming Languages and Frameworks

 PHP: PHP is a server-side scripting language designed specifically for web development.
 Java: Java is one of the most popular and widely used programming languages. It is highly
scalable.
 Python: Python is a programming language that lets you work quickly and integrate systems
more efficiently.
 Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside a browser.
 Ruby: Ruby is a dynamic, reflective, object-oriented, general-purpose programming
language.
 C# : C# is a high-level, general-purpose programming language developed by Microsoft.

Backend Languages Backend Frameworks

PHP Laravel, Wordpress

Java Spring, Hibernate

Python Django, Flask, Python PIP

Node.js Express

Ruby Ruby on Rails

C# .NET

Databases
 MySQL
 PostgreSQL
 MongoDB
 MariaDB
 SQLite

APIs (Application Programming Interfaces)

 RESTful API's
 GraphQL

6
Full Stack Development
Full-stack development refers to the practice of developing both the frontend and backend of a
website or web application. Full-stack developers have a deep understanding of both areas and
can build end-to-end solutions.

Full Stack Technologies:

 MERN Stack : MongoDB, Express.js, React, Node.js
 MEAN Stack : MongoDB, Express.js, Angular, Node.js
 JAMstack : JavaScript, APIs, Markup
 Django Stack : Django, MySQL/PostgreSQL, HTML/CSS/JavaScript
 Spring Boot Stack : Spring Boot, MySQL/PostgreSQL, Java
 LAMP Stack : Linux, Apache, MySQL, PHP
 LEMP Stack : Linux, Engine-X, MySQL, PHP

Databases
In web technology, a database is a structured collection of data that is stored electronically and
accessed via a web application. It serves as the backend component where data is stored,
managed, and retrieved. Databases can be relational (like MySQL, PostgreSQL) using structured
tables and SQL for queries, or non-relational (like MongoDB, CouchDB) which store data in
flexible, document-oriented formats. They enable web applications to handle dynamic content,
user data, transactions, and more by providing efficient storage, retrieval, and manipulation
capabilities. Database management systems (DBMS) are used to interact with the database,
ensuring data integrity, security, and performance.

1. Relational Databases
A relational database stores data in tables, similar to a spreadsheet, where each table has rows
and columns. The rows hold individual records, and the columns define the data attributes.
Tables can be linked to each other through special keys, allowing related data to be connected.
 Postgre SQL : PostgreSQL is a powerful, open-source relational database that supports
advanced SQL features and complex queries. It handles structured data, ensures ACID
compliance, and is known for its reliability and extensibility.
 MariaDB : MariaDB is an open-source relational database that evolved from MySQL,
offering improved performance, security, and features. It supports SQL queries, ACID
compliance, and is highly compatible with MySQL.
 MySQL : MySQL is an open-source relational database management system that uses SQL
for managing structured data. It’s known for its reliability, ease of use, and performance,
widely used in web applications.

2. NoSQL Databases
A NoSQL database stores data in a flexible, non-tabular format, unlike traditional relational
databases. Instead of using tables with rows and columns, NoSQL databases might use
documents, key-value pairs, wide-columns, or graphs to store data. This allows them to handle
large amounts of unstructured or semi-structured data efficiently. They are designed to scale
easily and manage big data applications.
 Mongodb : MongoDB is a NoSQL database storing data in JSON-like documents. It handles
unstructured data, supports powerful queries, and scales easily across servers, making it
popular for flexible, scalable applications.

7
 Cassandra : Apache Cassandra is an open-source NoSQL database that is used for handling
big data. It has the capability to handle structure, semi-structured, and unstructured data.
 Redis: Redis is an in-memory NoSQL database known for its speed. It supports various data
structures like strings, hashes, and lists, making it ideal for caching, real-time analytics, and
messaging.

HTML

HTML stands for Hypertext Markup Language. It is the standard language used to create and
structure content on the web. It tells the web browser how to display text, links, images, and other
forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS
and JavaScript add style and interactivity respectively to make it look good and function better.
How Does HTML Work? - HTML documents are plain-text files saved with an .html extension.
Browsers read these documents, interpret the markup (tags and attributes), and render the
formatted content on your screen.
 HTML is a markup language, not a programming language, meaning it annotates text to
define how it is structured and displayed by web browsers.
 It forms the building blocks of all websites and is complemented by CSS for style and
JavaScript for interactivity.
 It is a static language, meaning that it does not inherently provide interactive features but
can be combined with CSS for styling and JavaScript for interactivity.
In a nutshell, HTML is all about organizing and displaying information on a webpage. We
can think of it as the bones or structure of a webpage.
Basic HTML Code Example

1
<! DOCTYPE html>
2
<html>
3

4
<head>
5
<title>My First Webpage</title>
6
</head>
7

8
<body>
9
<h1>Welcome to My Webpage</h1>
10
<p>This is my first paragraph of text!</p>
11
</body>

8
12

13
</html>
Output:

HTML
In this example:
 <!DOCTYPE html>: Declares the document type and version (HTML5).
 <html>: The root element that wraps all HTML content.
 <head>: Contains meta-information about the webpage, like the title.
 <title>: Specifies the title of the webpage (appears in the browser tab).
 <body>: Contains the visible content of the webpage.
 <h1>: Represents the main heading on the page ("Welcome to My Webpage").
 <p>: Defines a paragraph of text ("This is my first paragraph of teHTML Introduction
Key Features of HTML
 Markup Language: HTML uses tags to markup content. Each tag defines different
elements, such as headings, paragraphs, tables, links, etc.
 Semantics: HTML provides semantic tags that describe the meaning of the content. For
example, <article>, <footer>, <header>, and <nav> describe different types of content on a
webpage.
 Responsive Web Design: HTML supports various features for building responsive websites,
including media queries and the ability to embed multimedia content.
 Interactive Content: HTML can embed interactive content using JavaScript, which allows
for dynamic changes in the content.

HTML Page Structure

The basic structure of an HTML page is shown below. It contains the essential building block
elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web
pages are created.

9
 <! DOCTYPE html> - This is the document type declaration, not a tag. It declares that the
document is an HTML5 document.
 <html> - This is called the HTML root element. All other elements are contained within it.
 <head> - The head tag contains the "behind the scenes" elements for a webpage. Elements
within the head aren't visible on the front end of a webpage. Typical elements inside the
<head> include:
o <title>: Defines the title displayed on the browser tab.
o <meta>: Provides information like the character set or viewport settings.
o <link>: Links external stylesheets or resources.
o <style>: Embeds internal CSS styles.
o <script>: Embeds JavaScript for functionality.
 <title> - The title is what is displayed on the top of your browser when you visit a website
and contains the title of the webpage that you are viewing.
 <h2> - The <h2> tag is a second-level heading tag.
 <p>- The <p> tag represents a paragraph of text.
 <body> - The body tag is used to enclose all the visible content of a webpage. In other words,
the body content is what the browser will show on the front end.

10
An HTML document can be created using an HTML text editor. Save the text file using the
".html" or ".htm" extension. Once saved as an HTML document, the file can be opened as a
webpage in the browser.
Note: Basic/built-in text editors are Notepad (Windows) and TextEdit (MacOS). Other
advanced text editors include Sublime Text, Visual Studio Code, Froala, etc.

HTML Elements and HTML Tags

HTML Elements and HTML Tags are related but distinct. An HTML element is the complete
structure, including the opening tag, content (if any), and the closing tag (if applicable).
On the other hand, A tag is the actual keyword or name enclosed in angle brackets (< >) that
tells the browser what kind of content to expect.
HTML Tags

Tag Description

<html> The root element of an HTML document

<head> Contains meta-information about the webpage

<body> Contains the visible content of the webpage

<h1> to <h6> Headings of various levels (h1 being the largest)

<p> Defines a paragraph

<a> Defines a hyperlink

<img> Embed an image

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<table> Defines a table

<form> Defines an HTML form

11
HTML Attributes

Attributes provide additional information about an element. They are placed inside the opening
tag and are written as name="value". Common attributes include class, id, href, and src.
Example:
<a href="https://www.example.com">Visit Example</a>
 href is an attribute of the <a> tag that defines the URL of the link.

To learn more about it follow the article - HTML Attributes

Web Browsers
Unlike other programming languages, HTML does not show output on the compiler. Web
browsers show the results of an HTML code.
It reads HTML files and determines how to show content with the help of HTML tags. Any web
browser (Google, Safari, Mozilla Firefox, etc) can be used to open a . HTML file and view the
results.

index.html
Why Learn HTML?
Here are 5 common reasons to learn HTML:
1. Build Websites: HTML is the basic building block for creating any website. Learning HTML
can help you pursue a career in web development.
2. Customize Content: Allows you to edit or tweak web pages, emails, or templates to fit your
needs.
3. Understand how the web works: This helps you grasp how the internet works and how web
pages are structured.
4. Employment Opportunities: According to the Bureau of Labor Statistics, projects that
employment for web developers will grow 16% between 2022 and 2032, which is much
faster than the average across all occupations.
5. Learn Easily: HTML is beginner-friendly, making it a great first step into the world of
coding and technology.
Applications of HTML

 Web Development: HTML is the backbone of every webpage. It structures the content and
integrates multimedia, hyperlinks, and more.
 Web Applications: HTML, in combination with CSS and JavaScript, powers complex web
applications (e.g., Google Docs, Trello).

12
 Emails: HTML emails use table-based layouts and embedded media to deliver rich,
interactive content.
 Mobile App Development: HTML5 is used with frameworks like PhoneGap to build mobile
apps for iOS and Android.
Limitations of HTML
 No Logic or Functionality: HTML cannot handle complex logic, interactivity, or dynamic
content on its own. It requires JavaScript for such tasks.
 SEO Limitations: While HTML provides structure, it’s not enough by itself for search
engine optimization (SEO). Proper metadata and content structuring, as well as external SEO
practices, are necessary.
 Limited Styles: While HTML can handle basic styles via the style attribute, it is typically
complemented by CSS for complex styling and layout.
HTML5: Enhancements and New Features
HTML5 introduced several powerful features that improve the structure and functionality of web
pages, including:
 Semantics: New tags like <article>, <footer>, <header>, and <section> to improve the
meaning of the content.
 Multimedia: <audio> and <video> tags for embedding audio and video without plugins.
 APIs: New APIs like Geolocation, Web Storage, and Canvas allow for more dynamic content
and interactive websites.
HTML History
Currently, we are using HTML5, which is the latest and most advanced version of HTML.
 Tim Berners-Lee initially created HTML in 1991 as a way to share and structure documents
on the web.
 The first-ever version was HTML 1.0, a basic and limited version. However, the first
standardized version, HTML 2.0, was published in 1995, laying the foundation for web
development, as we know it today.

HTML Basic Document and Structure

Every HTML document begins with a document type declaration, setting the foundation for the
webpage. This section introduces basic HTML tags that structure the page, such
as <head>, <body>, and <title>. Although this is not mandatory, it is a good convention to start
the document with the below-mentioned tag.

13
HTML Structure
Below mentioned are the basic HTML tags that divide the whole page into various parts like
head, body, etc.
Basic HTML Tags for Document Structure

Tags Descriptions

Encloses the entire HTML document, serving as the root element for all HTML
<html>
content.

Contains header information about the webpage, including title, meta tags, and
<head> linked stylesheets. It is part of the document's structure but is not displayed on
the webpage.

14
 Basic HTML Tags for Document Structure

Tags Descriptions

Used within the <head> section to define the title of the HTML document. It
<title> appears in the browser tab or window and provides a brief description of the
webpage's content.

Encloses the visible content of the webpage, such as text, images, audio, videos,
<body> and links. All elements within this tag are displayed on the actual webpage when
viewed in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!--Contents of the webpage-->
<p> Online study platform</p>
</body>
</html>

Code Overview:
 This HTML document defines a basic webpage with a responsive design using <meta>
tags, ensuring it adjusts well to different devices.
 The content includes a paragraph <p> displaying “Online study platform," and the title
"HTML" appears in the browser tab.

HTML Headings
The HTML heading tags are used to create headings for the content of a webpage. These tags
are typically placed inside the body tag. HTML offers six heading tags, from <h1> to <h6>, each
displaying the heading in a different font size.
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

15
<html>
<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>
Code Overview:
 This code displays six headings (<h1> to <h6>) on the webpage, with <h1> being the
largest and most prominent and <h6> being the smallest.
 The headings are used to define text hierarchy and emphasize content based on importance.

HTML Paragraph and Break Elements

HTML <p> tags are used to write paragraph statements on a webpage. They start with the <p>
tag and end with </p>. The HTML <br> tag is used to insert a single line break and does not
require a closing tag. In HTML, the break tag is written as <br>.
Syntax:
// for Paragraph
<p> Content... </p>
// for Break
<br>

<html>
<body>
<p>
HTML stands for HyperText Markup Language.<br>
It is used to design web pages using a markup
language.<br>HTML is a combination of Hypertext
and Markup language.<br>Hypertext defines the
link between web pages.<br>A markup language
is used to define the text document within the
tag which defines the structure of web pages.
</p>
</body>
</html>

Code Overview:
 This HTML code uses a <p> tag to display a paragraph of text, providing an overview of
what HTML is and its purpose.
 The <br> tags are used to insert line breaks, making the text more readable by separating
each sentence onto a new line within the paragraph.
HTML Horizontal Line
The HTML <hr> tag is used to divide a page into sections by creating a horizontal line that
spans from the left to the right side of the page. This is an empty tag and does not require a
closing tag or any additional attributes.

16
Syntax:
<hr>

<html>
<body>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>
</html>
HTML Images

The <img> tag is used to insert an image into a webpage. The source of the image is specified
within the src attribute, like this: <img src="source_of_image">.
Syntax:
<img src="geeks.png">

 This HTML code uses the <img> tag to display an image on a webpage.
 The src attribute specifies the URL of the image, which is loaded and displayed when the
page is rendered in the browser.
View HTML Source Code
While checking a web page, you might want to see the HTML code behind it. Here we will see
how you can view HTML source code for the entire page or a specific element.

1. View HTML Source Code of Entire Page

 To view the source code of a webpage press ctrl + u on the page, or right-click on the page
and select the "view page source" option.
 This will open a new tab that shows the HTML source code for that entire page.
2. Inspect an HTML Element on a Page
 To check the HTML code for a specific element on a page, right-click on the page and
select the "Inspect" option.

17
 This lets you see the HTML and CSS behind that element. You can also try making changes
and see the changes.

HTML Comments
HTML comments are used to add notes or explanations in the HTML code that are not
displayed by the browser.
 They are useful for documenting the code, making it easier to understand and maintain.
 To add a comment, use the syntax <!-- your comment here -->.
 <!-- This is a comment and will not be displayed on the webpage -->
<p>This is visible text.</p>
In this example:
 The text within the <!-- and --> tags will not appear on the webpage.
 These comments can include reminders, warnings, or explanations about the code, which can
be useful for anyone reading or editing the HTML document.
Different Ways to Add Comments in HTML
There are two main ways to write comments in HTML: single-line and multi-line comments.
Both use the same basic syntax but differ in how they are implemented
Comment Descriptions Syntax

Single- The single-line comment is given inside the ( <!-

<!-- comment -->
line - comment --> ) tag.

<!-- Multi
Multi- It follows the syntax of a single-line comment by adding
Line
line multiple lines in the comment.
Comment -->

Note: The shortcut for adding the comment through the keyboard is by typing Ctrl + / in
Windows, and Command + / for Mac users.
More Examples of HTML Comments

Single-Line and Inline Comments

<html>
<body>
<!--This is heading Tag-->
<h1>GeeksforGeeks</h1>
<!--This is single line comment-->
<h2>This is <!--given for--> single line comment</h2>
</body>
</html>

In this example:
 The code uses HTML comments (<!-- comment -->) to add notes for developers, which are
not displayed on the webpage.
 The <h1> and <h2> tags display headings, while inline comments in <h2> do not affect the
visible text.

18
Multi-Line Comments and Hidden Code Sections

<html>
<body>
<!-- This is
heading tag -->
<h1>GeeksforGeeks</h1>
<!-- This is
multi-line
comment -->
<h2>This is multi-line comment</h2>
<!-- <button style="font-family: Sans-serif;">
Click Me
</button> -->

</body>
</html>

In this example:
 The code includes HTML comments (<!-- comment -->) that are not displayed by browsers
but serve as notes for developers.
 The <h1> and <h2> tags define headings, with comments explaining their purpose; the
commented-out <button> element is not rendered on the page.

Uses of HTML Comments

 Code Organization: Comments can help break up sections of code, making it easier to
navigate, especially in larger projects.
 Collaboration: When working with others, comments are crucial for explaining why certain
HTML elements are used, or for leaving instructions for team members.
 Debugging: Temporarily disabling parts of HTML code by commenting them out is a
common use, allowing developers to isolate issues.
 Documentation: Providing details or documentation within the code for future reference
without the need for external documentation.
Best Practices for Writing Useful and Clear Comments
 Be Concise and Relevant: Write short, meaningful comments that explain the why behind
the code, not the obvious what.
 Avoid Overcommenting: Don’t comment on everything. Focus on complex or non-intuitive
sections of the code.
 Keep Comments Updated: Regularly revise comments to ensure they stay accurate as the
code evolves.
 Use Consistent Style: Maintain a uniform tone and format for comments across the project
to ensure clarity.
 Avoid Sensitive Information: Never include passwords, keys, or sensitive data in comments

19
HTML Text Formatting

Categories of HTML Text Formatting

HTML text formatting can be divided into two main categories: Logical Tags and Physical
Tags.
1. Logical Tags
Logical tags convey the meaning or importance of the text without necessarily altering its visual
appearance. These tags help browsers, search engines, and assistive technologies understand the
purpose of the text.
 <em>: Emphasizes text, typically rendered in italics. It implies that the text carries special
importance or requires emphasis.
 <strong>: Marks text as important, often displayed in bold. It implies the content is of strong
importance.
2. Physical Tags
Physical tags directly affect how text looks on the webpage by changing the font, size, or style.
 <b>: Displays text in bold without implying importance.
 <i>: Italicizes text without any implied emphasis.
Here’s a list of commonly used HTML text formatting tags and their description:
Tags Description

<i> Showcases italicized text.

<small> Renders text in a smaller font size.

<ins> Highlights added or inserted text.

<sub> Creates subscript text.

<strong> Emphasizes text with importance, often in bold.

<b> Displays text in a bold format.

<mark> Accentuates text with a background highlight.

<del> Strikes through text to signify deletion.

20
 Tags Description

<em> Adds emphasis to text, commonly styled as italic.

<sup> Formats text as superscript.

HTML Formatting Elements

1. <i> – Italicizes text

Use the <i> tag to display text in italics without implying emphasis.
<i>This is italic text.</i>
2. <small> – Reduces the font size of the text
The <small> tag renders text in a smaller font than the surrounding text.
<small>This text is smaller than the rest.</small>
3. <ins> – Highlights inserted text
The <ins> tag marks text as newly added or inserted, often displayed with an underline.
<ins>This is inserted text.</ins>
4. <sub> – Displays subscript text
Use the <sub> tag for subscripted text, often used in chemical formulas or footnotes.
H₂O
5. <strong> – Emphasizes important text, often rendered in bold
The <strong> tag is semantically meaningful and indicates that the text is of high importance.
<strong>This text is bold and important.</strong>
6. <b> – Makes text bold
The <b> tag visually makes the text bold but does not imply any special significance.
<b>This is bold text.</b>
7. <mark> – Highlights text with a background color
The <mark> tag highlights text with a background color, similar to using a highlighter on paper.
<mark>This text is highlighted.</mark>
8. <del> – Strikes through text
The <del> tag is used to show that text has been deleted or is no longer relevant.
<del>This text is crossed out.</del>
9. <em> – Emphasizes text, typically italicized
The <em> tag is used for emphasized text and is usually rendered in italics to highlight
importance.
<em>This text is emphasized.</em>
10. <sup> – Displays superscript text
Use the <sup> tag to show superscripted text, commonly used in exponents or footnotes.
E = mc²
Examples of HTML Text Formatting
Example 1: Basic Text Formatting
In this example, we demonstrates various text formatting tags: <strong> for important and bold
text, <em> for emphasized and italic text, <b> for bold text, <i> for italic text, and <mark> for
highlighted text.

21
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Text Formatting Example</title>
</head>

<body>
<p>
<strong>Strong:</strong>
This text is important and bold.
</p>
<p>
<em>Emphasized:</em>
This text is emphasized and italic.
</p>
<p>
<b>Bold:</b>
This text is bold.
</p>
<p>
<i>Italic:</i>
This text is italic.
</p>
<p>
<mark>Marked:</mark>
This text is highlighted.
</p>
</body>

</html>
Output:

22
HTML Text Formatting Example Output
Example 2: Combining Logical and Physical Tags
This example shows how logical and physical tags can be combined for enhanced text
formatting:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Advanced Text Formatting</title>
</head>

<body>
<p>This is a
<strong><em>very important</em></strong> message.
</p>
<p>The chemical formula of water is H
₂O.
</p>
<p>
<del>Deleted text</del> and
<ins>inserted text</ins>
are shown here.
</p>
<p><small>Smaller text</small>
can be used for disclaimers.
</p>
<p>E = mc²</p>
</body>

</html>
Output:

23
 CSS (Cascading Style Sheet)

We will cover:

✅ What is CSS?
✅ How to add CSS to an HTML document
✅ CSS Syntax and Structure
✅ CSS Selectors: How to target elements
✅ Styling text and fonts
✅ Understanding the CSS Box Model
✅ Working with colors and backgrounds
✅ Using display and position properties
✅ Creating layouts with Flexbox
✅ A practical example project
✅ Summary and next steps for learning CSS

What is CSS?

CSS stands for Cascading Style Sheets.

It is a language used to describe how HTML elements should be presented on screen (or in print,
or on other media). CSS lets you style HTML elements: control colors, fonts, spacing, layouts,
and more.With CSS, you can separate content (HTML) from design (CSS), which makes your
code cleaner and easier to maintain.
Why use CSS?

✅ Consistent styling across multiple pages

✅ Easier to update styles — change one CSS file instead of editing many HTML files
✅ Faster page loading with external CSS files
✅ Better user experience and visual appeal

How to Add CSS to HTML

There are three main ways to add CSS to a web page:

1. Inline CSS

You add the style directly to an HTML element using the style attribute.
Example:
<p style="color: red ;"> Hello World</p>

Disadvantages: Not reusable, hard to maintain.

24
2. Internal CSS

You can add a <style> block inside your HTML <head> tag.

Example:

<html>
<head>
<style>
p {
color: red;
}
</style>
</head>

Good for: Quick tests or small projects.

3. External CSS (Recommended)

You create a separate .css file and link it to your HTML.

Example:

<head>
<link rel="stylesheet" href="styles.css">
</head>

Example styles.css file:

p {
color: red;
}

Best practice: Makes your HTML cleaner and allows styles to be reused across multiple pages.

CSS Syntax

CSS code uses a simple structure:

selector {
property: value;
}

Example:

h1 {
color: blue;
font-size: 30px;
}

25
Explanation:

 The selector (h1) targets the HTML element to style.

 The property (like color) defines what aspect to style.
 The value (like blue) specifies the style to apply.

You can add multiple properties within a selector.

Common CSS Selectors

CSS provides different ways to target elements:

Selector Type Example What it Selects

Element p All <p> elements

Class .class-name Elements with that class

ID #id-name The element with that ID (must be unique)

Descendant div p All <p> inside a <div>

Grouping h1, p All h1 and p elements

Example usage:

#header {
background-color: lightgray;
}

.content {
padding: 20px;
}

div p {
color: green;
}

Styling Text and Fonts

Text and typography are key to a good design. You can style them using the following
properties:

p {
color: #333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: underline;
line-height: 1.5;
}

26
Common text properties:

 color — Text color

 font-family — Font type (with fallback fonts)
 font-size — Size of the text
 font-weight — Boldness of text
 text-align — Text alignment (left, center, right)
 text-decoration — Underline, overline, line-through, or none

Understanding the CSS Box Model

Every HTML element is considered a box, and CSS controls how this box behaves.

The box model consists of:

 Content: The actual text or image.

 Padding: Space between content and the border.
 Border: The edge around padding and content.
 Margin: Space outside the border.

Example:

div {
padding: 10px;
border: 2px solid black;
margin: 20px;
}

Why is this important?

Understanding the box model is crucial for creating layouts and controlling spacing.

Colors and Backgrounds

You can style colors and backgrounds in CSS in various ways:

color: red; /* Named color */

color: #ff0000; /* Hex code */
color: rgb(255, 0, 0); /* RGB format */

To change background color:

background-color: lightblue;

You can also use rgba() to add transparency.

Example:

background-color: rgba(255, 0, 0, 0.5);

Display Property

27
The display property defines how an element is rendered:

display: block; /* Default for div */

display: inline; /* Default for span */
display: inline-block; /* Allows block features inline */
display: none; /* Hide the element */

 block — Takes full width available.

 inline — Does not start a new line.
 inline-block — Like inline, but can set width/height.
 none — Makes the element invisible and removes it from the layout flow.

Position Property

The position property allows you to control how an element is positioned:

position: static; /* Default, normal flow */

position: relative; /* Offset from normal position */
position: absolute; /* Positioned relative to nearest positioned ancestor */
position: fixed; /* Stays fixed relative to the viewport */
position: sticky; /* Sticks based on scroll position */

Example:

css
CopyEdit
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

Flexbox: Parent Container

Flexbox is a modern layout system that makes it easy to create flexible, responsive designs.

To use it, first set display: flex; on a container:

.container {
display: flex;
justify-content: space-between;
align-items: center;
}

Properties:

 justify-content — Aligns children horizontally

 align-items — Aligns children vertically

28
Common values:

 flex-start, flex-end, center, space-between, space-around

Flexbox: Child Items

Children of a flex container can use:

.item {
flex: 1;
padding: 10px;
}

Other useful properties:

 flex-grow
 flex-shrink
 flex-basis

Flexbox is very powerful for building responsive designs without complex float or positioning
hacks.

Example Project (Simple Web Page)

Here’s a complete example of a simple styled page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: darkblue;
text-align: center;
}
.content {
background-color: white;
padding: 20px;
margin: 50px auto;
width: 50%;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>

<h1>Welcome to My Website</h1>

<div class="content">
<p>This is a paragraph inside a styled box.</p>

29
</div>

</body>
</html>

Summary

✅ CSS is used to style your HTML content.

✅ You can apply CSS inline, internally, or externally — external is best practice.
✅ Use selectors to target elements.
✅ Understand the box model to manage spacing and layout.
✅ Flexbox helps create modern, responsive designs.
✅ Practice and experiment to master CSS!

Next Steps

Where to go from here:

✅ Learn more about CSS Grid for advanced layouts.

✅ Explore CSS animations and transitions.
✅ Try building a responsive website.
✅ Study CSS best practices and frameworks (like Bootstrap or Tailwind CSS).

30
Introduction to JavaScript
What is JavaScript?

JavaScript is a scripting language that runs in the browser and is primarily used to make web
pages interactive. It can:

 Update and change both HTML and CSS

 Respond to user actions (clicks, scrolls, inputs)
 Send/receive data from servers (e.g., APIs)
 Store data locally (e.g., localStorage)

Why Learn JavaScript?

 It's the most widely used language for web development.

 It's supported by all modern browsers.
 It powers frameworks like React, Angular, and Vue.
 JavaScript is also used on the server side (Node.js).

1.2 Setting Up the Environment

You need:

 A web browser (like Chrome or Firefox)

 A code editor (VS Code recommended)

Quick Start:

You can write JavaScript in:

 A .js file linked to an HTML file

 The browser’s Developer Console (F12 > Console)

Example: Writing JS in the Browser

Open DevTools (F12), go to the Console, and type:

console.log("Hello, JavaScript!");

You will see the message printed in the console.

31
Basic HTML + JavaScript Template
<!DOCTYPE html>
<html>
<head>
<Title>My First JS Page</title>
</head>
<body>
<h1>Welcome to JavaScript</h1>
<script>
alert("This is your first JavaScript alert!");
</script>
</body>
</html>

1.3 Variables and Data Types

What is a Variable?

A variable is a container for storing data values, like numbers, text, or objects.

Declaring Variables

ES6+ Keywords:

 let – preferred for most variables

 const – for constants (can’t be reassigned)
 var – older way (avoid using it in modern code)

let name = "Alice";

const age = 25;
var isOnline = true;

🧪 Data Types in JavaScript

Type Example Notes

String "Hello" Text inside quotes
Number 42, 3.14 No quotes
Boolean true, false Yes/No or On/Off values
Array [1, 2, 3] List of values
Object { name: "Joe" } Key-value pairs
Null null Empty value
Undefined undefined No value assigned yet

32
🧪 Examples
let message = "JavaScript is fun!";
let score = 95;
let isPassed = true;

let fruits = ["apple", "banana", "cherry"];

let user = {
name: "Emma",
age: 30
};

let nothing = null;

let notAssigned;

Checking Type with typeof

console.log(typeof message); // "string"
console.log(typeof score); // "number"
console.log(typeof isPassed); // "boolean"
console.log(typeof fruits); // "object"
console.log(typeof notAssigned); // "undefined"

Mini Practice

Try this in your browser console or VS Code Live Server:

let name = "John";

let age = 21;
let isStudent = true;

console.log(name + " is " + age + " years old.");

console.log("Is student? " + isStudent);

Output:

John is 21 years old.

Is student? true
1.4 Operators and Expressions

JavaScript has several kinds of operators you will use all the time — for math, comparisons, and
logic.

1. Arithmetic Operators

Operator Example Meaning

+ 5+3 Addition

- 10 - 4 Subtraction

* 4*2 Multiplication

33
Operator Example Meaning

/ 8/2 Division

% 9%2 Remainder (modulus)

** 2 ** 3 Exponentiation

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a % b); // 1
console.log(2 ** 3); // 8

2. Assignment Operators

Operator Example Meaning

= x=5 Assign value

+= x += 2 Add and assign (x = x + 2)

-= x -= 3 Subtract and assign

*= x *= 4 Multiply and assign

/= x /= 2 Divide and assign

let x = 10;
x += 5; // x = 15
x *= 2; // x = 30
console.log(x);

2. Comparison Operators

These return a Boolean (true or false).

Operator Description Example

== Equal (loose) 5 == "5" → true

=== Equal (strict) 5 === "5" → false

!= Not equal (loose) 5 != "5" → false

!== Not equal (strict) 5 !== "5" → true

> Greater than 10 > 5

< Less than 3<6

34
Operator Description Example

>= Greater or equal 5 >= 5

<= Less or equal 4 <= 4

4. Logical Operators

Used to combine conditions.

Operator Meaning Example

&& AND true && false → false

||
OR true || false → true

! NOT !true → false

let isOnline = true;
let isAdmin = false;

console.log(isOnline && isAdmin); // false

console.log(isOnline || isAdmin); // true
console.log(!isOnline); // false

Mini Practice
let score = 87;
let passed = score >= 50;
let perfect = score === 100;

console.log("Passed? " + passed); // true

console.log("Perfect score? " + perfect); // false

1.5 Control Flow

Control flow means directing which code runs based on conditions. This is where your
programs start making decisions.

1. if / else Statements
let age = 18;

if (age >= 18) {

console.log("You are an adult.");
} else {
console.log("You are a minor.");
}

If the condition is true, the first block runs. Otherwise, the else block runs.

35
2. else if Chains
let grade = 85;

if (grade >= 90) {

console.log("A");
} else if (grade >= 80) {
console.log("B");
} else if (grade >= 70) {
console.log("C");
} else {
console.log("F");
}

3. Ternary Operator

Short form of if...else. Returns a value.

let isLoggedIn = true;

let message = isLoggedIn ? "Welcome back!" : "Please log in.";

console.log(message);

4. switch Statement

Great for checking one variable against multiple values:

let day = "Monday";

switch (day) {
case "Monday":
console.log("Start of the week!");
break;
case "Friday":
console.log("Weekend is near!");
break;
default:
console.log("Just another day.");
}

Important Concepts

 Use === in if comparisons for strict equality.

 switch needs break; to stop falling through.
 You can nest if statements, but keep them readable!

Mini Practice

Try this:

let time = 20;

if (time < 12) {

36
 console.log("Good morning!");
} else if (time < 18) {
console.log("Good afternoon!");
} else {
console.log("Good evening!");
}
1.6 Loops in JavaScript

Loops let you run a block of code multiple times — perfect for working with lists, repeating
actions, or running until a condition is met.

1. for Loop
for (let i = 1; i <= 5; i++) {
console.log ("Count: " + i);
}

Structure:

for (initialization; condition; increment) {

// code runs while the condition is true
}

2. while Loop
let i = 1;
while (i <= 3) {
console.log("Hello " + i);
i++;
}

Use when the number of loops isn’t known in advance.

3. do...while Loop

Always runs at least once, even if the condition is false.

let i = 1;
do {
console.log("Number: " + i);
i++;
} while (i <= 3);

4. for...of Loop (Used with Arrays)

let colors = ["red", "green", "blue"];

for (let color of colors) {

console.log(color);
}

5. for...in Loop (Used with Objects)

37
let user = {
name: "Alice",
age: 25,
isAdmin: true
};

for (let key in user) {

console.log(key + ": " + user[key]);
}

Loop Control Keywords

 break → exits the loop completely

 continue → skips to the next iteration

for (let i = 1; i <= 5; i++) {

if (i === 3) continue;
console.log(i); // skips 3
}

Mini Practice
// Print even numbers from 1 to 10
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
console.log(i);
}
}

Project: Simple Calculator

Features:

 Input two numbers

 Choose an operation: add, subtract, multiply, divide
 Display the result

Step 1: HTML Structure

<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h2>Simple Calculator</h2>

<input type="number" id="num1" placeholder="Enter first number" />

<input type="number" id="num2" placeholder="Enter second number" />
<br><br>

<button onclick="calculate('add')">Add</button>
<button onclick="calculate('subtract')">Subtract</button>

38
 <button onclick="calculate('multiply')">Multiply</button>
<button onclick="calculate('divide')">Divide</button>

<h3>Result: <span id="result">0</span></h3>

<script src="calculator.js"></script>
</body>
</html>

Step 2: JavaScript Logic (calculator.js)

function calculate(operation) {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let result = 0;

if (isNaN(num1) || isNaN(num2)) {
alert("Please enter valid numbers!");
return;
}

switch (operation) {
case "add":
result = num1 + num2;
break;
case "subtract":
result = num1 - num2;
break;
case "multiply":
result = num1 * num2;
break;
case "divide":
if (num2 === 0) {
alert("Cannot divide by zero!");
return;
}
result = num1 / num2;
break;
default:
result = "Invalid operation";
}

document.getElementById("result").innerText = result;
}

How to Run It

1. Save the HTML code as index.html.

2. Save the JavaScript code as calculator.js in the same folder.
3. Open index.html in your browser and test the calculator.

39
2.1 Functions
What is a Function?

A function is a reusable block of code that performs a specific task. It can accept inputs
(parameters) and optionally return a result.

Declaring a Function
function greet (name) {
console.log ("Hello, " + name + "!");
}

greet("John"); // Output: Hello, John!

Returning a Value
function add(a, b) {
return a + b;
}
let result = add(3, 7);
console.log(result); // 10

Function Parameters vs Arguments

 Parameter = variable in function definition

 Argument = actual value you pass when calling the function

Function with Default Parameters

function greet(name = "Guest") {
console.log("Welcome, " + name);
}

greet(); // Welcome, Guest

greet("John"); // Welcome, John

Function Practice
function multiply(x, y) {
return x * y;
}
console.log(multiply(4, 5)); // 20

2.2 Function Expressions and Arrow Functions

Function Expression
const subtract = function(a, b) {
return a - b;

40
};

console.log (subtract (10, 3)); // 7

Arrow Function (ES6+)

const divide = (a, b) => a / b;
console.log(divide(20, 5)); // 4

Arrow functions are shorter and especially useful with array methods

41