[go: up one dir, main page]
Scribd
Upload
9 views27 pages

HTML PDF

HTML, or Hypertext Markup Language, is a markup language used for creating web pages. It has advantages such as being free, easy to learn, and platform-independent, but it is not a programming language and has limitations in interactivity and calculations. The document outlines essential HTML tags, their attributes, and provides examples for structuring web pages and lists.

Uploaded by

fotivec533
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views27 pages

HTML PDF

HTML, or Hypertext Markup Language, is a markup language used for creating web pages. It has advantages such as being free, easy to learn, and platform-independent, but it is not a programming language and has limitations in interactivity and calculations. The document outlines essential HTML tags, their attributes, and provides examples for structuring web pages and lists.

Uploaded by

fotivec533
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML

HTML stands for hypertext markup language.


Hypertext means ordinary text that has been dressed up with some extra features such as
formatting images, multimedia, and links to other document.
Markup means ordinary text adding with extra symbol such as editor proof reading
symbol.

Advantages of HTML
• For creating html document you need only text editor. No special software is
required.
Eg:- notepad.
• Html is platform independent means html document can be created on any
hardware.
• Finding error is easy in html.
• Html does not cost you anything for its use.
• There are no expensive licenses to buy or no upgrades to purchase.
• You can work independently.
• You need not to worry about editing programs.
• You will have a much better concept of the structure of your page and
understanding of why it works.
• Learning html is simple than any other programming language.

Disadvantages of HTML
• Html is not a programming language.
• Any simple calculation cannot be done in html.
• It cannot display even date.
• Also interactive web pages cannot be built by html.
• The web pages developed in html cannot behave like an application.
• The web pages developed in html do not have their own interface.
• Hyper link provided in html but for that we need a trip to server at each step.

Tag
• It is unit of markup.
• It is set of symbols defines in html to have special meaning.
• Html tags start with a less than sign(<) followed by keywords and ends with greater
than sign(>).
These symbols are also called as angle bracket.
• The tags are not displayed in web browser but their effect is displayed.
Syntax:- <keyword>
Eg:- <html>
• There are two types of tags
1. Start tag
2. End tag
1. Start tag:-
It is used to start an effect of tag. Eg:- <html>
2. End tag:-
End tag repeat the keyword with forward slash(/). It is used to end an effect of tag.
Eg:- </html>

Nesting of tags
Nesting of tag means tag within tag. Tags can be nested within each other.
Eg:- <b><i>computer science</i></b>
In above example observe that italic tag completely within bold tag.

Tag Attribute
Attribute is a keyword separated by a space within angle bracket.
It affect on behavior of tag.
Eg:- <hr no shade>
Some attributes require a value preceded by an equal sign.
Eg:- <p align=”left”>

Essentials of a web page


Every web page needs eight html tags. That are:
1. <Html>
It is used to display web page in web browser.
The document enclosed within starting tag <html> and closing tag </html>
2. <head>
It defines the header area of page, which is not displayed within page itself.
It supports to <title> tag.
It having starting tag <head> and closing tag </head>
3. <title>
It is used to give title to web page which is displayed in the title bar of the web
browser.
It having starting tag <title> and closing tag </title>
4. <body>
It is used to display actual content of the web page.
It having starting tag <body> and closing tag </body>

Structure of html web page/ Structure of html document


<html>
<head>
<title>
Title of the web page
</title>
</head>
<body>
Actual content of the web page
</body>
</html>
Html tags

➢ <p> tag (paragraph)


It is used to create paragraph on web page.
The data enclosed within starting tag <p> and ending tag </p>.
Eg:- 1. <p>computer science </p>
O/P:-
computer science
2. <p>this is first paragraph </p><p>this is second paragraph</p>
O/P:-
this is first paragraph
this is second paragraph

• Attributes
1. align:-
It allows you to specify where the text or data appear on screen.
There are three alignments left, center and right.
Eg:- <p align=”right”>computer science</p>
O/P:-
computer science

➢ <br> tag (break line)


It is used to break the line.
It does not have closing or ending tag.
Eg:- <p>this is first line<br>this is second line</p>
O/P:-
this is first line
this is second line
• Attributes
1. clear all:-
It is used only with image tag.
It allows you to clear data appears next to image.
Eg:- <img src=”image path”><br clear all>
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”><br>Tulip
flower.
O/P:-

Tulip flower
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”><br clear
all>Tulip flower.
O/P:-

Tulip flower
➢ <hr> tag (horizontal rule)
It is used to divide the web page into separate sections.
It does not have closing or ending tag.
Eg:- <p>this is first line<hr>this is second line</p>
O/P:-
this is first line

this is second line


• Attributes
1. size:-
It is used to increase size i. e. thickness of horizontal line.
Eg:- <hr size=”7”>
2. width:-
It is used to specify width of horizontal line.
Eg:- <hr width=”30%”>
3. no shade:-
It is used to display without shaded horizontal line.
Eg:- <hr no shode>
Note:- you can use all attributes of tag together.
Eg:- <hr size=”7” width=”30%” no shade>

➢ Heading level tags (Hierarchy of heading level tags)


There are six heading level tags in html from <h1> to <h6>.
First level heading is displayed in larger and bolder font than other heading and sixth level
heading is displayed in smaller font than other headings.
Eg:- <h1>Computer Science</h1>
<h2>Computer Science</h2>
<h3>Computer Science</h3>
<h4>Computer Science</h4>
<h5>Computer Science</h5>
<h6>Computer Science</h6>
O/P:-
Computer Science
Computer Science
Computer Science

Computer Science

Computer Science

Computer Science

• Attributes
1. align:-
It allows you to specify where the heading appears on screen.
There are four alignments left, center, right and justify.
Eg:- <h5 align=”left”>computer science</h5>
O/P:- Computer Science

➢ <b> tag (bold)


It is used to display data in bold format.
The data enclosed within starting tag <b> and ending tag </b>.
Eg:- <b>computer science</b>
O/P:-
computer science

➢ <i> tag (italic)


It is used to display data in italic format.
The data enclosed within starting tag <i> and ending tag </i>.
Eg:- <i>computer science</i>
O/P:-
computer science

➢ <u> tag (underline)


It is used to display underline with data.
The data enclosed within starting tag <u> and ending tag </u>.
Eg:- <u>computer science</u>
O/P:-
computer science

➢ <address> tag (address)


It is used to display web page information such as page URL(uniform resource locator).
The data enclosed within starting tag <address> and ending tag </address>.
Eg:- <address>www.facebook.com</address>
O/P:-
www.facebook.com

➢ <pre> tag (preformatted text)


It is used to display data in monospace form.
The data enclosed within starting tag <pre> and ending tag </pre>.
Eg:- <pre> computer science</pre>
O/P:-
computer science

➢ <strong> tag (strong)


It is used to display data in bold format.
The data enclosed within starting tag < strong > and ending tag </strong>.
Eg:- <strong>computer science</strong>
O/P:-
computer science
➢ <em> tag (emphasis)
It is used to display data in italic format.
The data enclosed within starting tag <em> and ending tag </em>.
Eg:- <em>computer science</em>
O/P:-
computer science

➢ <sub> tag (subscript)


It is used to display data in subscript format.
The data enclosed within starting tag <sub> and ending tag </sub>.
Eg:- H<sub>2</sub>O
O/P:-
H2O

➢ <sup> tag (superscript)


It is used to display data in super script format.
The data enclosed within starting tag <sup> and ending tag </sup>.
Eg:- X<sup>2</sup>
O/P:- 2
X

➢ <big> tag (big)


It is used to display data in larger font.
The font size is same as +1 font size.
The data enclosed within starting tag <big> and ending tag </big>
Eg:- <big>computer science</big>
O/P:-
computer science

➢ <small> tag (small)


It is used to display data in smaller font.
The font size is same as -1 font size.
The data enclosed within starting tag <small> and ending tag </small>.
Eg:- <small>computer science</small>
O/P:- computer science

➢ <strike> tag or <s> tag (strike)


It is used to draw line through middle of the data.
The data enclosed within starting tag <strike> and ending tag </strike>.
Eg:- <strike>computer science</strike>
O/P:-
computer science
Q. Write HTML code to display your personal information such as name, address, contact
number, date of birth and e-mail address.
<html>
<head>
<title>title</title>
</head>
<body>
<p>
<h1>Personal Information</h1>
<hr>
<b>Name: Utkarsh Jadahv</b><br>
<b>Address: <i>Aurangabad</i></b><br>
<b>Contact No.: <u>8080808080</u><br>
<big>Date of Birth:</big><small>21 April</small>
<pre>utkarshj@gmail.com</pre>
</p>
</body>
</html>

O/P:-
Personal Information
Name: Utkarsh Jadahv
Address: Aurangabad
Contact No.: 8080808080
Date of Birth:21 April
utkarshj@gmail.com

➢ List tags
There are three types of list in html.
1. Unordered list
2. Ordered list
3. Definition list

1. Unordered list (<ul> tag)


It uses bullets to display list.
Lists can be preceded by one of the several bullet styles like a closed circle (•), open
circle (°) or square (∎).
It having starting tag <ul> and ending tag </ul>
Eg:- <ul>
<li>monitor
<li>printer
<li>speaker
</ul>
O/P:-
• monitor
• printer
• speaker

• Attribute
1. type:-
It allows you to specify type of bullet.
There are three types of bullet disc (•), circle (°) and square (∎).
Eg:- <ul type=”circle”>
<li>monitor
<li>printer
<li>speaker
</ul>
O/P:-
o monitor
o printer
o speaker

• Attribute of <li> tag with unordered list.


1. type:-
It allows you to specify type of bullet.
There are three types of bullet disc (•), circle (°) and square (∎).
Eg:- <ul>
<li>monitor
<li type=”circle”>printer
<li>speaker
</ul>
O/P:-
• monitor
o printer
• speaker

2. Ordered list (<ol> tag)


It uses alphanumeric numbers to display list.
List can be preceded by numbers, Arabic numbers, upper or lower case Roman
numbers, or upper or lower case alphabets.
It having starting tag <ol> and ending tag </ol>
Eg:- <ol>
<li>monitor
<li>printer
<li>speaker
</ol>
O/P:-
1. monitor
2. printer
3. speaker

• Attribute
1. type:-
It allows you to specify type of number.
There are following types of numbers:
type=”1” (Numbers)
type=”I” (Arabic numbers)
type=”i” (Lower case Roman numbers)
type=”I” (Upper case Roman numbers)
type=”a” (Lower case alphanumeric)
type=”A” (Upper case alphanumeric)

Eg:- <ol type=”I”>


<li>monitor
<li>printer
<li>speaker
</ol>
O/P:-
I. monitor
II. printer
III. speaker

2. start:-
It allows you to specify beginning of lists number sequence.
Eg:- <ol start=”3”>
<li>monitor
<li>printer
<li>speaker
</ol>
O/P:-
3. monitor
4. printer
5. speaker
• Attribute of <li> tag with ordered list.
1. value:-
It allows you to specify a certain number to a particular list item.
Eg:- <ol>
<li>monitor
<li>printer
<li value=”10”>speaker
</ol>

O/P:-
1. monitor
2. printer
10. speaker

3. Definition list (<dl> tag)


It is used to give description of terms.
It display lists without using bullets.
It having starting tag <dl> and ending tag</dl>
It uses three different tags:
1. <dl> definition list
2. <dt> definition term:- used to display term i.e name or title of the element you
are defining.
3. <dd> definition description:- used to display definition themselves (definition of
element).
Eg:- <dl>
<dt> term A
<dd>definition of A
<dt> term B
<dd>definition of B
</dl>
O/P:-
term A
definition of A
term B
definition of B

Q. Write html code for following output.

Breakfast menu---------h4
• Bread
• Cheese
• Eggs
• milk
<html>
<head>
<title>title</title>
</head>
<body>
<h4>breakfast menu</h4>
<ul type=”disc”>
<li>bread
<li>cheese
<li>eggs
<li>milk
</ul>
</body>
</html>

Q. Write html code for following output.

Breakfast menu---------h4
• Bread
o Milk bread
o Brown bread
• milk

<html>
<head>
<title>title</title>
</head>
<body>
<h4>breakfast menu</h4>
<ul type=”disc”>
<li>bread
<ul type=”disc”>
<li>milk bread
<li>brown bread
</ul>
<li>milk
</ul>
</body>
</html>

Q. Write html code for following output.


Input devices
a. mouse
b. keyboard
c. switches
d. scanners
1. flatbed
2. handheld
<html>
<head>
<title>title</title>
</head>
<body>
<u>Input devices</u>
<ol type=”a”>
<li>mouse
<li>keyboard
<li>switches
<li>scanners
<ol>
<li>flatbed
<li>handheld
</ol>
</ol>
</body>
</html>

Q. Write html code for following output.


Input devices
a. mouse
b. keyboard
c. scanners

Output devices
7. monitor
8. printer
9. speaker

<html>
<head>
<title>title</title>
</head>
<body>
<b><u>Input devices</u></b>
<ol type=”a”>
<li>mouse
<li>keyboard
<li>scanners
</ol>
<hr>
<ol start=”7”>
<li>monitor
<li>printer
<li>speaker
</ol>
</body>
</html>

Q. Write html code for following output.


Input/Output devices
a. mouse
b. keyboard
c. scanners
1. monitor
2. printer
3. speaker

<html>
<head>
<title>title</title>
</head>
<body>
<b><u>Input/Output devices</u></b>
<ol type=”a”>
<li>mouse
<li>keyboard
<li>scanners
</ol>
<ol>
<li>monitor
<li>printer
<li>speaker
</ol>
</body>
</html>

Q. Draw output of following html code.


<html>
<head>
<title>title</title>
</head>
<body>
<dl>
<dt> Software
<dd>It is <b>interface</b> between user and computer hardware.
<dt> Hardware
<dd>It is <u>physical component</u> of a computer or other electronic
system.
</dl>
</body>
</html>

➢ <font> tag (font)


It is used to format data i.e. used to change size, face and color of the data using three
attributes size, face and color.
The data enclosed within starting tag <font> and ending tag </font>.

• Attributes.
1. size:-
It allows you to specify size of the data ranging from +1 to +7.
+7 size is displayed in larger and bolder font than other sizes and +1 size is
displayed in smaller font than other sizes.
Eg:- <font size=”+1”>computer science</font>
O/P:-
computer science

2. face:-
It allows you to specify typeface of the data.
We can use single typeface from list of typefaces, such as arial, cambria, etc.
Eg:- <font face=”arial”>computer science</font>
O/P:-
computer science

Also you can use more than one typeface from list of typefaces separated by
commas. The available available typeface will be used to display and if font face
is not available the face will appear.
Eg:- <font face=”arial,cambria”>computer science</font>
O/P:-
computer science

3. color:-
It allows you to specify color to the data.
We can use RGB value of color or color name.
Eg:- <font color=”red”>computer science</font>
O/P:-
computer science

➢ <a> tag (anchor)


It is used to create link or hyperlink
The data within the anchor tag will displayed in a different color and with underline.
The data enclosed within starting tag <a> and ending tag </a>
Eg:- <a href=”E:\12thcs\next.html”>next_page</a>
O/P:-
next_page
• Attributes.
1. href:-
It is used to give hyper reference or address of the web page which we want to
link.
It is compulsory attribute of anchor tag.
Eg:- <a href=”E:\12thcs\next.html”>next_page</a>

2. target:-
As linked web page displayed in same browser, original contents of the browser
disappears. In such a case we can use target attribute.
It is used to display linked web page in another frame or new tab.
Eg:- <a href=”E:\12thcs\next.html” target=”anotherframe”>next_page</a>

3. name:-
It is used create links within the same page.
Eg:- <a href=”#address”>address</a>

• Types of hyper links


1. Link to document located in different directory:-
Eg:- <a href=”E:\12thcs\next.html”>next_page</a>

2. Link to page on the world wide web:-


Eg:- <a href=”www.google.com”>Google</a>

3. Link to an image or a document by images as a link:-


Eg:- 1. <a href=” C:\Users\Public\Pictures\SamplePictures\rose.jpg”>
<img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”></a>
Eg:- 2. <a href=”E:\12thcs\next.html”>
<img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”></a>
O/P:-

➢ <marquee> tag (marquee)


It is used to scroll or roll data horizontally on the web page.
The data enclosed within starting tag <marquee> and ending tag </marquee>
Eg:- <marquee>computer science</marquee>
O/P:-
computer scie

• Changing color scheme or Attributes of <body> tag


1. bgcolor
It is used to set background color of body section.
Eg:- <body bgcolor=”blue”>
2. backgound
It is used to set background image to body section.
Eg:- <body background=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”>

3. text
It is used to specify color to the text of body section.
Eg:- <body text=”yellow”>

4. link
It is used to specify color to the links.
Eg:- <body link=”red”>

5. alink
It is used to specify color of active links.
Eg:- <body alink=”olive”>

6. vlink
It is used to specify color of visited links.
Eg:- <body vlink=”maroon”>

• RGB color code


- RGB means red, green and blue.
- By mixing of these three primary colors it is possible to generate any color.
- It uses six digit hexadecimal numbers in which first two digits specify an
amount of red, next two digits specify an amount of green and last two digits
specify an amount of blue.
Eg:- #FF 00 00 (code for red)
#00 FF 00 (code for green)
#00 00 FF (code for blue)
#00 00 00 (code for black)
#FF FF FF (code for white)
#FF FF 00 (code for yellow, mixing of maximum red and maximum green)
- There are 16 colors in html. They are Black, Silver, Blue, Gray, White, Maroon,
Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Teal and Aqua.

➢ <img> tag (image)


- It is used to insert image in the body section.
- It is also called as inline images because the image inserted within a line of body
text. Because image is a text level element, it should be nested inside a
paragraph or other block level container, and it does not start a next paragraph
automatically.
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”>
O/P:-
- To make an image appear as a separate paragraph, enclose it within paragraph
element as:
Eg:- <p>
<img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”>
</p>

• Attributes

1. src (source) :-
It is used to give path or address of image. It is compulsory attribute of image
tag.
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”>

2. border :-
It is used to give border to the image.
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”
border=”1”>
O/P:-

3. alt :-
It is used to give alternate text to the image tag and it displays when roll mouse
over the image. Sometime it uses instead of image.
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg” alt=”Tulip
Flowers”>
O/P:-

4. align :-
It is used to align image over the web page.
There are three vertical alignments top, middle and bottom and
two horizontal alignments used to float images that are left and right.
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”
align=”top”>

5. height :-
It is used to specify height of image. It is given in number of pixel.
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”
height=”500”>
O/P:-
6. width :-
It is used to specify width of image. It is given in number of pixel.
Eg:- <img src=”C:\Users\Public\Pictures\SamplePictures\Tulips.jpg”
width=”500”>
O/P:-

• Image formats
1. GIF (Graphic Interchange Format)
2. PNG (Portable Network Graphic)
3. JPEG (Joint Photographic Expert Group)

➢ <table> tag (table)


It is used to insert table in the body section.
It having starting tag <table> and ending tag</table>

• Attributes
1. border
It is used specify border to the table.
Eg:- 1. <table> 2. <table border=”1”>
O/P:- 1 2 1 2
3 4 3 4

2. align
It is used to align the table horizontally.
There are three alignments left, center and right.
Eg:- <table align=”right”>
O/P:-
1 2
3 4

3. width
It is used to specify width of table.
Eg:- <table width=”30%”>
O/P:-
1 2
3 4

4. cellpadding
It is used to create space in between cell border and cell data.
Eg:- <table cellpadding=”3”>
O/P:-
1 2

3 4

5. cellspacing
It is used to create space in between each cell of the table.
Eg:- <table cellspacing=”3”>
O/P:-
1 2

3 4

➢ <tr> tag (table row)


It is used to create row of table.
It having starting tag <tr> and ending tag</tr>

➢ <th> tag (table heading)


It is used to create table headings.
It having starting tag <th> and ending tag</th>

➢ <td> tag (table data)


It is used to create each individual cell.
It having starting tag <td> and ending tag</td>

Q. Draw output of following html code.


<html>
<head>
<title>table</title>
</head>
<body>
<table border=”1”>
<tr>
<th>CS-1</th>
<th>CS-2</th>
</tr>
<tr>
<td>100 marks</td>
<td>100 marks</td>
</tr>
</table>
</body>
</html>
O/P:-
CS-1 CS-2
100 marks 100 marks

Q. Draw output of following html code.


<html>
<head>
<title>table</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Paper-I</th>
<th>Paper-II</th>
<th>Total</th>
</tr>
<tr>
<th>100</th>
<th>100</th>
<th>200</th>
</tr>
</table>
</body>
</html>

O/P:-
Paper-I Paper-II Total
100 100 200

• Attributes of <tr>,<th> and <td> tags


1. align
It is used to align data of single row or single cell horizontally.
There are three alignments left, center and right.
Eg:- <tr align=”right”>
<th align=”right”>
<td align=”right”>
O/P:-
100 100 200

2. valign
It is used to align data of single row or single cell vertically.
There are three alignments top, middle, bottom and baseline.
Eg:- <tr align=”middle”>
<th align=” middle”>
<td align=” middle”>
O/P:-
100 100 200

3. bgcolor
It is used to specify color to single row or single cell.
Eg:- <tr bgcolor=”blue”>
<th bgcolor=”blue”>
<td bgcolor=”blue”>
O/P:-
100 100 200

• Attributes of <th> and <td> tags


1. width
It is used to specify width of single cell.
Eg:- <th width=”200”>
<td width=”200”>
O/P:-
100 100 200

2. colspan
It is used to merge columns or cells.
Eg:- <th colspan=”2”>
<td colspan=”2”>
O/P:-
CS Total
100 100 200

3. rowspan
It is used to merge rows or cells of different rows.
Eg:- <th rowspan=”2”>
<td rowspan=”2”>
O/P:-
Paper-I Paper-II Total
100 100 200

➢ <caption> tag (caption)


It is used to create caption of the table.
It having starting tag <caption> and ending tag</caption>
Eg:- <caption>Computer Sciecne</caption>
• Attribute
1. align
It is used to align caption of table.
There are two alignments of caption top and bottom.
Eg:- <caption align=”bottom”>Computer Sciecne</caption>

Q. Draw output of following html code.


<html>
<head>
<title>table</title>
</head>
<body>
<table border=”1”>
<tr>
<th rowspan=”2”>Total<br>200</th>
<th>Paper-I</th>
<th>Paper-II</th>
</tr>
<tr>
<td align=”center”>100</td>
<td align=”center”>100</td>
</tr>
</table>
</body>
</html>

O/P:-
Total Paper-I Paper-II
200 100 100

Q. Draw output of following html code.


<html>
<head>
<title>table</title>
</head>
<body>
<table border=”1”>
<caption align=”top”>CS Marks</caption>
<tr>
<th colspan=”2”>Computer Science</th>
</tr>
<tr>
<th>Paper-I</th>
<th>Paper-II</th>
</tr>
<tr>
<td align=”center”>100</td>
<td align=”center”>100</td>
</tr>
</table>
</body>
</html>

O/P:- CS Marks

Computer Science
Paper-I Paper-II
100 100

Q. Write html code for following output.

Years
2017 2018 2019
Units 500 400 1000
Sales
Income 1000 800 2000

<html>
<head>
<title>table</title>
</head>
<body>
<table border=”1”>
<tr>
<th colspan=”2” rowspan=”2”></th>
<th colspan=”3”>Years</th>
</tr>
<tr>
<td>2017</td>
<td>2018</td>
<td>2019</td>
</tr>
<tr>
<th rowspan=”2”>Sales</th>
<th>Units</th>
<td align=”center”>500</td>
<td align=”center”>400</td>
<td align=”center”>1000</td>
</tr>
<tr>
<th>Income</th>
<td align=”center”>1000</td>
<td align=”center”>800</td>
<td align=”center”>2000</td>
</tr>
</table>
</body>
</html>

Q. Write html code for following output.

HSC/SSC Board

HSC SSC

<html>
<head>
<title>table</title>
</head>
<body>
<table border=”1”>
<tr>
<th colspan=”2”>HSC/SSC Board</th>
</tr>
<tr>
<th>HSC</th>
<th>SSC</th>
</tr>
</table>
</body>
</html>

Q. Write html code for following output.

Teamperature
City Wind
High Low
Aurangabd 30 20 South
Jalna 32 21 South
Parbhani 35 22 West
Weather’s Report
<html>
<head>
<title>table</title>
</head>
<body>
<table border=”1”>
<tr>
<th rowspan=”2”>City</th>
<th colspan=”2”>Temperature</th>
<th rowspan=”2”>Wind</th>
</tr>
<tr>
<th>High</th>
<th>Low</th>
</tr>
<tr>
<td align=”left”>Aurangabd</td>
<td align=”center”>30</td>
<td align=”center”>20</td>
<td align=”left”>South</td>
</tr>
<tr>
<td align=”left”>Jalna</td>
<td align=”center”>32</td>
<td align=”center”>21</td>
<td align=”left”>South</td>
</tr>
<tr>
<td align=”left”>Parbhani</td>
<td align=”center”>35</td>
<td align=”center”>22</td>
<td align=”left”>West</td>
</tr>
<caption aligh=”bottom”><b><u>Weather’s Report</u></b></caption>
</table>
</body>
</html>
VB Script
➢ <script> tag
It is used to add script code in html web page.
It can be written in head section as well as body section.
Eg:- <script language =”VBScript”>
Scripting code
</script>

Q. Write html code for displaying time and day. Make use of VB script.

<html>
<head>
<title>VBScript Code</title>
</head>
<body>
<script language =”VBScript”>
document.write(“Today’s Date is:”)
document.write(MonthName(Month(Now) & “/” & Day(Now) & “/” & Year(Now))
document.write(“The Time is:”)
document.write(“Time())
</script>
</body>
</html>

O/P:-
Today’s Date is: 11/7/2020
The time is: 9:35:56 AM

Note:- Above program shows current system date and time as a output.

Q. Write html code for displaying time and day. Make use of VB script.

<html>
<head>
<title>VBScript Code</title>
<script language =”VBScript”>
document.fgcolor=”h FF0000”
document.bgcolor=”h 00FF00”
msg box “Welcome to VBScript”
</script>
</head>
<body>
VBScript
</body>
</html>
O/P:-
---message box
Welcome to VBScript

VBScript ---body section

You might also like