HANDWRITTEN NOTES

SUBJECT CODE : CS2201

SUBJECT NAME : APPLICATION DEVELOPMENT PRACTICES

DEPARTMENT : (COMMON TO [Link]. IT, B.E. CSE, [Link]. AIDS,

B.E CSE(AIML),B.E CSE(CS), [Link]. CSBS)

YEAR/SEM : I/II

ACEDEMIC YEAR :2022-2023

BATCH XII
Vision of the Institute

To be an eminent centre for Academia, Industry and Research by imparting

knowledge, relevant practices and inculcating human values to address global
challenges through novelty and sustainability.

Mission of the Institute

[Link] creates next generation leaders by effective teaching learning methodologies

and instill scientific spark in them to meet the global challenges.
[Link] transform lives through deployment of emerging technology, novelty and
sustainability.
[Link] inculcate human values and ethical principles to cater the societal needs.
[Link] contributes towards the research ecosystem by providing a suitable, effective
Platform for interaction between industry, academia and R & D establishments
[Link] nurture incubation centre’s enabling structured entrepreneurship and start-ups.
Vision of the Department:

To Excel in the emerging areas of Computer Science and Engineering by imparting

knowledge, relevant practices and inculcating human values to transform the students as
potential resources to contribute innovatively through advanced computing in real time
situations.

Mission of the Department:

DM1: To provide strong fundamentals and technical skills for Computer Science
applications through effective teaching learning methodologies.

DM2: To transform lives of the students by nurturing ethical values, creativity and novelty
to become Entrepreneurs and establish start-ups.

DM3: To habituate the students to focus on sustainable solutions to improve the quality of
life and the welfare of the society.

DM4: To enhance the fabric of research in computing through collaborative linkages with
industry and academia.

DM5: To inculcate learning of the emerging technologies to pursue higher studies leading
to lifelong learning.
Program Educational Objectives (PEOs)

Graduates will be able to

PEO1: Contribute to the industry as an Engineer through sound knowledge acquired in core
engineering to develop new processes and implement the solutions for industrial
problems.

PEO2: Establish an organization / industry as an Entrepreneur with professionalism, leadership

quality, teamwork, and ethical values to meet the societal needs.

PEO3: Create a better future by pursuing higher education / research and develop the sustainable
products / solutions to meet the demand.

Program Specific Outcomes (PSOs)

[Link] Programme Specific Outcomes
To analyze, design and develop solutions in the areas of Business Process Management to
PSO1
build the quality products for industry and social needs.

To innovate ideas and solutions for real time problems in the field of Software Engineering
PSO2
and Mobile applications by adapting the emerging technologies and tools.
 Program Outcomes with Graduate Attribute
[Link] Graduate Attribute Program Outcomes
Apply the knowledge of Mathematics, Science, engineering
1. Engineering
fundamentals, and an engineering specialization to the solution of
knowledge
complex engineering problems.

Identify, formulate, review research literature, and analyze complex

2. Problem analysis engineering problems reaching substantiated conclusions using firstprinciples
of Mathematics, natural sciences, and engineering sciences.
Design solutions for complex engineering problems and design system
Design/Developmentof components or processes that meet the specified needs with appropriate
3.
solutions consideration for the public health and safety, and the cultural, societal,
and environmental considerations.
Conduct investigations Use research-based knowledge and research methods including designof
4. of experiments, analysis and interpretation of data, and synthesis of the
complex problems information to provide valid conclusions.
Create, select, and apply appropriate techniques, resources, and modern
5. Modern Tool usage engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.

Apply reasoning informed by the contextual knowledge to assess societal,

6. The Engineer and
health, safety, legal and cultural issues and the consequent responsibilities
society
relevant to the professional engineering practice.
Understand the impact of the professional engineering solutions in societal and
7. Environment and
environmental contexts, and demonstrate the knowledge of, and need for
sustainability
sustainable development.
Apply ethical principles and commit to professional ethics and
8. Ethics
responsibilities and norms of the engineering practice.
Individual and team Function effectively as an individual, and as a member or leader indiverse
9.
work teams, and in multidisciplinary settings.
Communicate effectively on complex engineering activities with the
10. engineering community and with society at large, such as, being able to
Communication
comprehend and write effective reports and design documentation, make
effective presentations, and give and receive clear instructions.
Demonstrate knowledge and understanding of the engineering and management
Project
11. principles and apply these to one’s own work, as a member and leader in a
management and
team, to manage projects and in multidisciplinary environments.
finance
Recognize the need for, and have the preparation and ability to engage in
12. Life-long learning independent and life-long learning in the broadest context of technological
change.
 Course Name: CS2211 FUNDAMENTALS OF C PROGRAMMING

No. OBJECTIVES

C211 To develop the responsive websites using HTML, CSS.

C212 To implement complex functionalities on web pages using JavaScript.

C213 To set up and create a GitHub repository.

Course Outcome

CO RBT
Upon the successful completion of the course, students will be able to Level
No.
Build responsive real-world websites with HTML
C211.1 K3
Apply styling to HTML content using CSS K3
C211.2
Implement dynamic behavior using JavaScript K3
C212.1

C213.1 Update the user interface via DOM API K3

C213.2 Deploy the webpage using Git K3

CO-PO Mapping

PO1
CO PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2

C211.1 3 2 2 2 2 - - - - - - - 2 2

C211.2 3 2 2 2 2 - - - - - - - 2 2

C212.1 3 2 2 2 2 - - - - - - - 2 2

C213.1 3 2 2 2 2 - - - - - - - 2 2

C213.2 3 2 2 2 2 - - - - - - - 2 2

Avera 3 2 2 2 2 - - - - - - - 2 2
ge
 REGULATION 2022
(COMMON TO [Link]. IT, B.E. CSE, [Link]. AIDS, B.E CSE(AIML),
B.E CSE(CS), [Link]. CSBS)

CS2201 APPLICATION DEVELOPMENT PRACTICES L T P C

3 0 2 4
Course Objectives:
• To develop the responsive websites using HTML, CSS.
• To implement complex functionalities on web pages using JavaScript.
• To set up and create a GitHub repository.

Unit I – HTML 9
Introduction to HTML – HTML Document Structure - Text Elements – Lists - Images and
Attributes – Hyperlinks - Structuring Page - Semantic HTML
Unit II – CSS 9
Introduction to CSS - Inline, Internal and External CSS - Styling Text - Combining Selectors -
Class and ID Selectors - Working with Colors - Styling Hyperlinks – Layouts: Float, Flexbox
and CSS Grid – Web Design Rules and Frameworks
Unit III – JavaScript 9
Introduction to JavaScript – Variables - Data Types – Operators - Strings and Template Literals
- if / else Statements - switch Statement-Statements and Expressions – Functions – Arrays –
Classes and Objects-Loops
Unit IV – DOM 9
Introduction to DOM – DOM and Events Fundamentals – JavaScript: Behind the Scene.
Unit V – Asynchronous JavaScript and Deployment 9
Asynchronous JavaScript: Promises, ASYNC/AWAIT and AJAX – Deployment – Setting Up
Git and GitHub – Git Fundamentals- Pushing to GitHub
TOTAL: 45 PERIODS
List of Experiments
1. Design a web page using HTML basic tags.
2. Develop web site with suitable contents and links.
3. Design web pages using lists and tables.
4. Build a web client-side Login, Registration form and Dashboard with drop down
menus.
5. Develop a HTML form and validation using HTML5 features.
6. Create a website using HTML:
To embed an image map in a web page.
To fix the hot spots.
Show all the related information when the hot spots are clicked.
7. Apply style specification in HTML page using CSS.
8. Develop dynamic web application using HTML, CSS and JavaScript.

TOTAL: 30 PERIODS
Course Outcomes:
Upon completion of the course, students will be able to:
• Build responsive real-world websites with HTML
• Apply styling to HTML content using CSS
• Implement dynamic behavior using JavaScript
• Update the user interface via DOM API
• Deploy the webpage using Git

Text Books:
1. Jennifer Niederst Robbins., “Learning Web Design, A beginner's guide to HTML, CSS,
JavaScript, and Web Graphics”, O'Reilly Media, 5th Edition,2018.
2. Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites
using the latest HTML5 and CSS techniques, 4th Edition, Ben Frain, 2023.
3. JavaScript: The Definitive Guide: Master the World's Most-Used Programming
Language 7th Edition by David Flanagan

Reference Books:
1. Deitel and Deitel and Nieto, ―Internet and World Wide Web - How to Program,
Prentice Hall, 6th Edition, 2020.
2. HTML and CSS: Design and Build Webs, Jon Duckett, Wiley, 2011.

Online Resources:
1. [Link]

Web References:
2. [Link]
3. [Link]
4. [Link]
5. [Link]
Subject Code/Title: CS2201
Application Development Practices Unit:

UNIT I TML
Lntnodluction o HTML HTHL Document Stnucturd -

Text
EJaments -isE3 Iages anol Attbua - HpOTinks -
Stuctuing a - SemantC H7ML
LatO HTML Teet
pe amktup Longuage..
mankuP danguage which provielesa seb o togs
Suitabl p making up webpages
Soipting Janguage fo web pageg anol utput f
Progamg Can be Sen
atten usin borou
H9M 4 a
hypon re>b languago. becaue
. it.
SPPporuS
Ont
SHte text, pichuus, aphits and animetiom
Tho HTML documonts ilos
tain Co tect e& a
Ccateol t e n i editoo iko notrepocl
HTML
atag-bascod Stem. tags a speuial
inSt Juuti on
oa boncwae1.
A ta ma ole up ot Jett Op a t o s (4) anat a i q h
opomar0J(>) oanol a kaqna me bcttueen ttoe wo ooatad
optionally to9 ame Lntais Ond
ThebicwseT uvon't gervate my enoj

Syntax: Ltagname I Paramoten =value

Note Don't ive SpaLe betwean Jott ope anal
ogname
I n HTM, h e oveny teg can kav e Coospondli nq endinq

ka prtwelaol by ba cksJash Aymbol

1 CHENNAI DEPARTMENT OF
SCIENCE AND HUMANITIES
Subject Code/Title: CS2201 Application Development Practices Unit:T

OutctuOLe DHTM do0cumen

ALU HTML olocuments does fo-low some bazic At un ttwno.

T fhaS tuo block3 Hea cl block

Body [Link]
Heacl bloc. k tomtai na lont J a l inioi n a figo urol bie h o bnhu e

n it lc. hdocument
Dn Aon and
block tomtaini mtont tat dspayeol
Body
contont u aTmatosl ybnwe)
togs which contols Rous. a t

The basic HTML dlocument a Exampl

LhEmly Lhtmd .. - .2/hkody
L hea ddy
2tit Je> A HTML alocument 1/title Stanti g Fndi r9
Lhea cd
Lbody Cmtent ot nTML
L/booly)
L/htmJ>
Ln heml document, t a evoy Cn
tae DUUsPmdng
Snding teg pveiealael blauk r h mbod ()).
Basic HTHL To
Lhemd>..- . .. L/html>
bac kog ot htmA document. B1
th bouwSCcan danti<rea te Lusíng Th
weatO it ú htm A
alocument on Yet|
ho ol. .
.

.L/haady
Thu tag indiccte e nst pnt f- HTML documenk
Ond iE tontaing ont ucq 1fonmation and itle ha
| hEm document.
LEiEle> -- . . .L/ttle>
f htrml olocument

2 SIENNAL
L L
DEPARTMENT OF
SCIENCE AND HUMANITIES
SubjectCode/Title: Cs201 Application Development Practices Unit: T

Lbody >.. . .L/body

Einoli cates t o Seconcpaul od HiML olocumont and
IE CDntains ollIho. xomining iotanmoution ahout webpg0
Contain
The boly ta has di tfoont para mete% wkich indi catec3

backgncuncl, bgoloy. otC

B locks CLP>... . L1P>, haa ding bg3)

he tuo bloc.k3 of text in
Maho H7 doeumonn
pajagaph anol heodinq3
)2P Lalign :"Jott""centen
"igAt J > L/P
T Speu e3 e patoap
ii) Headi n gs
h ading ngs aa mpla ooims t e > c t temating

that aTH tet 3ites haeal orv tacle lawel

2hl LIhl> Lh4 2/h4>
2h2> - LIh2> - . LIh5
L h5.
Lhz Lh67- LIh6
Example
2hb> TML 2/ht>
Lhtm
heacd lbooly
Ltitle y binst docuent Z/tittey LI htm4
L/hacl
body bgoloa= "Skyblue'y My finat docu mlrt
LP Ths documont name HTMLLIP>
This document name u HTML
Lh1 HTML L/hI)
HTML
Lh2 niLL/h29
HTML
Lh37 HNL L/h3 HTML
Lhk n7mL LJhy) HTML
Lh5 nT MLL/h5> H7ML
H ML

3 DEPARTMENT
ScIENCE
OF
AND HUMANITIES
NOLOgy
Subject Code/Title: CS2201 Application Development Practices Unit:

Tert Element 9s
The tet On a HM pag0. Can be [Link] in a runben tt wOp

i) L¢ont Size f+/- n] Coloo: 'u RoB". ..

L/Hort
by usin TS tog we mn Set t o Bize ord t n a Ko to

i) Lb LIb I bolola the tert

ih) LU . .L/u
IE undoline3 io text
iv) Li .. L i
Ttalic text
)Lem> L/em) to emp hasis Cra Stan
cend on Ttals )
Stucng /stuerg> fo Sterg (noub- standoncl ton be)
Vi) LS> L13> taikos the t e t
|L htm L
Lhea d
Ltit a Font Style Demo LItitla) E Font 8tpla Dem0 -

WirdosTnrerd - C
L Ihaad
E Font StHle Domo
|4 body
Thus b a bold text
Lb This i a bold text L/b
Li Thus is an italics Lbn/> This on italis
2/i> Lbaly Thas i
St argly emprazi zecl tex
LS tong >
mi u
stronaly ermphaszecd ThwsA Cti kael text
tect
/St vorg L bon /> This will Oppeal the
LSTOuka> Thui b Stoukaol COne
tert
Lcenten> Thu^ usl appeon at L/stoiko
te arnte
LICon ) Lbn/>
L/body
LIhtod Note:4by thi tag caues a single. lre braak

Hotizenta Rula Lhal>

Lhn
Lwidth =n] Esize n] :

Lalngn f Jett /bigh| cEnten} [woshaode

Subs Crupts * Supen g oipts.-
JJ/>
2sub> L 1Sub Suls SoipB
L/Sup Sup S cript
LSup
CHENNAI DEPARTMENT OF
HTLOoY SCIENCE AND HUMANITIES
 Practices
Unit: T
ubject Code/Title: CS2201 Application Development
-X
htmly Inspiring Thaught
Lhead
L tit lc> Bemo t Honizm tal L/tite> Ona odoon s happinass clas es,
Lwhn took &
L/haa cly anothen opens,
but
clegeal
often
odaon
w

at wedo
at a
Lbody Lorg
not se tha
one
hat ka4 tean
oeneol

L cente
s Gon us
Lh3>jnspii ng Thzrght L)h ?>
L/centei> H elon kollen
Lhal>
PWkon one docv o happirca8 clet, anUThO7
Opens, but ften we took &o lon g at e
cle&eol doc)that we do not See theoe #at
has bean openccl up ten us L/P>
Lbn /> Lbal7
Lem Helen kallan 2 /em>
LI booly
- x
htm y
|ZhtmA
L boddy
LP Testing 2 Sub) Subsou pt t e t L/sus> 2/ Py |esing subs cupt
text

pt text Supenscai

LPTesting LSup> superácriPt tert L /Sup> Lip> Testng

Testg
L/bcdy>
L/html
ChaIaLLeT 3Cape sequane 3
In HTML cetain s4mbols ane tieateol as 8 peual

Chanaten Meanin
EntHt
Redeaonde2
les tan

othen an
ampeganel kOmP
olubla qu ote k uuot
apo opkos apos
Copught kCopy
SNNA DEPARTMENT OF HUMANITIES

S C I E N C E AND
5 ECHNOg
 Subject Code/Title: CS2201 Application Development Practices Unit: 2

Ancho n tag 2a
Anchon tag USCol to Cz0ato n k betcwon two doC tumOnt,

minjmum it eainas apamoten ic h o t which inclicates

olesttneuhim document
The mast m panta nt Capab;:lity o html 3 its abiiy to eDte

npeninkS. HyPOnli nks can be [Link] ko eith0n tert bo 1a

Synta :

La, hrad =aolobe&s "> Tect L/aa

LP> You Can Jah Nicae at

: 2/P>
You c a n a h Michclal
i>La het ="htt Ps Website
// [Link]>
iebsi te 2/2>2 /i > EailL
uza hnef .Phone
"mailto: cit
E mail L/a>LlL> @exampl. Loa>
L
u>La hwt tet:
412.34 567*>Pherd
L/a7 Llli7
Li9tS
LsE nothin9 but the colleuttons oitems
The ane Ewo
o7
elcnenti.|
pes t sB, d7 clojeel List ancl unan oleree? Li
t pe3 olst owidable in HTM
i) Ondered list Lol> 21o1>
Luly L /uly
ini cleti nition luj5t
ll L/dly
) Ondonad lit
Thi uzeol o diplay the List
Can uge
oitems n a
cdey
numbeA OM Nmn niumbcns oo7 alpha ets
s type &Oolo).
I a n e inhuilol 2a9 tcL.G>.
ust ta de tault Onclen numi C

6 CHENNAN
S DEPARTMENT OF
SCIENCE AND HUMANITIES
 Subjeet Code/Title: CS2201 Application Devolopment Practices Unid:

Exam ple Example 2 xampla 3

Lol
Lli anag
Lli OJNaNE e 2/l:
Lol 'n'>
yre |Lol ype: 3tant*
2li> mango ./Aiy
Liqape 2/l> 27 feo(Lall
L7 too thall 1/4
2/4>
oP 1. 0Mange olp I . Caitk
olP [Link]
IV Tootball
2 g70ape 8 0g

Onoun olaned Jist

Ths used o olesplay a s t of items by i g ditfoent
p e s & ymbol . In th lút also kave q inuall taq
Inill tA
|2li L/. I thä lat doteutlt ymbol s odot (o)
ExaMpa - 1 Exampa-2.
2uly Lu HPe"Chcle
L> Oange 2/liy
Llry Appl. 2/li>
> Feot holl L/4
Llul
oP Oa 0 Co cko
Apple OFootball
ii) detnition Jit
Tfe. de-tiniion list usecd to Speui kq Qist 0f tms the
de-finitioms. T Aas the - totloroing togs

Ldly Ea g Spouies ke detinitm list.

Ldty tag 9pei tes e doti neol w).
Ldd boj Spei fi eg He detin n on tem.
Example
Tetput
HTNL
Ldt HTM L/lt
Ldcd> HTML L Makup HTML a Harkp
langceage L/obly
ctt xME L/dE> XML

Ldd >xML U Cntendad markup kopge? XML ecenckoal

dd aTkupa*H|
DEPARTMENT QA ANITIES
SCIENCE AND HUMANITIES
Subject Code/Title: CS2201 Application Development Practices Unit:

Exam ple - LIS

<IDOCTYPE html
html>

<head>
<aitlelist in Html </itle>
/head

<body
<h2>Welcome To HTML /h2>
<h5>List of available courses</h5>
Sul>
<li>Data Struetures &
Algorithm<li
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning/li>
</ul>
<li>Programming Languages</li>
<h5>Data Structures topics</h5>
<ol>
di>Array</li>
<liLinked List</li>
<li>Stacks</li>
li>Queues</li>
<li Trees</li>
liGraphs</li>
</ol>
</body
/htm
Output
Welcome To HTML

List of available courses

Data Structures &

Web Technology
Algorithm
Aptitude & Logical Reasoning
Programming Languages
Data Structures topics

1. Array
2. Linked List
3. Stacks
4. Queues
5. Trees
6. Graphs

cHEMHA DEPARTMENT OF
SCIENCE AND HUMANITIES
Subject Code/Title: CS2201 Application Development Practices Unit: I

Tables
A tablo. in a mat Jue 0t- ouwS and Coumn3. "The tablo Pbvi dO3 a Aigh
"
eadablo. way PJeenticq mc kinals iotonmation.
using tallo. we can pzozentfic9 joto7onation in Atu C
otmat anol Stnutrdisg e twhole web peg2
| The baaic tabla g3
Ltablo> L/tabe
T indicates t a tnting t e tablo.. t e most Commor
utt Jlibute fon tabla.> tag á bemlay. And it has didferen
attibtes üka feigk, tidtk.
Lth>.. . L1th>
FE ugeol tb gie tablo. haneling Ceotumn tooclon)
Ltay- -
-

L1t
to ot a table Nou
ubl inolicaig Starrtig
L tol LItely
TE indicahes the table ata o a cell

Lcaption>. .L/captigm>
Tt ugcol to ingent captim into tasle2

Foimat
L table [align= "Centen/"lett/ sigAt°J Lkomcten =oj
cetl paddig n] [height =o 73 Lwidth = n7]
cellspau sg ] >
Zcapionn> / ca priom)

Lth>- - . 2/th>

LE>
L t l >- -. LItdy
L/ta
21 tasle>

CHENNAI DEPARTMENT OF
INSTTUT SCIENCE AND
HUMANITIES
Y
Subjeet Code/Title: CS2201 Application Development Practices Unit: I

Cell Paoldi ng.

I: 8peifies th botwcon tentent col, ancl it 3
bonderns in Pix
Cell spauing
T SpCLudi os the spec. heBoeen Cls
width
Sets amount Tf 8orON hat tablo w) uze in to Hartoa fwit
Height
Sets ami k srcn that [Link]) uze In the t e tato Kop.
<IDOCTYPE html>
<htm> Name Salary
<head>
RameshRaman||5000
stitle>HTML Table Header</title> Shabbir Hussein 7000
<head>

<body>
stable border = "|">

Str
sth>Name</th>
th Salary</th>
</tr>
<tr
<td>Ramesh Ramai</td>
<td> 5000</td>
</tr>

<tr>
<td>Shabbir Hussein<td>
<td>7000<td>
<t
</table>
</body
</htm>

10 CHENNAL DEPARTMENTHUMANITIES
OF
A ScIENCE AND
Subject Code/Title: CSz201 Application Development Practices Unit:T

magesS
Tmages play an imontant nole. in webpage, he. total look of-
Cbpnge. us implove ol using im3.
g e s Can be em beollocl ingiclo. decuront wing img tng
mamum t n2ms a kamaten ie Snc, uw hich irdicates seuue

Sgnta 2img Snc iemme /Path"LBos den: n]

olt
"'text"J[kaighe nJwidth nJ>
Some tmO) we an uze maE3 plink
L a hact
"[Link]"> Limg Se"> L/a 7
|Example
eIroog23
2htmA Sampla images
Lhcad This example : daplas He
ti ble > img
Imageg 2ltitlo
Lheocd
bady
Lhi> samplo. inga84/hi
LP>Thi exampla ,
dispays
mages 4/P>
ng s7c
winbelJPe alt=wink /
Lb
Zimg 8ne sunJLiSe -J Peg 'width 20).
kaigAt/0. alt 'sun Juje /y

L/body
Lhtmd

EHENNA DEPARTND HUMANITIES

SCIENCE AND HUMANITIES

11 iECHNOLOGY
Subject Code/Title: C2201 Application Development Practice Unit:

Fonm
Sthe moSt Cemmon
Fo tonmutnicto
ThC infoonatim anon a ueb bJNDUSO) to SOnvOT)
oMm tag uAaBl to ci0ata a htm fonm, Thy tag ha
Seveal attributeA and impoJtant amung thOm O m ehool A atipn'"

action This atribute specitics he uRL ho appliccton

which is o be called when iko use clicK3 tho 3ubmt- butto
o m)
Suubmiting e ton
methl - T attibuke peufies how tho enterwo dato i

Thee ane two method TE 9ndin

M ent to ole3 tiation.
inteinationv, One is post" an d o then uget.
"POSt mathod a t methoo
with alg witt
Insooim ation sent along Insemain ent

body URL

Pata invisiaba uwhile sending e t a u visiasie in SteaoR

I paovides 3ecuou NO Bcuu

Tt can senol any no. of ckaraiten& It en ols limitedl c h a t o n i .

User Intertace elaments in oJima.

) Label
This s sed o display *e. tert on the. label scscen
i) Text Field
T a n noctnglaj box .Tt uselto toke the input m tkc
UAT. This can be cowaed wing Linpt> tc{.

toTmat Linput ype "tect [size:n]

Lnamo :" *] Mah
max leogth
iii But ons nJ[valuc ="nome']y Lioput
HTML uppontS theo gPes ot butong. button caeatej a Simpte butt
Fomat Linput tPe "button'Lveutue ="
L/ input

OLey DEPARTMEN AMANITIES

SCIENCE AND HUMANITIES
Subject Code/Title: CS2201 Application Development Practices Unit: T

ubmab button [Link] a hulon and it in vokos the tuim

cto ü to Bulln
sbmit foimv
fonnat : Linput Pe ="Submdt"[voulue.:"
> 2/inputy
ReSet buton coWate a button anolit eloa the entie
which ae enteeol by usen in tha fonm -
tOoimat
Linput HPe ="Reser'[vaue ]>2/inpu
iv) Pagsuwnd ield
Thy suse d to ente he paR won d
enmat Linput byre -
pazoond' [si ze -nJ [name:
L/inpuut>
Radio Buton: Rodi o buton
Ths used to Seleit ol one value at a tima.
FooKncut L
input type ='radip" Ename "
L input >
J[value JY
vi) Chec k Box cheuk. bon
Thus u8ed o selout [Link] values qt a timne

Foomat' Liopub ype cheuk box' [nam e "

"]Lvalue=" "I>
L Tinput
vi) Combo Boe:
Ik usedl to seloit one valuua om
Fomat Lseleur Lnam e J
Loption 2/option
Lop tion .. -

L/optiom)
L/selod>
vii) List Bo
t Used to elotb one Imou valees icm mu lbiple vddd
Fomak Lseles Lname" "] [size nJ > Vaue!
Loption Iselocteod J . . . . /opion Value2
Loption - L/optimy Value3
L/3elcut->
13 FSNNAI
HNg
DEPARTMENT OF
SCIENCE AND HUMANITIES
Subject Code/Title: Cs2201 Application Development Practices Unit:

i ) Tet anea.
Ths tert like a text helcl it as multi plo noaus b columns
doTmet tentanea Lame """]Lueus n] [ol nJ
L/textaeas
Forms Example

KIDOCTYPE html>
<html lang="en">
<head>
meta charset"UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-cdge">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
qitle>GfG</title>
<head>
<body>
<form>
sfieldset
<legend> Personal Details<legend>
p
<label>
Salutation
<br
<select name="salutation">
option>-None--</option
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
coption>Dr./option>
option> Prof.</option>
Iselect
</label
p
<label>First name: <input name="firstName" ></label>

label>Last name: input name="lastName" ></label>

Gender:
<label><inpit type="radio" name="gender" value="male"/> Male</label>
<label><inputtype="radio" name="gender" value="female" >Female</label>

p>
<label> Email:<input type="email" name="email" ><label>
Ip
<p>
label Date of Birth:<input type="date" name="birthDate"></label
<p>
label

SHINNASCIENCE
DEPARTMENT
AND OF
HUMANITIES
 Address
<br>
stextarea name="address" cols="30" rows="3"></extarea>
/label
sp>
p
sbutton type="subit">Submit</button>
/p>
</fieldset> /form</body> </html>

Personal Details-

Salutation
None-
First name:
Last name:|
Gender: O Male O Female

Email
Date of Birth:mn/dd/yyyy

Address:

Submit
Subject Code/Title: CS2201 Application Development Practices Unit: T

FJiame9
teneialy tha. biuorosOj window coo be useol to duplay tho

an mone docu ments at a time

nCainclor can be olevidod into ooctangulan anoos each of

which a un me
B uSi ng FUjameset> tag, we ca n spoi zio2 the numbT
name3 anol theii loyoub
A sot ot na me3 do trnecd using
ane
ameSot to which
Cn cl wi th 2/{via me Set> tag
A meset kag takoy te place ot he bodcaj n htmi
ecum Cnt hos eitto a
boolu on a zora mset teg ut Can't hav
The 24
vamset> tag must ave eitko
eitto a
oUR O
a oibuute ancd ka ohten kave bow.
JuTwS This attibute
speities the no. D4 oLows
tot will accupy Te cwineloru.
s Thus attibute
spouifieghe no. uf coloumns f a@s
that l) accupy the
winedewS
LArameset ols "%;} J[HCOS =
'2,7.J> L/{7amsct>
The LIA
meseF> tag eve o o i l t tag
Tt 4 useol to Specifieg te CoYtent &F
ie<tamey taj
amo..
SC
ilename" ame J[suotling
"Yesaceto
The ame no"]Loamebonotm 'o" l ")"|7>
kog heS seval Qttnibutes
Amon 8nc and na ma
and imponta
Syc IE speutie3 Soince o frama
na TE Spei fies e nama s tho 2me

16 DEPARTMENT OF
sCIENCE AND HUMANITIES
LEOLCgy
Subjeet Code/Title: CS2201-Application Development Practices Unit:

Frames Example

<1DOCTYPE html>
<html>

<head
<title> Frame tag«/title
/head
<frameset cols="25%,50%,25%">

<frame src="[Link]">
sframe src="[Link]">
sframe src="[Link]">
</frameset>
/html
3 . .

This is first fanie This & Third frame

SHENNAI
HNOLOGY
DEPARTMENT
SCIENCE
OF
AND HUMANITIES
Subject Code/Title: CS2201 Application Development Practices Unit: T

| AEtJubutes
HTML atinibut03 owe ApOual tooy dg uhth pnovi ola adelitori
olomOnes I AU Ji bluto3 ano t e mbdi ho
o m m t i m about Te

0 e HTML elomentS
app.u ool with i amo
The Att Jni bute shorilol oluvay, be
n ol vali. pawI.
The Attni but name ancl valul e Case sen sitive, ancl it

Shadd be waitten in douun caso on

Thore re touwn HPOS F core NTML Pttoubut

idl class »3tple litte

id Attibute:
The iol atdonibute i ugeol to sot a unnque nama oo7 an elomcnt io
d with the Paragaph tog,LP>
|a document. Fo examplo., using
LP iL "Fiast Paragnph
Thes u e tiasr pa7tagaph t tex
LIp>
nam es the bcund elomentFinst Paonagnaph . Naming an elcren

useful ton mand pulating he enloseel tontontS with a Stylecet

t . Fen example, stple 8haob Tull suh cs

|0n gip a

L3tle type "text /css ">

Fist Paxoaph Colon :
eel; }
L/8tzler
Could be put in tte hocd st a documenk. Thi s rle. nule.
S3 to maka an elomonk nameol "Fisnst Peragna ph ' scel.

clas Attibute
The clos3 atni bute & ugeol to incli Cac h e clas cH

to. kO i , Class å usel to

c lakse tat tag migAt holbng
o
|aRoicute teg wrth a nmo.,
a

4P ld "FinstPao aph elas:"imPotant">

This b the t s t parraqna ph c t e x t . LIPY
18 CHENNAI
iSTTUT
DEPARTMENT OF
Y sCIENCE AND HUMANITIES
Subjeet Code/Title: CS2201 Application Development Practices Unit: T

het only paaqaph uniuely a [Link] ph, but

ames 1he.

also [Link] that ths aqraph belong3 t cla H Pupin

to
to
Callcd impccntavit. The main u,e ot the clas cutl Jubuke
yenius ta. hoos Julez
elae a enup of elomonts to

Btyla Attoi buke

A Style atibute used to adel gle Btcof inematrom

ioctl to a to-Foen example

P
Sgla="dont -3/2e: 18P; colod: md;'>
Ts the tist
paTogaph ot texi
LIP>
S ets e ont Size o Panagpraph to be ? Poit, reco
tect Atherzh the tyla atozi buete atlezes ces u l s te bo aeldeo

to an clomant wi th ze, it is Prctea He to uye icd on cla

aclate c olocument wiole lin ko ol &ttle Shcet
to -
on

6itle Attibute
The title. i useol to porovide a clvisay teet about cn clemes

O it S Cmtents. In thi case TE

P Hte Introductony Paagraph'y
Thi TKe toust Palagaph text
LIP
the title attnibute 3 Set to indicate tat tha pazculan
bazagooh i he intoocluCkoy P gaph. Bxcre Sns cao dspat
u cdwi sonu tent in 1he tenm a Toottip as s h o n hona

This i he dinst pavagraph n teet

Theoluchou AAgap
Tooltipsct uith title. vnlues arw ofte:n ionol on link8, fonm
ticl d, image) aned anukone.. uhanoa PxS o Ct in fommmritm

Jquiresl
Cone language attri'buke
All HTML elomont s ncrw Suppont *e. doj a t ni bute,

CHENNAAI DEPARTMENT ODF

sCIENCE AND HUMANITIES
Subject Code/Title: cS2201 Application Development Practices Unit: T

Which can be usecd to indicate text diettiom s ethon t i (Aokt to

ght) on atl (night to ett).

LP di - "ntly
Thi a Jight to doft pooc gaph.
LIPy
The use
tfhe Janq atti bute ables docunent
en
autho to
nedicabe, down to to baq louel, the longuage being ued. Fo
ampe. LP Jan g "7n>
c' és t
Faancas
LIP>
LP long 'en
Thi Ergtih
IP>
HyPeTinks
The 2a tag desines a hypnlink, which à used to knk ouem
Page to andhot. The most impoJltant qttni bute o he La> eloment te2
hneaHnibuk, which indlicates * Len k's aestinaio

By default, imk i l a p p an as ollows in all bans:

An unvisi ted link b unolen linec andt blue

A viSited lunk undnnaol ancl Aaple

An quive iok u unctolinad and wol

Use ths Coole to adlol a link to a

Pag2
La tret "httP:
=
/1nkoret URLGoes kene Title tHe Visi to7 Scc. 2io
Example: La he =httP:// www, exampla Lom a 7pc "
a>
Out put [Link] visi tooT Sas: Example.
Use. thuß codle to add a Pictura to a page

Lima snc = naga name goes hara. 'align = Use lett, ight e7 Cnten'>

Eampla. 2 img 3ac "hous e jPg" align

: -

Cenken >
what the visitpa seOs 0n Tka Page

CHENNAI DEPARTMENT ODF

INSTITU SCIENCE AND HUMANITIES
Subject Code/Title: CS2201 Application Development Practices Unit:

Use t h s Code to adod an p-moil oddne 8 to a foge

ka kuf male: 5om [Link] not: ">I-tmal Us Zlny

[Link] he mnlto wobma (oy 6) obc 0 " y Crntout U1L Ja
What i sindi Seos
ConLoct Us
Hyperlink Example

Doctype Html>
<Html>
<Hcad>
<Title>
Add a link in Html to move on another Web Page
Title>
<Head
<Body>
Hello User! <br>
How are You?
the following link:
If you want to know how to add an image in Html then click on

<br in Html. < a

href="[Link]
How to add a image
a

Body>
/Html

Add a link in Html to mov x ee

C file//home/aesktop/html%20.,

Hello User!
How are You? If you want to know how to add an image in Html then
lick on the following link:
Hw to adda imagein Html

OEPARIMENT OF.
SCiENCE AND HUMANITIES
Subject Code/Title: CS2201 Application Development Practices Unit:

StJuctung og
In addition to cining ndivicsal par a pua pz2 lCh

a poaPuph' on "an imoge "), n+mL allo bcaztt a numbe o t

Joy ol eomins uztc te de tinc arcostt Hcur wCEite ( u

the haode1, e muigatitn, menu, t e main lores toumn ).

heado: L hea clen

lac
Bualya big 2taip aca05s top uit a ca kiadirg
the

|and pehaps a tnging. Thui ually tays e ome n

ebpogo to anoTh¢T.

mavigaion bar: Anav>

inks o the ites main Setims; usualy ep O e r t d i

tobs. Like he heoden, + é e n t e n usualy

menu but ons, ioka, a

JiCmaing torsistent ouem ore webpoae to ancthe -hauing

webste r l dus6 R t i kl
Cn HouT
tn n&utent nouiahicn he nauigatHon è e
t a t t d usens. Many
weL alcagnczi ten~ lCn
a0
IndividQ imPorc l
a t t e n than
be Ort o He keacden
o ao Agu *at avins
in tat Some
a t ' s not a uwment as SCeen cadiT
abeteT accbiy.
tthe too Sepcrate
eo
bea i AO ac *pae.
Con Jcaolhe

Sub seHMS
main COmkent : Amain>, with vaitus Cmen
LSectiom , anl
Jep ented by i a i c l e y ,
Loliv> eements
A big anca in the onei Hat ctmtai ns mes h e uni 9Le
t exampla, * video u wan t
Content a iven uebpase,
Cacl rg On the map wan
watch, an the ain Atey u
haclines,..Thus
ts
thc tM paz Te eChsi
view, on te ncuns
deinitelu
DEPARTNENT OF
CIENCE AND HUNMANITIES
 Subject Code/Title: Cs2201 Application Development Practices Unit:T

Si oleba1 Lasiole ; otten plawL insiola Zmainy

Some periphonal into, links, Quoles, ads, etc. Uguolly,hi

Conte xkual to tohat Containo ol in tho man Content (ito exgmpe
n t a i n tkhe Onuthon's
Oa newS cUnticte poge, the [Link] migh:
al&6 cajez
links to Jelateol icles,but Hhoa
oe
bio, 0
oucwing elomonte ke
a dCtnola
Luoc wilfinol Some

havigatimAstemv.

tooten LtooteT>
bottom 7ke poqe tat geneall
A
A S1oip acoss #e
contaut in to. its qa
CoPy oighht notica3,
Oon
Ln taing tina pint,
the kooolen) b
haoolen) but
u Aually
ually
to Common infoomation (Like
|Pla co put
not cnitical
O7 Secomaay to The wehsit
4 hatntosimatton
T
usEol toon SEo
EO (seamc
(Seamck
à also Sometima3 u ol to
Self. The toote
a wehsite more
tte pLocos o ma king
Egire OPrimizatim) á
tomoel iMpuovingeaEh raoking
in seaoek JoztulS, also
|viSiblo tontent.
ace® to Populan
by Polovicling links tca Quick

<header>
cheader>
a class="logo" href-"#">Cute Puppies Express!
</a>
/header
<article
<header
h1 Beagles«/h1>
«time 08.12.2014/time» Beagles
</header 0812 2014
<p»I love beagles <em>so«/em> much! Like,
really, a lot. They're adorable and their ears are
so, so snuggly softI</p> love beagles so much! Like, really, a
</article> lot. Theyre adorable and their ears are
so, so snuggly soft!

23 ay
DEPARTMENT MANITIES
SCIENCE AND HUMANITIESs
<nav>:
3000
<nav class-"crumbs">
Bikes BMX Jump Bike
ol
l1 class-"crumb"><a href-"*">Bikesc/a» </11
li class-"crumb">a href-"a">BMX«/a </11>
l1 class-"crumb">Jump Bike 3000/11> Jump Bike 3000
/ol»
/nav>
This BMX bike is solid step into the
a

<h1>Jump Bike /h1»

3000 pro world. It looks legit as it rides
as

<p>This BNX bike is a solid step into the pro skills.

built and is built to polish your
world. It looks legit as it rides and is
as

to polish your skills.</p>

small,
Geckos are a group of usually
<header>Gecko facts</header>

nocturnal lizards. They are

uSually
<main>
are a group of usually small, usually found on every
continent except
p>Geckos
nocturnal lizards. They are found on every
Australia. '1!
continent except Australia.</p>
have adhesive
adhesive toe pads Many species of gecko
p>Many species
of gecko have toe pads which ènable
them to climb
climb warls and even windows.
which enable them to even windows.
walls and
p>
</main

article wizard
<h1 How to be a wizard</h1> How to be a
<ol>
<li>Grow a long, majestic beard.s/1i»
<li>Wear a tall, pointed hat.</li> 1. Grow a long, majestic beard.
I mentioned the beard?</1i>
<li Have 2. Wear a tall, pointed hat.
/ol>. 3. Have I mentioned the beard?
footer
p o 2018 Gandalf</p>
</footer>

/article 2018 Candaif

<aside
«article>

movie <cite:The Little Mermaid</cite) was first released to

The Disney'
theatres in 1989.

</p>
<aside»
pThe movie earned $87 million during its initial release.
</p
</asider
plore info about the movie-</p>

</article

The Disney movie The Litlo Mormaid was first released to thealues in 1989

initial release.
The movie eaued S87 million during its

More info about the movie.

Subject Code/Title: CS2201 Application Development Practices Unit: T

Semantic E lementS
A Semootic elo mOntS cleanly dozoui b03 is mon n ing to

|both the. bnow sSon and the dewelopon.

Non Semntic elememts: Ldivy LSPan>

CTet nothi ng about its content)

Semant elomonts fom, Ltable> 2aticlo

Ccleanlu defines its tontent)
Semantic £l@ments In HTML
Many web sites cwmtain HTML Coole liko.
Ldiv id ="nav> Ldiv clas ="htadon > ldiv id:
bo
"tooten"z
indicae nauigation, koaolen ancl oote.
In HTML toe ave Some Semantic elomerk hat an be
use to ole fina di tteun ars t a web
poge
antic le Befino» inclependent, self-cont cuinco tontenk
Lasicle -Beino3 con tent asiole taom tho pge tontenE
L details
19etines additimal detaus tat theu3en ecn vi ew/hice
igcaptiDm>- 9etnes a eoption ton altiquay elemenn
O7 Speuifiel selt- cmtainedl conbent, uke llus-to
-

Footenten cLg Phrtes, Ccelk

Oefines fro ton tan a document / setior
a Listing..
L headon
Spei ti e teadento decument ISectim
a a

Lmain Speuhi 3 Hemeun tontont ha

olocume
Lmak) -

19etines maika.d/ highliglnol tet

nav
Detino3 novigaton unk3
Lseco -

19efings a Seution in a documant

LSummey
ummeny>- peti nes a visible kaading ton a Lodotas yelamenr
LtimY -

9efiro a data, ti ma.

Sema ntie elomonts= elomontS with a meaning9

25 SHENNAI DEPARTMENT OF
SCIENCE AND HUMANITIES
Subject Code/Title: CS2201 Application Development Practices Unit: I

Lheadon )
Znav>

Lsectionv>

Lasiole>

Licla>

L tooten

26
SINNAN
GNG
DEPARTMENT OE
SCIENCE AND HUMANITIES