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 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.
 22CS102
SOFTWARE DEVELOPMENT PRACTICES

Batch / Year / Semester: 2023-2027 / I / 01

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 15

9 Lecture Notes 17

10 Assignments 80

11 Part A Questions & Answers 81

12 Part B Questions 85

13 Supportive online Certification courses 86

14 Real time Applications 87

15 Contents beyond the Syllabus 88

16 Assessment Schedule 89

17 Prescribed Text Books & Reference Books 90

18 Mini Project Suggestions 91

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: 22CS102

SUBJECT NAME: SOFTWARE DEVELOPMENT PRACTICES

BASIC COMPUTER KNOWLEDGE

22CS102 – SOFTWARE DEVELOPMENT PRACTICES

6
 4. Syllabus
SOFTWARE DEVELOPMENT PRACTICES L T P C
22CS102 (Theory Course with Laboratory Component) 3 0 2 4
(Common to All Branches)
OBJECTIVES:
The Course will enable learners to:
 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 Java script.
UNIT I AGILE SOFTWARE DEVELOPMENT AND Git and GitHub 15
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.
3. Form a Team, Decide on a project:
c) Create a repository in GitHub for the team.
d) 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 updation.
 Once pull request is reviewed and merged, the master or main
development branch will have files created by all team members.
4. 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 15
Introduction – Web Basics – Multitier Application Architecture – Cline-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 15
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:
Apply Cascading style sheets for the web pages created.
UNIT IV JAVASCRIPT BASICS 15
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:
Form Validation (Date, Email, User name, Password and Number validation) using
JavaScript.
UNIT V JAVASCRIPT OBJECTS 15
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: 75 PERIODS

OUTCOMES:
Upon completion of the course, the students will be able to:
CO1: Apply agile development methods in software development practices.
CO2: Set up and create a GitHub repository.
CO3: Develop static and dynamic webpages using HTML.
CO4: Design interactive personal or professional webpages using CSS.
CO5: Develop web pages using Java script with event-handling mechanism.

TEXT BOOKS:
1. Roger S. Pressman, “Software Engineering: A Practitioner‘s Approach”, McGraw Hill
International Edition, Nineth 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, 1 st 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

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 Apply agile development methods in software K3

development practices.

CO2 Set up and create a GitHub repository. K6

CO3 Develop static and dynamic web pages using HTML. K3

CO4 Design interactive personal and professional web pages K6

using CSS.

CO5 Develop web page using Javascript with event-handling K6

mechanism.

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
NMENT PO PO PO PO PO PO PO PO PO PO PO PO PS 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 - - -

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

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

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

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

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

11/15/202 12
2
 7. LECTURE PLAN : UNIT – II
HTML
UNIT – I I HTML
Delivery Remark
Highest Resources
Propose Actual Cognitive
S. d Lectur Level Mode of Delivery
Topic CO LU Outcomes
No Lecture e Date
Date
26.10.2023 26.10.2023
1 MD1, MD4,
Introduction K1 T1 Introduction
MD5
27.09.2023 Web Basics 27.09.2023 Web Basics
2 MD1, MD4,
Multitier Application K3 T1 Multitier Application
MD5
Architecture Architecture
29.09.2023 Client Side Scripting 29.09.2023 MD1, MD4, Client Side Scripting
3
versus Server- MD5 versus Server-
side Scripting K3 T1 side Scripting

30.09.2023 HTML5 ,Headings 30.09.2023 K3 MD1, MD4, HTML5 ,Headings

4
MD5 T1
03.10.2023 Linking 03.10.2023 K3 Linking
5 MD1, MD4,
T1
MD5
04.10.2023 Images 04.10.2023 K3 Images
6 MD1, MD4,
T1
MD5
05.10.2023 Special Characters and 05.10.2023 K3 Special Characters
7 CO2 MD1, MD4, T1
Horizontal and Horizontal
MD5
Rules Lists Rules Lists
06.10.2023 lists 06.10.2023 K3 MD1, MD4, lists
8
MD5
T1
07.10.2023 Tables 07.10.2023 K3 MD1, MD4,
9
MD5 T1 Tables
10 09.10.2023 Forms 09.10.2023 K3 MD1, MD4, Forms
MD5 T1

11 10.10.2023 Internal Linking 10.10.2023 K3 MD1, MD4, Internal Linking

MD5 T1
12 11.10.2023 meta Elements 11.10.2023 K3 MD1, MD4, meta Elements
T1
MD5

13 12.10.2023 Form input Types 12.10.2023 K3 MD1, MD4, Form input Types
MD5
T1
14 13.10.2023 Input and datalist 13.10.2023 K3 MD1, MD4, Input and datalist
Elements MD5 T1 Elements
15 14.10.2023 Page 14.10.2023 K3 MD1, MD4, Page
Structure Elements. MD5 T1 Structure
Elements.

13
• 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
 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.

List of Exercise/Experiments:
1. Create web pages using the following:
 Tables and Lists
 Image map
 Forms and Form elements
 Frames
 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 webpages 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 URL’s 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:

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.
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.
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.
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 browse 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:

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. 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 end-
requested database. 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 server-

working on a web app. 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
request. and 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, are HTML, CSS, and
such as PHP, ColdFusion, JavaScript.
Python, 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. 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>
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:someone@example.com">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.8 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.8.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.8.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.8.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.8.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.9 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 In this type, the list items are numbered with upper case letters.
"A"

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. 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.12.4 HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
</html>
Output

HTML Table – Rowspan

To make a cell span over multiple rows, use the rowspan attribute.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>

<table style="width:100%">
<tr>
<th>Name</th>
<td>naira</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</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>
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
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. 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.
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

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

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.
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.

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.
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>
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">
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:hege@example.com">hege@example.com</a></p>
</footer>
Output
Author: Hege Refsnes
hege@example.com
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
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
(CO3 , K3)

Infosys Springboard Course :-

Link to access the course:

https://infyspringboard.onwingspan.com/web/en/app/
toc/lex_auth_0130944214274703362099_shared/overview
 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
support. of 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?
 13. SUPPORTIVE ONLINE CERTIFICATION COURSES
UNITS : II

COURSERA

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

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

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-
cloud-developer

UDEMY

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

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

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

NPTEL

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

What is XML?

● Xml (eXtensible Markup Language) is a mark up 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 2023-2024 Odd
semester

S.NO Name of the Start Date End Date Portion

Assessment

1 Unit Test 1 - - UNIT 1

2 IAT 1 16-10-2023 21-10-2023 UNIT 1 & 2

3 Unit Test 2 - - UNIT 3

4 IAT 2 23-11-2023 29-11-2023 UNIT 3 & 4

5 Revision 1 - - UNIT 5 , 1 &

2

6 Revision 2 - - UNIT 3 & 4

7 Model 12-12-2023 21-12-2023 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, Nineth 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, 1 st 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 SUGGESTION

1.Scholarship Management System for students.

2.Gram Panchayat Website.
3.Blood Donation Website.
4.A Food Wastage Management Website.
5.Organ Donator and Finder Website.
6.Subject Allocation for college Faculty.
7.Seminar Hall Booking Website.
8.College Admission Management.
9.Agri shop: Formers online selling.
10.Online Complaint Registration and Management System: Street
Light, Water Pipe Leakage, Rain Water Drainage, Road Problem, etc.