Scribd
Upload
30 views27 pages

Web Development: Presented by Aniket Chakravarty Rollno:23401218029 From Internshala

Web development involves three layers: structure with HTML, style with CSS, and behavior with JavaScript. HTML provides structure and semantics. CSS controls styling and presentation. JavaScript adds interactivity, validating form values, suggesting search results, and loading dynamic content. Together, these three layers allow building fully functional websites and web applications.

Uploaded by

Aniket Chakravarty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views27 pages

Web Development: Presented by Aniket Chakravarty Rollno:23401218029 From Internshala

Web development involves three layers: structure with HTML, style with CSS, and behavior with JavaScript. HTML provides structure and semantics. CSS controls styling and presentation. JavaScript adds interactivity, validating form values, suggesting search results, and loading dynamic content. Together, these three layers allow building fully functional websites and web applications.

Uploaded by

Aniket Chakravarty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Web Development

Presented by Aniket chakravarty


Rollno:23401218029
From Internshala
Front-end
Three layers of web
design:
Structure Style Behavio
HTML markup CSS
r
JavaScript
HTML
=
Hyper Text
Markup Language
HYPERTEXT MARKUP LANGUAGE

 Without any markup to give your page content structure, the browser renders unformatted
and unstyled text

 HTML tags give structure and meaning to your content.

Once page content is marked up with HTML tags, the browser applies default styles to the
tags. So now page is readable and have a clear hierarchy. HTML
This is how a
website looks
with html.
Looks ugly…
Doesn’t it?
No HTML?

Without any markup to give


your page content structure,
the browser renders
unformatted and unstyled
text
HTML Tags
<p></p> - to organize text
into paragraphs

<table></table> - to display
table

<form></form> - to define
form for user input

<img></img> - to add
Lets add HTML tags to our page...

How will it look


Looks better…
But still not
good…
CSS
=
Cascading
Style
Sheet
CSS

Set of rules defining


how an html element
will be “presented”
in the browser.
CSS Rules
p {
color: red;
}

#title {
font-style: italic;
border: 1px dotted blue;
}

.title {
font-weight: bold;
background: yellow;
}
Some things you can
change with CSS
• colors • spacing
• font • sizes
• font size • borders
• backgrounds • positions (layout)
So now it’s time for
styling!!!
Lets add some
css rules to
our example
page.
Looks
perfect!
Tex + HTML +
t = Web PageCSS
JavaScript ≠
Java
• JavaScript was not developed at Sun Microsystems, the
home of Java.

• JavaScript was developed at Netscape in 1995.

• It was originally called LiveScript, but that name


wasn't
confusing enough. 

• Java was the buzzword in the days when LiveScript was


created, so LiveScript was renamed into JavaScript in
the hope of catching the media’s interest.
…
JavaScript

Classic JavaScript Web Browser


is a client-side
Web Page
language used to
add interactivity JavaScript
to your web-
pages
What we can do
with
JavaScript?

Validate values
entered in the
form fields
What we can do
with
JavaScript?

A search box can give you


suggested results while
you type, based on what
you’ve entered
What we can do
with
JavaScript?

Load information
automatically when
it's needed
What we can do
with
JavaScript?
Create photo
slideshow and
control how
long it takes to
move from one
image to the
next and with
what animation
effect
What we can do
with
JavaScript?
And much much
more…
JavaScript
At the beginning JavaScript was
designed to manipulate web pages.
And it does that very well!

But nowadays its usage


is much much wider:
you can use it outside of
web pages and the
browser
Thank You

You might also like