1

2
Please read this disclaimer before proceeding:

This document is confidential and intended solely for the educational purpose of
RMK Group of Educational Institutions. If you have received this document through
email in error, please notify the system manager. This document contains
proprietary information and is intended only to the respective group / learning
community as intended. If you are not the addressee you should not disseminate,
distribute or copy through email. Please notify the sender immediately by e-mail if
you have received this document by mistake and delete this document from your
system. If you are not the intended recipient you are notified that disclosing,
copying, distributing or taking any action in reliance on the contents of this
information is strictly prohibited.
 24CS102
SOFTWARE DEVELOPMENT PRACTICES

Batch / Year / Semester: 2024-2028 / I / I

Created by : Subject handling Faculties -

RMK Group of Institutions

4
 1. CONTENTS

Page
S. No. Contents
No
1 Contents 5

2 Course Objectives 6

3 Pre Requisites 7

4 Syllabus 8

5 Course Outcomes 11

6 CO- PO/PSO Mapping 12

7 Lecture Plan 13

8 Activity based learning 14

9 Lecture Notes 15

10 Assignments 76

11 Part A Questions & Answers 77

12 Part B and Part C Questions 81

13 Supportive online Certification courses 82

14 Real time Applications 83

15 Contents beyond the Syllabus 85

16 Assessment Schedule 86

17 Prescribed Text Books & Reference Books 87

18 Mini Project Suggestions 88

5
 2. COURSE OBJECTIVES

To discuss the essence of agile development methods.

To set up and create a GitHub repository.

To create interactive websites using HTML.

To design interactive websites using CSS.

To develop dynamic web page using Javascript.

6
 3. PRE REQUISITES

SUBJECT CODE: 24CS102

SUBJECT NAME: SOFTWARE DEVELOPMENT PRACTICES
(Theory Course with Laboratory Component)

BASIC COMPUTER KNOWLEDGE

24CS102 – SOFTWARE DEVELOPMENT PRACTICES

(Theory Course with Laboratory Component)

6
 4. Syllabus
SOFTWARE DEVELOPMENT PRACTICES L T P C
24CS102
(Theory Course with Laboratory Component) 3 0 3 4.5

OBJECTIVES:
∙ To discuss the essence of agile development methods.
∙ To set up and create a GitHub repository.
∙ To create interactive websites using HTML
∙ To design interactive websites using CSS.
∙ To develop dynamic web page using Javascript.
UNIT I AGILE SOFTWARE DEVELOPMENT, Git AND GitHub 9+9
Software Engineering Practices – Waterfall Model - Agility – Agile Process –Extreme
Programming - Agile Process Models – Adaptive Software Development – Scrum –
Dynamic Systems Development Method – Crystal – Feature Driven Development – Lean
Software Development – Agile Modeling – Agile Unified Process – Tool set for Agile
Process.
Introduction to Git – Setting up a Git Repository - Recording Changes to the Repository -
Viewing the Commit History - Undoing Things - Working with Remotes -Tagging - Git
Aliases- Git Branching - Branches in a Nutshell - Basic Branching and Merging - Branch
Management - Branching Workflows - Remote Branches - Rebasing.
Introduction to GitHub – Set up and Configuration - Contribution to Projects, Maintaining
a Project – Scripting GitHub.
List of Exercise/Experiments:
1. Form a Team, Decide on a project:
a) Create a repository in GitHub for the team.
b) Choose and follow a Git workflow
• Each team member can create a StudentName.txt file with contents about
themselves and the team project
• Each team member can create a branch, commit the file with a proper
commit message and push the branch to remote GitHub repository.
• Team members can now create a Pull request to merge the branch to
master branch or main development branch.
• The Pull request can have two reviewers, one peer team member and one
faculty. Reviewers can give at least one comment for Pull Request updating.
• Once pull request is reviewed and merged, the master or main
development branch will have files created by all team members.
2. Create a web page with at least three links to different web pages. Each of the web
pages is to be designed by a team member. Follow Git workflow, pull request and peer
reviews.
 UNIT II HTML 9+9
Introduction – Web Basics – Multitier Application Architecture – Client Side Scripting
versus Server-side Scripting – HTML5 – Headings – Linking – Images– Special Characters
and Horizontal Rules – Lists – Tables – Forms – Internal Linking – meta Elements – Form
input Types – input and datalist Elements – Page-Structure Elements.
List of Exercise/Experiments:
1. Create web pages using the following:
• Tables and Lists
• Image map
• Forms and Form elements
• Frames
UNIT III CSS 9+9
Inline Styles – Embedded Style Sheets – Conflicting Styles – Linking External Style Sheets
– Positioning Elements – Backgrounds – Element Dimensions – Box Model and Text Flow –
Media Types and Media Queries – Drop-Down Menus – Text Shadows – Rounded Corners
– Colour – Box Shadows – Linear Gradients – Radial Gradients – Multiple Background
Images – Image Borders – Animations – Transitions and Transformations – Flexible Box
Layout Module – Multicolumn Layout.
List of Exercise/Experiments:
1. Apply Cascading style sheets for the web pages created.
UNIT IV JAVASCRIPT BASICS 9+9
Introduction to Scripting – Obtaining user input – Memory Concepts – Arithmetic –
Decision Making: Equality and Relational Operators – JavaScript Control Statements –
Functions – Program Modules – Programmer-defined functions – Scope rules – functions –
Recursion – Arrays – Declaring and Allocating Arrays – References and Reference
Parameters – Passing Arrays to Functions – Multidimensional arrays.
List of Exercise/Experiments:
1. Form Validation (Date, Email, User name, Password and Number validation) using
JavaScript.
UNIT V JAVASCRIPT OBJECTS 9+9
Objects – Math, String, and Date, Boolean and Number, document Object – Using
JSON to Represent objects – DOM: Objects and Collections – Event Handling.
List of Exercise/Experiments:
Implement Event Handling in the web pages.
Mini Projects : Develop any one of the following web applications (not limited to one)
using above technologies.

a. Online assessment system

b. Ticket reservation system
c. Online shopping
d. Student management system
 e. Student result management system
f. Library management
g. Hospital management
h. Attendance management system
i. Examination automation system
j. Web based chat application

TOTAL: 45(L)+45(P)=90 PERIODS

OUTCOMES:
At the end of this course, the students will be able to:
CO1: Understand basic software engineering practices effectively.
CO2: Apply version control using Git and GitHub, and manage code repositories
proficiently.
CO3: Design web applications using HTML, CSS, and JavaScript.
CO4: Analyze problems and create solutions using CSS for better web page
presentation and usability.
CO5: Develop interactive web pages using JavaScript with an event-handling
mechanism.
CO6: Apply the technological changes and improve skills continuously.
TEXT BOOKS:
1. Roger S. Pressman, “Software Engineering: A Practitioner‘s Approach”,
McGraw Hill International Edition, Ninth Edition, 2020.
2. Scott Chacon, Ben Straub, “Pro GIT”, Apress Publisher, 3rd Edition, 2014.
3. Deitel and Deitel and Nieto, “Internet and World Wide Web - How to
Program”, Pearson, 5th Edition, 2018.

REFERENCES:
1. Roman Pichler, “Agile Product Management with Scrum Creating Products that Customers
Love”, Pearson Education, 1st Edition, 2010.
2. Jeffrey C and Jackson, “Web Technologies A Computer Science Perspective”,
Pearson Education, 2011.
3. Stephen Wynkoop and John Burke, “Running a Perfect Website”, QUE,
2nd Edition, 1999.
4. Chris Bates, “Web Programming – Building Intranet Applications”, 3rd
Edition, Wiley Publications, 2009.
5. Gopalan N.P. and Akilandeswari J., “Web Technology”, Second Edition,
Prentice Hall of India, 2014.
6. https://infyspringboard.onwingspan.com/web/ en/app/toc/
lex_auth_013382690411003904735_shared/overview
7. https://infyspringboard.onwingspan.com/web/e n/app/
toc/lex_auth_0130944214274703362099_share d/overview

LIST OF EQUIPMENTS:
1. Systems with either Netbeans or Eclipse
2. Java/JSP/ISP Webserver/Apache
3. Tomcat / MySQL / Dreamweaver or
4. Equivalent/ Eclipse, WAMP/XAMP
5. Course Outcomes

COURSE OUTCOMES HKL

CO1 Understand basic software engineering practices effectively. K3

CO2 Apply version control using Git and GitHub, and manage code K6
repositories proficiently.

CO3 Design web applications using HTML, CSS, and JavaScript. K3

CO4 Analyze problems and create solutions using CSS for better web page K6
presentation and usability.

CO5 Develop interactive web pages using JavaScript with an K6

event-handling mechanism.
CO6 Apply the technological changes and improve skills continuously. K6

Knowledge Level Description

K6 Evaluation

K5 Synthesis

K4 Analysis

K3 Application

K2 Comprehension

K1 Knowledge

11
 6. CO-PO/PSO Mapping

CO PROGRAM OUTCOMES PSO

CO ATTAI P P P
NMENT PO PO PO PO PO PO PO PO PO PO PO PO S S S
1 2 3 4 5 6 7 8 9 1 1 12 O O O
0 1 1 2 3

CO1 1 3 3 3 1 1 1 - - 2 1 2 1 2 2 1

CO2 2 3 2 3 1 2 1 - - 2 1 2 1 - 2 -

CO3 3 3 3 3 1 2 1 - 1 2 1 2 1 2 - 2

CO4 4 3 3 3 1 2 1 - - 2 1 2 1 - 2 2

CO5 5 3 3 3 1 2 1 - 1 2 1 2 1 2 - 2

CO6 6 3 2 3 1 2 1 - 1 2 1 2 1 - 2 -

CO 3 3 3 1 2 1 - 1 2 1 2 1 2 2 2

11/15/2022 12
7. LECTURE PLAN : UNIT – II

HTML
UNIT – II HTML

Highest
S. Proposed Actual Cognitive Mode of Delivery
Topic CO LU Outcomes Remark
No Lecture Lecture Level Delivery Resources
Date Date

1 Introduction – Web Basics MD1,MD4

03.10.2024 03.10.2024 K1 T1
& Introduction – Web Basics
MD5
Multitier Application
Multitier Application Architecture –
2 K3 MD1,MD4 T1 Architecture – Client Side
Client Side Scripting versus
& Scripting versus Server-side
04.10.2024 Server-side Scripting 04.10.2024 MD5 Scripting

MD1,MD4
& HTML5 ,Headings
3 HTML5 ,Headings K3 T1
05.10.2024 05.10.2024 MD5

4 K3 MD1,MD4 T1
Linking,Images & Linking,Images
07.10.2024 07.10.2024
CO3 MD5

Special Characters and Horizontal MD1,MD4 Special Characters and

5 K1 & T1
08.10.2024 Rules Lists 08.10.2024 Horizontal Rules Lists
MD5

MD1,MD4
6 Tables K3 & T1 Tables
09.10.2024 09.10.2024 MD5

7 K3 MD1,MD4
&
10.10.2024 Forms,Internal Linking 10.10.2024 Forms,Internal Linking
MD5
T1

MD1,MD4
meta Elements meta Elements
&
8 Form input Types K3 T1 Form input Types
15.10.2024 15.10.2024 MD5

MD1,MD4 Input and datalist

Input and datalist Elements,Page
& Elements,Page
Structure Elements.
9 K3 MD5 T1 Structure Elements.
16.10.2024 16.10.2024

• ASSESSMENT COMPONENTS MODE OF DELIVERY

• AC 1. Unit Test MD 1. Oral presentation
• AC 2. Assignment MD 2. Tutorial
• AC 3. Course Seminar MD 3. Seminar
• AC 4. Course Quiz MD 4. Hands On
• AC 5. Case Study MD 5. Videos
• AC 6. Record Work MD 6. Field Visit
• AC 7. Lab / Mini Project
• AC 8. Lab Model Exam
• AC 9. Project Review

13
 8. ACTIVITY BASED LEARNING – UNIT II

Create your own mind map diagram for all the html tags and components.

11
 Lecture Notes
UNIT II - HTML
Introduction – Web Basics – Multitier Application Architecture – Client Side Scripting
versus Server-side Scripting – HTML5 – Headings – Linking – Images–Special
Characters and Horizontal Rules – Lists – Tables – Forms – Internal Linking – meta
Elements – Form input Types – input and datalist Elements – Page-Structure
Elements.
 9. LECTURE NOTES

2.1 INTRODUCTION
HTML stands for HyperText Markup Language and it is used to design web pages using
a markup language.
HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between web pages.
A markup language is used to define the text document within the tag which defines the
structure of web pages.
This language is used to annotate (make notes for the computer) text so that a machine can
understand it and manipulate text accordingly.
Most markup languages (e.g. HTML) are human-readable.
The language uses tags to define what manipulation has to be done on the text.

2.1.1 History of HTML

2.1.2 Elements and Tags

HTML uses predefined tags and elements which tell the browser how to properly display the
content.
Remember to include closing tags.
If omitted, the browser applies the effect of the opening tag until the end of the page.

2.1.3 HTML page structure

The basic structure of an HTML page is laid out 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.
 <!DOCTYPE html>: This is the document type declaration (not technically a tag). It declares a
document as being an HTML document. The doctype declaration is not case-sensitive.
<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.
HTML elements used inside the <head> element include:
<style>-This html tag allows us to insert styling into our web pages and make them appealing
to look at with the help of CSS.
<title>-The title is what is displayed on the top of your browser when you visit a website and
contains title of the webpage that you are viewing.
<base>-It specifies the base URL for all relative URLs in a document.
<noscript>– Defines a section of HTML that is inserted when the scripting has been turned off
in the users browser.
<script>-This tag is used to add functionality in the website with the help of JavaScript.
<link>– The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is self closing.
<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.
An HTML document can be created using any text editor. Save the text file using .html or .htm.
Once saved as an HTML document, the file can be opened as a web page in the browser.
EXAMPLE
<html>
<head>
<title>Demo Web Page</title>
</head>
<body>
<h1>WELCOME TO RMK GROUP OF INSTITUTION</h1>
<p>CSE Department </p>
</body>
</html>
OUTPUT:

2.1.4 Features of HTML

1. It is easy to learn and easy to use.
2. It is platform-independent.
3. Images, videos, and audio can be added to a web page.
4. Hypertext can be added to the text.
5. It is a markup language.
2.1.5 Why learn HTML?
1. It is a simple markup language. Its implementation is easy.
2. It is used to create a website.
3. Helps in developing fundamentals about web programming.
4. Boost professional career.
2.1.6 Advantages
1. HTML is used to build websites.
2. It is supported by all browsers.
3. It can be integrated with other languages like CSS, JavaScript, etc.
2.1.7 Disadvantages
1. HTML can only create static web pages. For dynamic web pages, other languages
have to be used.
2. A large amount of code has to be written to create a simple web page.
3. The security feature is not good.
2.2 WEB BASICS
The Internet consists of clients and servers.
For example:
The web page you are reading right now is actually a computer file that is on the
College of Engineering’s web server.
The computer you are using to view this page is the client computer. The client and the
server are connected by what is called the Hypertext Transfer Protocol or HTTP for short.
 Both computers must understand this protocol to communicate with each other.
This is done by the programs that are used.
On the client side it is your browser and on the server side it is one of many types of web
server programs.
We use the Apache web server, for example, HTTP uses the Uniform Resource Locator, or
URL, to communicate between the client and the server. This URL tells the server which web
page it needs to send to the client, and so the URL is basically an address on the web.
If you look at the top of your browser you will see that the URL for this web page is:
http://www.engr.colostate.edu/ets/web-basics
The address can be broken down like this:
http://
This tells the server that the client is requesting a web page. The client can also request
other things from the server.
www.engr.colostate.edu
This is the host that the client computer wishes to connect to. It is basically the “name” of
the computer that the web pages are stored in.
ets/web-basics
This is the path to the specific web page the client computer wants to see.
It is basically a listing of the directories on the server computer where the file is stored.
So this web page (webbasics.html) is in a directory called “web” that is within a directory
called “how” that is in turn within a directory called “ens'' that resides at the root of the web
server.
Another important protocol that is used to communicate between clients and servers is
Hypertext Markup Language, or HTML.
This is the language that is used to actually create the web pages. It tells your browser how
to display the content of the computer file on your browser window.
2.2.1 How the Web Works
Your browser tells your computer to send out a request for a specific URL address.
This request is sent to a number of other computers including domain name servers,
firewalls, routers and gateways. Each one of these computers have a different task, but the
bottom line is that they make sure that the request is sent to the correct server.
 The server computer accepts the request and the web server program determines exactly
what is wanted.
The server computer then sends out the web file that was requested.
The web file is sent to the computers mentioned in step number 3. These are not
necessarily the same physical computers as before, but the tasks that they perform will be
the same.
Your computer receives the web file the server sent.
The browser parses the HTML contained in the web file and displays the contents in the
browser’s window.
You click a link on the page and it starts all over again with step number 2.
2.3 MULTI-TIER APPLICATION ARCHITECTURE
An N-Tier Application program is one that is distributed among three or more separate
computers in a distributed network
Three Categories of N-Tier Application
1. User Interface programming in the user’s computer
2. Business logic in a more centralized computer
3. Required data in a computer that manages a database
This architecture model provides Software Developers to create reusable application with
maximum flexibility
An N-tier refers to a number of tiers such as 2-tier, 3-tier, 4-tier etc.
It is suitable for support enterprise level, client – server applications by providing solutions
to scalability, fault tolerance, reusability and maintainability.
Popular sites:
1. MakeMyTrip.com
2. Salesforce enterprise application
3. Indian Railways – IRCTC
4. Amazon.com

2.3.1 Distributed Network

The components located at network computers coordinate and communicate their actions
only by passing messages.
It is a collection of multiple systems situated at different nodes but appears to the user as a
single system
It provides a single data communication network which can be managed separately by
different networks
An example: Different clients are connected with LAN architecture on one side and on the
other side they are connected to high – speed switches along with a rack of servers
containing servicing nodes.
2.4.CLIENT-SIDE SCRIPTING VERSUS SERVER-SIDE SCRIPTING
The scripts may be created in two ways:
2.4.1 CLIENT SIDE

Client-side means that the processing takes place on the user’s computer.
It requires browsers to run the scripts on the client machine without involving any
processing on the server.
These scripts are typically embedded into HTML text.
Client-side scripting may be utilized to check the user's form for problems before submitting
it and to change the content based on the user input.
The web needs three components to function: client, database, and server.
The client-side scripting may significantly reduce server demand.
It is intended to be utilized as a scripting language with a web browser as the host
program.
2.4.2 SERVER SIDE:

Server-side scripting is a programming technique for creating code that may run software
on the server side.
In other words, server-side scripting is any scripting method that may operate on a web
server.
 At the server end, actions such as website customization, dynamic changes in website
content, response creation to user requests, database access, and many more are carried
out.
Server-side scripting creates a communication channel between a server and a client.

2.4.3 COMPARISON BETWEEN SERVER-SIDE SCRIPTING AND CLIENT-SIDE

SCRIPTING

Features Server-side Scripting Client-side Scripting

Primary Function The main function of this The main purpose of this
scripting is to manipulate scripting is to give the
and grant access to the requested output to the
requested database. end-user.

Uses It is employed at the It is utilized at the front end,

backend, where the source which users may view
code is invisible or concealed through the browser.
on the client side.

Processing It needs server interaction. It doesn't need any server

interaction.

Security It is more secure while It is less secure than

working on a web app. server-side scripting due to
the code accessibility offered
to the client.

Running It executes on the web It executes on the remote

server. computer system.
Dependability It doesn't depend on the It depends on the user's
client. browser version.

File Access It offers complete access to It doesn't offer any access to

the file that is stored in the the files on the web servers.
web database server.

Code Allowance It enables the backend The user is given access to

developer to hide the source the written code after
code from the user. confirming their
requirements.

Occurrence It only responds after the It happens when the browser

user begins the browsing processes all of the codes and
request. then acts according to the
client's needs.

Affect It may reduce the server It may effectively customize

load. web pages and offer dynamic
websites.

Languages Involved The server-side scripting Its programming languages

programming languages, such are HTML, CSS, and
as PHP, ColdFusion, Python, JavaScript.
ASP.net, Java, C++, Ruby,
C#, etc.
2.5 HTML VS HTML5
2.5.1 HTML5
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags. HTML Provides a pre-defined set of tags that can
be used to present any kind of data and information.
Each HTML tag describes different document content
HTML is case insensitive i.e. the case used to open and close the tag is not strictly monitored.
<HTML> </html> will have the same effect.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Doctypes - 'document type' - help browsers to understand the version of HTML in which the
document is written.
Doctype declarations are not HTML tags and belong at the very top of a document.
The <!DOCTYPE> declaration should always be included at the top of the HTML
document,before the <html> tag.
The doctype declaration is case insensitive. Therefore the following DOCTYPEs are also valid:
<!DOCTYPE html>
<!DOCTYPE HTML>

<!doctype html>
<!Doctype Html>
HTML 5 Doctype:
<!DOCTYPE html>

HTML 4.01 Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.5.2 HTML Tags

HTML Tag is a markup - inserted into an HTML document to provide information about a unit
of content.
Identify a page element's type, format, and appearance.
All HTML tags are enclosed in brackets (i.e. <table>).
An element usually consists of an opening tag (<element_name>), a closing tag
(</element_name>), which contain the element's name surrounded by angle brackets, and
the content in between:
<element_name>...content...</element_name>
There are some HTML elements that don't have a closing tag or any contents. These are
called void elements.
Void elements include <img>, <meta>, <link> and <input>.
Elements: video, audio, table, footer
Tags: <video>, <audio>, <table>, <footer>, </html>, </body>
2.5.2.1 Basic Tags
<html> - Defines an HTML document. No markup should come after the closing tag
(</html>).
<head> - Defines the Header section of the Web Page
<title> - Defines a title for the web page displayed on the title bar.
<body> - Defines the body / content of the page
<h1> to <h6> - Defines HTML headings
<p> - Defines a paragraph
<br> - Inserts a single line break
<hr> - Defines a thematic change in the content
2.5.3 Text Formatting
HTML provides in-text formatting tags to apply specific text-related styles to portions of text.
<b> - Defines bold text
<em> - Defines emphasized text
<i> - Defines italic text
<small> - Defines smaller text
<strong> - Defines important text
<sub> - Defines subscripted text
<sup> - Defines superscripted text
<ins> - Defines inserted text
<del> - Defines deleted text
<mark> - Defines marked/highlighted text
<pre> - Preformatted tags: used to apply structural exactness to that of the text in the editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>Formatting tags</title>
</head>
<body>
<h1>H1 heading</h1>
<h2>H2 heading</h2>
<h3>H3 heading</h3>
<hr>
<p>
<b>This text is bold</b><br> <strong>This text is strong</strong><br>
<i>This text is italic</i>
<br> <em>This text is emphasized</em>.<br>
<h2>HTML <small>Small</small> Formatting</h2><br>
<h2>HTML <mark>Marked</mark> Formatting</h2>br>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is x²+y ²</p>
<p>Oxygen is represented as O₂</p>
</body>
</html>
Output
2.5.4 Quotation and Citation Elements
<abbr> - Defines an abbreviation or acronym
<address> - Defines contact information for the author/owner of a document
<bdo> - Bi-Directional Override. Defines the text direction
<blockquote> - Defines a section that is quoted from another source
<cite> - Defines the title of a work
<q> - Defines a short inline quotation
Example
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org">The world's leading conservation
organization, WWF works in 100 countries and is supported by 5 million members
globally.</blockquote>
<p>The <abbr title="World Health Organization">WHO </abbr> </abbr> was founded in
1948.</p>
<address>Written by Jon Doe.<br> Visit us at:<br> Example.com<br> Box 564,
Disneyland<br> USA </address>
<p> <cite>The Scream</cite> by Edward Munch. Painted in 1893. </p>
<bdo dir="rtl">This text will be written from right to left </bdo>
</body>
</html>
Output
2.6 HEADINGS
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage.
HTML provides six headings, called heading elements, for specifying the relative importance
of information.
When you place the text within the heading tags <h1>.........</h1>, it is displayed on the
browser in the bold format and size of the text depends on the number of heading.
Heading element <h1> is considered the most significant heading and is typically rendered in
a larger font than the other five headings.
Each successive heading element (i.e., <h2>, <h3>, etc.) is typically rendered in a
progressively smaller font.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Output
 Each HTML heading has a default size.
However, you can specify the size for any heading with the style attribute, using the
CSS font-size property:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
</body>
</html>
Output

2.7 LINKS
The Web is based on hyperlinks. HTML links are hyperlinks. A hyperlink is a text or an image
you can click on, and jump to another document.
[anchor] tag is used to create various types of hyperlinks.
The href attribute specifies the url or the path to the destination (http://rmkec.ac.in/) [anchor]
tag is followed by the link text.
The link text is the visible part.
Clicking on the link text, will send you to the specified address.
This tag defines the relationship between a document and an external resource (most used to
link to style sheets).
This tag defines navigation links.
The target attribute specifies where to open the linked document.
2.7.1 HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
 The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
If the web server cannot locate a requested document, it returns an error indication to the web
browser, and the browser displays a web page containing an error message to the user.
Example
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<a href="https://www.google.com/">Google!</a>
<p><a >href="http://www.rmkec.ac.in/">Visit RMK Group of Insitution.com!</a></p>
</body>
</html>
Output
HTML Links
Google!
Visit RMK Group of Insitution.com!
2.7.2 HTML Links - The target attribute
By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
Target Value Description
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Example
Use target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.google.com/" target="_blank">Visit Google!</a>
Output
The target Attribute
Visit Google!
If target="_blank", the link will open in a new browser window or tab.
2.7.3 Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
The following image works as a link:<br>
<a href="https://www.qries.com/">
<img src="https://www.qries.com/images/banner_logo.png" alt="Qries"
width="150" height="70">
</a>
</body>
</html>
Output
2.7.4 Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email program (to
let them send a new email):
Example
<!DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new email), use
mailto: inside the href attribute:</p>
<p><a href="mailto:[email protected]">Send email</a></p>
</body>
</html>
Output

2.7.5 Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
</body>
</html>
Output

2.7.6 Link Titles

The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse moves over the
element.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most
often shown as a tooltip text when the mouse moves over the element.</p>
<a href="http://www.rmkec.ac.in/" title="Go to Home">Visit our RMK College Website </a>
</body>
</html>
Output
2.8 INTERNAL LINKING
HTML internal link is linked within the same web page. This link can be an absolute path or
relative path.
HTML internal link name is followed by the hash sign(#).
You have to assign an id to the refer section of your page, which is referred to as an internal
link to the same page.
When you click on an internal anchor link, you will scroll automatically to the referred section
and display it on your browser.
To understand the internal link see the below examples.
<a href="#lession1">Lession.1</a> link can be referred as <a id="lession1">Introduction of
Lession.1</a> automatically.
<a href="#lession2">Lession.2</a> link can be referred as <div id="lession2">Introduction
of Lession.2</div> automatically.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />
<a href="#lession3">Lession.3</a><br />
<a href="#lession4">Lession.4</a><br />
<br />
<a id="lession1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
 <div id="lession2">Introduction of Lession.2</div>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<p id="lession3">Introduction of Lession.3</p>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<article id="lession4">Introduction of Lession.4</article>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br /><article id="lession4">Introduction of Lession.4</article>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>
Output
Lession.1
Lession.2
Lession.3
Lession.4
Introduction of Lession.1
This is sub topic.1
This is sub topic.2
This is sub topic.3
This is sub topic.4
Introduction of Lession.2
This is sub topic.1
This is sub topic.2
This is sub topic.3
This is sub topic.4
Introduction of Lession.3
This is sub topic.1
This is sub topic.2
This is sub topic.3
This is sub topic.4
Introduction of Lession.4
This is sub topic.1
This is sub topic.2
This is sub topic.3
This is sub topic.4
2.9 IMAGES
Images can improve the design and the appearance of a web page.
HTML img tag is used to display image on the web page.
HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML
image element.
The three most popular image formats used by web developers are Graphics Interchange
Format (GIF), Joint Photographic Experts Group (JPEG) and Portable Network Graphics (PNG)
images.
2.9.1 HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The
<img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternate text">

Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
Output

2.9.1.1 The src Attribute

The required src attribute specifies the path (URL) to the image.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get
an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body>
</html>
Output

If a browser cannot find an image, it will display the value of the alt attribute:
Example
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find the image, it will display the alternate text:</p>
<img src="wrongname.gif" alt="Flowers in Chania">
</body>
</html>
Output:

2.9.1.3 Image Size - Width and Height

You can use the style attribute to specify the width and height of an image:
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
Output:
Alternatively, you can use the width and height attributes:
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we specify the width and height of an image with the width and height
attributes:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
Output
2.9.1.4 Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of the HTML image
tag are given below.
1) src:

It is a necessary attribute that describes the source or path of the image.

It instructs the browser where to look for the image on the server.
The location of the image may be on the same directory or another server.
2) alt:

The alt attribute defines an alternate text for the image, if it can't be displayed.
The value of the alt attribute describes the image in words.
3) width:

It is an optional attribute which is used to specify the width to display the image.
4) height

It h3 the height of the image.

The HTML height attribute also supports iframe, image and object elements.
2.10 SPECIAL CHARACTERS AND HORIZONTAL RULES
Horizontal rules and Line breaks
There are two tags that can be used to control the layout of your page.
Horizontal Rule <hr>
Line break <br> -- inserts a end of line where it appear
Neither have a closing tag or associated text.
Their use is fairly straightforward.
Horizontal Rule <hr>The HTML <hr> tag is used for creating a horizontal line. This is also
called Horizontal Rule in HTML.
The <hr> has 4 attributes that may be associated with it.
The size attribute to specify thickness of line in pixels (pixels are individual dots displayed on
the screen).
Example
<b>2 Pixels</b><br>
<hr size=2>
<b>4 Pixels</b><br>
<hr size=4>
<b>8 Pixels</b><br>
<hr size=8>
<b>16 Pixels</b><br>
<hr size=16>
Output

Which looks like this:

2 Pixels
4 Pixels
8 Pixels
16 Pixels

Symbols that are not present on your keyboard can also be added by using entities.

2.10.1 HTML Symbol Entities

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use the entity name or the entity number (a
decimal or a hexadecimal reference) for the symbol.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Mathematical Symbol Example</h1>
<h2>The for-all symbol: &forall;</h2>
</body>
</html>
Output
Mathematical Symbol Example
The for-all symbol: ∀
Example
<!DOCTYPE html>
<html>
<body>
<h1>Mathematical Symbol Example</h1>
<h2>The partial differential symbol: &part;</h2>
</body>
</html>
Output
Mathematical Symbol Example
The partial differential symbol: ∂
2.11 LISTS
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

2.11.1 HTML Ordered List or Numbered List:

It displays elements in numbered format.
The HTML ol tag is used for ordered list.
We can use ordered list to represent items either in numerical order format or alphabetical
order format, or any format where an order is emphasized.
There can be different types of numbered list:
Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Roman Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol> tag

Type Description

Type "1" This is the default type. In this type, the list items are numbered with numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.

Type "a" In this type, the list items are numbered with lower case letters.

Example
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

Output
An ordered HTML list
Coffee
Tea
Milk
2.11.2 HTML Unordered List or Bulleted List
It displays elements in bulleted format .
We can use an unordered list where we do not need to display items in any particular order.
The HTML ul tag is used for the unordered list.
There can be 4 types of bulleted list:
1. disc
2. circle
3. square
4. none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description

Type "disc" This is the default style. In this style, the list items are marked with
bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked.

Example
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output
An unordered HTML list
Coffee
Tea
Milk
2.11.3 HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML.
It is also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present a glossary, list of terms or
other name-value list.
The HTML definition list contains following three tags:
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description).

Example
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output
A Description List
Coffee
- black hot drink
Milk
- white cold drink
2.11.4 HTML Nested List

A list within another list is termed as a nested list.

If you want a bullet list inside a numbered list then such type of list will be called a nested list.

Example
<!DOCTYPE html>
<html>
<head>
<title>Nested list</title>
</head>
<body>
<p>List of Indian States with thier capital</p>
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Haryana
<ul>
<li>Chandigarh</li>
</ul>
</li>
<li>Gujarat
<ul>
<li>Gandhinagar</li>
</ul>
</li>
<li>Rajasthan
<ul>
<li>Jaipur</li>
</ul>
</li>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li>
</ol>
</body>
</html>
2.12 TABLES
HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table
data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar,
body content, footer section etc.
But it is recommended to use the div tag over the table to manage the layout of the page.
2.12.1 HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each
column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

2.12.2 HTML Table Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Output

Here, the border is an attribute of <table> tag and it is used to put a border across all the
cells.
If you do not need a border, then you can use border = "0".
2.12.3 Table Heading
Table heading can be defined using <th> tag.
This tag will be put to replace <td> tag, which is used to represent actual data cell.
Normally you will put your top row as table heading as shown below, otherwise you can use
<th> element in any row.
Headings, which are defined in <th> tag are centered and bold by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Output

2.13 FORMS
An HTML form is used to collect user input.
The user input is most often sent to a server for processing.
The <form> Element
<form> is a HTML element to collect input data containing interactive controls.
It provides facilities to input text, number, values, email, password, and control fields such as
checkboxes, radio buttons, submit buttons, etc., or in other words, form is a container that
contains input elements like text, email, number, radio buttons, checkboxes, submit buttons,
etc.
Forms are generally used when you want to collect data from the user.
For example, a user wants to buy a bag online, so he/she has to first enter their shipping
address in the address form and then add their payment details in the payment form to place
an order.
syntax
<form>
<!--form elements-->
</form>
2.13.1 Form elements
These are the following HTML <form> elements:
<label>: It defines a label for <form> elements.
<input>: It is used to get input data from the form in various types such as text, password,
email, etc by changing its type.
<button>: It defines a clickable button to control other elements or execute a functionality.
<select>: It is used to create a drop-down list.
<textarea>: It is used to input long text content.
<fieldset>: It is used to draw a box around other form elements and group the related data.
<legend>: It defines captions for fieldset elements.
<datalist>: It is used to specify pre-defined list options for input controls.
<output>: It displays the output of performed calculations.
<option>: It is used to define options in a drop-down list.
<optgroup>: It is used to define group-related options in a drop-down list.
2.13.1.1 The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
2.13.1.1 Text Fields
The <input type="text"> defines a single-line input field for text input.
Example
A form with input fields for text:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Output

2.13.1.2 The <label> Element

The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within the
<label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input>
element to bind them together.
2.13.1.3 Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
Output

13.2 HTML Form Attributes

1. Action Attribute
2. Target Attribute
3. Method Attribute
4. Autocomplete Attribute
5. Novalidate Attribute
13.2.1 The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit
button.
Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:

13.2.2 The Target Attribute

The target attribute specifies where to display the response that is received after submitting
the form.
The target attribute can have one of the following values:

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

13.2.3 The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").
The default HTTP method when submitting form data is GET.
13.2.4 The Autocomplete Attribute
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that
the user has entered before.
13.2.5 The Novalidate Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when
submitted.
13.3 HTML <meta> Tag
The <meta> tag defines metadata about an HTML document.
Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character
set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
13.3.1 Attributes

Attribute Value Description

Specifies the character encoding for
charset character_set the HTML document
Specifies the value associated with
content text the http-equiv or name attribute
Provides an HTTP header for the
content-security-policy,content-type
information/value of the content
http-equiv default-style,refresh attribute
application-name,author,description,
name generator,keywords,viewport Specifies a name for the metadata
2.14 HTML INPUT TYPES
The <input> HTML element is used to create interactive controls for web-based forms in order
to accept data from the user; a wide variety of types of input data and control widgets are
available, depending on the device and user agent.
The <input> element is one of the most powerful and complex in all of HTML due to the sheer
number of combinations of input types and attributes.
2.14.1 HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
2.14.1.1 Input Type Text
<input type="text"> defines a single-line text input field:
Example
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output

2.14.1.2 Input Type Password

<input type="password"> defines a password field
Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Output

2.14.1.3 Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute.
Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Output

2.14.1.4 Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default
values:
Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Output

2.14.1.5 Input Type Radio

<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Output

2.14.1.6 Input Type Checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Output

2.14.1.7 Input Type Color

The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example

<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Output:

2.14.1.7 Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Output

2.14.1.8 Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email
input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Output:

2.14.1.8 Input Type Image

The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.
Example
<form>
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Output:

2.15 HTML Semantic/Structural Elements:

A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Semantic Elements in HTML
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different parts of a web
page:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML <section> Element

The <section> element defines a section in a document.
A section is a thematic grouping of content, typically with a heading.
Examples of where a <section> element can be used:
Chapters
Introduction
News items
Contact information
Example
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on
issues regarding the conservation, research and restoration of the environment, formerly
named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. </p>
</section>
</body>
</html>
Output
WWF
The World Wide Fund for Nature (WWF) is an international organization working on issues
regarding the conservation, research and restoration of the environment, formerly named the
World Wildlife Fund. WWF was founded in 1961.
WWF's Panda symbol
The Panda has become the symbol of WWF.
2.15.1 HTML <article> Element
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.
Examples of where the <article> element can be used:
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
Example
Three articles with independent, self-contained content:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the
world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the
second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft
Edge replace Internet Explorer.</p>
</article>
Output
Google Chrome
Google Chrome is a web browser developed by Google, released in 2008. Chrome is the
world's most popular web browser today!
Mozilla Firefox
Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the
second most popular web browser since January, 2018.
Microsoft Edge
Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge
replace Internet Explorer.
2.15.2 HTML <header> Element
The <header> element represents a container for introductory content or a set of
navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
Note: You can have several <header> elements in one HTML document. However, <header>
cannot be placed within a <footer>, <address> or another <header> element.
Example
A header for an <article>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Output
What Does WWF Do?
WWF's mission:
WWF's mission is to stop the degradation of our planet's natural environment, and build a
future in which humans live in harmony with nature.
2.15.3 HTML <footer> Element
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
You can have several <footer> elements in one document.
Example
A footer section in a document:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
Output
Author: Hege Refsnes
[email protected]
2.15.4 HTML <nav> Element
The <nav> element defines a set of navigation links.
Example
A set of navigation links:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Output
HTML | CSS | JavaScript | jQuery
2.15.5 HTML <aside> Element
The <aside> element defines some content aside from the content it is placed in (like a
sidebar).
The <aside> content should be indirectly related to the surrounding content.
Example
<!DOCTYPE html>
<html>
<body>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
</body>
</html>
Output

HTML <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element
can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Places to Visit</h2>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
Output
 10. ASSIGNMENT : UNIT – II
1. Design and Develop a Multi-Tiered E-Commerce Website: Create a multi-tiered
e-commerce website using HTML5. Structure the website with <header>, <nav>,
<main>, <section>, and <footer> elements to organize content. Include product
listings with images, pricing tables, and a detailed product view. Implement internal
linking for navigation between product categories, and use meta elements for SEO
optimization. Ensure the website is responsive and properly structured.
2. Create an Interactive Online Course Page: Design a detailed online course page
using HTML5. Include a course overview, instructor profiles, and a schedule table. Use
<table> elements to display course dates and times, and <ul> or <ol> for course
features and requirements. Implement forms for user registration and feedback with
various input types. Ensure proper use of HTML5 semantic elements and internal
linking for smooth navigation.
3. Develop a Restaurant Menu and Reservation Page: Build a restaurant menu
page using HTML that includes sections for different types of dishes (e.g., appetizers,
main courses, desserts). Use <table> elements to list menu items and pricing, and
<img> tags to include images of dishes. Add a reservation form with fields for name,
contact information, and reservation details. Use internal linking to navigate between
the menu and reservation sections.
4. Build a Basic Contact Information Page: Develop a simple contact information
page using HTML. Include a contact form with fields for name, email, and message.
Use <label> for form labels and <input> for user inputs. Add basic contact details
such as phone number and address using <address>. Ensure the page is
well-structured with proper HTML tags.
5. Design a Basic Blog Homepage: Create a basic homepage for a blog using HTML.
Include sections for recent posts with headings and brief descriptions. Use <ul> or
<ol> to list blog categories and <img> for post thumbnails. Ensure proper use of
headings, paragraphs, and images to structure the content. Add internal links to
navigate to individual blog posts.
 UNIT II – PART A – QUESTION AND ANSWERS

1. What is HTML5? CO3 K3

HTML5 is the latest version of the HyperText Markup Language that can be referred to the
WWW (World Wide Web) primary language, this markup language enhances a text file with
bits of code, and this code which we can say as “markup” describes the structure of the
document.
HTML5 provides some standard features like that of CSS, HTML, JavaScript, and DOM, which
in turn will reduce the requirement of external plugins.
It’s more markup to replace scripting, better error handling, etc.
HTML5 is device independent.
2. List down the features of HTML5 CO3 K3
1. Adding new parsing rules to enhance flexibility.
2. Adding New attributes.
3. Allow offline editing.
4. Support (Web SQL), – A common standard for storing data in SQL databases.
5. Support Protocol and MIME handler registration.
3. What is the ‘class’ attribute in HTML? CO3 K3
The class attribute is used to specify the class name for an HTML element. Multiple elements
in HTML can have the same class value. Also, it is mainly used to associate the styles written
in the stylesheet with the HTML elements.
4. Describe HTML layout structure? CO3 K3
Every web page has different components to display the intended content and a specific UI.
But still, there are few things which are templated and are globally accepted way to structure
the web page, such as:
<header>: Stores the starting information about the web page.
<footer>: Represents the last section of the page.
<nav>: The navigation menu of the HTML page.
<article>: It is a set of information.
<section>: It is used inside the article block to define the basic structure of a page.
<aside>: Sidebar content of the page.
5. What are the different kinds of Doctypes available? CO3 K3
The three kinds of Doctypes which are available:
Strict Doctype
Transitional Doctype
Frameset Doctype
6. What are some of the advantages of HTML5 over its previous versions? CO3 K3
Some advantages of HTML5 are:-
It has Multimedia Support.
It has the capabilities to store offline data using SQL databases and application cache.
Javascript can be run in the background.
HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
Included new Semantic tags and form control tags.
7. What is the difference between <figure> tag and <img> tag? CO3 K3
The <figure> tag specifies the self-contained content, like diagrams, images, code snippets,
etc. <figure> tag is used to semantically organize the contents of an image like image, image
caption, etc., whereas the <img> tag is used to embed the picture in the HTML5 document.
8. How to specify the metadata in HTML5? CO3 K3
To specify we can use <meta> tag which is a void tag,i.e., it does not have a closing tag. Some
of the attributes used with meta tags are name, content, http-equiv, etc. The below image tells
how to specify the metadata.
9. Is the <datalist> tag and <select> tag same? CO3 K3
No. The <datalist> tag and <select> tag are different. In the case of <select> tag a user will
have to choose from a list of options, whereas <datalist> when used along with the <input>
tag provides a suggestion that the user selects one of the options given or can enter some
entirely different value.
10. What are Semantic Elements? CO3 K3
Semantic elements are those which describe the particular meaning to the browser and the
developer. Elements like <form>, <table>, <article>, <figure>, etc., are semantic elements
11. What type of audio files can be played using HTML5? CO3 K3
HTML5 supports the following three types of audio file formats:
Mp3
WAV
Ogg
12. Explain new input types provided by HTML5 for forms? CO3 K3
Date - Only select date by using type = "date"
Week - Pick a week by using type = "week"
Month - Only select month by using type = "month"
Time - Only select time by using type = "time".
Color - Accepts multiple colors using type = "color"
13. What is the difference between HTML and HTML5? CO3 K3

HTML5 HTML

HTML5 has high-level video and audio High-level video and audio support is not a part of
support. the version and specifications in the previous HTML.

HTML5 is more mobile friendly. HTML is less mobile friendly.

Doctype declaration is simple and easy. Doctype declaration is long and complicated..

Allows drag and drop effect. Does not allow drag and drop effect.

Attributes of Async, charset, and ping These attributes are not available in HTML.
are available.

HTML5 supports javascript to run in the Does not support javascript to run within the
background. web browser.

14. What is <!DOCTYPE>? What are the different types of <!DOCTYPE> that are
available? CO3 K3
The <!DOCTYPE> declaration provides instruction to the web browser to understand what
information it should display, and the need to start with <!DOCTYPE> declaration. In HTML5,
DOCTYPE declaration is very short, and case-insensitive, and <!DOCTYPE html> is written at
the top of every HTML5 page.
The following DOCTYPE are also supported in HTML5:
<!DocTYpe html>
<!dOCtype html>
<!doctype html>
15. What is a tag in HTML5? CO3 K3
A tag is a special content in HTML5, which is surrounded by an angle bracket (<,>). A slash (/)
symbol is used to close the tag after completing the block.
For Example
<title> This is my Browser </title>
An Html5 tag is a set of characters that develop a formatted command for a web page. These
formatted commands communicate and send the instruction to the Browser.
16. What is the importance of Drag and Drop in HTML5? CO3 K3
Drag and Drop is the most important User Interface concept which makes it easy to grab an
object and Drag it at the place you want with the help of a mouse click.
Some common features that are mostly used by Drag and Drop operation include move, link or
copy.
We can drag an image using elements, type = <img draggable = “true”>, to make an image
draggable and set the draggable image attribute to true.
17. What is a hyperlink? Does it only apply to text? CO3 K3
The hyperlink is a link that allows a user to move from one web page to another web page when
clicked. Hyperlink concept is used on text and as well as image, and we can convert an image
into a link with the help of <a href = “ ”….</a>> tags.
18. List out the page structure elements of HTML5. CO3 K3
Page structure elements of HTML5 are given below:
<header>: Represents the header section and stores the starting information about the web
page.
<footer>: Represents the footer section (last portion) of the page.
<nav>: Represents the navigation elements of the HTML page.
<article>: It is a set of information.
<section>: It is a set of instructions that is used inside the article block to define the basic
structure of a page.
<aside>: Sidebar content of the page.
19. How many web browsers does HTML5 support? CO3 K3
Most of the latest versions of Apple Safari, Google Chrome, Opera, Internet Explorer, and Mozilla
Firefox are supported by HTML5.
20. What is cellpadding and cellspacing? CO3 K3
The cell padding allows to have some space between the contents of each cell and its borders.
The distance between each cell is called cell spacing.
 12. PART B QUESTIONS : UNIT – II
(CO3 , K3)

1. Explain Multi Tier Application Architecture?

2. What is Scripting and differentiate Client Side Scripting and Server Side Scripting
3. Difference between HTML and HTML5?
4. Explain Linking in detail?
5. Explain List and its types?
6. Explain Ordered List or Numbered List (ol)?
7. Explain Unordered List or Bulleted List (ul)?
8. Explain Description List or Definition List (dl)?
9. Explain Tables in detail with example?
10. Explain Forms in detail with example?
11. Explain Form input Types along with input and datalist Elements?
12. Explain in detail about HTML Semantic/Structural Elements?

PART C QUESTIONS : UNIT – II

(CO3 , K3)
1. Create a contact form that asks for the user's name, email, and message. Ensure
proper HTML5 input types are used. Add a datalist element to suggest common email
providers for the email input field.
2. Create an HTML table to display product details for a laptop (product name, price,
rating, stock availability). Use an ordered list to rank the best-selling laptops and an
unordered list to show the different features of a specific laptop.
3. Create a registration form for event attendees, ensuring that fields such as "name",
"email", and "phone number" are validated properly using HTML5 attributes. Add input
elements with datalist options for attendees to select their conference session
preferences.
4. How can horizontal rules (<hr>) be used effectively in web design to separate
content? Give examples of when and where it’s appropriate to use them. Create a
multilevel list (nested list) to organize information about different product categories
and subcategories on a product website.
5. Define the key page-structure elements in HTML5, such as <header>, <footer>,
<section>, and <article>. Explain the role of each in creating a semantically
meaningful page structure. Create a webpage with a header, main content section,
sidebar, and footer. Ensure proper HTML5 structure is used.
 13. SUPPORTIVE ONLINE CERTIFICATION COURSES
UNIT : II

COURSERA

https://www.coursera.org/learn/html

https://www.coursera.org/learn/html-css-javascript-for-web-develo
pers

https://www.coursera.org/projects/introduction-to-html

https://www.coursera.org/professional-certificates/meta-front-end-
developer

https://www.coursera.org/professional-certificates/ibm-full-stack-cl
oud-developer

UDEMY

https://www.udemy.com/course/hmtl5-training/

https://www.udemy.com/course/learn-html5-programming-from-scr
atch/

https://www.udemy.com/course/takethefirststep/

NPTEL

https://onlinecourses.swayam2.ac.in/aic20_sp11/preview
 14. REAL TIME APPLICATIONS : UNIT – II

1. Personal Blog Website

2. Carbon Footprint Calculator
3. Interactive Educational Quiz
4. Public Transport Tracker
5. Recipe Sharing Platform
6. Travel Booking Site
7. Donation Platform for Local Charities
8. Fitness Tracker Dashboard
9. Personal Finance Tracker
10. Online Mental Health Journal
 15. CONTENT BEYOND SYLLABUS : UNIT – II

What are Progressive Web Apps (PWAs)?

Progressive Web Apps are web applications that leverage modern web capabilities to deliver
an app-like experience to users. PWAs can be accessed via a web browser but offer features
commonly found in native apps, such as offline functionality, push notifications, and the ability
to install the app on a user's home screen without going through an app store.

Key Features of Progressive Web Apps:

Offline Support: PWAs can function without an internet connection by caching resources,
allowing users to continue using them even when they're offline.
Installable: Users can "install" the web app on their device's home screen, making it
accessible just like a native app, without needing to download it from an app store.
Responsive: PWAs are responsive by design, meaning they work across a variety of devices
and screen sizes, from mobile phones to desktops.
Push Notifications: They can send push notifications to users, helping maintain
engagement even when the app isn’t open.
Fast Loading Times: With caching and service workers, PWAs load quickly, even in low
network conditions.
Benefits of PWAs:
Better Performance: PWAs improve loading speed and responsiveness, leading to a better
user experience.
Offline Capabilities: They provide access to core features even without an internet
connection.
Cross-Platform Compatibility: PWAs work across different platforms (Android, iOS,
desktop), reducing the need to develop separate native apps for each.
SEO-Friendly: Since PWAs are web-based, they can be indexed by search engines,
improving discoverability.
Low Storage: PWAs consume less space compared to native apps, as they are accessed via
the browser and don't require installation of heavy files.
 15. CONTENT BEYOND SYLLABUS : UNIT – II

What is XML?

● XML (eXtensible Markup Language) is a markup language.

● XML is designed to store and transport data.
● XML was released in late 90’s. it was created to provide an easy to use and store self
describing data.
● XML became a W3C Recommendation on February 10, 1998.
● XML is not a replacement for HTML.
● XML is designed to be self-descriptive.
● XML is designed to carry data, not to display data.
● XML tags are not predefined. You must define your own tags.
● XML is platform independent and language independent.

What is Markup language

A Markup language is a modern system for highlight or underline a document.

Why XML?

● Platform Independent and Language Independent

● The main benefit of xml is that you can use it to take data from a program like
Microsoft SQL, convert it into XML then share that XML with other programs and
platforms.
● You can communicate between two platforms which are generally very difficult.

Features and Advantages of XML

● XML separates data from HTML

● XML simplifies data sharing
● XML simplifies Platform change
● XML simplifies data transport
 16. ASSESSMENT SCHEDULE

Tentative schedule for the Assessment During 2024-2025 Odd sem

S.NO Name of the Start Date End Date Portion

Assessment

1 Unit Test 1 - - UNIT 1

2 IAT 1 17.10.2024 22.10.2024 UNIT 1 & 2

3 Unit Test 2 - - UNIT 3

4 IAT 2 23.11.2024 28.11.2024 UNIT 3 & 4

5 Revision 1 - - UNIT 5 , 1 &

2

6 Revision 2 - - UNIT 3 & 4

7 Model 16.12.2024 23.12.2024 ALL 5 UNITS

 17. PRESCRIBED TEXT BOOKS & REFERENCE BOOKS

TEXT BOOKS
1. Roger S. Pressman, “Software Engineering: A Practitioner‘s Approach”, McGraw Hill
International Edition, Ninth Edition, 2020.
2. Scott Chacon, Ben Straub, “Pro GIT”, Apress Publisher, 3rd Edition, 2014.
3. Deitel and Deitel and Nieto, “Internet and World Wide Web - How to Program”, Pearson, 5th
Edition, 2018.
REFERENCE BOOKS
1 Roman Pichler, “Agile Product Management with Scrum Creating Products that Customers
Love”, Pearson Education, 1st Edition, 2010.
2. Jeffrey C and Jackson, “Web Technologies A Computer Science Perspective”, Pearson
Education, 2011.
3. Stephen Wynkoop and John Burke, “Running a Perfect Website”, QUE, 2nd Edition, 1999.
4. Chris Bates, “Web Programming – Building Intranet Applications”, 3rd Edition, Wiley
Publications, 2009.
5. Gopalan N.P. and Akilandeswari J., “Web Technology”, Second Edition, Prentice Hall of India,
2014.
6. https://infyspringboard.onwingspan.com/web/en/app/toc/
lex_auth_013382690411003904735_shared/overview
7. https://infyspringboard.onwingspan.com/web/en/app/
toc/lex_auth_0130944214274703362099_shared/overview
18. MINI PROJECT SUGGESTIONS
1. Multi-Tier Web Application with Advanced HTML5 Features: Create a fully
functional multi-tier web application layout using advanced HTML5 features. Include
sections like <header>, <nav>, <main>, <section>, <article>, and <footer>.
Implement complex forms with various input types, use <datalist> for autocomplete, and
employ internal linking for navigation. Add meta elements for SEO optimization and utilize
<figure> and <figcaption> for images and captions.

2. Interactive Product Catalog with Advanced HTML5 and Forms: Build an

interactive product catalog page that uses HTML5 features effectively. Incorporate tables
for product information, lists for categories, and detailed forms for product reviews and
inquiries. Use <datalist> for autocomplete suggestions in form fields and ensure the form
includes various input types with validation attributes. Implement internal linking for easy
navigation between product details and related sections.

3. Complete Portfolio Website: Develop a full-fledged portfolio website showcasing a

variety of projects and skills. Utilize HTML5 elements like <header>, <nav>, <main>,
<section>, and <footer> to create a well-structured and navigable site. Include a
detailed about section, project galleries with images, a resume/CV page with tables and
lists, and a contact form with advanced input types. Incorporate internal linking for
smooth navigation and meta elements for SEO.

4. Online Learning Platform Landing Page: Create a landing page for an online
learning platform. Include sections for course listings, instructor profiles, and user
testimonials using HTML5 elements. Use tables for course schedules and pricing, lists for
course features, and images for visual appeal. Implement internal linking for smooth
navigation between different sections of the landing page and include a form for user
sign-ups or inquiries.

5. Contact Information Page: Develop a simple contact information page for a small
business or personal site. Include basic elements such as a contact form with fields for
name, email, and message, along with contact details like phone number and address.
Use <address>, <form>, and <input> elements to create a straightforward page. Focus
on correct usage of HTML tags and basic layout structure.
 Thank you

Disclaimer:

This document is confidential and intended solely for the educational purpose of RMK Group of
Educational Institutions. If you have received this document through email in error, please notify the
system manager. This document contains proprietary information and is intended only to the respective
group / learning community as intended. If you are not the addressee you should not disseminate,
distribute or copy through e-mail. Please notify the sender immediately by e-mail if you have received
this document by mistake and delete this document from your system. If you are not the intended
recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the
contents of this information is strictly prohibited