Summary

how we plan to cover.
1.html, css phase i

knowing what is menaing of id, how to
apply css class, how the context
selection takes place.
2. advanced css phase ii ( how to position

components and control layout)
html is dead long back but still we use it.

xhtml is the standard now
ie we make html compliant with xml
html - is mechanism to render something

on the browser.
web based world. - http protocol based
world.
client side - javascript,css and html
server side - java, php, .net
we cannot separate html, css, javascript if

we want to learn web technology.
content is provided by someone, and
structure is provided by us.
means we got to know how to control
elements in the html page.
what we got to look into.

1. how to get layouts
2. how to control position and spill over
problems.
good website.
1. consistant look
2. no scrolling.
3. no matter whatever you do number of
clicks should be maximum 3.
html - is to provide the structure of the
page
javascript - dynamic behaviour and in
today's world we are seeing
javascript for business logic ( ajax)
css - is used to do makeup
makeup it primarily means how to
position.
role of html, css and javascript.

html - what do you mean by structure of
the page.
1. head , body, hyperlink, ul, li- what we
call structure.
html consists of tags , which is the ide you

people for writng html.
we use typical text editors.
although html does not require tags to be

closed it is good habit to close it.
basic structure of a html page.
<html>
<head> </head>
<body> </body>
</html>
typically in the head comes title.
title show the title in the browser window
header
most important is aid's searchability.
whatever you write in the body appears in

the body of the browser.
html is not case sensitive, but still it
makes sense to keep it case sensitive.
<p> </p> - not preferable

<p> </p> - keep it case sensitive.
h1 to h6 headers.
h1 shows in big font
h6 shows in small font.
img tag for showing images.

but ask yourself do you want to really use
it.
hyperlink - hyperlink to many places.
1. within same page ( generally not

preferred)
2. to different pages in the same web site
3. to different web sites.
form component.
send data to the server.
1. via form
2. not via form. typically it doen by using
get, query strings.
a.php?userid=a&preference=d
get and post which we typically use it with

a form.
get and post are http terminologies which
talk about how client
can send data to the server.
which is preferable answer is

1. if you got a form, then use post
2. if you dont have a form, then use get.
get will reveal the information in the

browser address bar.
post will not.
get has limiatation in terms of amount of
data that is being sent.
post does not have that limitation
this point , is irrelevant for most of us,
unless you talk about localization.
looking for more ui components then think

of using frameworks,
rather than using cooking our stuff.
advantage with frameworks is cross
browser issues typically are taken care of
quick summary.
1. basic html tags
2. title, body, h1 to h6, a href, ul, ol with
li, img
3. form tag and various input tags
4. when to use get and when to use post.
4.1 - if you got a form dont use get.
4.2 if you dont have a form, then fate is
only to use get.
4.3 limitation of get in terms of data
amount will come into picture if you
talk about localization.
5. looking for widgets then consider
framework usage. rather than coding
things from scratch.
concept of table, best way to slow down

your page.
only table that is good is a table which
contains one row , one column.
you will see, pages being built without
tables.
html page typical size is no size. you

have to give size.
got got fix size for the page.
printability.- aspects has to be taken

care of.
want to build web applications

1. target browsers
2. resolution issues
3. platform issues
web applications typically mean

incompatibilities and we have to deal with
them
issue by issue. ie we have to do browser
detection most of the times.
can you create a link based on an image

,yes
how to use the image.
<a href=""><img src="" width=""
hieght=""/> </a>
you want to create many links on a single

image. how do we do it.
use the map concept.
different sections of the same image to
point to different links then
map concept comes into picture.
form components.
<form method="post" action="">
</form>
method can be get or post

action is typically some server side url.,
server side component.
in a form, action can be hardcoded or
decided programatically in javscript.
can you have multiple forms in a single

page. yes
why you want to have it. because you
want different actions.
within the form what you can have is

teh following components.
1. textbox
2. password
3. textarea
4. checkbox
5. radio button
6. combo or list box.
7. button
8. submit button.
use textbox only if you dont have any

other alternative.
we cannot avoid textboxes.
if you use textboxes, two things to be
known, maxlength and size.
maxlength , size it has got to do with
appearance and not with number of
characters
that can be held.
what can be done inhtml or css, dont do it

via javascript.
for non text box components, think of
both labels and values, one without the
other
would not make sense.
typically when you have

input type="checkbox" name="interests"
value="1"
name will be used by a server side
component or javascript logic and value
extracted.
multiple values can be selected in

checkbox but only one in radio button
provided
we write that way.
combo and list are one and the same.

submit button will invoke action
whereas normal button will not invoke
action.
typically submit buttons are used to call

server side ocmponents
buttons are used to call the javascirpt
code.
becuase of get information is vislble
file:///w:/aolcsshtml/feedbackresult.html?
userid=a&userpassword=b&xyz=hello%0d
%0a&interests=1&location=2&rating=b
ng
can you have multiple submit buttons in a
single form, answer is yes
we can have, keep thier names same but
values different, the server side
based on the value got, can differentiate.
what we discussed is form basics.

use hyperlink and send information to the
server. good use get
<a
href=sersidething?param1=param1value&
param2=param2value etc.
that means we are using queyr string ,
hence as a result we are using get.
<div> and <span>

<div> is to section parts of our html page.
<span> is markup certain areas in
betweeen sections.
we got a template called

<div>
hi <span id="id1">xxx </span>
please come on <span id="id2">yyy

</span>
thanks
<span id="id3"> zzz </span>
</div>
this entire template can be put in a div.
we want xxx , yyy and zzz should be
replaced from a different source
then good put span around them.
where we used span if we had used div,

we would see the line breaking.
becuase div will introduce new line by
default.why div is a box level element.
what do you mean by box level element is
we can have margins, borders, padding
other box level elements are h1 to h6, p

span is an inline element, so will not
introduce new line.
whenever you feel any region in your page

will change dynamically , you
have to markup that region by using a id.
id usage is the most important thing in a

web page.
in our case , we wanted xxx, yyy and zzz
should change
good give the span around them an id.
how
tables slows down the web page.

1. table , age old story is how many co
lumns how many rows.
table basics.
1. how to create a table , table tag
2. how to create rows , tr tag
3. how to create columns you cannot
create
4. how to create cells td or th
we have to create cells and hope it
becomes a column.
5. cells can grow, depending on what we
are saying rowspan and colspan.
table means it slows down web page.
w3cschools.org.
sitepoint.com - great site practical stuff to
work on web pages.
with these things html is over.
quick summary.
1. avoid doing makeup with html
2. focus on structure while writing html
3. form components know importance of
value and label for non textbox
components
4. know meaning of get and post
5. important thing is to know when to use
div and when to use span and importance
of using id.
6. table basics, of what is rowspan and
what is colspan etc.
css - cascading stylesheet. 2.0

2.0 means there must be something 1.0
and thre is 3.0
2.0 main advantage is you can apply css
directly on xml also.
2.0 css we can use on xml or on html.
css3.0 is for devices , still long way to go
for all browsers to implement it.
what will css contain.

it will contain a logic which says, find what
in html or in xml, apply what kind of
makeup to it.
for example
find h1 in the html page and show it in red
color.
css means you got to know how to control
position of an elment rather than
focussing on color or font type etc.
tonnes of properties available in css,

impossible to know to know all of them.
we can do makeup using html only
without using css, but this is very very
prmitive
approach and should be avoided.
<h1 backgroundcolor="#fffff"> </h1>

this is not css.
what is the proof we are using css.
1. we must be css via an external file.
2. we must have put css at the head
region of our html
3. we could be using element level css.
which is preferred all the 3 are required.
you got makeup which needs to be applied

across multiple pages. and obviously
this makeup is very generic. , so put the
makeup in a separate file
and linkup this css to your html pages.
you got makeup sepcifically in context of
one page, then use head level makeup
in case of ambiguities headlevel makeup
will override the imported pagelevel
makeup.
you want makeup for a paritcular element

occuring in one particular place
in the html, element level makeup.
c01basic_css - basic examples on css

p01inline.html- to demonstrate css at
element level.
css consists of using properties.
property:value; property:value there may

be hundreds of properties
proof of using element level makeup is

1. style attribute with that element.
if we tell
style="somecssproperty:propertyvalue",
drawback is
the makeup will applied on the element
automatically we cannot control it.
this problem will occur whenever you tell
element and what makeup to apply.
apply element - makeup provided you

want something very generic.
if you want to control whether to apply
themakeup or not. then element makeup
is not the way to do it.
we got to depend on class or an id.
what is a class.
class is a css thing which we can decide
whether to apply or not.
it also gives you a feature whereby you
can group some commonly applied
makeup
and apply to whatever element you want
selectively or together.
1)
if you got a class, then you can apply it
selectively, you can decide when to apply
you can decide via your code or via your
business logic.
2) you can apply multiple classes on a

singe element
when we tell class.
1. we define .blue
2. we tell what makeup to apply
{color:blue}
3. we tell which element uses the class.
<p class="blue">
when we tell pseudo class

1. system defines the class.
2. we tell what should happen when
pseudo class is applied on the lement
3. system will use the class on the
element dynamically.
i move the mouse over a paragrpah hover

will occur non sense, no
it will occur only when move mouse over
hyperlink.
when we use pseduo class also make a
note of on which element it is applied
and which element it is not applied.
most of the menus are hyperlinks.

when you move over teh link, that link
should appear in a differnet color
from the other options, simple use hover.
hover is quite a useful one.
currently what we have seen is.

1. how to apply makeup at element level
2. how to apply mkaeup at head level.
3. using class, using pseudoclass ie hover.
4. we can use id also.
5. how to apply makeup in a separate file.
you should be able to recongize contexts

in which css is being applied
alhtough we may not be able to identify
all proeprties being used.
example , how div becomes very useful.

how to create table like structures without
using tables.
one powerful property in css called as
float.
normal way of positiong things in html is

called as static way
one element appears after anohter.
now you want one element should be
floated and all other elments should
surrond it
then we need the float proeprty.
<div style="float:right">
items being added </div>
<div> shopping cart
</div
shopping cart items

being added
if we keep adding further elements,
elments will keep surrounding the floated
element.
to prevent an element from moving

around a floated element, we use clear
property.
this property is quite powerful if want to
create a table like structure without using
tables.
float:left
float:right
clear:left
clear:both
clear:right
#xyz for id
.xyz for class, can apply multiple classes.
margin - between two elemeents ( ie is a

fan of it)
padding between an element and its
content. ( ie firefox is a fan of it)
when you float an element always

remember to use width.
flaot :left
float:right
you got an element called x , y and z.

x is floated left or right.
now we are using y and z below x, y and z
will try to move around x.
that is the meaning of x being floated.
now you want y to be moving around x ,
but not z.
then apply the clear property on z.
assignment.
summary.rtf

Summary

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Summary

Diunggah oleh

Hak Cipta:

Format Tersedia

how we plan to cover.

1.html, css phase i

2. advanced css phase ii ( how to position

html is dead long back but still we use it.

html - is mechanism to render something

we cannot separate html, css, javascript if

what we got to look into.

role of html, css and javascript.

html consists of tags , which is the ide you

although html does not require tags to be

whatever you write in the body appears in

<p> </p> - not preferable

img tag for showing images.

hyperlink - hyperlink to many places.

1. within same page ( generally not

get and post which we typically use it with

which is preferable answer is

get will reveal the information in the

looking for more ui components then think

concept of table, best way to slow down

html page typical size is no size. you

printability.- aspects has to be taken

want to build web applications

web applications typically mean

can you create a link based on an image

you want to create many links on a single

method can be get or post

can you have multiple forms in a single

within the form what you can have is

use textbox only if you dont have any

what can be done inhtml or css, dont do it

typically when you have

multiple values can be selected in

combo and list are one and the same.

typically submit buttons are used to call

what we discussed is form basics.

<div> and <span>

we got a template called

please come on <span id="id2">yyy

where we used span if we had used div,

other box level elements are h1 to h6, p

whenever you feel any region in your page

id usage is the most important thing in a

tables slows down the web page.

css - cascading stylesheet. 2.0

what will css contain.

tonnes of properties available in css,

<h1 backgroundcolor="#fffff"> </h1>

you got makeup which needs to be applied

you want makeup for a paritcular element

c01basic_css - basic examples on css

property:value; property:value there may

proof of using element level makeup is

apply element - makeup provided you

2) you can apply multiple classes on a

when we tell class.

when we tell pseudo class

i move the mouse over a paragrpah hover

most of the menus are hyperlinks.

currently what we have seen is.

you should be able to recongize contexts

example , how div becomes very useful.

normal way of positiong things in html is