Web Development
- 3. Three layers of web design:
Structure Style Behavior
HTML markup CSS JavaScript
- 7. Without any markup to give
your page content structure,
the browser renders
unformatted and unstyled text
No HTML?
- 9. 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 image
- 12. 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
- 13. But what should we do to
make the page look nice?
The answer is
use CSS!
- 15. CSS
Set of rules defining
how an html element
will be “presented” in
the browser.
- 16. CSS Rules
p {
color: red;
}
#title {
font-style: italic;
border: 1px dotted blue;
}
.title {
font-weight: bold;
background: yellow;
}
- 17. Some things you can change
with CSS
• colors
• font
• font size
• backgrounds
• spacing
• sizes
• borders
• positions (layout)
- 25. 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.
But from confusion came misunderstanding…
- 26. JavaScript ≠ Java
• JavaScript is NOT a Java
• It is NOT a light version of
Java
• It was NOT based on Java
• It does NOT matter if you
know Java
- 28. What we can do with
JavaScript?
Validate values
entered in the
form fields
- 29. What we can do with
JavaScript?
A search box can give you
suggested results while you
type, based on what you’ve
entered
- 30. What we can do with
JavaScript?
Load information
automatically when it's
needed
- 31. 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
- 32. What we can do with
JavaScript?
And much much more…
- 33. JavaScript
And it does that very well!
At the beginning JavaScript was
designed to manipulate web pages.
But nowadays its usage is
much much wider: you
can use it outside of web
pages and the browser