b) Whut ls the defuult vulue for the dlspluy uttrlbute for the lmuge element?

(whut ls the dlfference between

lnllne und block level elements)
defuult vulue: lnllne, block or llst-ltem, dependlng on the element. The <img> ls un lnllne element.
CSS Display - Block and Inline Elements
A block element is an element that takes up the full width available, and has a line break before and
after it.Examples of block elements:
y <h1>
y <p>
y <div>
An inline element only takes up as much width as necessary, and does not force line breaks.Examples
of inline elements:
y <span>
y <a>
-------------------------------------------------------------------------------------------------------------
d) Dlfference between vlslblllty: hldden und dlspluy: none? Whut ure the pros und cons of uslng dlspluy:
none?
Hiding an Element - display: none or visibility: hidden
Hiding an element can be done by setting the display property to "none" or the visibility property to
"hidden". However, notice that these two methods produce different results:
visibility: hidden hides an element, but it will still take up the same space as before. The element will
be hidden, but still affect the layout.
Pros: Very easy to do
Cons:
y You are still loading the components on the server side and the client will download them. The
browser will simply not "show" them.
y Anyone using "view source" will be able to see the values that are "hidden". so never use it to
hide sensitive information.

--------------------------------------------------------------------------------------------------------------
u)Whut ure the posslble vulues for the dlspluy uttrlbute thut ure supported by ull browsers?
muln vulues: none, block, lnllne, llst-ltem, run-ln
Value Description
none The element will not be displayed
block The element will be displayed as a block-level element, with a line
break before and after the element
inline The element will be displayed as an inline element, with no line break
before or after the element
list-item The element will be displayed as a list
run-in The element will be displayed as block-level or inline element
depending on context
compact The element will be displayed as block-level or inline element
depending on context
marker This value sets content before or after a box to be a
marker. Note: This value should only be used with :before and :after
pseudo-elements. Otherwise this value is identical to "inline"
table The element will be displayed as a block table (like <table>), with a
line break before and after the table
inline-table The element will be displayed as an inline table (like <table>), with no
line break before or after the table
table-row-group The element will be displayed as a group of one or more rows (like
<tbody>)
table-header-group The element will be displayed as a table header row (like <thead>)
table-footer-group The element will be displayed as a table footer row (like <tfoot>)
table-row The element will be displayed as a table row (like <tr>)
table-column-group The element will be displayed as a group of one or more columns (like
<colgroup>)
table-column The element will be displayed as a column of cells (like <col>)
table-cell The element will be displayed as a table cell (like <td> and <th>)
table-caption The element will be displayed as a table caption (like <caption>)

c)Whut does dlspluy: run-ln do?
Run-ln should muke the run-ln element be the flrst llne of the next slbllng block level element, lf lt ls before u
block level element thut ls not flouted or ubsolutely posltloned. If the next slbllng ls posltloned or flouted, then
the run-ln element wlll be u block level element lnsteud of uppeurlng ln-llne.
The element will generate a block or inline box, depending on context
u)Whut ure the flve posslble vulues for posltlon?
Vulues for posltlon:
Stutlc : HTML elements are positioned static by default. A static positioned element is always
positioned according to the normal flow of the page.Static positioned elements are not affected by the
top, bottom, left, and right properties.
Relutlve: A relative positioned element is positioned relative to its normal position
Absolute:An absolute position element is positioned relative to the first parent element that has a
position other than static.Absolutely positioned elements are removed from the normal flow. The
document and other elements behave like the absolutely positioned element does not exist.Absolutely
positioned elements can overlap other elements .The z-index property specifies the stack order of an
element (which element should be placed in front of, or behind, the others).An element can have a
positive or negative stack order
)lxed:An element with fixed position is positioned relative to the browser window.
Inherlt:Specifies that the value of the position property should be inherited from the parent element
b) Whut ls the defuult/lnltlul vulue for posltlon?
stutlc
c) How does the browser determlne where to pluce posltloned elements
They ure pluced relutlve to the next purent element thut hus ubsolute or relutlve vulue declured
d) Whut ure the pros und cons of uslng ubsolute posltlonlng?
Absolutely posltloned elements ure removed from the document flow. The posltloned element does not flow
uround the content of other elements, nor does thelr content flow uround the posltloned element. An ubsolutely
posltloned element muy overlup other elements, or be overlupped by them.
e) IE z-lndex lssues wlth posltloned elements
IE treuts u posltlon llke u z-lndex reset, so you huve to declure posltlon of stutlc on the purent element
contulnlng the z-lndexed elements to huve them respond to z-lndex correctly.
f) Wrlte u snlppet of CSS thut wlll dlspluy u purugruph ln blue ln older browsers, red ln newer browsers, green
ln IE6 und bluck ln IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:bluck;}
How do you orgunlze your CSS? How do you come up wlth ld und cluss numes (whut numlng conventlons do
you use)?
y 1ever use luyout descrlptlves ln cluss numes. Ruther, use functlonul numes for your clusses, uvold
words thut descrlbe how they look or where they ure locuted on the puge. mulnnuvlgutlon ls better
thun leftnuvlgutlon. Use .copyrlght und .pullquote lnsteud of smullgrey or lndentltullc. 1ume
clusses/IDs bused on functlon, not uppeurunce. If you creute u .smullblue cluss, und luter get u request
to chunge the text to lurge und red, the cluss stops muklng uny form of sense. Insteud use descrlptlve
clusses llke
y Alwuys use lntentlon reveullng clussnumes: Its temptlng to use short cryptlc cluss numes (.s, .lbl) but
unless you keep u glossury up to dute of your cluss numes, you wlll forget whut they do. You muy ulso
run lnto problems wlth older browsers thut cun occuslonully confuse clussnumes thut sturt the sume
(l.e. .err und .errors ure sometlmes confused)
y Avold uslng the sume clussnume for dlfferent purposes. The cuscude cun be very powerful but
sometlmes there ls u temptutlon to use the sume generlc clussnume ln muny pluces. If you dont
sundbox your Css well, you cun run lnto troubles.
y Alwuys use the sume clussnume for slmllur purposes: Becuuse the cuscude ls so powerful, you should
reuse u clussnume ln dlfferent pluces when they represent the sume concept.
y 3ut your clussnume on the outer-most element. The chlld elements cun be turgeted wlth the purent
elements clussnume or ID. Often you see thlngs llke:<div class="headertitle">...</div>
<div class="headerdescription">...</div>
<div class="headerlinks">...</div>
Its fur better to wrlte:
<div id="header">
<h3>...</h3>
<p>...</p>
<ul><li>...</li><ul>
</div>
y Although cluss und dlv numes cun lnclude lowercuse, uppercuse, numbers und uddltlonul churucters ln
cluss und dlv numes, lt ls best to use ull lower cuse letters und to for multlple word clusses, sepurute
the words wlth un underscore or use cumel cuse. HTML uttrlbutes ld und cluss ure cuse sensltlve!
y 1ever use |uvuscrlpt method or property numes us ID vulues. JuvuScrlpt DOM blndlngs speclfles thut
|uvuscrlpt cun lndex by ld. )or exumple, uslng length us un ID vulue on un element wlll cuuse
heuduches when uslng myOb|ects.length.
Box-model : puddlng, murglns, Borders, content
choosing the right unit type for layout: advantages and disadvantages
Unit Advantages Disadvantages
em
y Best suited to creating highly precise layout
grids in two dimensions
y When used in relation to document
containers, makes possible layouts that
expand or contract according to the size of
body copy
y The computed dimensions of elements
become easily predictable
y Fractional units might expand or
contract with slight differences
between browsers
y To achieve the best results, all font-
sizeand line-height values in the
document should be set to explicit
and predictable values
percentage
y Best suited to completely flexible layouts
y Easiest for creating things like equal
columns
y Blowout avoidance might require
extra container elements
y Might result in unacceptably wide or
narrow elements
y Results are highly dependent on
context (see discussion of the box
models below)
px
y Offers the greatest amount of control over
layout
y Eliminates most cross-browser variation in
layout
y Most ill-suited to accessibility and
cross-media support requirements
y Most susceptible to blowouts
4: Whut ure the pros und cons of uslng tubles for luyout? Do you use tubles? Whut ure the pros und cons of
tubleless deslgn? How do you generully luyout your puges?
Pros and Cons
y Tables-based layouts
o Pro: Some people are used to working with tables-based layouts.
o Pro: Older web editors, such as Microsoft FrontPage, display tables-based layouts better in the
design editor view.
o Con: Tables are no longer recommended for layout by current web standards.
o Con: Tables-based layouts can be less optimized for search engines.
o Con: Tables-based layouts often involve more code and increase bandwidth.
o Con: Tables-based layouts do not allow for global design updates the way CSS does.
y CSS layouts
o Pro: CSS layouts are recommended by current web standards.
o Pro: Because the layout definitions are centralized in a stylesheet, global design changes are easier
to make.
o Pro: By separating the layout and design from the actual content of a page, the page code can be
more optimized for search engines.
o Pro: CSS layouts usually result in more streamlined code, decreasing bandwidth.
o Con: Some older editors such as Microsoft FrontPage do not display CSS layouts properly in the
Design View. While it is still possible to work with older editors, the user will have to get used to
working in Split View and refreshing frequently in a browser instead of depending on the Design
preview.
o Con: As with any technology, there is a learning curve for CSS. Developers who are used to using
tables may not want to invest the time to switch over to CSS.
4: Whut ure some deprecuted elements und uttrlbutes thut you use, und ln whut lnstunces do you use them?
Deprecated HTML Elements in HTML 4.01 and XHTML 1.0
y <applet></applet>
The applet element has been deprecated in favor of the <object></object> tag.
y <basefont />
Thebasefont element has been deprecated in favor of the CSS font and colorproperties.
y <blackface></blackface>
The blackface element is a MSNTV/WebTV element that has been deprecated in favor of the
CSSfont-weight property.
y <blockquote></blockquote>
The blockquote element is deprecated in favor of CSS properties like margin when used to indent
text.
y <center></center>
The center element has been deprecated in favor of using CSS to center elements.
y <dir></dir>
The dir element has been deprecated in favor of the <ul></ul> tag.
y <embed />
The embed element has been deprecated in favor of the <object></object> tag. This tag was
reinstated in HTML 5.
y <font></font>
The font element has been deprecated in favor of the font and color style properties.
y <i></i>
The i element has been deprecated in favor of the CSS font-style property.
y <isindex />
Theisindex element has been deprecated in favor of the input tag.
y <layer></layer>
The layer element has been deprecated in favor of CSS positioning.
y <menu></menu>
The menu element has been deprecated in favor of the <ul></ul> tag.
y <noembed></noembed>
The noembed element has been deprecated in favor of the <object></object> tag.
y <s></s>
The s element has been deprecated in favor of the text-decoration CSS property.
y <shadow></shadow>
The shadow element is a MSNTV/WebTV element that has been deprecated in favor of the text-
shadow style property.
y <strike></strike>
The strike element has been deprecated in favor of the text-decoration CSS property.
y <u></u>
The strike element has been deprecated in favor of the text-decoration CSS property.
Deprecated HTML Attributes in HTML 4.01 and XHTML 1.0
y alink
The alink attribute defines the color of an active link on the web page. It has been deprecated in
favor of the color style property assigned to the:active pseudo-class.
y align
Used to align elements vertically and horizontally on the document page, the align attribute has
been deprecated in favor of the float CSS style property.
y background
The background attribute is used to define a background image for the element. It has been
deprecated in favor of the background-image style property.
y border
Used to define a border around the element, the border attribute has been deprecated in favor of
the border style property.
y color
Used to define the color of the enclosed text, the color attribute has been deprecated in favor of
the color property.
y compact
The compact attribute is used in list tags to create a list that takes up less space. It has been
deprecated in favor of the list-style property.
y face
Used to define the font face of the enclosed text, the face attribute has been deprecated in favor of
the font-family CSS style property.
y height
Used to define the height of the element, the height attribute has been deprecated in favor of
the height CSS property.
y language
The language attribute is used to define the language used by the script element. It has been
deprecated in favor of the type attribute.
y link
The link attribute defines the color of a link on the Web page. It has been deprecated in favor of
the color style property assigned to the :link pseudo-class.
y name
The name attribute names the element for use with dynamic content, it has been deprecated in
favor of the id attribute.
y noshade
The noshade attribute removes the 3-D effect from horizontal rules. It has been deprecated in
favor of style sheets.
y nowrap
Used to stop table contents from wrapping, the nowrap attribute has been deprecated in favor of
the white-space style property.
y size
Used to define the size of the enclosed text, the size attribute has been deprecated in favor of font-
size CSS property.
y start
The start attribute of list tags defines the starting number of the list. This attribute has been
deprecated in favor of the list-style-type property.
y text
The text attribute defines the color of the text on the Web page. It has been deprecated in favor of
the color style property.
y type
The type attribute of list tags defines what type of list should be used. This attribute has been
deprecated in favor of the list-style-type property.
y value
The value attribute of list tags sets the value of the list item. This attribute has been deprecated in
favor of the list-style CSS property.
y version
The version attribute defines the version of HTML used by the document. It has been deprecated in
favor of defining the DOCTYPE.
y vlink
The vlink attribute defines the color of a visited link on the Web page. It has been deprecated in
favor of color style property assigned to the :visited pseudo-class.
y width
The width attribute defines the width in pixels of the element. It has been deprecated in favor of
the width property.

How to Avoid Deprecated HTML

Fonts and CSS
Font and text styles have been deprecated in HTML in favor of CSS, and this is where CSS really
shines. CSS supports more options for changing font attributes than the deprecated tags it is
replacing. If you are still using these tags instead of CSS you're making a huge mistake.
y <basefont>
You can change the color, face, and size of the fonts on your Web page with CSS. Create a base
font for your body and paragraph tags with the following CSS:
y body, p {
y font: 1em Geneva;
y color: #000;
}
This will create a page with a 1em black Geneva font.
y <blackface> (WebTV)
In WebTV/MSNTV browsers the blackface tag makes the text double-weight bold. This is easy with
CSS:
.blackface { font-weight: bolder; }
Not all browsers support the bolder designation, but they will all turn it bolder than the surrounding
text.
y <font>
Just like base font, you can specify the font face, color, and size with CSS. You can also define the
background color behind the font, the line-height of the font, and the tracking of the font:
y body, p {
y font: 1em Geneva;
y color: #000;
y background-color: #ccc;
y line-height: 1.2em;
y letter-spacing: .2em;
}
Text Attributes
Some of these aren't deprecated (like <b> and <i>) but it is still possible, and often better to use
style sheets for them. These affect how the text will look, not just details about the font.
y <b>
Bold text is created with the font-weight property in CSS.
.bold { font-weight: bold; }
y <i>
Italic text is created with the font-style property in CSS.
.italics { font-style: italic; }
y <shadow> (WebTV)
The shadow tag in WebTV creates a drop-shadow on the text. There is a CSS 2 property to support
shadows, but currently it's not supported by any browser.
.shadow { text-shadow: .2em .2em #ccc; }
y <strike>
You can do more than strike-through your text with CSS. Use the text-decoration property to do
even more.
.strike { text-decoration: line-through; }
Affect More than Text and Fonts
But CSS fixes more than just text and fonts. You can also do things like indenting, centering, and
layering with CSS properties.
y <blockquote> to indent text
You shouldn't indent with the blockquote tag. That tag is only for long quotations.
y .indentall { margin: 15px; }
.indentleft{ margin-left: 15px; }
y <center>
Centering in CSS is a bit trickier, because you can only center inline content. Block content you
need to center in a different way.
.center { text-align: center; }
y <layer>
Layers are the trickiest because there isn't a specific property to replace them. Instead, you should
define the styles of your elements and then move them around withpositioning CSS properties. Use
the z-index property to move your elements higher or lower in the stack order.
y .onTop { z-index: 100; }
.onBottom{ z-index: 0; }
Dlfferences between HTML und XHTML
The prlmury beneflt ls thut XHTML ls more wldely uccepted ln non "computer" devlces llke cell phone, pulm
devlces und other sculed down browsers. Thls ls commonly culled portublllty between devlces.
XHTML ls ulso suld to be extenslble: new tugs cun be udded. Also, XHTML, due to lts strlcter nuture, forces
the developer to wrlte cleuner code (yes, thut ls u ver good thlng).
Here ure "offlclul" dlfferences between XHTML und HTML:
y In XHTML the elementy tugs must ull be ln lower cuse us must ull the uttrlbute numes. In HTML you
cun code wllly-nllly. 1othlng ln the W3C stutes thut uttrlbute vulues need to be lowercuse, but some,
llke ID, ure cuse sensltlve.
1ote: Even lf you huve declured u HTML doctype, ull lowercuse, whlle not requlred, ls recommended.
y In XHTML ull uttrlbute vulues must be encused ln slngle or double quotes. In HTML, only uttrlbute
vulues wlth spuces or speclul churucters were requlred to be ln quotes.
y In XHTML, every openlng tug must huve u closlng tug. Empty elements such us lmg und br must be
self-closlng. In HTML tugs cun be left unclosed. So, whlle thls reduces the number of churucters on u
puge, lt ulso ullows for sloppy code.
1ote: Self closlng tugs, such us <br />, wlll cuuse strlct HTML to not vulldute.
y In XHTML, ull tugs must be properly nested: If you sturt tug <a> und then sturt tug <strong>, you
must close tug </strong>before you close the </a>
y In XHTML, ull uttrlbutes must be coded us uttrlbute/vulue pulrs. The defuult selected optlon ln
XHTML should be wrlttenselected="selecterd". In HTML, the sume would slmply be coded
us selected.
y In XHTML, the elements need to be coded ln u semuntlc munner. Tubles und forms cun not be
lncluded ln purugruphs, but form elements, belng lnllne elements, need to be contulned wlthln u
semuntlc block level element, such us u purugruph or tuble cell.