Scribd
Upload
19 views88 pages

Chapter 4 HTML Notes

The document provides an introduction to HTML, detailing its purpose in building web pages and the advantages and disadvantages of using it. It explains the basic structure of HTML, various tags for formatting text, and attributes that modify tag behavior. Additionally, it covers practical examples of HTML code for creating personal and college web pages, as well as birthday invitations.

Uploaded by

aryanmoon063
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
19 views88 pages

Chapter 4 HTML Notes

The document provides an introduction to HTML, detailing its purpose in building web pages and the advantages and disadvantages of using it. It explains the basic structure of HTML, various tags for formatting text, and attributes that modify tag behavior. Additionally, it covers practical examples of HTML code for creating personal and college web pages, as well as birthday invitations.

Uploaded by

aryanmoon063
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/ 88

Introduction to HTML : ( Hypertext Markup Language )

• It is used to build web pages


• Web pages can be uploaded at web server
• By using the tool called internet browser we can access that web pages.
• Eg. Internet Explorer, Firefox, chrome
Advantages of HTML :
• No special software is required only need text editor. Eg. Notepad, In Windows
• HTML document can be created on any hardware platform using any text editor.
• If something is not working, then finding error is easy in HTML.
• HTML will not cost you anything for its use.
• Learning HTML is simple than any Programming Language.
Disadvantages of HTML :
• HTML is not a programming Language in true sense
• Any simple calculation cannot be done in HTML.
• It can not be used to display even date.
• The interactive web pages can not be built by HTML
• The web pages developed in HTML can not behave like an application.
• The web pages developed in HTML do not have their own interface
Basic structure of HTML / Essentials of Web page :
• <HTML> tag declares that the text that follows defines
<html> an HTML web page that can be viewed in a web
<head> browser.
<title> </title> • <HEAD> tag defines the header area of page, which
</head> is not displayed within the page itself in the browser.
<body> • <TITLE> tag : The text between this tag and end tag
</TITLE> is the title of the web page and is displayed
in the title bar of browser.
</body>
</html> • <BODY> tag : The actual contents of the web page
that will be displayed on browser will appear in body
section of document.
Study of tags
• A tag is unit of markup.
• It is set of symbols that defined in HTML to have special meaning.
• Every tag in HTML has a meaning and it is usually straight forward.
• There are two types of tags
• i) Start tag ii) End tag
• Eg. <HTML> <B> <SUB>

Less than sign


Keyword Greater than sign

• < > are known are angle brackets.


Formatting Text / Tags
• Addition of bold face, italic and underlining to the text gives additional emphasis
towards and phrases in the text. It is important in passing message to the
audience. HTML consist of different tags for formatting text.
<B>
• <B> is a bold tag
• <B> is start tag and </B> is an end tag.
• text enclosed between <B> and </B> will appeared in bold face / format.

Eg. <B> Good </B> Morning

Output : Good Morning


<I>
• <I> is a italic tag
• <I> is start tag and </I> is an end tag.
• text enclosed between <I> and </I> will appeared in italic face / format.

Eg. <i> Good </i> Morning


Output : Good Morning

<U>
• <U> is a Underline tag
• <U> is start tag and </U> is an end tag.
• It underline text enclosed between <U> and </U>

Eg. <U> Good </U> Morning


Output : Good Morning
<BR>
• <BR> is a break tag.
• It doesn’t have end tag. That’s why it is called as empty tag.
• It start new line in a web page without inserting extra space.
Eg. City Warora <BR> Pin code : 442907
Output:
City Warora
Pincode : 442907
<S> or <strike>
• <S> is a strike tag
• <S> is start tag and </S> is an end tag.
• text enclosed between <S> and </S> (or <strike> and <strike>) would have a line
drawn through the middle of text.
Eg. <S> Good Morning </S>
Output : Good Morning
<SUP>
• <SUP> is a Superscript tag
• <SUP> is start tag and </SUP> is an end tag.
• text enclosed between <SUP> and </SUP> will appeared in superscript format.
Eg. E = MC<SUP>2</SUP>
Output : E = MC2

<SUB>
• <SUB> is a Subscript tag
• <SUB> is start tag and </SUB> is an end tag.
• text enclosed between <SUB> and </SUB> will appeared in subscript format.

Eg. H<SUB>2</SUB>O
Output :H2O
<EM>
• <EM> is a emphasis tag
• text enclosed between <EM> and </EM> will appeared in italic face / format.
• This tag is used to emphasize text.

Eg. <EM> I have spoken </EM>


Output : I have spoken

<ADDRESS>
• <ADDRESS> is a address tag
• text enclosed between <ADDRESS> and </ADDDRESS> will appeared in italic
face / format.
• Similar to <I> tag except it will start new paragraph because it is a block level
tag.
Eg. <ADDRESS> Author : xyz </ADDRESS>
Output : Author : xyz
<STRONG>
• <STRONG> is a STRONG tag
• text enclosed between < STRONG > and </ STRONG > will appeared in bold
face / format.
• This tag is used to create strong emphasis.
Eg. <strong> I have spoken </strong>
Output : I have spoken
<HR>
• <HR> is horizontal rule / line tag
• It doesn’t have end tag.
• It insert single horizontal line in a web page.
• It is used to separate web page into sections.
• It is also used for decorative purpose.
Eg. Section 1 <HR>
Output :
Section 1
<PRE>
• <PRE> is preformat tag.
• Text enclosed between this tag will appeared in monospace format.
• It is also used to display data in tabular format.

Eg. <Pre>
Good morning class
Have a good day
</Pre>
Output :
Good morning class
Have a good day
Attributes
An attribute is a keyword separated by a space within angle brackets that affect the tag’s
behaviour.
Attributes of <HR> tag :
1. Color
Eg. <HR color = “RED”>
here value can be any color name like red, green,
tag space attribute value yellow etc.

2. size 4. align
Eg. <HR size = “5”> Eg. <HR align =“center”>
<HR align = “left”>
3. width
5. noshade
Eg. <HR width = “50%”>
<HR width = “50”> Eg. <HR noshade>
<P>
• <P> is paragraph tag.
• It is use to insert paragraph in a web page.
• Paragraphs are separated by extra line between them.

Eg. <P> This is a paragraph one </p>


<P>This is a paragraph two </p>
Output :
This is a paragraph one

This is a paragraph two


Attributes of <P> tag :
1. Align
Eg. <P align = “left”> <P align = “center”>
<P align = “right”> <P align = “justify”>
Heading tags / Hierarchy width headings
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>
<H1>
• <H1> is first level heading tag.
• Text enclosed between this tag will appeared in larger and bold font than its
lower level.
• It also start new paragraph. It’s a block level tag.

Eg. <H1> it’s Heading One</H1>


Output :
it’s Heading One
<H2>
• <H2> is second level heading tag.
• Text enclosed between this tag will appeared in larger and bold font than its
lower level and smaller than its higher level.
• It also start new paragraph. It’s a block level tag.
Eg. <H2> it’s Heading Two</H2>
Output :
it’s Heading Two
<H6>
• <H6> is lowest level heading tag.
• Text enclosed between this tag will appeared in bold and smaller than its higher
level.
• It also start new paragraph. It’s a block level tag.
Eg. <H6> it’s Heading Six</H6>
Output :
it’s Heading Six
Attributes of Heading tag :
1. Align
Eg. <H1 align = “left”>
<H2 align = “right”>
<H5 align = “center”>
<H6 align = “justify”>
<FONT>
• This is a font tag.
• <font> is a start tag and </font> is a end tag.
• It is used to format the size, typeface and color of the enclosed text.
Attributes of <FONT> tag : color, size, face
Eg. <font color =“red” face = “Bodoni MT Black” size = “+4”>
This line has color red
</font>
output:

This line has color red


Eg. <font size =“+2”> the size of text is 2 more than default size of browser’s
font</font>

output:
the size of text is 2 more than default size of browser’s font

Eg. <font face =“Algerian”> this line has Algerian font face </font>

output:
this line has algerian font face
<BIG>
• This is a big tag.
• <big> is a start tag and </big> is a end tag.
• The text enclosed between this tag will appeared in larger size
• It has same effect as <font size = “+1”>.
Eg. <BIG> This is a big tag </BIG>
Output:
This is a big tag
<SMALL>
• This is a small tag.
• <small> is a start tag and </small> is a end tag.
• The text enclosed between this tag will appeared in smaller size
• It has same effect as <font size = “-1”>.
Eg. <SMALL> This is a small tag </SMALL>
Output:
This is a small tag
<MARQUEE>
• This is a Marquee tag.
• <Marquee> is a start tag and </Marquee> is a end tag.
• Text enclosed between this tag will roll over horizontal line on web page from
right to left.
Eg.
<marquee> Today is Friday </marquee>
Output:
Today is Friday
Attributes of <Marquee>
1. Direction Values : left, right, up, down
2. Behavior Values : scroll, Slide, alternate
3. Loop Values : 1, 2, 3 etc.
4. Scrollamount Values : 10, 20, 300 etc. (in pixel)
5. scrolldelay Values : 1000, 500, 3000 etc. (in millisec)
<A>
• This is a Anchor tag.
• <A> is a start tag and </A> is a end tag.
• It is used to insert hyperlink in a web page.
Eg.
<A href = “http://www.google.co.in”>
Homepage
</A>
Output:
Homepage
Body attributes / Changing color scheme
• Text -> to change text color (Default color : Black)
• Link -> to change link color (Default color : Blue)
• Alink -> Active link -> Red
• Vlink -> Visited Link -> Purple / Violet
• Bgcolor -> Background color -> White
• Background -> Background Image

Color Names :
16 color names / values : BLACK, SILVER, GRAY, WHITE, MAROON, RED, PURPLE,
FUCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY BLUE, TEAL and AQUA
Body attributes / Changing color scheme
Color Names :
16 color names / values : BLACK, SILVER, GRAY, WHITE, MAROON, RED, PURPLE,
FUCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY BLUE, TEAL and AQUA
RGB Color Code :
R : RED Eg. color = “#9A 65 2D”
G : GREEN Red amount Green amount Blue amount
B : BLUE ( All values are in Hexadecimal numbers from 00 to FF )

“#FF0000” -> Red “#000000” -> Black


“#00FF00” -> Green “#FFFFFF” -> White
“#0000FF” -> Blue “#FFFF00” -> Yellow
Problem 4.1 Create a web page to display your personal information, such as Name,
address, phone number and date of birth.
( Que. Write exact output of the following HTML code with font specification in brackets. ) 5 Marks

<HTML> Date of Birth : 08-08 - 64


<HEAD> <I> SEE you Again </I>
<TITLE> Problem 4.1 </TITLE> <HR>
</HEAD> <CENTER> visit to <A HREF =
<BODY> "http://www.dnyanopasak.com">
<H1 ALIGN ="CENTER">PERSONAL INFORMATION dnyanopasak </A> </CENTER>
</H1> </BODY>
<HR> </HTML>
My name is, <B> PRAKASH KHANALE </B> <BR>
My Address is, <BR> Bank colony <BR>
Basmath Road <BR> Parbhani <BR>
Pin : 431401 <BR>
<I> Telephone : </I> 24240
<HR>
Problem 4.2 Create a web page of college consisting of information such as Name of
college , Address and courses offered by college .

<HTML>
<HEAD>
<TITLE> Problem 4.2 </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = "CENTER"> D.S.M. COLLEGE </H1>
<HR>
<H2 ALIGN ="CENTER"> ADDRESS P.B. No. 54 <BR>
PARBHANI ( MAHARASHTRA ) <BR>
PIN : 431401 INDIA <BR> </H2>
<H3 ALIGN ="CENTER"> COURSES : B.A. , B.COM , B.Sc. , M.Sc. , M.A.
</H3>
</BODY>
</HTML>
Problem 4.3 Write HTML code to create a web page for birthday invitation Make use of
color attributes .

<HTML> to be held on 8th August at 7.00 PM . Anyone


<HEAD> reading this page is invited , send me mail using
<TITLE> Birth Day </TITLE> the link below for more details.
</HEAD> </P>
<BODY BGCOLOR = "YELLOW" TEXT = "BLUE" LINK <CENTER> <FONT COLOR = "BLACK" SIZE = "4">
="MAROON" ALINK = "GREEN" VLINK = "BROWN"> <B> Look out ! </B> please bring a present for me
. </FONT>
<CENTER> </CENTER>
<H1> The Birth day Event </H1> <HR>
<FONT SIZE = “+5” FACE ="Helvetica"> <SMALL>
<I> And you're invited ! </I> <A HREF = "mail to : [email protected]"> Pbk
</FONT> </A>
</CENTER> <BR> copyright and copy ; 2001 PBK
<P> Please come to my <FONT COLOR = "PURPLE"> </SMALL>
<B> celebration of the Birth day </B> </FONT> </BODY>
</HTML>
Types of Links :
Link / Hyperlink-> Link is a pointer to another document.
Attributes : HREF , target and Name
Types :
1) Link to URL (Uniform Resource Locator)
Eg: http://www.google.co.in
<A href =“http://www.google.co.in”> Homepage </A>
2) Link to web pages. (Local Web pages)
Eg: mypage.html, page1.html etc.
<A href =“mypage.html”> Homepage </A>
3) Link to document/file.
Eg: pdf, images, word file etc.
<A href =“sample.pdf”> Homepage </A>
4) Link within a same page
<A href =“#bottom”> Homepage </A>
…..
<A Name = “bottom”> </A>
<IMG>
A visual element like graphics, images, pictures, photographs makes your web page
more compelling and gives unique look to the page. The Images can be added to web
page by using <IMG> tag and its many attributes.
• This is a Image tag.
• It doesn’t have a end tag.
• It’s a inline tag.
• It is used to insert image in a web page
Eg. <IMG src =“pic1.jpg”>
Attributes of image tag
SRC -> Give appropriate path of image.
ALT -> Display alternate text if image not displayed.
Align -> to set alignment of text with respect to image
Width and height -> to set width and height
Border -> to give border to image
Image as a link
Eg.
<A href = “http://www.google.co.in”>
<IMG src =“pic1.jpg”>
</A>

Image formats
1. JPG -> Joint picture/photographic group
2. JPEG -> Joint picture expert group
3. GIF -> Graphic interchange format
4. PNG -> Portable Network Graphics
5. BMP -> Bit map
Problem 4.4 Write a HTML code for creation of web page for T - Shirt company . Incorporate
image in webpage .
<P>
<HTML>
call us at ( 022 ) 111 - 4292.
<HEAD>
<I>
<TITLE> CAMBRIDGE T - SHIRTS COMPANY </TITLE>
<B> we're here to help ! </B>
</HEAD>
</I>
<BODY>
<IMG SRC = "images/tshirt.jpg" ALT = "T- Shirt ">
<H1> Welcome To Cambridge T-shirts! </H1>
</P>
<H2> Fabulous T - shirts Since 1955 </H2> our
<HR>
company <B> Cambridge's Fabulous T-Shirt-Company
<CENTER>
</B>, is your
why not visit <A HREF =
<B>
"http://www.yahoo.com"> yahoo </A> ?
<I> second-best-choice </I>
</CENTER>
</B >
</BODY>
for T-Shirts.
</HTML>
Write us at : <BR>
555, Desai Road <BR>
Mumbai-65
c) Write exact output of the following HTML Code with font specifications in brackets:

<HTML>
<BODY>
<H1 ALIGN =”CENTER”>H.S.C. BOARD EXAM </H1>
<P ALIGN =”CENTER”> <I>SUBJECT : COMPUTER SCIENCE </I> </P>
<P ALIGN=”CENTER”> <B>THEORY AND PRACTICALS </B> </P>
<P ALIGN= “CENTER”> <U>TOTAL </U> ________ 200 MARKS </P>
</BODY>
</HTML>
c) Write exact output of the following HTML Code with font specifications in brackets:

<HTML>
<HEAD>
<TITLE> INTRODUCTION
</TITLE>
</HEAD>
<BODY>
<H1> <B> PCMBEC </B> </H1>
<HR>
<U>NOBAL’S SERIES</U>
<H5>WELLKNOWN </H5>
</BODY>
</HTML>
HTML : LIST
There are main three types of list :
1. Unordered List <UL> : lists are bulleted
2. Ordered List <OL> : lists are numbered in some fashion
3. Definition List <DL> : lists consist of a term followed by its definition.
<LI>
• This is a list tag.
• <LI> is a start tag and </LI> is an end tag
• <LI> tag defines a list item
• It is used inside unordered list as well as ordered list
Eg. Output. Eg. Output.
<UL> • Item1 <OL> 1. Item1
<LI> Item 1 • Item2 <LI> Item 1 2. Item2
<LI> Item 2 <LI> Item 2
</UL> </OL>
Unordered List : <UL>
1. Unordered lists are bulleted.
2. Unordered list can be preceded by one of the several bullet style like a closed
circle / Disc ( ), an open circle / circle (O) or a square ( )
3. The tag for unordered lists are <UL> and </UL>
Eg. <UL> and <LI> have same set of attribute :
<UL> Type =“ Disc”
<LI> Apple </LI> Type =“Circle”
<LI> Google Type =“Square”
<LI> Microsoft
</UL>
The default appearance for unordered lists is with Disc ( )
Output
• Apple
• Google
• Microsoft
Ordered List : <OL>
1. Ordered lists are numbered in some fashion.
2. Ordered list can be preceded by Arabic numerals (1. 2. 3.), uppercase or
lowercase Roman numerals (i. ii. iii. / I. II. III ), or uppercase or lowercase
alphabetic characters (a. b. c. / A. B. C.)
3. The tag for Ordered lists are <OL> and </OL>
Eg. The default appearance for ordered lists is with
<OL> Arabic numerals (1. 2. 3.)
<LI> Apple </LI>
<LI> Google
<LI> Microsoft
</OL>
Output
1. Apple
2. Google
3. Microsoft
Attributes Ordered List <OL>
TYPE
Type = “1” (Arabic Numbers)
Type = “i” (Lowercase Roman Numbers)
Type = “I” (Uppercase Roman Numbers)
Type = ”a” (Lowercase Alphabets)
Type = ”A” (Uppercase Alphabets)
Eg. Eg.
<OL type = “a”> Output <OL type = “i”> Output
<LI> Apple a. Apple <LI> Apple i. Apple
<LI> Google b. Google <LI> Google ii. Google
<LI> Microsoft c. Microsoft <LI> Microsoft iii. Microsoft
</OL> </OL>
Attributes Ordered List <OL>
START
The start attributes allows you to establish the beginning of list’s number sequence.

Eg. Eg. Eg.


<OL start = “7”> <OL type = “a” start = “5”> <OL type = “i” start = “100”>
<LI> Apple <LI> Apple <LI> Apple
<LI> Google <LI> Google <LI> Google
<LI> Microsoft <LI> Microsoft <LI> Microsoft
</OL> </OL> </OL>

Output Output Output


7. Apple e. Apple c. Apple
8. Google f. Google ci. Google
9. Microsoft g. Microsoft cii. Microsoft
Attributes Ordered List <OL>
VALUE to make particular list item have certain number.
Eg. Eg.
<OL> <OL>
<LI> Apple <LI> Apple
<LI> Google <LI value = “12”> Google
<LI value = “12”> Microsoft <LI> Microsoft
</OL> </OL>

Output Output
1. Apple 1. Apple
2. Google 12. Google
12. Microsoft 13. Microsoft
Definition List : <DL>
1. The definition list elements uses <DL> start tag and </DL> end tag.
2. This list rendered without bullets.
3. <DT> tag is used for definition terms i.e. name / title of the item you are defining.
4. <DD> tag is used for the definition themselves.

Eg.
<DL> Output
<DT>Software Software
<DD>Software is a set of programs. Software is a set of programs.
Hardware
<DT>Hardware Physical component of computer
<DD>Physical component of computer.
</DL>
Nested List / Sublist
We can nest one list inside another list to create sublist.
Eg. Output
<UL> • Microsoft
<LI> Microsoft o Operating System
<UL>  Windows 10
<LI> Operating System  Windows 8
<UL>
<LI> Windows 10
<LI> Windows 8
</UL>
</UL>
</UL>
Nested List / Sublist
We can nest one list inside another list to create sublist.
Eg. Output
<OL> 1. Microsoft
<LI> Microsoft 1. Operating System
<OL> 1. Windows 10
<LI> Operating System 2. Windows 7
<OL>
<LI> Windows 10
<LI> Windows 8
</OL>
</OL>
</OL>
HTML : TABLE
HTML table mark up data that should be organised in table structure, instead of
in paragraph or other block level structure. With table you can present data organised
in rows and columns. One advantages of table is that your data is easier to read.
<TABLE>
• It’s a table tag.
• <table> is start tag and </table> is end tag.
• It is used to insert table in web page. Output :
Eg.
<Table border = “1”>
<tr> <tr> <tr>
<th> SN <td> 1. <td> 2.
<th> Name <td> abc <td> xyz
<th> DOB <td> 12-06-2006 <td> 08-07-2003
</tr> </tr> </tr>
<TABLE> tag and its subtags and attributes :
<caption>
• It’s a caption tag.
• <caption> is start tag and </caption> is end tag.
• It is used to create a caption on top or below the table.
• It can be used with ALIGN attributes. (Top is default value).
Eg. Output :
<Table border = “1”>
<caption align =“bottom”>
Fig. Student info
</caption>
<tr> <tr> <tr> Fig. Student info
<th> SN <td> 1. <td> 2.
<th> Name <td> abc <td> xyz
<th> DOB <td> 12-06-2006 <td> 08-07-2003
</tr> </tr> </tr>
<TR>
• It’s a table row tag.
• <tr> is start tag and </tr> is end tag.
• It creates a horizontal row of cells and contains table heading and table data.
• Each use of a table row (tr) begins a new table row.
<TH>
• It’s a table heading tag.
• <th> is start tag and </th> is end tag.
• It creates a table heading cells.
• By default table heading appears in bold and center align.
<TD>
• It’s a table data tag.
• <td> is start tag and </td> is end tag.
• It creates a table data cells.
• By default table heading appears in normal text format and left align.
Eg. Output :
<Table border = “1”>
<caption align =“bottom”>
Fig. Student info
</caption>
<tr>
<th> SN Fig. Student info
<th> Name
<th> DOB
</tr>
<tr>
<tr>
<td> 1.
<td> 2.
<td> abc
<td> xyz
<td> 12-06-2006
<td> 08-07-2003
</tr>
</tr>
Attributes of <TR>, <TH> and <TD>
Align : Valign : (Vertical alignment )
Align = “Left” Valign = “Top”
Align = “Center” Valign = “Middle”
Align = “Right” Valign = “Bottom”
The Default value for align is left. Valign = “Baseline”

Eg. The Default value for valign is Middle.


<tr align =“center”>
Eg.
<TH align =“left”> 1.
<tr Valign =“Top”>
<td align = “right”> abc
<TH Valign =“Bottom”> 1.
<td> 12-06-2006
<td align = “middle”> abc
</tr>
<td> 12-06-2006
</tr>
Attributes of <TR>, <TH> and <TD>
Bgcolor : Background
Bgcolor = “Color Name” Background = “Path of image with extension”
Bgcolor = “#RGB Code”
Eg.
Eg. <tr background = “photo.jpg”>
<tr bgcolor =“red”>
<TH bgcolor =“#ff569A”> 1.
<td Bgcolor = “green”> abc Width
<td> 12-06-2006 The width of individual cells can be set as :
</tr> Eg.
<th width = “100”>
<td width = “25”>
Attributes of Table tag
Border : To create cell border and tables border
Eg. Cellspacing To set space between each
<table border =“1”> neighbouring cells
Eg
Align : To set align of entire table <table cellspacing = “5”>
Eg.
<table align = “center”> Cellpadding To set padding with a cell.
(distance of data from cell
Width : To set width of table border)
Eg 1. Eg
<table width = “80%”> <table cellpadding = “5”>

Eg 2. Bodercolor To set border color


<table width = “250”> Eg
<table bordercolor =“red”>
Bgcolor : To set background color of entire table.
Eg.
<table bgcolor =“yellow”>

background : To set background image to entire table


Eg.
<table background = “wallpaper.jpg”>
Colspan and Rowspan : (Attribute : <Th> / <Td>)
These attributes can be used to make cells content merge with another cell.

Eg 1 .
Output
<Table border = “1”>
<tr>
<th rowspan = “2”> Information
<th> Name
<td>Vivek
</tr>
<tr>
<th> DOB
<td>1-09-2005
</tr>
</table>
Colspan and Rowspan : (Attribute : <Th> / <Td>)
These attributes can be used to make cells content merge with another cell.

Eg 2 .
Output
<Table border = “1”>
<tr>
<th colspan = “2”> Information
</tr>
<tr>
<th> Name
<th>DOB
</tr>
<td>Vivek
<td>1-09-2005
</tr>
</table>
Solution:
HTML general and List programs
(Total 21 programs)

(Note : If you find any mistake or irrelevant label in solution correct it by yourself.)
1. Write HTML code for the following output : (M-19)
My page _ X

ASCII code.

Solution :
<html>
<head>
<title> My page </title>
</head>
<body>
<p>
HTML is Hypertext
</p>
<p>
Markup language. The basic language of HTML is ASCII code.
</p>
<p>
This is only text oriented language.
</p>
<hr>
<UL type ="square">
<LI><u><B>One</B></u>
<LI><u><B>Two</B></u>
</UL>
<HR>
<OL>
<LI>One
<LI>Two
</OL>

</body>
</html>
2. Write exact output of the following HTML code : (M-19)
<html>
<Body>
<OL start = "10">
<li> English
<li> Second Language
</OL>
<OL type ="a">
<li> Compulsory
<li> Optional
</OL>
<UL type ="square">
<Li> Science
<Li> Arts
<Li> Commerce
</UL>
</Body>
</Html>

Solution :

Ordered list with default font and


size with start = “10”

Ordered list with type = “a”

Unordered list with type = “Square”


3. Write exact output of the following HTML code : (J-18)
<Html>
<Body>

<h1> <U> Services of


Operating System </U> </h1>

<UL type ="square">


<Li> Information Management
</Li>
<UL type ="circle">
<Li> File system </Li>
<OL>
<LI>Taped Based system
<LI> Disk Based system
</OL>
</UL>
<LI> Process Management</LI>
<LI> Memory Management</LI>
</UL>

</Body>
</Html>
Solution :

Text in <H1> tag with underlined

Unordered list with type = “square”


Unordered sublist (Nested list) with
default type

Ordered sublist (Nested list) with


default type
4. Write exact output of the following HTML code : (M-18)
<Html>
<Body>
<UL type ="Circle">
<Li> One
<Li> Two
<Li> Three
<UL type ="square">
<Li> Monday
<Li> Tuesday
<Li> Wednesday
</UL>
</UL>
</Body>
</Html>

Solution :

Unordered list with type = “Circle”

All text has default font and size

Unordered sublist with type = “square”


5. Write HTML code for the following output : (J-17)

Solution :
<Html>
<Head>
<Title> </title>
</head>
<Body>

<UL type ="Square">


<Li> Computer Science
<Li type = "disc"> Paper - I
<OL type ="i">
<Li> C++ language
<Li>HTML
<Li>OS
<LI>DS
</OL>
<LI type = "circle">Paper - II
<OL>
<Li> Microprocessor
<Li>Microcontroller
<Li>X86 Processors
<LI>Networking
</OL>

</UL>
</Body>
</Html>
6. Write exact output of the following HTML code with font specification in bracket : (M-17)
<Html>
<title> Introduction</title>
<Body>
<h1> <b> Computer Science </b></h1>
<hr>
<u> Paper - I </u>
<Hr>
<u> Paper - II </u>
</Body>
</Html> Web broswer
Title
Solution :

Introduction

Text in <H1> tag with


bold format
All text has default
font and size

Horizontal Rule <HR>

Underlined text
7. Write exact output of the following HTML code with font specification in bracket : (J-16)
<Html>
<Body>
<ul>
<li><i>This is in italic form </i></li>
<li><u> This is in underlined text</u></li>
<li><b> This is in BOLD Text</b></li>
<ul>
<li> This is List</li>
<li> ABC </li>
<li> XYZ </li>
</ul>
</ul>
</Body>
</Html>
Solution :
Unordered list with default type disc
Italic text
Underlined text
Bold text

Unordered sublist with default


type circle
8. Write HTML code for the following output : (M-16)

h1 and center

( The words click here act or hyperlinks to next page whose address is “c:\My
Documents\A1.HTML”)
Solution :
<html>
<head>
<title> </title>
</head>
<body>
<H1 align ="center"> COLLEGE</h1>
<HR>
Principal
<UL>
<li>Vice principal
<li>Professors
<li>Non-teaching staff
</UL>

for more details <A href ="C:\My Documents\A1.Html">click here</a>

</body>
</html>
9. Write exact output of the following HTML code with font specification in bracket : (O-15)
<HTML>
<HEAD>
<TITLE> ABC </TITLE>
</HEAD>
<BODY>
<HR>
<CENTER> COMPUTER SCIENCE </CENTER>
<HR>
<ol>
<LI> Operating System
<LI> Data Structure
<LI> C++
</ol>
<HR>
</BODY>
</HTML>
Solution : Web browser
Title

ABC

Text has center


alignment

Horizontal rule
<HR>

All text has default


font and size

Ordered list with


default type
10. Write a program in HTML for the following output : (M-15)

Solution :
<html>
<head>
<title> </title>
</head>
<body>
<OL type ="i">
<LI> Arts
<OL type ="A">
<LI> History
<LI> Geography
</OL>
<LI> Science
<OL type ="I">
<LI> Computer Science
<LI> Physics
</OL>
<LI> Commerce
<UL type ="circle">
<LI> Accounts
<LI> English
</UL>
</OL>
</Body>
</HTML>
11. Write exact output of the following HTML code with font specification in bracket:(M-14)
<HTML>
<BODY>
<H2> MY COUNTRY </H2>
<HR><BR>
<H1 ALIGN ="CENTER"> INDIA </H1>
<BR>
<UL>IS
<LI> GREAT
<LI> BEAUTIFUL
<LI> LOVING
</UL>
Here people care for each other
</BODY>
</HTML>
Web Browser
Solution : Title

Text has level 1


heading <h1>

Horizontal Rule
<HR>

Centered aligned
text with level 1
heading <h1>

Unordered list
with default type
disc

All text has default


font and size
12. Write exact output of the following HTML code with font specification in bracket:(O-13)
<Html>
<Body>
<dl>
<h2><b>Terms related to computer</b></h2>
<dl>
<dt> Protocols
<dd><b>Protocols</b> are rules by which communicates
<dt>Byte
<dd><b>Byte</b> is a group of 8 bit
</dl>
</dl>
</Body>
Web Browser
</Html> Title

Text has level 2


heading <h2>
and bold face

Definition lists
with terms and
definitions

Text has bold


face
13. Write exact output of the following HTML code with font specification in bracket:(M-13)
<html>
<body>
<h1 align ="centre">H.S.C. BOARD EXAM </h1>
<p align ="centre"><i>SUBJECT : COMPUTER SCIENCE </i></p>
<p align ="centre"><b>THEORY AND PRACTICALS</b></p>
<p align ="centre"><u>TOTAL</u> 200 MARKS </p>
</body>
Web Browser
</html> Title

Center aligned test with


level 1 heading <h1>

Paragraph with italic


format

Paragraph with
bold format

New paragraph and


underlined
14. Write a HTML code to display the following output : (O-12)
List of Books (Text size h1, default font is used)
o How to solve it By computer
o HTML in Easy steps
o C++ Programming
A. Microprocessor Programming text size is default
B. Networking Essentials
C. Microcontrollers

Solution :
<html>
<head>
<title> </title>
</head>
<body>
<h1> List of Books </h1>
<UL type = "circle">
<Li> How to solve it By computer
<Li> HTML in Easy steps
<Li> C++ Programming
<OL type ="A">
<Li> Microprocessor Programming
<Li> Networking Essentials
<Li> Microcontrollers
</OL>
</UL>
</body>
</html>
15. Write exact output of the following HTML code with font specification in bracket:(M-12)
<HTML>
<HEAD>
<TITLE> Computer Step </TITLE>
</HEAD>
<BODY>
<H2><U> Title : Megastar Company Ltd. </U></H2>
<P> Address : Surya Complex, Delhi </P>
<H4> <B> Deals In : </B></H4>
<UL>
<LI> Software
<LI> Hardware
<LI> Peripherals
</UL>
</BODY>
</HTML>
Title Web Browser
Solution :

Computer Step
Underlined text
with level 2
heading <H2>

Paragraph with
default font and
size

text with level 4


heading <H4>

Unordered list with


default type disc
16. Write HTML code to display the following nested list : (O-11)

Solution :
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<UL>
<LI>College
<OL type ="I">
<LI>Arts
<OL type ="a">
<LI>History
<LI>Politics
<LI>Languages
<OL type ="i">
<LI>English
<LI>Marathi
</OL>
</OL>
<LI>Science
<OL type ="a">
<LI>Physics
<LI>Chemistry
<LI>Biology
</OL>
<LI>Commerce
<UL type = "square">
<LI>Accounts
</UL>
</OL>
</UL>
</BODY>
</HTML>
17. Write exact output of the following HTML code with font specification in bracket:
<html>
<head>
<title> Introduction to Networking </title>
</head>
<body>
<H1 align ="center">Network connectivity Devices </h1>
<HR noshade>
<UL type ="circle">
<LI>Modem
<LI>Hub
<OL type ="a">
<LI> Repeater
<Li>Router
</OL>
</UL>
<HR color ="blue">
</body>
Web Browser
</html> Title

Introduction to Networking
Centered aligned
text with level 1
heading <h1>

Horizontal rule
with no shade

Unordered list
with type circle
Ordered sublist
with type “a”

Horizontal rule
with blue color
18. Write exact output of the following HTML code with font specification in bracket:
<HTML>
<HEAD> <TITLE> INTRODUCTION </TITLE> </HEAD>
<BODY>
<H1> <B> PCMBEC </B> </H1>
<HR>
<U>NOBAL’S SERIES</U>
<H5>WELLKNOWN </H5>
</BODY> Web Browser
Title
</HTML>

Introduction

Bold text with level 1


heading <h1>

Horizontal Rule

Underlined text

Text with level 5


heading <h5>
19. Write a HTML code to display the following output :

Solution :
<html>
<head>
<title> </title>
</head>
<body>
<h1 align ="center">Disha Sci., Arts & Com. Jr. College </h1>

<UL>
<LI> Branches
<OL>
<LI> science
<OL type ="A">
<LI> Math-Bio
<LI> Electronics
<LI> Computer science
</OL>
<LI> Arts
<LI> Commerce
</OL>
</UL>
</body>
</HTML>
20. Write exact output of the following HTML code with font specification in bracket:
<HTML>
<BODY>
<H1 align ="center">LIST OF BOOKS</H1>
<HR>
<UL TYPE ="CIRCLE">
<LI>C++ Programming
<LI TYPE ="SQUARE"> HTML in easy steps
<LI> How to solve it by computer
</UL>
<HR>
<OL START ="4">
<LI>Microprocessor Programming
<LI> Networking Essentials
<LI> Micro Controller
</OL>
</BODY>
</HTML>
Web Browser
Title

Level 1 heading with


center alignment

Horizontal rule
Ordered list with type circle
List element with type
square

Horizontal rule

Ordered list with default


type and start from “4”
21. Write exact output of the following HTML code with font specification in bracket:
<HTML>
<BODY>
<H1 ALIGN ="CENTER">LIST OF TOPICS</H1>
<HR>
<OL>
<LI> <P ALIGN ="LEFT">Operating Systems </P>
<LI> <P ALIGN ="LEFT">HTML </P>
<LI> <P ALIGN ="LEFT">Data Structures </P>
<LI> <P ALIGN ="LEFT">C++ Programming </P>
</OL>
<HR NOSHADE>
<UL>
<LI> <P align ="center"> COMPUTER SCIENCE </P>
</UL>
<HR>
</BODY>
</HTML>

Title Web Browser

Text with level 1 heading


and center aligned

Horizontal rule

Ordered list with default


type and list item with
new paragraph and left
aligned

Horizontal rule
without shade
Unordered list with
default type and list item
with new paragraph and
center aligned

Horizontal rule
1. Write code in HTML for following table : (M-20)
Subject Paper – I Paper – II

Computer Theory 50 50

Science Practical 50 50

HSC exam Scheme

2. Write code in HTML for following Output : (M-18)


Cricket Analysis
Country Played Won Lose

INDIA Theory 50 50

PAKISTAN Practical 50 50

3. Write code in HTML for following Output : (J-17)


Word Cup T20
IND PAK
Group A AUS ENG

WI NZ
Group B
SA SL

4. Write code in HTML for following table : (M-17)

Paper - I Paper - II Total


Computer Science
100 100 100

5. Write code in HTML for following table : (J-16)

Total Marks

Theory Practical

100 100
6. Write code in HTML for following table : (M-16)
Students
Year
Boys Girls Total
2004 25 30 55
2005 80 25 105
Record

7. Write code in HTML for following table : (O-15)

Tuesday

March
18
2006

Prev. Next

8. Write code in HTML for following table : (O-13)


Library Books
References Text Book
Section
2000 4000

9. Write code in HTML for following table : (M-13)

HTML COLOUR CODE


IN HEXA-DECIMAL

BLACK WHITE

# 000000 # FFFFFF
10. Write code in HTML for following table : (O-12)
Year
2007 2008 2009
Units 25 30 55
Sales
Income 80 25 105

11. Write code in HTML for following table : (M-12)


Roll. No. Name Marks Total
CS1 CS2
1. RINA 75 70 145
2. RONAK 80 90 710
3. TINA 70 85 155

12. Write code in HTML for following table : (O-11)


V.I.P SALES
ERASER 5
PENCIL 7
STATIONARY
PEN 10
BOOK 22
TOTAL 44

13. Write code in HTML for following : (O-11)


XII RESULT  test size H1

STREAM

SCIENCE COMMERCE Arts

SCIENCE is a link available where clicking on SCIENCE a web page file “SCIENCE.html” should be invoked, on
clicking COMMERCE a web page, file “COMMERCE.html” should be invoked and on clicking ART a web page file
“ART.html” should be invoked.
14. Write code in HTML for following : (O-09)
Year Students
Boys Girls Total
2006 55 75 130
2007 75 95 170
Record

15. Write code in HTML for following : (O-09)


Yuvraj 183*
IND 387
Sehwag 83

Peterson 58
ENG 238
Bopara 49

IND win 1st ODI by 149

16. Write code in HTML for following : (M-09)


Sr. No. Student Marks Obtained Total
Name Test-1 Test-2 Test-3
1 XYZ 150 150 125 425
2 LMN 129 130 131 390
3 XYZ 115 125 120 360

17. Write code in HTML for following : (O-08)

HSC Board Exams

Computer Science 1. Paper - I


2. Paper - II

● 200 Marks
18. Write code in HTML for following : (J-18)
RESULT
JEE CET

If any enquiry Click here.


Hint :
i) JEE is link to open a WebPage JResult.html
ii) CET is link to open WebPage CResult.html
iii) Click here is a link to open website www.jeemain.nic.in

19. Write the exact output of the following HTML code with font specification. (M-20)
(Note : here code is given for which output is required along with link details as mentioned)
<Html>
<Body>
<TABLE border ="3" cellspacing = "10">
<TR>
<TH colspan ="3"> STREAM </TH>
</TR>

<TR>
<TD> <A href = "Science.html">SCIENCE</A></TD>
<TD> <A href = "Commerce.html">COMMERCE</A></TD>
<TD> <A href = "Arts.html">ARTS</A></TD>
</TR>
</TABLE>
</Body>
</Html>
20. Write the exact output of the following HTML code with font specification. (J-19)
<HTML>
<BODY>
<HEAD>
<TITLE> Match Summary </TITLE>
</HEAD>
<BODY>
<TABLE border ="1" cellspacing = "15" cellpadding ="15">
<TR>
<TH Rowspan ="2"> IND <BR>
335 / 4 </TH>
<TD>Virat</TD>
<TD>185</TD>
</TR>
<TR>
<TD>Sharma </TD>
<TD>90</TD>
</TR>
<TR>
<TH Rowspan ="2"> AUS <BR>
280 </TH>
<TD>Warner</TD>
<TD>90</TD>
</TR>
<TR>
<TD>Smith </TD>
<TD>90</TD>
</TR>
</TABLE>
</Body>
</Html>
21. Write the exact output of the following HTML code with font specification. (M-15)

<HTML>
<HEAD>
<TITLE> abc </TITLE>
</HEAD>
<body>
<H1 align ="center"> KBC Restaurant </H1>
<TABLE border = "2">
<TR>
<TH Rowspan ="2"> <Font Size ="5"> Pawbhaji </font> </TH>
<TH>with cheese </TH>
<TH>35
</TR>
<TR>
<TH> without cheese
<TH> 25
</TR>
</TABLE>
</Body>
</HTML
22. Write the exact output of the following HTML code with font specification. (O-07)
<HTML>
<BODY>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE border ="2" width ="50%">
<TR>
<TD width ="100%" Colspan ="2">
<H1 align ="center">HSC Board Exam </H1>
</TD>
</TR>
<TR>
<TD width ="50%" align ="center">
<u>
Paper - I </u> </TD>
<TD width ="50%" align ="center"> <u>
Paper - II </u> </TD> </TR>
<TR>
<TD width ="50%">
<P align ="center"> <i>50 Marks </i></TD>
<TD width ="50%" align ="center">
<i> 50 Marks </i> </TD>
</tr>

</TABLE>
</Body>
</Html>

You might also like