!

"#$%&'()*)+,
TABLE CAPTIONS & HADERS
<CAPTION> </CAPTION> This is used for the Title/Caption for a table. <CAPTION> element should appear inside the <TABLE> tag but not inside table rows or cells. Captions are always horizontally centered with respect to the table, and they may have their wrapped to fit within the width of thetable. ATTRIBUTES : ALIGN : Specifies the location of the caption. Valid options are TOP and BOTTOM. <TH> .. </TH> These tags are used to designate a cell to be a header cell and are to be used within the <TR> . </TR> tags.
EXAMPLE : <TABLE BORDER =5> <CAPTION ALIGN = TOP>MOVIES RUNNING </CAPTION> <TR> <TH> THEATRE 1 </TH> <TH> THEATRE 2 </TH> <TH> THEATRE 3 </TH> </TR> <TR> <TD> TERMINATOR </TD> <TD> ALADDIN </TD> <TD> ------------- </TD> </TR> <TR> <TD> TOP GUN </TD> <TD> -------- </TD> <TD> HOME ALONE </TD> </TR> </TABLE>

-.,!+/01, 2)34&,!)456,

!)*5,7,

!"#$%&'()*)+,

FRAMES
Frames enable the user to divide a page into number of rectangular regions/windows of various sizes. You can think of as a window within another window. A page can have one or more frames. The Frames can divide the page so that, each of the frames is a web site in itself, that is they can access different URLs and each of these can be updated independently.

Defining Frames:

FRAMESET is the HTML tag used to create a framed page. This tag replaces the BODY tag completely to create frame-style pages. ATTRIBUTES : 1. ROWS : Rows specify number of horizontal windows or frames and values in the rows attribute specifies the height of the frames in the frameset. 2. COLS : Cols specify number of vertical windows or frames and the values in them specify the width of the frames in the frameset.

The values for these two attributes can be expressed using one of the following units

1.

In Pixels :
<FRAMESET COLS = 200 , 400> ---------------</FRAMESET>

The frame window will have two frames where the width of the first one is 200 pixels and the second is 400 pixels. The sum of the pixels of all the frames cannot be more than the pixels size of the monitor.

2.

As Percentage of its Parent Frame :

<FRAMESET COLS = 20% , 80%> ---------------</FRAMESET>

The frame window will have two frames where the width of the first frame is 20% of the main window and the second frame of 80%.

3.

As * :
<FRAMESET ROWS = 100 , 40% , *> ---------------</FRAMESET>

Here the frame window will have three frames where the height of the first frame is 100 pixels, the second is 40% of the main window and height of the third one will occupy the rest of the window Space.

-.,!+/01, 2)34&,!)456,

!)*5,8,

!"#$%&'()*)+,

<FRAME> Tag :
The frame tag is defined within the frameset container. This tag is used to specify what actually appears within a particular frame. SYNTAX:
<FRAMESET ROWS / COLS= , > <FRAME SRC = Value NAME = Value SCROLLING = Value> </FRAMESET>

ATTRIBUTES:

1.

It determines the name of the document page that is to be displayed in this frame window URL. 2. NAME : Gives a name to the frame window. Value could be any string value. 3. SCROLLING : Specifies if the window can have scrollbars or not, by setting the values as Yes, No, Auto.

SRC :

-.,!+/01, 2)34&,!)456,

!)*5,9,

!"#$%&'()*)+, STYLE SHEETS

Style Sheet is collection of formatting styles, which can be applied to a web page. The Style Sheet consists of the following components : A style Rule is a set of HTML tags specifying the formatting elements. Style rules can be applied to selected contents of a web page.

Style Rule :

A Style Rule can basically be split into two parts : 1. Selector :

A selector is a string that identifies what elements the corresponding rule applies to and is the first part of the rule.

2. Declaration :
This part of the rule is enclosed within curly brackets. A Declaration has two sections separated by a colon. The section before the colon is the property and the one after the colon is the value of that property.

Syntax of Style Rule :

Eg :

Selector {Property : Value} Where, Selector = Any HTML Tag Property = Attributes like font color, font size, etc Value = Settings for the attribute. H1 { color : blue } H1 is the selector, color : blue is the Declaration, Color is the property and blue is the value.

Eg : H2 { color : LimeGreen }
All H2 headings appears in LimeGreen Color.

There are four ways of incorporating style sheets :

1) Including Style Information within HTML 2) Embedding a Style Sheet 3) Linking to an External Style Sheet

1) Including Style Information Inline Inline Styles :

Inline Style declaration is the most basic Style rule, which can be applied to individual elements in the Web Page. Inline styles are implemented by using Style attribute with the HTML tags. SYNTAX : <HTML Tag STYLE = Property : Value > Eg : <P STYLE = {Color : Olive } > Example : <HTML> <BODY> -.,!+/01, 2)34&,!)456, !)*5,:,

!"#$%&'()*)+,
<H1 STYLE = color : limegreen> This is a style applied to an HTML Element </H1> </BODY> </HTML>

2) Embedding Style Sheets :

You can group more than one style rule using the <STYLE> .. </STYLE> tag. Each of these tags when used in the BODY of the HTML code will apply the style rules. <STYLE> tag is included within the <HEAD> tag. SYNTAX : <HTML> <HEAD> <STYLE> Style Rules </STYLE> </HEAD> <BODY> .. </BODY> </HTML>

Eg :
<HTML> <HEAD> <STYLE> H1 { color : limegreen } H1 { font-family : Arial } </STYLE> </HEAD> <BODY> <H1> This is the H1 Element </H1> </BODY> </HTML>

Grouping Style Rules :

The same style properties were applied individually to both tags. Instead of specifying them individually, you can group them. A Comma is used to separate each of these selectors. Eg: <HTML> <HEAD> <STYLE> H1 , H2 { color : red; font-family : Arial; } </STYLE> </HEAD> <BODY> <H1> This is the H1 Element </H1> <H2> This is the H2 Element </H2> </BODY> </HTML> -.,!+/01, 2)34&,!)456, !)*5,;,

!"#$%&'()*)+,
SELECTORS
Selectors are specified and implemented either by making them inline style or by embedding them. These selectors basically are categorized into : 1. Simple Selectors 2. Contextual Selectors

1) Simple Selectors
These are the easiest to use. It describes an element irrespective of its position in the document structure. The H1 heading identifier is a typical example of simple selector. H1 { color : blue } Simple Selectors can be further classified into : a. HTML Selector b. CLASS Selector c. ID Selector

a) HTML Selector :
These Selectors use the names of HTML elements without brackets. So the HTML <P> tag becomes P. Eg: <HTML> <HEAD> <STYLE> P { font-style : italic; font-weight : bold; color : blue; font-size : 12pt; line-height : 16pt} </STYLE> </HEAD> <BODY> <P> These Selectors use the names of HTML Elements. </BODY> </HTML>

b) CLASS Selector
The Class Selector gives authors the ability to apply styles to specific parts of a document and not necessarily to the whole document. SYNTAX : Class Selector <STYLE> .Class Name { Property : Value } </STYLE> <BODY> <P Class = Class Name> Class Attribute </BODY> Class Name can be any valid String of Characters. The CLASS Selector is preceded with a dot (.) called the Flag Character. Class Selector can be applied to any of the HTML elements by using Class Attribute. !)*5,<,

-.,!+/01, 2)34&,!)456,

!"#$%&'()*)+,
Eg : <HTML> <HEAD> <STYLE> .note { color : blue } .syntax { color :red } p { font-size : large } </STYLE> </HEAD> <BODY> <p Class = syntax> Example of Class Selector < p Class = note> Example of Class Selector <H1 Class =note> Example of Class Selector </H1> </BODY> </HTML>

c ) ID Selector
Like Class Selector, ID Selector is also used to apply style to be selected parts of text. In this style, each ID Selector has a unique identifier. An ID Selector is preceded by a hash ( # ) mark and to apply ID Selector the ID attribute of an HTML element is used. <STYLE> #ID Selector Name { Property : Value} </STYLE> <BODY> <P ID = ID Selector Name>.. </BODY> Eg: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <STYLE> #control { color : red } </STYLE> <H2 id=control> Example of ID Selector </H2> </BODY> </HTML> ID Selector Name can be any valid string of characters. The ID Selector is Preceded with a Hash ( # ). ID Selector can be applied to any of the HTML elements by using the ID attribute.

2) Contextual Selectors
-.,!+/01, 2)34&,!)456, !)*5,=,

!"#$%&'()*)+,
Contextual selectors can be used to combine number of simple selectors separated by a space. Eg : H1 I { color : red } Example : 1 <HTML> <HEAD> <STYLE> BODY { color : magenta; background : white; font-family : Arial; } UL { color : aqua } </STYLE> </HEAD> <BODY> <UL> <LI> Mangoes </LI> <LI> Oranges </LI> <LI> Apples </LI> </UL> </BODY> </HTML>

Cascading Style Sheets :

We can apply similar settings for all the pages in the web site. This can be done by putting all the style rules in a style sheet and then importing or linking it with your HTML document. This method of linking or importing is called Cascading Style Sheets (CSS).

3) Linking to an External Style Sheet :

For constructing a CSS, first style rules must be written in a document and saved in a separate file with an extension of .CSS. then this external style sheet must be linked with the sheet that requires the style rules to be applied. SYNTAX : <HTML> <HEAD> <LINK REL=STYLESHEET HREF=Directory Path where the style sheet is saved TYPE=text/css > </HEAD> <BODY> .. </BODY> </HTML> Where, REL= STYLESHEET Relation to the external document in a style sheet. TYPE=text/css Specifies that a file of the type cascading style sheet is linked. EXAMPLE :

sheet.css (file 1)
H2 { color : blue; font-family : Arial; font-size : normal; } .warning { color : red; font-weight : bold; font-style : italic } -.,!+/01, 2)34&,!)456, !)*5,>,

!"#$%&'()*)+,
link_css.html (file 2)
<HTML> <HEAD>

<LINK REL=stylesheet HREF=f:\ch\sheet.css </HEAD> <BODY> <H2> Changing the Rules </H2> <p class=warning> Changing the Rules </BODY> </HTML>

TYPE=text/css >

List of commonly used properties and their corresponding values

1) Text Properties : Property
text-transform

Description
The case of the text is set.

Values

Example
H1 {text-transform : uppercase} p {text-transform : capitalize} H4 {text-align : center}

text-align

text-indent line-height

word-spacing letter-spacing text-decoration

capitalize uppercase lowercase none Aligns the content horizontally Left across the page right center justify Indents the text in the paragraph by XX units the specified number of characters Specifies the height of the text along XX units with the line space above the line & below the line Specifies the space between the XX units words Specifies the space between the XX units characters Specifies the formatting for the text underline overline line-through blink none

P {text-indent :7em} P {line-height:12pt}

P{word-spacing : 1pt} P {letter-spacing :5} H1 {text-decoration : underline}

-.,!+/01, 2)34&,!)456,

!)*5,?,

!"#$%&'()*)+,

2) Font Properties :

Property
font-family

Description
Specifies the name of the font to be applied Specifies the style of the text to be displayed

Values
family name

Example
p {font-family : futura, helvetica, arial, sans-serif} H2 {font-family : futura, helvetica, arial; font-style : italic} p{font-weight:bold}

font-style

Normal Italic Oblique

font-weight

font-size

Specifies the weight lighter or boldness of the normal font bold bolder 100 200 ----900 Specifies the size of XX units the font % larger smaller xx-small x-small medium large x-large xx-large

p {font-size : 12pt} H1 {font-size : 150} H4{font-size:larger}

3) Color and Background Properties

Property
color

Description
Specifies the color

Values
color name hex value rgb(R%,G%,B%) rgb(R,G,B) color name hex value

Example
p {color : red} p {color :#ffffffff} p{color:10%,20%,20%} p {color :255,200,0} H1 {backgroundcolor : green} !)*5,7@,

Backgroundcolor -.,!+/01, 2)34&,!)456,

Specifies the background color

!"#$%&'()*)+,
rgb(R%,G%,B%) rgb(R,G,B)

Backgroundimage Backgroundrepeat

Specifies the background image Specifies how background image will be placed

url(URL name)

repeat repeat-x repeat-y no- repeat

Backgroundattachment

Specifies if the image scroll is fixed or will it also fixed move

Backgroundposition

Specifies the position of the background image

vertical % horizontal % top center bottom left right

Body {backgroundimage: url(..images/ sand.gif)} Body {backgroundimage : url(..images/ sand.gif); Background-repeat : repeat} Body {backgroundimage : url(..images/ sand.gif); Backgroundattachment : fixed} Body {backgroundimage : url(..images/ sand.gif); Background-position : center}

-.,!+/01, 2)34&,!)456,

!)*5,77,

!"#$%&'()*)+,

FORM CONTROLS
User can interact with an HTML document using any one of the following controls like Text Fields, Check Box, Radio Buttons or Push Buttons. You need to think Form as a container, which holds several controls.

Forms can be classified into three sections namely :

Form Header Input Fields Action Buttons
To add a Form, the <FORM> and </FORM> have to be used. These tags inform the browser that anything specified between them belongs to the Form. SYNTAX : <HTML> <BODY> <FORM> FORM ELEMENTS </FORM> </BODY> </HTML>

Attributes of the FORM Tag

Form tag could have two Attributes : Method and Action METHOD Specifies how the Browser should communicates with the sever. Possible values are GET and POST. ACTION Specifies what CGI script is used to process the data. The values could either be an URL to the script or an emailto : which will send the form directly to the specified address.

SYNTAX: <FORM ACTION = MAILTO : EmailId METHOD = POST NAME = Name of the Form> </FORM>

-.,!+/01, 2)34&,!)456,

!)*5,78,

!"#$%&'()*)+,

INPUT ELEMENTS
Input elements are form elements that can accept input from the user. The following are some of the input elements that can be added to a Form. TEXT Text Entry Box BUTTON Custom Push Button CHECKBOX On/Off Check Box IMAGE Graphical Image PASSWORD Masked Text Entry RADIO Radio Buttons RESET Reset Button SUBMIT Submit Button

<INPUT> is the HTML tag that is used to create any of the form elements and the TYPE attribute determines the specific sort of form element to be created. SYNTAX : <INPUT TYPE = NAME = VALUE = ALIGN = SIZE = MAXLENGTH = > Where, TYPE attribute specifies the type of the form element that will be added to the form. NAME : Every control in the Form must have a Name to identify it. It appears as the label in the form and should be unique. VALUE : It is used to specify a default value to the control. ALIGN : It is used for aligning controls with respect to form margins with one of the following values : Left Right Center SIZE Specifies the Horizontal size of the Text Box. MAXLENGTH Specifies the maximum number of characters that the user can enter. ADDING A TEXT BOX A Text Box will appear as follow :

First Name
-.,!+/01, 2)34&,!)456, !)*5,79,

!"#$%&'()*)+,
A Text Box allows a user to enter data such as characters and numbers. In order to add a Text Box, you need to do the following : <INPUT TYPE=TEXT NAME=First_Name SIZE=30 MAXLENGHT=30 VALUE= Chaitali> Where, TYPE = TEXT The value TEXT indicates that Text Box is the Interface element. MULTIPLE LINE TEXT INPUT The Multiple Line Text Input appears as follows :

Address

In certain cases it might be necessary to accept several lines of text from the user, in such a case you need to use the <TEXTAREA> tag. SYNTAX : <TEXTAREA ROWS= COLS= NAME= > </TEXTAREA> where, Rows : Defines the Height of the Text Area. Cols : Defines the Width of the Text Area . ADDING A CHECK BOX Check Box will appear as follows :

Graduate
A check box is like a toggle switch where user can select or deselect the item. If the Check Box is selected then a value TRUE is returned with the checkbox name else FALSE is returned. SYNTAX : <INPUT TYPE=CHECKBOX CHECKED> where,

NAME=Hobbies VALUE=Graduate

TYPE = CHECKBOX : The value CHECKBOX indicates that CHECKBOX is the interface element. NAME = Hobbies : Hobbies is the name of the check box by which it will be identified. !)*5,7:,

-.,!+/01, 2)34&,!)456,

!"#$%&'()*)+,
VALUE = Graduate : The value Graduate will be assigned to the check box when it is in checked state. CHECKED : This is optional and it causes the check box to be ON ie. Checked, when the Form is first created.

ADDING A RADIO BUTTON The Radio Button will appear as follows :

Male
Radio buttons are used when the user has to make a selection among multiple choices and is always used in a group. SYNTAX : <INPUT TYPE=RADIO NAME=Gender VALUE=Female CHECKED> where,TYPE = RADIO : The value RADIO indicates that RADIO is the interface element. NAME = Gender : Gender is the name of the Radio Group. VALUE = Male & VALUE = Female : One Radio Button has a value Male and the other has a value Female. Based upon which Radio Button was selected only one of these values will be assigned to the Radio Group Gender. CHECKED : This is optional and it causes the check box to be ON ie. Checked, when the Form is first created.

Female

ADDING A PASSWORD FIELD This is same as a Text Box, expect that whatever the user enters in it is masked with an asterisk or some similar character so that no one can see what the user has typed. The Password Field will appear as follows :

Enter Password

********

SYNTAX : <INPUT TYPE=PASSWORD NAME=password SIZE=10> where, TYPE = PASSWORD : The value PASSWORD indicates that PASSWORD is the interface element. NAME = password : password is the name of the Password Field. SIZE = 10 : This is the maximum size of the Password Field.

-.,!+/01, 2)34&,!)456,

!)*5,7;,

!"#$%&'()*)+,
PULL DOWN MENUS A Selection List displays a list of options from which the user can select an item. The < Select > tag is used to define the selection list in a form and should be defined within the form tag. The < Option >tag is attached to the select tag to display a list of Options. The Pull Down Menu will apper as follows:

Country
SYNTAX :

India

<SELECT NAME=ListName> <OPTION VALUE = > Option1 <OPTION VALUE = > Option2 </SELECT> This will create a Selection List as follows where ListName is the Name of the Selection List and Option1 and Option2 are two Options. Eg : <SELECT NAME=country> <OPTION VALUE = india > India <OPTION VALUE = america > America </SELECT>

where, NAME = country : country is the name of the Selection List. VALUE = india : india is the value of Option 1 (India)

ADDING SUBMIT & RESET BUTTONS

Once all the details in the form are entered, then this data has to be stored somewhere so that it can be reused and the form should also be cleared for another set of information to be entered. There are two predefined Buttons called SUBMIT and RESET buttons. 1) SUBMIT BUTTON On clicking this button the data in all the fields will be sent to the server as a series of Name / Value pairs. The name being the Name of the Form Element and the Value is whatever the user has entered. From the server, the data may either be saved into the Database, a Text File or sent through Email. The Submit button will appear as follow:
SUBMIT

SYNTAX : <INPUT TYPE=SUBMIT NAME=submit VALUE=SUBMIT> where, -.,!+/01, 2)34&,!)456, !)*5,7<,

!"#$%&'()*)+,
TYPE = SUBMIT : Submit with default functionality is added to the Form. NAME = submit: submit is the Name of the SUBMIT Button. VALUE = SUBMIT : This is the Text that appears on the Face of the Button. It can be changed to anything. For example VALUE = CLICK HERE

2) RESET BUTTON The RESET Button is used to clear the contents / set default values to all the Form Elements and make them active. The Reset Button will appear as follow :
RESET

SYNTAX : <INPUT TYPE=RESET NAME=reset VALUE=RESET> where, TYPE = RESET : Reset with default functionality is added to the Form. NAME = reset: reset is the Name of the RESET Button. VALUE = RESET : This is the Text that appears on the Face of the Button. It can be changed to anything. For example VALUE = RESET FORM ADDING IMAGE VALUE SYNTAX : <INPUT TYPE = IMAGE SRC = Image Path & Image Name > where, TYPE = IMAGE : The value IMAGE indicates that IMAGE is the interface element. SRC : The Path / URL of the Image File where Image File is located.

-.,!+/01, 2)34&,!)456,

!)*5,7=,

!"#$%&'()*)+, TEXT FORMATTING

Formatting the text refers to changing fonts, style of text, indenting or aligning of the paragraphs.

ELEMENTS
<B> </B> <I> </I> <U> </U> <EM> </EM> <STRONG> </STRONG> <ADDRESS> </ADDRESS> <BLOCKQUOTE> </BLOCKQUOTE> <KBD> .. </KBD> <SAMP> .. </SAMP> <PRE> .. </PRE> <SUP> .. </SUP> <SUB> .. </SUB> <INS> </INS> <DEL> .. </DEL> <HR> <STRIKE> . </STRIKE>

STYLE
Bold Italics Underline Italics Bold Italics Normal with Indent Bold Monospace Monospace Preformatted Superscript Subscript To Insert character in between the Word To delete character from the Word Horizontal Line Line through the TEXT

1. <EM> Text </EM> : Text is the word or words in a sentence. Italics are the recommended rendering of emphasized text. Eg. <EM> Emphasize Text </EM> O/p Ephasize Text 2. <STRONG> Text </STRONG> : Text is the word or words needing extra emphasis. Bold face type is the preferred rendering of strong text. It is similar to Bold Text. 3. <ADDRESS> Text </ADDRESS> : The <ADDRESS> tag is used to mark contact information for the current document whether it is an email address or a complete mailing address and phone number. It behaves much like a paragraph tag. Eg . <ADDRESS> Lemmon Chamber of Commerce <br> 500, Main Avenue <br> -.,!+/01, 2)34&,!)456, !)*5,7>,

!"#$%&'()*)+,
(605) 374-5716 </ADDRESS>

4. <BLOCKQUOTE> TEXT </BLOCKQUOTE> : Text is the quotation that should be separated from the rest of the surrounding material. The <BLOCKQUOTE> tag creates a separate paragraph for the text and indents the entire paragraph from the left. Eg. AB <blockquote> C </blockquote> D O/P AB C D 5. <KBD> KeyboardInput </KBD> Keyboard Input is an example of something the user might type on the keyboard. The typical representation of sample output is mono spaced text, and keyboard input is usually displayed with bold mono spaced text. Eg. <KBD> KeyBoardInput </KBD> O/P KeyBoardInput 6. <SAMP> SampleOutput </SAMP> SampleOutput is am example of a message the user might receive from the computer. Eg. <SAMP> Sample </SAMP> O/p Sample 7. <PRE> TEXT </PRE> : The TEXT is to be displayed in the browser window in the same format as seen in the editor without changes. Text is any text, including returns, spaces, and other hard formatting. 8. <SUP> Text </SUP> : To Super Script some part of the text. Eg. 12 <SUP> th </SUP> O/P 12th 9. <SUB> Text </SUB> : To Sub Script some part of the text. Eg. H <SUB> 2 </SUB> O O/P H2 O 10. <INS> TEXT </INS> : To Insert characters in between two characters. Eg. PATEL <INS> CHAITALI </INS> M -.,!+/01, 2)34&,!)456, !)*5,7?,

!"#$%&'()*)+,
O/P PATEL CHAITALI M

11. <DEL> TEXT </DEL> : To delete characters from the word. Eg. CHAITALI <DEL> M </DEL> PATEL O/P CHAITALI M PATEL 12. <STRIKE> Text </STRIKE> : Strike Tag can be used to display the text with Strike effect in the browser. It has been striked and is normally used to highlight the text. Eg . <STRIKE> ABC </STRIKE> O/P ABC

-.,!+/01, 2)34&,!)456,

!)*5,8@,