Chapter-5
HTML Fundamentals
Q1. What is HTML ?
A1. HTML stands for Hyper Text Markup Language used for creating web pages. It
describes the structure of webpages. It consists of series of HTML elements which tell
the browser how to display the content. HTML is a Markup Language which means
you use HTML to simply “mark-up” a text document with tags that tell a Web
browser how to structure it to display. HTML document is made up of elements called
Tags and Attributes.
Q2. What is Tag and Attributes?
A2. Tag : It is a coded HTML command that indicates how parts of web pages should
be displayed. All HTML tags are contained with angle brackets( <> ). HTML
tags are case insensitive. There are two types of HTML tags : Container Tag
and Empty Tag. Container tag require a starting as well as ending tag e.g.
<b>… </b>. Empty tags require just a starting tag and not an ending tag e.g.
<br>, <hr> , <img>
Attributes : An attribute is special word used inside tag to specify additional
information to tag such as color, size, alignment etc.
Q3. Write steps to create and save a HTML document?
A3. If you are using Notepad to create a HTML document the steps are as follows :
i. Step – 1 : Open Notepad by clicking at Start All Program Accessories-> Notepad
ii. Step-2 : Type the HTML document in Notepad
iii. Step-3 : To save the document click at File Menu Save as command
iv. Step-4 : The Save as dialog box will appear.
v. Step-5 : In the save as dialog box, after selecting the desired folder, give the
desired file name along with extension as .htm or .html in file name box and then click
on save button.
Q4. Write steps to view HTML document in browser?
A4. To view HTML document steps are as follows :
i. Step-1 : Open Internet Explorer by Clicking at
StartAll ProgramsInternet Explorer
ii. Step-2 : To open the document [Link], select File MenuOpen
iii. Step-3 : The Open dialog box will appear.
iv. Step-4 : Click the browse button. The Microsoft Internet Explorer dialog box
will appear and select the [Link]
v. Step-5 : Click on open button and then Click on OK button.
vi. Step-6 : Output will be displayed.
32
Q5. Explain the basic structure of the HTML Page?
A5. A basic concept of programming is to present the code in a very structured format.
The basic structure of HTML document is :
i. The <HTML> Tag : It represents the root of an HTML document. It acts
as a container for all other HTML elements. It informs the browser that it is
dealing with an HTML document. E.g.
<HTML>
</HTML>
ii. The <HEAD> tag : It is a container for all the header elements. It contains
information about the document including its title and document description.
The content contained in the head section of your document provides
information to the browsers and search engines but, it is not displayed directly
on the web page.
E.g
<HTML><HEAD> Header information comes here</HEAD></HTML>
iii. The <TITLE> Tag : This tag contains the title of the document. Title
Title must be a simple text and should not be same as the file name.
e.g.
<HTML><HEAD><TITLE> This is the title of my pages.
</TITLE></HEAD></HTML>
iv. <BODY> Tag :- This tag defines the document’s body. It is used to set
basic page characteristics. It contains all the necessary contents of a HTML
document such as text, hyperlinks, images, tables, lists etc.
e.g.
<HTML><HEAD><TITLE> This is the title of my pages.
</TITLE></HEAD>
<BODY> Hello everybody.</BODY><?HTML>
33
Q6. Name and explain various attributes of <BODY> Tag?
A6. The various attributes of <BODY> tag are :
i. Background : this attribute specifies a background image for a document
HTML supports various graphics format such as .gif , .jpg etc.
Syntax :
<BODY background=”URL”>
Where URL may be an image or a path of an image.
Example :
<HTML><HEAD><TITLE> Background Image</TITLE></HEAD>
<BODY background=”[Link]”>
</BODY></HTML>
ii. BGCOLOR : This attribute specifies the background color of a
document.
Syntax :
<BODY BGCOLOR=”colorname|hex_number|rgb_number”>
Example :
<HTML><HEAD><TITLE> Background color</TITLE></HEAD>
<BODY BGCOLOR=”red”>
</BODY></HTML>
iii. Text : This attribute specifies the color of the text in a document.
Syntax :
<BODY text=”colorname|hex_number|rgb_number”>
Example :
<HTML><HEAD><TITLE> TEXT</TITLE></HEAD>
<BODY text=”red”> Arihant Publication
</BODY></HTML>
iv. Link : This attribute specifies the color of an unvisited link in document. The
default color of link attribute is blue(#0000FF)
Syntax :
<BODY link=”colorname|hex_number|rgb_number”>
Example :
<HTML><HEAD></HEAD>
<BODY link=”red”>
</BODY></HTML>
v. Alink : This specifies the color of an active link in a document( a link get
activated when it is clicked). The default color of an link is red(#FF0000).
Syntax :
<BODY alink=”colorname|hex_number|rgb_number”>
Example :
<HTML><HEAD><TITLE></TITLE></HEAD>
<BODY alink=”blue”>
</BODY></HTML>
34
vi. Vlink : this specifies the color of a visited link in a document. The
default color of vlink attribute is purple(#800080)
Syntax :
<BODY vlink=”colorname|hex_number|rgb_number”>
Example :
<HTML><HEAD><TITLE></TITLE></HEAD>
<BODY vlink=”blue”>
</BODY></HTML>
vii. Leftmargin : this sets a left hand margin(distance between the left side of the
document and the left edge of the browser window) of your body element.
Syntax :
<BODY leftmargin=”value”>
Example :
<HTML><HEAD><TITLE> left margin</TITLE></HEAD>
<BODY leftmargin=”65”>
Arihant books are one of the best competitive books.
</BODY></HTML>
viii. Topmargin : this sets top margin(distance between top of the document and
the top of the browser window) of your body element.
Syntax :
<BODY topmargin=”value”>
Example :
<HTML><HEAD><TITLE> top margin</TITLE></HEAD>
<BODY topmargin=”65”>
Arihant books are one of the best competitive books.
</BODY></HTML>
Q7. Write a short note <FONT> Tag?
A7. <FONT> Tag : This tag specifies the font face, font size and font color of the
text. This tag is generally used for changing the appearance of a short segment of text.
It can be set for a character, sentence or entire document.
35
Q8. Give attributes of <FONT> Tag with example?
A8. Attributes of <FONT> Tag are as follows :-
i. Size : This attribute specifies the size of the text inside a <FONT> tag. The
range of accepted value goes from 1(the smallest) to 7(the largest). We can also set
the relative size to the current size using(+)ve or (-) ve
Syntax :
<FONT size =”number”>
Example :
<HTML><HEAD><TITLE> Font Size</TITLE></HEAD>
<BODY>
<FONT size=”4”> This is the default size</FONT></BODY></HTML>
ii. Color :- This attribute specifies the color of the text inside a <FONT> tag.
Syntax :
<FONT color =”color_name| hex_number| rgb_number”>
Example :
<HTML><HEAD><TITLE> Font Color</TITLE></HEAD>
<BODY>
<FONT color=”red”> This is the default size</FONT></BODY></HTML>
iii. Face : This attribute specifies the font name or type face of the text inside a
<FONT> tag.
Syntax :
<FONT face =”font_family”>
Example :
<HTML><HEAD><TITLE> Font Face</TITLE></HEAD>
<BODY>
<FONT face=”Times New Roman”> This is the default
size</FONT></BODY></HTML>
Q9. What is <BASEFONT> tag?
A9. <BASEFONT> tag :This tag specifies default font supported color, font size or font
family for all the text in document that follows it, which is only supported by Internet
Explorer Web browser.
36
Q10. Give attributes of <BASEFONT> tag?
A10. The various attributes of <BASEFONT> tag are as follows :
i. Color : This attribute specifies the color of the text inside a
<BASEFONT> tag.
Syntax :
<BASEFONT color =”color_name| hex_number| rgb_number>
ii. Face : this attribute specifies the face type of the text inside a <BASEFONT>
tag.
Syntax :
<BASEFONT face = “font_family”>
iii. Size : this attribute specifies the size of the text inside a <BASEFONT> tag.
Syntax :
<BASEFONT size = “number”>
Q11. Give difference between <FONT> tag and <BASEFONT> tag?
A11. The difference between <FONT> and <BASEFONT> is as follows :
<FONT> tag <BASEFONT> tag
1. <FONT> tag has “ending” tag 1. The <BASEFONT> has optional
“ending” tag.
2. The <FONT> tag affects all text that 2. The <BASEFONT> tag effects all
lies between its starting and ending text
tags. in a document.
Q12. What is <CENTER> tag? Give example.
A12. <CENTER> tag : This tag is used to centralize a segment of text to be displayed on
browser’s window.
Syntax :
<CENTER> …………</CENTER>
Example :
<HTML><HEAD><TITLE> Center</TITLE></HEAD>
<BODY>
<CENTER> This text will be center aligned</CENTER></BODY></HTML>
37
Q13. What is Line Break <BR> tag? Give example.
A13. Line Break <BR> tag : To add a single line of space, you can use a break tag
<BR>. This is an empty tag i.e noi need of closing tag.
Example :
<HTML><HEAD><TITLE> Line Break</TITLE></HEAD>
<BODY>
This is the <BR> default size.</BODY></HTML>
Output :
This is the
default size.
Q14. What is Horizontal Rule <HR> Tag?
A14. Horizontal Rule <HR> tag : To create a horizontal line on your page you have
to use the empty tag. This horizontal line can be used to divide information into
section.
Q15. Give various attributes of <HR> tag?
A15. The various attributes of <HR> tag are :
i. Size : this attribute specifies the height of the rule in pixels. A pixel is a tiny dot that
makes up the display of your computer. The default size of a rule is 3 pixels
Syntax :
<HR size = “pixels”>
Example :
<HTML><HEAD><TITLE> HR tag with size attribute</TITLE></HEAD>
<BODY><HR size=”3”>
This is the default size.</BODY></HTML>
ii. align : This attribute specifies the alignment of a horizontal line.
Syntax :
<HR align = “left| center|right”>
Example :
<HTML><HEAD><TITLE> HR tag with align attribute</TITLE></HEAD>
<BODY><HR align =”right”>
This is the default size.</BODY></HTML>
iii. width : This attribute specifies the width of a horizontal line in pixels or
percent. Its default value is 100%.
Syntax :
<HR width=”pixel or %”>
Example :
<HTML><HEAD><TITLE> HR tag with width attribute. </TITLE></HEAD>
<BODY><HR width = “50%”> This is a line.</BODY></HTML>
38
iv. noshade : When this Boolean attribute is present, the rule is drawn with a solid
black line as 2D effect instead of default 3D effect i.e. without shading.
Syntax :
<HR noshade>
Example :
<HTML><HEAD><TITLE> HR tag with noshade attribute. </TITLE></HEAD>
<BODY>
<HR width =”5” noshade>
<HR size=”5”> This is a solid line.</BODY></HTML>
v. color :This attribute specifies the color of the horizontal line.
Syntax :
<HR color= “color_name| hex_number | rgb_number>
e.g.
<HTML><HEAD><TITLE> HR tag with color attribute. </TITLE></HEAD>
<BODY><HR color = “red”> This is a red line. </BODY></HTML>
Q16. What is comment tag?
A16. Comment <!-- -- > Tag : This tag is used to insert comments in the source code
of the web page. All the text inserted inside the tag <!-- --> will be ignored by the
browser that made invisible for the user.
Syntax :
<!-->
Example :
<HTML><HEAD><TITLE> Comment. </TITLE></HEAD>
<BODY><!--This is a comment. --> This is a body.</BODY></HTML>
39
Q17. What is Heading Tags?
A17. Heading Tags : In HTML heading tags are used to display the text as a heading.
It can also be used to give section headings. There are six levels of headings, ranging
from <H1> …</H1> to <H6> … </H6>
The <H1> defines the largest heading level. And <H6> defines the smallest heading
level.
Syntax :
<Hn> …. </Hn>
Where n may be any number from 1 to 6.
Example :
<HTML><HEAD><TITLE> Heading Level. </TITLE></HEAD>
<BODY>
<H1> level one Headline</H1>
<H2> level two Headline</H2>
<H3> level three Headline</H3>
<H4> level four Headline</H4>
<H5> level five Headline</H5>
<H6> level six Headline</H6></BODY></HTML>
Q18. Give the attribute of heading tag?
A18. The attribute of heading tag are :
i. align :
Syntax :
<Hn align = “left | centre | right | justify”>
Where, n may be any number from 1 to 6.
Example :
<HTML><HEAD><TITLE> Heading Level alignment. </TITLE></HEAD>
<BODY>
<H1 align =”left”> level one Headline</H1>
<H2 align =”centre”> level two Headline</H2>
<H3 align =”right”> level three Headline</H3>
40
<H6 align =”justify”> level six Headline</H6></BODY></HTML>
Q19. What is paragraph <P> tag?
A19. This tag is used to mark a block of text as a paragraph. It is used to insert a line break
with extra space in the beginning. This is a container tag.
Syntax :
<P> ………………. </P>
Example :
<HTML><HEAD><TITLE> Paragraph. </TITLE></HEAD>
<BODY>
<P> This is some text in a paragraph. </P</BODY></HTML>
Q20. Give attributes of paragraph <P> tag?
A20. The attribute o paragraph tag is :
i. align : This attribute specifies the alignment of the text within a paragraph. By
default alignment is left.
Syntax :
<P align = “left | center | right | justify”> ………. </P>
Example :
<HTML><HEAD><TITLE> Paragraph tag with align attribute
</TITLE></HEAD>
<BODY>
<P align = “right”> This is some text in a paragraph.
</P></BODY></HTML>
Q21. What is style tag?
A21. HTML provides various style tags which are as follows :
i. Bold < B > tag : This tag specifies the text into bold text. It is a container
element.
Syntax :
< B > --------------</B>
Example :
<HTML><HEAD><TITLE> Bold </TITLE></HEAD>
<BODY>
<P> This is normal text and <B> this is bold
text.</B></P></BODY></HTML>
ii. Italic < I > tag : This tag specifies the text in italic form. It is a container
element.
Syntax :
< I > --------------</I>
Example :
<HTML><HEAD><TITLE> Italic </TITLE></HEAD>
<BODY>
<P> This is normal text and <I> this is italic
text.</I></P></BODY></HTML>
iii. Underline <U> tag : This tag is used to underline text. It is a container
element.
Syntax :
<U> --------------</U>
Example :
41
<HTML><HEAD><TITLE> Underline </TITLE></HEAD>
<BODY>
<P> This is normal text and <U> this is underline
text.</U></P></BODY></HTML>
Q22. What is HTML Lists?
A22. Related pieces of information grouped together so that they are clearly associated with
each other and easily read is called list. In HTML lists are of three types : Unordered
list, Ordered list, Definition list.
Q23. What is Unordered List <UL>?
A23. Unordered List<UL> : This list also known as unnumbered lists is an indented
list with a bullet symbol in front of each list item. An unordered list starts with the
<UL> tag. Each list item starts with the <LI> tag. The unordered list tag is a container
tag.
Syntax :
<UL> ------------- /UL>
Example :
i. This tag specifies the text into bold text. It is a container element.
Syntax :
<B> --------------</B>
Example :
<HTML><HEAD><TITLE> Unordered List </TITLE></HEAD>
<BODY>
<UL>
<LI> Mango</LI>
<LI> Apple </LI>
<LI> Banana</LI>
</UL></BODY></HTML>
Output is :
Mango
Apple
Banana
42
Q24. Name attribute of unordered list <LI> tag?
A24. Attribute of unordered list is as follows :
i. Type :This attribute is used to change the bulleted symbol in a list. The
attribute may have a value of circle, disc or square.
Syntax :
<UL type = “value”>
Example :
<HTML><HEAD><TITLE> Unordered List </TITLE></HEAD>
<BODY>
<UL type =”square”>
<LI> Mango</LI>
<LI> Apple </LI>
<LI> Banana</LI>
</UL></BODY></HTML>
Output is :
Mango
Apple
Banana
Q25. What is Ordered List <OL>?
A25. Ordered List <OL> : This list starts with the <OL> tag. Each list item starts
with the <LI> tag. The list items are marked with numbers.
Syntax :
<OL> ------- </OL>
Example :
<HTML><HEAD><TITLE> Ordered List </TITLE></HEAD>
<BODY>
<OL type =”a”>
<LI> Mango</LI>
<LI> Apple </LI>
<LI> Banana</LI>
</OL></BODY></HTML>
Output is :
a Mango
b Apple
c Banana
43
Q26. What is definition list?
A26. Definition list : This is a list of items with a description of each item. HTML
definition lists <DL> are indented list without any bullet symbol or any number in
front of each item. This list element have a unique array of tags and elements, the
resulting lists are similar to those you would see in a dictionary.
Q27. Give various tag used in definition list?
A27. The various tags used are :
i. <DL> : this is the opening tag that defines the start of the list.
ii. <DT> : list item that defines the definition term.
iii. <DD> : definition of the list item.
iv. </DL> : closing tag that defines the end of the list.
Example :
<HTML><HEAD><TITLE> Definition List </TITLE></HEAD>
<BODY>
<DT><B>Fromage</B>
<DD> French word for cheese
<DT><B> Voiture</B>
<DD> French word for car
</DL></BODY></HTML>
Q28. What is nested list? Give example.
A28. List can be nested that means one list can be placed inside another. In the nested list,
one or more items can contain sub-items.
Example :
<HTML><HEAD><TITLE>Nested List</TITLE></HEAD>
<BODY>
<UL>
<LI> Fruits</LI>
<OL type=”1”>
<LI> Mango</LI>
<LI> Apple</LI>
</OL>
<LI> Vegetables</LI>
<OL type =”a”>
<LI> Onion</LI>
<LI> Tomato</LI>
</OL></UL></BODY></HTML>
44
Q29. How will you insert image in a web page?
A29. HTML can be used to insert images in the following formats :
i. GIF(Graphics Interchange Format).
ii. XBM(X Bitmap)
iii. JPG or JPEG(Joint Photographic Experts Group)
iv. PNG(Portable Network Graphics)
The <IMG> tag is used to insert an image in a web page.
Syntax :
<IMG src=”imageurl”,[various attributes]>
Example :
<HTML><HEAD><TITLE>Image</TITLE></HEAD>
<BODY>
<H1> Look at the image</H1><br>
<IMG src=”D:\[Link]”>
<BODY></HTML>
Q30. Name and explain attributes of image along example>
A31. The various attributes of image are as follows :
i. Src attribute : this attribute takes URL(Universal Resource Locates) of an
image file as value which points to the direct location of an image to be
displayed.
ii. Width and height attributes : When an image is added to a web page it is
not mandatory to specify width and height of the image.
Example :
<HTML><HEAD><TITLE>ResizeImage</TITLE></HEAD>
<BODY>
<H1> Height and Width of the image</H1><br>
Original Image<IMG src=”D:\[Link]”>
After Resizing<IMG SRC=”D:\[Link]” HEIGHT=”50” WIDTH=”50”>
<BODY></HTML>
45
iii. Alt attribute : this attribute is used to provide alternate text when an
image on a web page cannot be displayed.
Example : to display an image with some alternate text.
<HTML><HEAD><TITLE>Image</TITLE></HEAD>
<BODY>
<H1> Look at the image</H1><br>
<IMG src=”D:\[Link]” alt=”It is a beautiful flower”>
<BODY></HTML>
iv. Align attribute : this attribute is used to set the position of an image in a web
page according to the user’s requirements. There are some values of image
alignment attribute as follows :
a. Top alignment : this alignment aligns the top of an image with the top
edge of the tallest item in the text line.
Example :
<HTML><HEAD><TITLE>Alignment ofImage</TITLE></HEAD>
<BODY>
<H1> Top Alignment</H1><br>
<IMG src=”D:\[Link]” ALIGN=”TOP”>
This attribute is used to set the position of an image in a web page according to
the user’s requirements. <BODY></HTML>
b. Middle alignment : In internet explorer this alignment aligns the image
to the middle of the tallest item in the current line.
Example :
<HTML><HEAD><TITLE>Alignment ofImage</TITLE></HEAD>
<BODY>
<H1> Middle Alignment</H1><br>
<IMG src=”D:\[Link]” ALIGN=”MIDDLE”>
This attribute is used to set the position of an image in a web page according to
the user’s requirements. <BODY></HTML>
46
c. Bottom alignment : This alignment aligns the bottom edge of the
image, to the same horizontal plane as the baseline of the text.
Example :
<HTML><HEAD><TITLE>Alignment of Image</TITLE></HEAD>
<BODY>
<H1>Bottom Alignment</H1><br>
<IMG src=”D:\[Link]” ALIGN=”BOTTOM”>
This attribute is used to set the position of an image in a web page
according to the user’s requirements. <BODY></HTML>
d. Left alignment : This alignment aligns the image to the left on the web
page respectively of the browser window.
Example :
<HTML><HEAD><TITLE>Alignment ofImage</TITLE></HEAD>
<BODY>
<H1> Left Alignment</H1><br>
<IMG src=”D:\[Link]” ALIGN=”LEFT”>
This attribute is used to set the position of an image in a web page
according to the user’s requirements. <BODY></HTML>
e. Right alignment : This alignment aligns the image to the right on the
web page respectively of the browser window.
Example :
<HTML><HEAD><TITLE>Alignment ofImage</TITLE></HEAD>
<BODY>
<H1> Right Alignment</H1><br>
<IMG src=”D:\[Link]” ALIGN=”RIGHT”>
This attribute is used to set the position of an image in a web page
according to the user’s requirements. <BODY></HTML>
v. Border attribute : you can set the border of an image that you want to use in
your web browser.
Example :
<HTML><HEAD><TITLE>Setting border ofImage</TITLE></HEAD>
<BODY>
<H1> Setting Image Border</H1><br>
<CENTER>
<IMG src=”D:\[Link]” HEIGHT=”20” WIDTH = “30” BORDER=”5”>
</CENTER><BODY></HTML>
47
Q31. What is linking?
A31. Ability to link text and/or an image to another document or within a document is
called linking. The main objectives of linking are as follows :
i. To add more pages to the websites and link them together.
ii. Using internal links(anchors) to save scrolling for visitors.
iii. To direct the user to web page of different website.
In HTML links can be created by using <a> anchor tag. Hyperlinks are the links that
carry user from one web page to another web page(within or on another website).
Q32. Name types of linking?
A32. Types of linking are as follows :
iv. External Linking : this leads to a link that goto another website. It refers to a
different page on a different website. The href(hypertext reference) attribute is
used to specify the url of the target document.
Example :
<HTML><HEAD><TITLE>Creating a Hyperlink</TITLE></HEAD>
<BODY>
<H1> Look at the Image</H1><br>
<IMG src=”D:\[Link]” ALIGN=”TOP” ALT=”it is a beautiful picture>
<A href=[Link] click here</A> to get more flowers images
<BODY></HTML>
v. Internal linking : This is a type of HTML linking that links pages within a
single website, various sections of same document or different document.
Example :
<HTML><HEAD><TITLE>Internal Linking</TITLE></HEAD>
<BODY>
<H1> Look at the Image</H1><br>
<H3> Click here to go to the
<A href=”bottom”> Bottom </A> of the page</H3><br><br><br><br>
<A name=”Bottom”><h3> you are at the bottom of the page.</H3></A>
<BODY></HTML>
48
Q33. What is <TABLE> tag? Give its elements?
A33. In HTML tables are created by <table> tag. Tables are made up of row and columns.
An intersection of row and column is known as cell. The various elements of table are
: <tr> tag which defines a row in the table.
<td> tag defines a column in the table
<th> tag is used for specifying a table’s header.
Q34. How will you insert a table in HTML?
A34. HTML code for inserting a table is as follows :
<HTML><HEAD><TITLE>Creating a Table</TITLE></HEAD>
<BODY>
<TABLE broder=1>
<TR>
<TH> Table header 1 </TH>
<TH>Table header 2</TH>
</TR>
<TR>
<TD> Cell1</TD>
<TD> Cell2</TD>
</TR>
<TR>
<TD> Cell3</TD>
<TD> Cell4</TD>
</TR></TABLE><BODY></HTML>
49