Вы находитесь на странице: 1из 24

HTML

CS (PAPER I)

DisHa Career aCaDeMy

Roopali Patil

HTML CS (PAPER I) DisHa Career aCaDeMy Roopali Patil
HTML CS (PAPER I) DisHa Career aCaDeMy Roopali Patil

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Table of Contents

HTML

3

What is HTML?

3

Features

3

Advantages

3

Disadvantages

3

Block Level tags

4

1)

<BR>

4

2)

<CENTER>

4

3)

<HR>

4

4)

HEADING tag

4

5)

<P>

5

6)

<PRE>

5

7)

<MARQUEE>

5

Text Level tags

6

1)

<B>

6

2)

<I>

6

3)

<U>

6

4)

<STRONG>

6

5)

<SMALL>

7

6)

<BIG>

7

7)

<EMPHASIS>

7

8)

<SUBSCRIPT>

7

9)

10)

11)

<SUPERSCRIPT> <STRIKE> / <STRIKETHROUGH> <FONT>

7

7

8

Image Tag

8

Anchor

Tag

10

Lists in

HTML

11

1)

2)

LI, OL UL

 

11

113

Table tag TABLE, TR TD, TH

1)

2)

17

17

17

Visual Basic Script

19

accessing methods

Vbscript

19

multiple lines code

Vbscript

19

declaring variables

Vbscript

20

Vbscript

Comments

20

Vbscript

Operators

20

Vbscript

Array

21

Vbscript

IF statement

21

1)

Simple IF:-

21

2)

IF Else:-

21

3)

Else IF:-

21

Vbscript

Select

2

Vbscript

FOR loop

2

Vbscript

WHILE loop

3

Vbscript

Function

3

Vbscript

Date Function

3

Vbscript

MsgBox

4

CS (PAPER I)

2

By Roopali Patil `

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

HTML

What is HTML?

1)

It is the simplest; text oriented programming language specially used for designing.

2) HTML stands for Hyper Text markup Language, used to create World Wide Web document such as Mozilla Firefox or Internet Explorer.

3) Hypertext is ordinary text with extra features such as formatting, images, multimedia and links to other documents. 4) Mark-up is the process of taking ordinary text and adding extra symbols, such as editor’s proof reading symbols. Each of the symbols used for mark-up in HTML is command that tells the browser how to display the text. 5) Mark-up languages are special type of computer languages which are concerned with only parts of documents according to display the text. They indicate which part of document is title, which is subheading, which is author’s name and so on.

6)

HTML is essentially a set of instructions to web browser for formatting and layout of web pages.

Features

1)

HTML is a set of codes that is used to create document and then it can be published on the World

2)

Wide Web. HTML lets user jump from topic rather than finding and reading information linearly.

3)

Documents prepared in HTML include reference graphics and formatting tags.

4)

HTML is hyperlink specification language.

5)

HTML supports frames including target windows and borderless frames.

6)

It contains powerful formatting facilities for text, page, images, etc.

7) It defines the syntax and placement of special embedded directions which are not displayed by the browser but it tells the browser how to display the contents of the document.

8)

9) HTML supports forms which make it possible to create documents that collect and process uses input. 10) It tells how to make a document interactive through special hypertext links.

It supports for .bmp and animated .gif images.

Advantages

1)

For creating HTML document, only text editor is needed, no need of special software.

2)

HTML document can be created on any hardware platform using any text editor.

3)

HTML is easy to learn, use of implement, inexpensive.

4)

Contains powerful formatting facilities.

5)

It allows images and objects to be embedded and can be used to create interactive forms.

6)

It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.

7) It can embed scripts in languages such as JavaScript which affect the behavior of HTML web pages.

8) HTML can also be used to include Cascading Style Sheets (CSS) to define the appearance and layout of text and other material.

9)

Independent work can be done and need not to worry about editing programs.

10) Required HTML pages can be updated easily, without changing whole document.

11) Any HTML page can be traversed due to hyper linking facility.

Disadvantages

1)

HTML is not a programming language.

2)

Only static web pages can be created using HTML. For interactive (dynamic) web pages we need

3)

a scripting language. Any simple calculation is also not possible in HTML.

Any simple calculation is also not possible in HTML. http://www.theprogramcorner.blogspot.in B y R o o p
Any simple calculation is also not possible in HTML. http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

3

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

4)

Finding errors in HTML is not so easy.

5)

It cannot even be used to display current date.

6)

The web pages created in HTML cannot behave like an application.

7)

The web pages developed in HTML do not have their own interface.

8)

Hyperlink is provided to HTML but for that we need a trip to server at each step.

Block Level tags

1)

<BR>

 

Type:- Standalone

Function:- Inserts a line break in the document or text flow. It tells the browser to wrap the text that follows onto a new line without inserting ay extra space between the lines.

Syntax:- <br clear=”left/right/all”>

 

Attributes:- The clear attribute tells which margin to break when breaking beyond a floating page elements such as an image.

2)

<CENTER>

 

Type:- Container

Function:- Centers all the text and other page components in it.

Syntax:- <center>… </center>

Attributes:- None

Example:- <center>Web Page</center>

Output:-

Web Page

3)

<HR>

Type:- Standalone

Function:- Places a horizontal rule on the page. A web page can be divided into several separate sections by using horizontal rulers or horizontal lines. This tag is mostly used for decorative purposes.

Syntax:- <hr align=”alignment” noshade size=”thickness” width=”in-pixel-or-percentage”>

Attributes:- The unmodified <hr> tag places a line 1 pixel thick across the page.

Align:- This can be set equal to left, right or center to change how the horizontal rule is aligned on the page.

Noshade:- Placing the noshade attribute in an <hr> tag suppresses the shading effect and yields a solid line.

Size:- This controls the thickness of the line.

Width:- A line’s width can be specified in one of the two ways:- It can be set to a number of pixels or one can set it to a percentage of the users browser screen width.

Example:- a) <hr align=”center” size=4>

b) <hr align=”left” width=400 size=3 noshade>

OUTPUT:-

width=400 size=3 noshade>  OUTPUT: - 4) HEADING tag (<H1>…<H6>)  Type :-
width=400 size=3 noshade>  OUTPUT: - 4) HEADING tag (<H1>…<H6>)  Type :-

4)

HEADING tag (<H1>…<H6>)

Type:- Standalone

tag (<H1>…<H6>)  Type :- Standalone http://www.theprogramcorner.blogspot.in B y R o o p
tag (<H1>…<H6>)  Type :- Standalone http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

4

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Function:- Establishes a hierarchy of document heading levels, level 1 has the largest font size and level 6 has the smallest font size. All headings are rendered in bold face and have a little extra line spacing built in above and below them.

Syntax:- <Hn align=”alignment”>……. </Hn>

Attributes:- The align attribute controls how the heading is aligned on the page. We can set heading alignment to values of left, right, center or justify. The default alignment is left.

Example:-

OUTPUT:-

. The default alignment is left.  Example :- OUTPUT: - < h1>Heading1</h1>

<h1>Heading1</h1>

<h2>Heading2</h2>

<h3>Heading3</h3>

<h4>Heading4</h4>

<h5>Heading5</h5>

<h6>Heading 6</h6>

5)

<P>

Type:- Container/Standalone

 

Function:- Denotes a paragraph. It is used for creating paragraph of text. A paragraph can be created by enclosing text within paragraph codes <P> and </P>. The browser ignores the

paragraph created by user while writing codes by pressing ‘enter’. User must specifically define a paragraph in the code by using a paragraph tag.

Syntax:- <p align=”alignment”>……… </p>

Attributes:- The align attribute controls how text in the paragraph is aligned. We can set paragraph alignment to values of left, right, center or justify. The default alignment is left.

Example:- <p align=”right”> This is paragraph.</p>

Output:-

This is paragraph.

6)

<PRE>

Type:- Container

Function:- Text is displayed in a exactly the same format as the character and line spacing format defined in source HTML document. It preserves both spaces and line breaks. It is used to preformat the text. This tag is used to position the characters.

Syntax:- <pre> ………</pre>

 

Attributes:- None

Example:- <pre>

 

1

 

1

2

1

1

2

3

2

1

</pre>

OUTPUT:-

 

1

 

1

2

1

1

2

3

2

1

7)

<MARQUEE>

Type:- Container

Function:- It is used for scrolling the text and images on screen from right to left. The text

written between start <marquee> and end tag </marquee> will scroll on the screen in horizontal line. It is used to scroll the current news or position of different companies of the stock market.

Syntax:- <marquee bgcolor=”color” height=”in-pixel-or-percentage” width=”in-pixel-or-

percentage“> …

text here…

</marquee>

percentage“> … text here… </marquee> http://www.theprogramcorner.blogspot.in B y R o o p
percentage“> … text here… </marquee> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

5

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Attributes:-

Bgcolor:- It defines the background color of the scrolling box. It can be any predefined color or RGB code.

Width:- It defines the width of the scrolling box. It can be either in pixel or percentage.

Height:- It defines the height of the scrolling box. It can be either in pixel or percentage.

Direction:- It determines the direction of the scrolling text. It can be set to right, left, down, up.

Scrollamount:- It determines the speed of the scrolling text i.e. how fast or slow the text must move. It can be set to any integer value.

Behavior:- It tells the way in which the text is to be moved. It can take values such as scroll, alternate, slide.

Loop:- It decides the number of times the text to be scrolled. It can be any integer value or either can be set to true or false.

Example:- <marquee bgcolor="#F0F000" loop="true" scrollamount="10" direction="down" behavior="scroll" width="55%" height="35%"> Example Marquee<br>The scrolling text tag</marquee>

OUTPUT:-

scrolling text tag</marquee>  OUTPUT: -  Text Level tags 1) <B>  Type :-

Text Level tags

1)

<B>

Type:- Container

Function:- Contains text to be rendered in bold face.

Syntax:- <b>……</b>

Example:- This is in <b>bold</b>.

OUTPUT:- This is in bold.

2)

<I>

Type:- Container

Function:- Contains text to be rendered in italics.

Syntax:- <i>……</i>

Example:- This is in <i> italics</i>.

OUTPUT:- This is in italics.

3)

<U>

Type:- Container

Function:- Contains text to be rendered with an underline.

Syntax:- <u>……</b>

Example:- This is in <u>underline</u>.

OUTPUT:- This is in underline.

4)

<STRONG>

Type:- Container

Function:- Contains text that is to be strongly emphasized. The main difference between <strong> and <b> tags is that text to speech readers gives strident (loud) pronunciation to the

strong text, while no such strident pronunciation is given to bold text.

Syntax:- <strong>…….</strong>

 Syntax :- <strong>…….</strong> http://www.theprogramcorner.blogspot.in B y R o o p
 Syntax :- <strong>…….</strong> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

6

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Attributes:- None

Example:- <strong>Access Denied</strong>

OUTPUT:- Access Denied

5)

<SMALL>

 

Type:- Container

Function:- Contains text to be rendered in font size smaller than the default font size. If already the size is smallest, then the tag is ignored.

Syntax:- <small>… </small>

Attributes:- None

Example:- This is <small>small</small>.

OUTPUT:- This is small.

6)

 

<BIG>

<BIG>
 
 

Type:- Container

Function:- Contains text to be rendered in font size bigger than the default font size. If already the size is largest, then the tag is ignored.

Syntax:- <big>…………</big>

Attributes:- None

Example:- This is <big>big</big>.

OUTPUT:- This is big.

7)

<EMPHASIS>

Type:- Container

Function:- Contains text that is to be emphasized (italics). The main difference between <em> and <i> is that text to speech browsers gives spoken emphasis to the text within emphasis tag, while no such emphasis is given to text within italics tags.

Syntax:- <em>……</em>

Attributes:- None

Example:- <em>All fields are mandatory</em>

OUTPUT:- All fields are mandatory

8)

<SUBSCRIPT>

Type:- Container

Function:- Contains text to be subscripted to the text that precedes it. The text being subscripted is a bit lower than the text.

Syntax:- <sub>… /<sub>

Attributes:- None

Example:- This is Sub<sub>script</sub>.

OUTPUT:- This is Sub script .

9)

<SUPERSCRIPT>

Type:- Container

Function:- Contains text to be superscripted to the text that precedes it. The text being superscripted is a bit higher than the text.

Syntax:- <sup>… </sup>

Attributes:- None

Example:- This is Super<sup>script</sup>.

OUTPUT:- This is Super script .

10) <STRIKE> / <STRIKETHROUGH>

i p t . 10) <STRIKE> / <STRIKETHROUGH> http://www.theprogramcorner.blogspot.in B y R o o p
i p t . 10) <STRIKE> / <STRIKETHROUGH> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

7

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Type:- Container

Function:- Contains text to be rendered as strike i.e. a line drawn through the middle of a text.

Syntax:- <strike>…………</strike>

Attributes:- None

Example:- This is <strike>strike through</strike>

OUTPUT:- This is strike through.

OR

<strikethrough>……… </strikethrough>

11) <FONT>

Type:- Container

Function:- Contains text whose properties are being modified. It is used to format the size, type face and color of the enclosed text.

Syntax:- <font size=”size” color=”color” face=”type-faces”>…… ….</face>

Attributes:-

Align:- The align attribute controls how text in the paragraph is aligned. We can set paragraph alignment to values of left, right, center or justify. The default alignment is left.

Face:- It specifies the type face that is used for the text enclosed by the font element.

Size:- The size specifies the size of the text. It can be specified in absolute or relative values ranging from 1 to 7. Using a relative font size i.e. by putting plus or minus sign before the number will change the font size relative to the default size.

Color:- The color can be any RGB color code. It can be one from 16 predefined colors or an RGB code. FF0000 defines Red, 00FF00 defines Green 0000FF defines Blue.

Example:- <font face="Algerian" size="3" color="#ff0000">Example</font>

OUTPUT:- exaMPLe

Image Tag

Type:- Standalone

Function:- Places an inline image into a document. It includes graphic images in the body of the web page. There are two types of images:-

Inline images:- It occurs in the middle of the line of text. If the image is larger one, then the line becomes very tall.

Floating images:- It causes text to wrap around the image. The paragraph will flow around the image for several lines, if the image is large.

Syntax:- <img src=”url-of-image-file” width=”in-pixel” height=”in-pixel” align=”alignment” alt=”alternative-text-description”>

Attributes:-

SRC:- Specifies the url of the file containing the image. It includes appropriate path of image file for searching.

Width:- Gives the width of the image in pixel.

Height:- Gives the height of the image in pixel.

Align:- Controls how the image is aligned on the page, Possible values are:-

o

For Inline images:- top, bottom, middle.

o

For Floating images:- left, right, center, justify.

ALT:- Gives the alternative description of the image. For any browser, that is not displaying images, the alternate text contained inside the ALT attribute is displayed instead of the image.

Border:- Displays image with a border.

Example:- <img src=”

/images/Sunset.jpg”

width=”600” height=”120” alt=”Welcome”>

width=”600” height=”120” alt=”Welcome”> http://www.theprogramcorner.blogspot.in B y R o o p
width=”600” height=”120” alt=”Welcome”> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

8

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

<!--Program to demonstrate IMAGE tag in html--!> <html> <head> <title>Image Tag</title> </head> <body > <h1><center>Image Alignment</center></h1> <center> <table border="1"> <tr> <td>

<h3><center>Image with Left Alignment</center></h3> <imgsrc="Sunset.jpg" align="left" alt="text" height="150"

width="125"/>

</td> <td> <h3><center>Image with Right Alignment</center></h3>

<imgsrc="Sunset.jpg"

align="right"

alt="text"

height="150"

width="125"/>

</td>

<td>

<h3><center>Image with Center Alignment</center></h3>

 

<imgsrc="Sunset.jpg"

align="center"

alt="text"

height="150"

width="125"/>

</td> </tr> <tr> <td> <h3><center>Image with Top Alignment</center></h3> <imgsrc="Sunset.jpg" align="top" alt="text" height="150"

width="125"/></td>

<td> <h3><center>Image with Bottom Alignment</center></h3> <imgsrc="Sunset.jpg" align="bottom" alt="text" height="150"

width="125"/>

</td> <td> <h3><center>Image with HSPACE and VSPACE Attribute</center></h3> <imgsrc="Sunset.jpg" align="bottom" alt="text" height="150" width="125" hspace="50" vspace="30"/> </td> </tr> </table> </center> </body> </html>

OUTPUT:-

</center> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p
</center> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

9

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

KaWa (W) CONTaCT NO: - 9833200629 XII CS NOTES (HTML)  Anchor Tag  Type :-

Anchor Tag

Type:- Conatiner

Function:- It is used to create links or hyperlinks. Links point to different files on the web. The text or image enclosed in the start tag </a> and end tag </a> is a link. This link is clickable in the graphical browser. With most browsers, the text within these tags is displayed in a different color and underlined.

Syntax:- <a href=”link-to-document”>… </a>

Attributes:- The object to which the link has to be made is defined with href attribute. HREF attribute refers to the hypertext reference. It marks the anchor as start of a link to another document or resource or to a particular place in another document.

Example:- <a href=”http://www.facebook.com”> Facebook </a>

OUTPUT:- Facebook

<!--Program to demonstrate different links using anchor tag in html --!> <html> <head> <title>Anchor Tag</title> </head> <body bgcolor="Thistle" text="purple" link="blue" vlink="green" alink="yellow"> <h1><center><u>Use of Links</u></center></h1>

<h3>Link to a document in same directory:- <a href="ol.html">Ordered List.html</a><h3>

<h3>Link to a document in different directory:-

<a href="

\ul.html">Unordered

List.html</a></h3>

<h3>Link to an image:- <br> <a href="marquee.html"><img src="1.png" width="50" height="50"

alt="Marquee"></a><h3>

<h3>Link to a page on World Wide Web:- <a href="http://www.facebook.com">Facebook</a><h3> </body>

</body> http://www.theprogramcorner.blogspot.in B y R o o p
</body> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

10

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

</html>

OUTPUT:-

- 9833200629 XII CS NOTES (HTML) </html> OUTPUT:-  Lists in HTML 1) LI   

Lists in HTML

1)

LI

LI
 

Type:- Container

Function:- Denotes an item in the list. Indicates actual list elements.

Syntax:- <li>………</li>

Attributes:- None

2)

OL

Type:- Conatiner

Function:- Creates an ordered or numbered list

Syntax:- <ol type=”1 | A | a | i | I” start=”starting-value”>……….</ol>

Attributes:-

Type:- Controls the numbering scheme used when rendering the list. The default value indicates the use of Arabic numerals, that may be of any kind. It can also be upper case or lower case Roman numerals, or upper case or lower case Alphanumeric characters

Numbers:- 1 Alphanumeric characters:- A or a Roman:- I or i

Start:- You can change to a position other than the first position in ordering scheme by using the start attribute.

<!--Program to demonstrate working of Ordered List tag in html--!> <html> <head> <title>Ordered Lists</title> </head> <body bgcolor="Thistle" > <h1>Ordered List</h1> <table border="2"> <tr>

<table border="2"> <tr> http://www.theprogramcorner.blogspot.in B y R o o p
<table border="2"> <tr> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

11

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

<td> <h3>Ordered List with TYPE="1" start="1"</h3> <ol type="1" > <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ol> </td> <td> <h3>Ordered List with TYPE="I" start="7"</h3> <ol type="I" start="7"> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ol> </td> </tr> <tr> <td> <h3>Ordered List with TYPE="i" start="10"</h3> <ol type="i" start=10> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ol> </td> <td> <h3>Ordered List with TYPE="A" start="1"</h3> <ol type="A"> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ol> </td> </tr> <tr> <td colspan="2"> <h3><center>Ordered List with TYPE="a" start="1"</center></h3> <ol type="a"> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ol> </td> </tr> </table> </body> </html>

OUTPUT:-

</table> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p
</table> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

12

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

KaWa (W) CONTaCT NO: - 9833200629 XII CS NOTES (HTML) 3) UL  Type :- Container

3)

UL

Type:- Container

Function:- Creates an unordered or bulleted list. The start and end tag is always required

Syntax:- <ul type=”circle|square|disc”>…………</ul>

Attributes:- The type attribute specifies the type of the bullet being shown. It can be circle

(

the type of the bullet being shown. It can be circle ( ) , square (

), square (

of the bullet being shown. It can be circle ( ) , square ( ) or

) or disc (

being shown. It can be circle ( ) , square ( ) or disc ( )

).

<!--Program to demonstrate working of Unordered List tags in html--!> <html> <head> <title>Unordered List</title> </head> <body bgcolor="Thistle" > <h1>Unordered Lists</h1> <table border="2"> <tr> <td> <h4>Unordered List with TYPE="Disc"</h4> <ul type="Disc"> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ul> </td> <td> <h4>Unordered List with TYPE="Circle"</h4> <ul type="Circle"> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ul> </td> </tr> <tr>

</ul> </td> </tr> <tr> http://www.theprogramcorner.blogspot.in B y R o o p
</ul> </td> </tr> <tr> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

13

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

<td colspan="2"> <h4><center>Unordered List with TYPE="Square"</center></h4> <ul type="Square"> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ul> </td> </tr> </table> </body> </html>

OUTPUT:-

</table> </body> </html> OUTPUT:- 4) DL  Type :- Container  Function

4)

DL

Type:- Container

Function:- Denotes a definition list.

Syntax:- <dl>………

terms

and definition goes here………</dl>

Attributes:- None

5)

DT

Type:- Container

Function:- Contains a title of definition term.

Syntax:- <dt>……definition term goes here…….</dt>

Attributes:- None

6)

DD

Type:- Container

Function:- Contains a term definition.

Syntax:- <dd>……term definition goes here………</dd>

Attributes:- None

here………</dd>  Attributes :- None http://www.theprogramcorner.blogspot.in B y R o o p
here………</dd>  Attributes :- None http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

14

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

<!--Program to demonstrate working of Definition List tags in html--!> <HTML> <HEAD> <TITLE>Definition List</TITLE> </HEAD> <BODY> <h1>Definition List</h1> <DL> <DT><B><font color="red">Web Page : </font></B></DT> <DD> i)A web page is an internet document which can be accessed by the internet user within HTML document(or browser).<BR> ii)A web page can contain text,animations,videos,graphics that the user want to see or hear. </DD> <DT><B><font color="red">Web Site : </font></B></DT> <DD>A web site is a collection of associated web pages.</DD> <DT><B><font color="red">Web Browser : </font></B></DT> <DD>It is an application or a software which helps an internet user to access web pages from web server.</DD> </DL> </BODY> </HTML>

OUTPUT:-

</DL> </BODY> </HTML> OUTPUT:- <!--Program to demonstrate working of Nested List tags

<!--Program to demonstrate working of Nested List tags in html--!> <html> <head> <title>Nested List</title> </head> <body bgcolor="Thistle" > <h1>Nested Lists</h1> <ol type="1"> <li>India <ul type="circle"> <li>M S Dhoni</li> <li>Sachin Tendulkar</li>

Dhoni</li> <li>Sachin Tendulkar</li> http://www.theprogramcorner.blogspot.in B y R o o p
Dhoni</li> <li>Sachin Tendulkar</li> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

15

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

</ul> </li> <li>England <ul type="square"> <li>Andrew Strauss</li> <li>Kevin Peterson</li> </ul> </li> <li>South Africa <ul type="disc"> <li>Graeme Smith</li> <li>AlbieMorkel</li> </ul> </li> </ol> <ul> <li>Major Cities of India</li> <ol type="i" start=1"> <li>Mumbai</li> <li>Delhi</li> <li>Kolkatta</li> <li>Chennai</li> </ol> </ul> </body> </html>

OUTPUT:-

</ul> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p
</ul> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p
</ul> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

16

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Table tag

1)

TABLE

 

Type:- Container

Function:- Contains all HTML tags that are composed of tables. A table consists of rows and columns (also called as cells).

Syntax:- <table align=”left | right | center” border=”thickness-in-pixel” bgcolor=”color” width=”width-in-pixel” height=”height-in-pixel” cellpadding=”in-pixel” cellspacing=”in- pixel”>………… </table>

Attributes:-

 

Align:- Controls how the table is aligned on the page. Possible values are left, right, center. By default it is left.

Border:- Specifies the thickness of the table’s border around the row and column in pixels. By default a table has no border.

Bgcolor:- Sets the background color of the cells in the table.

Cellpading:- Contains the amount of white spaces (spacing) to be used in the cells of the table i.e. it defines the amount of space to be kept between the cell border and the actual content of the cell.

Cellspacing:- Specifies how many pixels of space to be left between the individual cells.

Width:- Specifies the width of the table in pixels.

Height:- Specifies the height of the table in pixels.

Bordercolor:- Gives the color to the border.

2)

TR

Type:- Container

Function:- Defines a row of the table. The row is to be defined first then the cells or columns are inserted into the row from left to right. A row must contain at least one table data or table heading element.

Syntax:- <tr>………….</tr>

Attributes:-

 

Bgcolor:- Specifies background color of the specific row

Valign:- Specifies vertical alignment of the row

Align:- Specifies horizontal alignment of the row

3)

TD

Type:- Container

Function:- Defines a cell in the table. Used for displaying actual data. It creates each individual cell. The number of cells in a row determines the number of columns.

Syntax:- <td align=”alignment” colspan=”columns-to-span” rowspan=”rows-to- span”>………….</td>

Attributes:-

 

Bgcolor:- Specifies background color of the specific column

Valign:- Specifies vertical alignment of the column

Align:- Specifies horizontal alignment of the column. By default it is aligned left and centered vertically.

Colspan:- Specifies the number of columns that a cell should span

Rowspan:- Specifies the number of rows that a cell should span

4)

TH

Type:- Container

Function:- Normally it is used to give the heading or title to the column or row or both. It is used to represent individual column heading of a table.

Syntax:- <th>……………</th>

 Syntax :- <th>……………</th> http://www.theprogramcorner.blogspot.in B y R o o p
 Syntax :- <th>……………</th> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

17

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Attributes:-

Bgcolor:- Specifies background color of the specific row

Valign:- Specifies vertical alignment of the row

Align:- Specifies horizontal alignment of the row

5)

<CAPTION>

Type:- Container

Function:- CAPTION tag is used to create a caption on top of or below the table. It can be used with align attribute by setting it to top or bottom. Caption is displayed outside the tables border.

Syntax:-

Attributes:-

<!—Program to demonstrate table tag in html--!> <html> <head> <title>Table Tag</title> </head> <body> <table border="2" cellspacing="5" cellpadding="10" width="500"> <th bgcolor="thistle" colspan="2">Computer Science</th> <tr> <td bgcolor="blue" align="center"><i>Paper I</i></td> <td bgcolor="lime" align="center"><i>Paper II</i></td> </tr> <tr> <td bgcolor="gray">OS</td> <td bgcolor="fuschia">8051</td> </tr> <tr> <td bgcolor="green">DS</td> <td bgcolor="white">NS</td> </tr> <tr> <td rowspan="2" bgcolor="pink">C++</td> <td bgcolor="yellow">8085</td> </tr> <tr> <td bgcolor="orange">8085 Instruction Set</td> </tr> <tr> <td bgcolor="teal">HTML</td> <td bgcolor="brown">8086</td> </tr> </table> </body> </html>

OUTPUT:-

</table> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p
</table> </body> </html> OUTPUT:- http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

18

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

KaWa (W) CONTaCT NO: - 9833200629 XII CS NOTES (HTML) Visual Basic Script  Vbscript accessing

Visual Basic Script

Vbscript accessing methods

VBScript is a client-side scripting language that is based off of Microsoft's Visual Basic programming language. No semicolons are used at the end of statements, only newlines are used to end a statement. To access methods and properties contained within an object, like the Document object, we use a period “.” after the object and before the name of the method. For e.g., document.write(string_here)

<script type="text/vbscript"> document.write("No semicolons") document.write(" were injured in the making") document.write(" of this tutorial!") </script>

Vbscript multiple lines code

Microsoft has included a special character for these multiple lines of code: the underscore "_". The following example contains an exceptionally long write statement that we will break up string concatenation and the multiple line special character. VBScript Code:

<script type="text/vbscript"> document.write("This is a very long write " &_ "statement that will need to be placed onto three " &_ “lines to readable!”) </script>

Display:

This is a very long write statement that will need to be placed onto three lines to be readable!

that will need to be placed onto three lines to be readable! http://www.theprogramcorner.blogspot.in B y R
that will need to be placed onto three lines to be readable! http://www.theprogramcorner.blogspot.in B y R

By Roopali Patil `

CS (PAPER I)

19

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Vbscript declaring variables

When you are going to use a variable in your VBScript code you should first declare it. To declare a variable in VBScript you use the Visual Basic Dim statement:

VBScript Code:

<script type="text/vbscript"> Dim myVariable1, myVariable2, myVariable3, myVariable4 myVariable1 =”22”

myVariable2=22

myVariable3=”abc”

myVariable4= myVariable3 document.write("My number is " & myVariable1) document.write("<br>My number is " & myVariable2) document.write("<br />My string is " & myVariable3) document.write("<br />My string is " & myVariable4) </script>

Display:

My number is 22 My number is 22 My string is Howdy My string is Howdy Note: It is also possible to declare multiple variables in one line. Use the comma "," to separate your multiple variable names. Dim myVar1, myVar2

Vbscript Comments

VBScript only has support for single line comments, so commenting out large blocks of code or leaving yourself long notes can be quite a bit of work. The apostrophe is the special character VBScript uses as its comment initiator. The comment in VBScript works by making the VBScript interpreter ignore everything to the right of the apostrophe until a newline is reached. The following example shows how to leave yourself notes and how you would comment out pieces of code you don't want executed. VBScript Code:

<script type="text/vbscript"> Dim myMessage 'myMessage = "I am having a great day!" "

myMessage = "I could use a nap

'This will print out myMessage to the visitor

document.write(myMessage)

</script>

Display:

I could use a nap Commenting out segments of code is often quite beneficial when you are trying to debug your VBScript code.

Vbscript Operators

VBScript's many operators can be separated into four semi-distinct categories:

Math Operators (+, -, *, /, %, ^)

Comparison Operators (=, >, <, >=, <=, <>)

Logical Operators (And, Or, Not)

<=, <>) • Logical Operators (And, Or, Not) http://www.theprogramcorner.blogspot.in B y R o o p
<=, <>) • Logical Operators (And, Or, Not) http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

20

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

String Concatenation Operator (&)

Vbscript Array

If we specify an array of size 3 that means we can store 4 elements (positions 0, 1, 2 and 3). If we had 300 items in our array, accessing them one by one would be most time consuming to program. Below is a piece of code that will automatically go through every element in the array and print it out. The special programming structure this example uses is a For Loop that we will be discussing in greater detail later on in this tutorial. VBScript Code:

<script type="text/vbscript"> Dim myArray(3) myArray(0) = "Clean Underwear" myArray(1) = "Vacuum Cleaner" myArray(2) = "New Computer" myArray(3) = "Talking Bass"

document.write(myArray(0))

For Each present In myArray document.write(“<br>” & present) Next </script>

‘To print single array element

Display:

Clean Underwear Clean Underwear Vacuum Cleaner New Computer Talking Bass

Vbscript IF statement

1)

Simple IF:- Syntax:- If condition Then Statements End If

2)

IF Else:- If condition Then Statements Else Statements End If

3)

Else IF:- If condition Then Statements ElseIf condition Then Statements ElseIf condition Then Statements Else Statements End If

Vbscript Code:- <script type=”text/vbscript”> Dim temp temp = 65 If temp>70 Then document.write("Wear a T-Shirt!") ElseIf temp>60 Then document.write("Wear a hat!") ElseIf temp>50 Then document.write("Wear a long-sleeved shirt!") Else document.write("Wear a coat!") EndIf </script>

Display:-

Wear a hat!

EndIf </script> Display:- Wear a hat! http://www.theprogramcorner.blogspot.in B y R o o p
EndIf </script> Display:- Wear a hat! http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

21

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Vbscript Select

A VBScript Select Case statement can be summed up into three main parts.

Variable - The variable contains the value which we are trying to determine. Our example will be a variable containing the name of a person.

Case Statements - The case statements contain the values we are checking for. Our example will contain a few names, each their own case statement.

Case Code Blocks - Each case statement has a block of code associated with it. When its case statement is True then the block of code is executed. Our example will print out a greeting depending on the person's name. VBScript Code:

<script type="text/vbscript"> Dim myName myName = "supercalifragilisticexpialidocious" Select Case myName Case "Bob" document.write("Been busy Bob?") Case "Sara" document.write("Seen any slick sunglasses Sara?") Case "Charles" document.write("Did you chuck your chowder Charles?") Case Else document.write("Who are you?") End Select </script>

Display:

Who are you?

Vbscript FOR loop

Pseudo code for a VBScript For Loop:

For counterVariable = 0 to MAX You would replace counterVariable with the name of your counter (most often counter variable used is i). MAX would also be replaced with an integer to specify how many times you would want the For Loop's code executed. VBScript Code:

<script type="text/vbscript"> For count = 0 to 3 document.write("<br />Loop #" & count) Next

</script>

Display:

Loop #0

Loop #1

Loop #2

Loop #3

You can see here that the loop executes 4 times, once for 0, 1, 2 and 3.

here that the loop executes 4 times, once for 0, 1, 2 and 3. http://www.theprogramcorner.blogspot.in B
here that the loop executes 4 times, once for 0, 1, 2 and 3. http://www.theprogramcorner.blogspot.in B

By Roopali Patil `

CS (PAPER I)

2

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

Vbscript WHILE loop

VBScript Code:

<script type="text/vbscript"> Dim counter counter = 10 While counter > 0 document.write(counter) document.write("<br />") counter = counter - 1 Wend document.write("BANG!") </script>

Display:

10

9

8

7

6

5

4

3

2

1

BANG!

The loop starts with the counter variable equal to 10 and subtracts one from counter each time through the loop. After 10 times (iterations) through the loop the conditional statement counter > 0 fails and the while loop ends (Wend).

Vbscript Function

The function myAdd will take two numbers and print out the result. VBScript Code:

<script type="text/vbscript"> Function myAdd(x,y) myAdd = x + y End Function Dim result result = myAdd(10,14) document.write(result) </script>

Display:

24

When our VBScript code executes it first stores the function for later use, then reaches result = myAdd(10,14). VBScript then jumps to the function myAdd with the values x = 10 and y = 14.

Vbscript Date Function

The VBScript Date function is used to create the current date based off of the visitor's system time. This means that if a user from China and a visitor from America visit your site at the same time they will see their own local time displayed. vbscript formatdatetime function If the above VBScript Date Format is not to your liking you can use the format constants of the FormatDateTime function to customize your Date display. VBScript has 3 constants that relate to the Date function:

0 - Default setting. You can see this in the example above.

1 - A long date defined by the computer's regional settings.

2 - A short date defined by the regional settings. We will be formatting the current date with these options, but you can also format static dates (i.e. January 1, 1500) by replacing Date() with your own date string.

1, 1500) by replacing Date() with your own date string. http://www.theprogramcorner.blogspot.in B y R o o
1, 1500) by replacing Date() with your own date string. http://www.theprogramcorner.blogspot.in B y R o o

By Roopali Patil `

CS (PAPER I)

3

DisHa Career aCaDeMy

11, OM sai sHraDDHa aPT, sHasHTri NaGar, KaWa (W) CONTaCT NO:- 9833200629

XII CS NOTES (HTML)

VBScript Code:

<script type="text/vbscript"> Dim myDateString0, myDateString1, myDateString2, break myDateString0 = FormatDateTime(Date(), 0) myDateString1 = FormatDateTime(Date(), 1) myDateString2 = FormatDateTime(Date(), 2) break = "<br />" document.write(myDateString0 & break) document.write(myDateString1 & break) document.write(myDateString2 & break) </script>

Note: You will only see the Display if you are viewing this web page with Internet Explorer.

Vbscript MsgBox

To create a simple message box you only need to supply the MsgBox function with a string and this will be what is displayed on the popup prompt. Our following example will popup with the message "Hello There!". VBScript Code:

<script type=”text/vbscript”> MsgBox “Hello There!” </script>

This is the code for the dialog box you see when you load this page.

Button (Integer)- Allows you to set which buttons will be displayed on your popup. OK button is the default setting.

Title (String)- Sets the title of the popup window, much like the HTML title tag sets the title of the browser window. VBScript Code:

<script type="text/vbscript"> Function myPopup_OnClick() MsgBox "Hello there!", 1, "Greeting Popup" End Function </script> <form> <input type="button" value="Click Me!" name="myPopup" /> </form>

Me!" name="myPopup" /> </form> http://www.theprogramcorner.blogspot.in B y R o o p
Me!" name="myPopup" /> </form> http://www.theprogramcorner.blogspot.in B y R o o p

By Roopali Patil `

CS (PAPER I)

4