UNIT 1

HTML and CSS

1. What are Cascading Style Sheets?

A Cascading Style Sheet (CSS) is a list of statements (also known as rules) that can
assign various rendering properties to HTML elements. Style rules can be specified for a
single element occurrence, multiple elements, an entire document, or even multiple
documents at once. It is possible to specify many different rules for an element in
different locations using different methods. All these rules are collected and merged
(known as a "cascading" of styles) when the document is rendered to form a single style
rule for each element.

2. Why do style sheets exist?

SGML (of which HTML is a derivative) was meant to be a device-independent method
for conveying a document's structural and semantic content (its meaning.) It was never
meant to convey physical formatting information. HTML has crossed this line and now
contains many elements and attributes which specify visual style and formatting
information. One of the main reasons for style sheets is to stop the creation of new
HTML physical formatting constructs and once again separate style information from
document content.

3. Why use Style Sheets?

Style sheets allow a much greater degree of layout and display control than has ever been
possible thus far in HTML. The amount of format coding necessary to control display
characteristics can be greatly reduced through the use of external style sheets which can
be used by a group of documents. Also, multiple style sheets can be integrated from
different sources to form a cohesive tapestry of styles for a document. Style sheets are
also backward compatible - They can be mixed with HTML styling elements and
attributes so that older browsers can view content as intended.

4. Who defines the CSS standard? Is it one person? A company?

The W3C (the organization in charge of defining the HTML standards) creates and
develops the CSS specifications with public input from the W3C www-style mailing list
discussion forum and feedback from the member companies that comprise the W3C
Consortium (which include companies such as Apple, Microsoft, and Netscape along
with over 150 others.)

The "Cascading Style Sheets Level 1" recommendation is edited and maintained by
Håkon Lie and Bert Bos of the W3C. The CSS2 recommendation is is edited and
maintained by Håkon Lie, Bert Bos, Chris Lilley and Ian Jacobs.

5. What can be done with style sheets that can not be accomplished with regular HTML?
Many of the recent extensions to HTML have been tentative and somewhat crude
attempts to control document layout. Style sheets go several steps beyond, and introduces
complex border, margin and spacing control to most HTML elements. It also extends the
capabilities introduced by most of the existing HTML browser extensions. Background
 colors or images can now be assigned to ANY HTML element instead of just the BODY
element and borders can now be applied to any element instead of just to tables. For more
information on the possible properties in CSS, see the Index DOT Css Property Index.

6. Is there anything that CAN'T be replaced by Style Sheets?

Quite a bit actually. Style sheets only specify information that controls display and
rendering information. Virtual style elements that convey the NATURE of the content
can not be replaced by style sheets, and hyperlinking and multimedia object insertion is
not a part of style sheet functionality at all (although controlling how those objects appear
IS part of style sheets functionality.) The CSS1 specification has gone out of its way to
absorb ALL of the HTML functionality used in controlling display and layout
characteristics. For more information on the possible properties in CSS, see the Index
DOT Css Property Index.
Rule of Thumb: if an HTML element or attribute gives cues as to how its contents should
be displayed, then some or all of its functionality has been absorbed by style sheets.

7. How do I design for backward compatibility using Style Sheets?

Existing HTML style methods (such as <font SIZE> and <b>) may be easily combined
with style sheet specification methods. Browsers that do not understand style sheets will
use the older HTML formatting methods, and style sheets specifications can control the
appearance of these elements in browsers that support CSS1.

8. What browsers support style sheets? To what extent?

Microsoft's Internet Explorer version 3.0 Beta 2 and above supports CSS, as does
Netscape Communicator 4.0 Beta 2 and above and Opera 3.5 and above. Take note that
the early implementations in these browsers did not support ALL of the properties and
syntax described in the full CSS1 specification and beyond. Later versions have been
getting much closer to full CSS1 compliance, but then comes the next hurdle - CSS2...it
was such a big leap over CSS1 that it has taken the browsers years to come close to
supporting a majority of CSS2's features. Mozilla and Opera's current versions both offer
excellent CSS standards compliance. The Macintosh version of Internet Explorer is said
to be very impressive in its CSS capabilities as well, but PC IE lags behind these
implementations. Quite a few other implementations of CSS now exist in browsers that
are not as widely-used (such as Amaya, Arena and Emacs-W3), but coverage of features
in these documents currently only covers Internet Explorer, NCSA Mosaic, Netscape and
Opera browsers.

9. Do any WYSIWYG editors support the creation of Style Sheets? Any text-based HTML
editors?
As support for CSS in browsers has matured in the last year, both WYSIWYG and Text-
based HTML editors have appeared that allow the creation or the assistance of creating
Cascading Style Sheet syntax. There are now at least two dozen editors supporting CSS
syntax in some form. The W3C maintains an up-to-date list of these WYSIWYG and
text-based editors.

10. Can you use someone else's Style Sheet without permission?
 This is a somewhat fuzzy issue. As with HTML tags, style sheet information is given
using a special language syntax. Use of the language is not copyrighted, and the syntax
itself does not convey any content - only rendering information.

It is not a great idea to reference an external style sheet on someone else's server. Doing
this is like referencing an in-line image from someone else's server in your HTML
document. This can end up overloading a server if too many pages all over the net
reference the same item. It can't hurt to contact the author of a style sheet, if known, to
discuss using the style sheet, but this may not be possible. In any case, a local copy
should be created and used instead of referencing a remote copy.

11. What does the "Cascading" in "Cascading Style Sheets" mean?

Style Sheets allow style information to be specified from many locations. Multiple
(partial) external style sheets can be referenced to reduce redundancy, and both authors as
well as readers can specify style preferences. In addition, three main methods can be
employed by an author to add style information to HTML documents, and multiple
approaches for style control are available in each of these methods. In the end, style can
be specified for a single element using any, or all, of these methods. What style is to be
used when there is a direct conflict between style specifications for an element?

Cascading comes to the rescue. A document can have styles specified using all of these
methods, but all the information will be reduced to a single, cohesive "virtual" Style
Sheet. Conflict resolution is based on each style rule having an assigned weight according
to its importance in the scheme of things. A rule with a higher overall importance will
carry a higher weight. This will be used in place of a competing style rule with a lower
weight/importance. A hierarchy of competing styles is thus formed creating a "cascade"
of styles according to their assigned weights. The algorithm used to determine this
cascading weight scale is fairly complex.
For more information, see the section on cascading in the CSS1 Specification or the
Index DOT Css section on the Style Sheet Cascade process.

12. Which style specification method should be used? Why?

The answer to this one is tricky. The short answer is: "it depends." The long answer is,
however, another story.

If you are planning on using more than one style specification method in your document,
you must also worry about Cascading Order of Style methods (see question 11.) If you
are going to use only one method, then some guidelines about the nature of each method
need to be kept in mind. The answer to this question is also very much related to the
advantages and disadvantages to using each of them (next question.)

Method 1: External Style Sheets (The LINK [-->Index DOT Html] element)
This method should be used if you want to apply the same style to multiple documents.
Each document can reference the stand-alone style sheet and use the styles contained
within. Using this method, the appearance of many documents can be controlled using a
single or small number of style sheets. This can save a LOT of time for an author.
Method 2: Embedded Style Sheets (The Style [-->Index DOT Html] element)
The syntax used with Method 2 is the same as that for Method 1. This method is a happy
medium between External Style Sheets and Inline Styles (see below.). It should be used
in place of Method 1 if you only want to specify styles for a single document. This
method should also be used when you want to specify a style for multiple tag types at
once or the list of style definitions is of larger size.
Method 3: Inline Styles (STYLE attribute to HTML elements)
If you only have to apply style to one or a few elements in a single document, your best
bet will often be an Inline Style. This method attaches a style definition within the HTML
element it is modifying.

13. What are the advantages/disadvantages of the various style methods?

Each method of specifying style information has something going for it (else it would not exist),
but each method also has drawbacks as well. This question is very closely related to the previous
question. These factors should be considered when planning your use of Style Sheets.

External Style Sheets

Advantages

 Can control styles for multiple documents at once

 Classes can be created for use on multiple HTML element types in many
documents
 Selector and grouping methods can be used to apply styles under complex
contexts

Disadvantages

 An extra download is required to import style information for each document

 The rendering of the document may be delayed until the external style sheet is
loaded
 Becomes slightly unwieldy for small quantities of style definitions

Embedded Style Sheets

Advantages

 Classes can be created for use on multiple tag types in the document
 Selector and grouping methods can be used to apply styles under complex
contexts
 No additional downloads necessary to receive style information

Disadvantages

 This method can not control styles for multiple documents at once

Inline Styles
Advantages
  Useful for small quantities of style definitions
 Can override other style specification methods at the local level so only
exceptions need to be listed in conjunction with other style methods

Disadvantages

 Does not distance style information from content (a main goal of SGML/HTML)
 Can not control styles for multiple documents at once
 Author can not create or control classes of elements to control multiple element
types within the document
 Selector grouping methods can not be used to create complex element addressing
scenarios

14. As a reader, how can I make my browser recognize my own style sheet?
Netscape
It is not possible to do this in Netscape yet (as of version 4.0.)
Internet Explorer 3.0 (Win95/NT)
[It is possible to do this at least in Windows95/NT, but no user interface is provided.
Unknown how this might be accomplished on other operating systems.]

1. Open the Registry editor (Start..Run..regedit..ENTER)

2. Under the
'HKEY_LOCAL_MACHINE\Software\Microsoft\InternetExplorer\Styles' key,
Edit..New..String Value
3. The new value should be called 'StyleSheet Pathname'
4. For the value, type in the full directory path of your .css style sheet.

Internet Explorer 4.0 (Win95/NT)

1. Under the View menu, select 'Internet Options'.

2. Under the 'General' tab, choose the 'Accessibility' button.
3. Choose the 'Format documents using my style sheet' check box and 'Browse...' to
the location of your .css style sheet.

15. How do you override the underlining of hyperlinks?

CSS has the ability to explicitly control the status of underlining for an element - even for
hyperlinks. The correct way to do this in an external or document-level style sheet is:
A { text-decoration: none }
and within an anchor element as:
<a HREF="example.htm" STYLE="text-decoration: none">link text</a>

Note: The underlining of hyperlinks is a long-standing visual convention that assists in

the visual identification of active hyperlink areas. Many users expect to see hyperlinks
underlined and may be confused and/or irritated if they are not used. User-defined style
 sheets address this user need by allowing the user to have final control over this feature.
Unfortunately, wide support for this ability does not yet exist.

16. What is HTML?

HTML, or HyperText Markup Language, is a Universal language which allows an individual

using special code to create web pages to be viewed on the Internet.

HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are
looking at a Web page right now.
You can view HTML pages in two ways:
* One view is their appearance on a Web browser, just like this page -- colors, different text
sizes, graphics.
* The other view is called "HTML Code" -- this is the code that tells the browser what to do.

17.What is a tag?
In HTML, a tag tells the browser what to do. When you write an HTML page, you enter tags for
many reasons -- to change the appearance of text, to show a graphic, or to make a link to another
page.

What is the simplest HTML page?

HTML Code:
<HTML>
<HEAD>
<TITLE>This is my page title! </TITLE>
</HEAD>
<BODY>
This is my message to the world!
</BODY>
</HTML>

Browser Display:
This is my message to the world!

18.How do I create frames? What is a frameset?

Frames allow an author to divide a browser window into multiple (rectangular) regions. Multiple
documents can be displayed in a single window, each within its own frame. Graphical browsers
allow these frames to be scrolled independently of each other, and links can update the document
displayed in one frame without affecting the others.
You can't just "add frames" to an existing document. Rather, you must create a frameset
document that defines a particular combination of frames, and then display your content
documents inside those frames. The frameset document should also include alternative non-
framed content in a NOFRAMES element.
The HTML 4 frames model has significant design flaws that cause usability problems for web
users. Frames should be used only with great care.
19.How can I include comments in HTML?
Technically, since HTML is an SGML application, HTML uses SGML comment syntax.
However, the full syntax is complex, and browsers don't support it in its entirety anyway.
Therefore, use the following simplified rule to create HTML comments that both have valid
syntax and work in browsers:

An HTML comment begins with "<!--", ends with "-->", and does not contain "--" or ">"
anywhere in the comment.
The following are examples of HTML comments:

* <!-- This is a comment. -->

* <!-- This is another comment,
and it continues onto a second line. -->
* <!---->

Do not put comments inside tags (i.e., between "<" and ">") in HTML markup.

20.What is a Hypertext link?

A hypertext link is a special tag that links one page to another page or resource. If you click the
link, the browser jumps to the link's destination.

21.How comfortable are you with writing HTML entirely by hand?

Very. I don’t usually use WYSIWYG. The only occasions when I do use Dreamweaver are when
I want to draw something to see what it looks like, and then I’ll usually either take that design
and hand-modify it or build it all over again from scratch in code. I have actually written my own
desktop HTML IDE for Windows (it’s called Less Than Slash) with the intention of deploying it
for use in web development training. If has built-in reference features, and will autocomplete
code by parsing the DTD you specify in the file. That is to say, the program doesn’t know
anything about HTML until after it parses the HTML DTD you specified. This should give you
some idea of my skill level with HTML.

22.What is everyone using to write HTML?

Everyone has a different preference for which tool works best for them. Keep in mind that
typically the less HTML the tool requires you to know, the worse the output of the HTML. In
other words, you can always do it better by hand if you take the time to learn a little HTML.

23.What is a DOCTYPE? Which one do I use?

According to HTML standards, each HTML document begins with a DOCTYPE declaration that
specifies which version of HTML the document uses. Originally, the DOCTYPE declaration was
used only by SGML-based tools like HTML validators, which needed to determine which
version of HTML a document used (or claimed to use).
Today, many browsers use the document's DOCTYPE declaration to determine whether to use a
stricter, more standards-oriented layout mode, or to use a "quirks" layout mode that attempts to
emulate older, buggy browsers.
24.Can I nest tables within tables?
Yes, a table can be embedded inside a cell in another table. Here's a simple example:

<table>
<tr>
<td>this is the first cell of the outer table</td>
<td>this is the second cell of the outer table,

with the inner table embedded in it

<table>
<tr>
<td>this is the first cell of the inner table</td>
<td>this is the second cell of the inner table</td>
</tr>
</table>
</td>
</tr>
</table>

The main caveat about nested tables is that older versions of Netscape Navigator have problems
with them if you don't explicitly close your TR, TD, and TH elements. To avoid problems,
include every </tr>, </td>, and </th> tag, even though the HTML specifications don't require
them. Also, older versions of Netscape Navigator have problems with tables that are nested
extremely deeply (e.g., tables nested ten deep). To avoid problems, avoid nesting tables more
than a few deep. You may be able to use the ROWSPAN and COLSPAN attributes to minimize
table nesting. Finally, be especially sure to validate your markup whenever you use nested tables.

16 MARK QUESTIONS

1. Expalin in detail about Client Tier using HTML and its role in brower side with respective
samples
2. Explain about Basic HTML tags ,including respective sample programs with results
3. Impact of Cascading style sheet ,illustrate its look and feel with examples.