Day1

Content:
•
•
•
•
•
•
•
•

Why this Workshop ?
Basic Terminologies
Web Technologies
HTML 4.0
HTML 5.0
CSS 2.0
CSS 3.0
Live Examples

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.

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.

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

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.

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.

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

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.

Web Technologies
HTML
CSS
JavaScript(Requires programming knowledge)
XML
Flash
XML Flash
Ajax
Server side scripting
JSP
ASP.net
PHP

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.

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

 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)

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>

HTML headings

<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>

Paragraphs
<html>
<body>
<p>This is a paragraph.</p>

</body>
</html>

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.

Images
<html>
<body>
<img src="w3schools.jpg" width="104"
height="142" />
</body>
</html>

Comments
<html>
<body>
<!— I do not want to show this text on my webpage!>
<img src="w3schools.jpg" width="104" height="142" />

</body>
</html>

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.

Tables
<html>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
</tr>
</table></body>
</html>

Lists

An ordered list:
1.The first list item
2.The second list item
3.The third list item

An unordered list:
•List item
•List item
•List item

Ordered List
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

Un-ordered List
<html>
<body>
<h4>An Un-ordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

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>

CheckBox
<html>
<body>
<form action="">
<input type="checkbox" name="vehicle"
value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle"
value="Car" /> I have a car
</form>

</body>
</html>

Drop Down List
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>

Button

<html>
<body>

<form action="">
<input type="button"
value="Hello world!">
</form>
</body>
</html>

Marquee tag
<html>
<body>
<marquee direction="left" onmouseover="stop()"
onmouseout="start()">This is moving text</marquee>
<marquee direction="right">This is moving text</marquee>
<marquee direction="up">This is moving text</marquee>
<marquee direction="down">This is moving text</marquee>

</body>
</html>

Frameset
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />

</frameset>
</html>

IFrame
<html>
<body>
<iframe src="demo_iframe.htm" width="200"
height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>

Divison
Demonstration
using
tables, forms and input
buttons
Hosting on free domain
My3gb.com

Video support statistics

Format
Ogg
MPEG 4
WebM

IE
No
No
No

Firefox
3.5+
No
No

Opera
10.5+
No
10.6+

Chrome
5.0+
5.0+
6.0+

Safari
No
3.0+
No

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

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

Audio Formats

Format
Ogg Vorbis
MP3
Wav

IE 8
No
No
No

Firefox 3.5
Yes
No
Yes

Opera 10.5
Yes
No
Yes

Chrome 3.0
Yes
Yes
No

Safari 3.0
No
Yes
Yes

<!DOCTYPE HTML>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>

Attribute
Value
autoplay
autoplay

controls

controls

loop

loop

preload

preload

src

url

Description
Specifies that the audio will
start playing as soon as it is
ready.
Specifies that controls will be
displayed, such as a play button.
Specifies that the audio will
start playing again (looping)
when it reaches the end
Specifies that the audio will be
loaded at page load, and ready
to run. Ignored if autoplay is
present.
Specifies the URL of the audio to
play

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>

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

Web Storage
<!DOCTYPE HTML>
<html>
<body>
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>

Session Storage
<!DOCTYPE HTML>
<html>
<body>
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>

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

Date Picker
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp"
method="get">
Date: <input type="date"
name="user_date" />
<input type="submit" />
</form>
</body>
</html>

Keygen(Secure Data Sending)
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_keygen.asp"
method="get">
Username: <input type="text"
name="usr_name" />
Encryption: <keygen
name="security" />
</form>
</body>
</html>

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

Required field
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp" method="get">
Name: <input type="text" name="usr_name"
required="required" />
</form>
</body>
</html>

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>

Embed flash into your
webpage
<!DOCTYPE HTML>
<html>
<body>
<embed src="helloworld.swf"
height="500px" width="500px" />
</body>
</html>

Meter
<!DOCTYPE HTML>
<html>
<body>
<meter value="2" min="0" max="10">2 out of
10</meter><br />
<meter value="0.6">60%</meter>
</body>
</html>

Hidden attribute
<!DOCTYPE HTML>
<html>
<body>
<h1>Hidden attribute
example</h1>
<p hidden="hidden">This is a
paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

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

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.

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>

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");}

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>

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>

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

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;}

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>

 Rotate division or other
elements by degrees
 Shadow effect
 Border Image
 Text shadow
 Word Wrapping
 No more restrictions on
font

 Animations
 Multiple Columns
 Transition effect on div

Day1

More Related Content

What's hot

Similar to Day1

Recently uploaded

Day1