4. Why this workshop?
• Web Technology is a predominant field of Information Technology/Computer
Science and has an ever growing scope.
• Internet is becoming more and more common and people like to spend time
on the internet.
• Very interesting field.
• No costs involved in experimentation process like robotics.
• Lots of IDE’s(Integrated Development Environments) available to help.
Example: Microsoft Web Expression, Adobe Dreamweaver, Microsoft Visual
Studio, Netbeans, Eclipse, Adobe Photoshop etc.
• Why Adobe Photoshop??
• What Web sites can do at present??
• They can supply enormous amount of information, used for advertising,
promoting events, online reservations, e-commerce, managing colleges, online
banking, etc.
• What can be a possible future of websites?
• May be sites working as smooth as windows applications.
5. Terminology
Web:
The World Wide Web, abbreviated as WWW and
commonly known as the Web, is a system of
interlinked hypertext documents accessed via the Internet. With
a web browser, one can view web pages that may contain text,
images, videos, and other multimedia and navigate between
them via hyperlinks.
Internet:
The Internet is a global system of
interconnected computer networks that was enabled by the
standard Internet Protocol Suite (TCP/IP) to eventually serve
billions of users worldwide. It is a network of networks that
consists of millions of private, public, academic, business, and
government networks, of local to global scope, that are linked by
a broad array of electronic, wireless and optical networking
technologies.
6. Terminology cont…
Technology: Technology is the usage and knowledge
of tools, techniques, crafts, systems or methods of
organization in order to solve a problem or serve some
purpose.
Client/Browser
Server
URL
Types of web pages:
Static page
Active Page
Dynamic Page
7. What is web designing
Web Designing is an art.
First thing you need is imagination, then
comes the use of technologies.
First of all decide the layout of your web
page.
Then you have all the technologies
available to make it visible on a web
page.
8. Special tip for those who do not
have command over programming
Try to understand code and modify it according to your
requirements. Your goal is to achieve a functionality not
to make each and every thing on your own.
Note: You need to use your brain more than your
hands in this field because writing code which you
already have and understand very well is a waste of
time.
9. Client Server Architecture
(static page)
Client(Browser)
Server
Http request(abc.html)
Http response(abc.html)
Browser can
interpret HTML
only.
Fetches the static
page on disk
10. Client Server Architecture
(dynamic page)
Client(Browser)
Server
1.Http request(abc.aspx)
6.Http response(Generated
HTML)
Browser can
interpret HTML
only (No dynamic
code is sent to the
client)
4.May refer to external
sources such as web
services or databases
according to script.
5.HTML is generated
2.Locates the
page on disk
3.Executes the
scripts on
runtime engine.
12. What is HTML?
This is the very basic technology without which
websites cannot be created.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup
language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages.
Browser understands HTML only.
13. HTML is written in the form of HTML
elements consisting of tags, enclosed in angle
brackets(like <html>), within the web page
content. HTML tags normally come in pairs like
<h1> and </h1>. The first tag in a pair is
the start tag, the second tag is the end tag (they
are also called opening tags and closing tags).
Doctype declaration is not necessary in an html
document but it tells the browser to follow
HTML version specified.
14. The purpose of a web browser (like Internet
Explorer or Firefox) is to read HTML documents
and display them as web pages. The browser does
not display the HTML tags, but uses the tags to
interpret the content of the page:
Most popular web browsers
Mozilla Firefox
Google Chrome
Opera
Apple Safari
Internet Explorer (worst support for the best technologies)
15. Structure of HTML Document
•The text between <html> and </html> describes the web page
•The text between <head> and </head> is not displayed on the webpage.
•The text between <body> and </body> is the visible page content
•The text between <h1> and </h1> is displayed as a heading
•The text between <p> and </p> is displayed as a paragraph
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
16. HTML headings
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
18. Anchor
<html>
<body>
<a href="http://www.warecon.in">
This is a link</a>
</body>
</html>
On clicking this link you can navigate to a new page or even set
any software or image on download. It all depends on the href
attribute.
You can even place an image within the anchor tag to make
link on the image.
20. Comments
<html>
<body>
<!— I do not want to show this text on my webpage!>
<img src="w3schools.jpg" width="104" height="142" />
</body>
</html>
21. Tags and attributes
Think of tag as an object and attribute as one of its property it
becomes really easy to understand.
As an example consider a computer and a car.
Car will have attributes such as colour, horse power , mileage
etc.
Whereas a computer will have attributes like colour, Hard
Disk size, ram size etc.
We can see that some attributes are unique to an object and
some are not.
Now just map this concept to what we have just studied.
Consider two tags we have just studied <a> and <img>.
<a> has attributes such as href ,id,name etc.
<img> has atributes such as src,id,name,height,width etc.
26. HTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes,
radio-buttons, submit buttons and more. A form can also contain
select lists, textarea, fieldset, legend, and label elements.
<html>
<body>
<form action="">
<input type="radio" name=“gender" value="male" /> Male<br />
<input type="radio" name=“gender" value="female" /> Female
</form>
<p><b>Note:</b> When a user clicks on a radio-button, it becomes
checked, and all other radio-buttons with equal name become
unchecked.</p>
</body>
</html>
36. <!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240"
controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
37. Attribute Value
audio
muted
autoplay
autoplay
controls
controls
height
loop
pixels
loop
poster
url
preload
preload
src
width
url
pixels
Description
Defining the default state of the audio.
Currently, only "muted" is allowed
If present, then the video will start
playing as soon as it is ready
If present, controls will be displayed,
such as a play button
Sets the height of the video player
If present, the video will start over
again, every time it is finished
Specifies the URL of an image
representing the video
If present, the video will be loaded at
page load, and ready to run. Ignored if
"autoplay" is present
The URL of the video to play
Sets the width of the video player
41. Canvas(Gradient Example)
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#020000");
grd.addColorStop(1,"#AAFF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body> </html>
42. Canvas(Background image)
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="img_flwr.png"
cxt.drawImage(img,0,0);
</script>
</body>
</html>
43. Web Storage
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>Refresh the page to see the counter increase.</p>
<p>Close the browser window, and try again, and the counter will
continue.</p>
</body>
</html>
44. Session Storage
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
<p>Refresh the page to see the counter increase.</p>
<p>Close the browser window, and try again, and the counter has been
reset.</p>
</body>
</html>
45. New input types
Input type
email
url
number
range
Date pickers
search
color
IE
No
No
No
No
No
No
No
Firefox
No
No
No
No
No
No
No
Opera
9.0
9.0
9.0
9.0
9.0
11.0
11.0
Chrome
No
No
7.0
4.0
No
No
No
Safari
No
No
No
4.0
No
No
No
48. Autocomplete
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp" method="get"
autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email"
autocomplete="off" /><br />
<input type="submit" />
</form>
<p>Fill in and submit the form, then reload the page to
see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but
"off" for the e-mail field.</p>
</body>
</html>
50. Spelling Check and editing
<!DOCTYPE HTML>
<html>
<body>
<p contenteditable="true"
spellcheck="true">This is a praggagraph. It is
editable. Try to change this text.</p>
</body>
</html>
51. Embed flash into your
webpage
<!DOCTYPE HTML>
<html>
<body>
<embed src="helloworld.swf"
height="500px" width="500px" />
</body>
</html>
55. What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML
elements
Styles were added to HTML 4.0 to solve a
problem
External Style Sheets can save a lot of
work
External Style Sheets are stored in CSS files
56. CSS Syntax
A CSS rule has two main parts: a selector, and one or more
declarations:
The selector is normally the HTML element you want to
style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change.
Each property has a value.
57. Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
External Style Sheet
An external style sheet is ideal when the style is applied to many
pages. With an external style sheet, you can change the look of
an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside
the head section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
58. Three Ways to Insert CSS
An external style sheet can be written in any text
editor. The file should not contain any html tags.
Your style sheet should be saved with a .css
extension. An example of a style sheet file is shown
below:
hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back40.gif");}
59. Three Ways to Insert CSS
Internal Style Sheet
An internal style sheet should be used when a single
document has a unique style. You define internal styles in
the head section of an HTML page, by using the <style> tag,
like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back40.gif");}
</style>
</head>
60. Three Ways to Insert CSS
Inline Styles
An inline style loses many of the advantages of style
sheets by mixing content with presentation. Use this
method sparingly!
To use inline styles you use the style attribute in the
relevant tag. The style attribute can contain any CSS
property. The example shows how to change the
color and the left margin of a paragraph.
<p style="color:sienna;margin-left:20px">This
is a paragraph.</p>
61. All CSS Background Properties
Property
background
background-attachment
background-color
background-image
background-position
background-repeat
Description
Values
Sets all the background properties in one
declaration
CSS
background-color
background-image
background-repeat backgroundattachment background-position
inherit
Sets whether a background image is fixed or scrolls scroll
with the rest of the page
fixed
inherit
Sets the background color of an element
color-rgb
color-hex
color-name
transparent
inherit
Sets the background image for an element
url(URL)
none
inherit
Sets the starting position of a background image
left top
left center
left bottom
right top
right center
right bottom
center top
center center
inherit
1
Sets if/how a background image will be repeated
1
repeat
repeat-x
repeat-y
no-repeat
inherit
1
1
1
1
62. Grouping Selectors
In style sheets there are often elements with the same style.
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
To minimize the code, you can group selectors.
Separate each selector with a comma.
In the example below we have grouped the selectors from the
code above:
Example
h1,h2,p
{color:green;}
63. Navigation Bars
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard
HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:
Example
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
href="default.asp">Home</a></li>
href="news.asp">News</a></li>
href="contact.asp">Contact</a></li>
href="about.asp">About</a></li>
