HTML & XML: Basic Structure of HTML Page

HTML & XML
Basic structure of HTML Page:-

<html>
<head><title>_____________</title></head>
<body>
</body>
</html>
HTML (Hyper Text Markup Language) files are created using text editors like notepad and
have an extension of .HTM or >HTML but they run on browser like Mozilla firefox, google
chrome, internet explorer etc.
Tags with usage Attributes with usage

<html> : its is the parent or root tag of Lang=”hi|en|ks|kok|ne|mr|sa”  set the
any html page. language of the webpage. Here hi is hindi, "ks",
"kok", "ne", "mr", "sa" for Kashmiri, Konkani,
Nepali, Marathi and Sanskrit respectively.
<title> : contains title of the webpage
<body> : contains main content of Background=”picture.jpg”  it is used to display
webpage picture in the background of the webpage.
Bgcolor=”#278799|red”  it is used to set the
background colour of the webpage.
Text=”#878990|green”  sets the colour of the
text on the webpage.
Link=”color”  sets the colour of the hyperlink
on the wepgage.
Alink=”color”  sets the color of the active link.
Vlink=”color”  sets the colour of the visited
links on the webpage.
<p> : it is a paragraph tag. Used to align Align=”left|right|center|justify”
the text to left, right, center or justify.
<hr>: creates a horizontal line Align=”left|right|center”  sets the alignment
of the line.
Noshade creates a horizontal line without any
shade.
Size=”n”  sets the thickness of the line.
Width=”n|%”  sets the width of the line.
Color=”color”  sets the colour of the line.
<br>: creates a line break
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>:
creates a heading. <h1> is the biggest
heading and <h6> is the smallest
heading.
<b> : make the text bold.
<i> : makes the text italic
<u> : make the text underlined.
<img> : inserts an image on webpage. Src=”path/filename”  tells the source of the
image.
Border=”n”  sets the border of image.
Align=”left|right|center”  sets the alignment
of the image.
Width=”n|n%”  sets the width of the image.
Height=”n|n%”  sets the height of the image.
<font> : used to change the text Face=”font name”  specify the font name.
size/color and face. Size=”n”  sets the size of text
Page 1 of 7
Color=”color”  sets the colour of the text
<ol> : creates an ordered listing type=”A|a|1|i|I”  sets the type of ordered list.
Start=”n”  sets the starting no. of the list, and
n must be a natural number.
<ul> : creates an unordered listing Type=”circle | square | disc”  circle is hollow
bullet, disc is filled solid circle and square is
hollow square. By default it is disc
<li> : creates the items in the list. Used Example:
only with <ol> or <ul> tag. Ordered List Unordered List
<OL> <UL>
<li>Mysql <li>Mysql
<li>Netbeans <li>Netbeans
<li>HTML <li>HTML
</OL> </UL>
The output will be: The output will be:
1. Mysql  Mysql
2. Netbeans  Netbeans
3. HTML  HTML
<table> : lets you create a table in Align=”left | right | center”  sets the
webpage alignment of the table on the webpage.
Bgcolor=”color”  sets the background color of
the table.
Border=”n”  sets the border thickness, by
default it has no border.
<tr> : creates a row in a table. It is a Align=”left | right | center”  sets the
subtag of <table> alignment of the text in a row.
Valign=”top | middle | bottom”  sets the
vertical alignment of the text in a row.
Bgcolor=”color”  sets the background colour of
the row in a table.
<td> : creates the table data in a table Align=”left | right | center”  sets the
or creates a cell in a row. It also alignment of the text in a cell.
specifies the column in a table. Valign=”top | middle | bottom”  sets the
vertical alignment of the text in a cell.
<th> : creates the cell for header row in Bgcolor=”color”  sets the background colour of
a table. The contents are bold face and the cell in a table.
center aligned in <th> tag Example:
<table border=”1”>
Both <td> and <th> are subtag of <tr> <tr>
tag <th>S.No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Vikas</td>
</tr>
<tr>
<td>2</td>
<td>Siddharth</td>
</tr>
</table>
<form> : creates a form on webpage Name=”name”  sets the name of the form
Action=”url”  specifies the url where the form
data will be sent.
Metod=”post | get”  sets how the data will be
sent. In get method the data is sent with the
URL, whereas in post, the data is sent with HTTP
Page 2 of 7
post which is not visible.
<input> : creates the form element: Type=”TEXT | PASSWORD | RADIO | CHECKBOX |
textfield, password field, radio button, SUBMIT | RESET |
checkbox, submit button, reset button BUTTON | IMAGE | HIDDEN | FILE”
Name=”name”  sets the name of the field.
Value=”text”  specifies the text to be
displayed in the textfield, password field or
button.
Checked  used only with radio button and
check box to check them by default.
<a> : Creates a hyperlink on the Href=”path/filename”  specifies the
webpage hyperlinked filename that will open when the
user will click on the link.
XML:
XML (eXtensible Markup Language) is also a markup language like HTML. But XML is
different from HTML in the sense that HTML describes how to display and format the data,
text and images in the browser whereas XML is used to describe the data. XML has nothing
to do with presentation of data in the browser.
Example of XML file:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="class.xsl"?>
<class>
<student>Sumedha</student>
<student>Utkarsh</student>
<student>Tushar</student>
<teacher>Anil Kumar</teacher>
</class>
In the above code the
 <?xml version="1.0" encoding = "UTF-8"?> is an xml declaration tag.
 <?xml-stylesheet type="text/xsl" href="class.xsl"?> This statement links this xml
file to the file class.xsl.
 <class> . . . </class> Each XML document contains one and only one root element (or
parent element) which encapsulates the data described in the XML file. In this
example <class> . . . </class> is the root element. The root element further
contains sub-elements (or child elements) which describe the actual data values. In
this example <student> . . . </student> and <teacher> . . . </teacher> are the sub-
elements of <class> . . . </class>.
The main difference between XML and HTML
 HTML is used to display data and to focus on formatting of data, whereas XML is used
to describe data and focus on what data is.
 HTML tags are predefined, whereas XML tags are not predefined. We create our own
tags.
 HTML tags are not case sensitive, whereas XML tags are case sensitive.
Features of XML
 XML is extensible. XML allows the user to create his own tags and document
structure.
 XML can be used to store data. Applications can be written to store and retrieve
information.
 XML can be used to exchange data. In the real world, databases contain data in
different formats. It is difficult to exchange data between such systems over the
Internet. Converting the data to XML can help in solving this problem and create
data that can be read by different types of applications.
 XML is free. It can be written with a simple text editor or one of the many freely
available XML authoring tools, such as XML Notepad.
 XML is a W3C recommendation.
Page 3 of 7
HTML Questions
1. Which HTML tag inserts a horizontal straight line on a web page? Ans. <hr>
2. How is <P> tag different from <BR> tag in HTML?
Ans.
<p> <br>
It is a paragraph tag It is a line break tag
It is a container tag i.e. it must have a It is an open tag. i.e. we do not need to close
closing tag. this tag.
3. How are tags used in XML different from tags in HTML? Write 2 points.
Ans.
XML HTML
XML tags are case-sensitive tags i.e. HTML is not case-sensitive i.e. <B> and <b>
<student> and <STUDENT> are two different are same tag.
tags.
XML tags are not pre-defined and we can HTML tags are pre-defined like <b>, <i>, <u>
create our own tags. etc.
4. What is the use of <H1 >tag in an HTML document?
Ans. <H1> is the biggest heading tag used to create a heading in HTML
5. What is XML?
Ans. XML is Extensible markup language to carry and define data across multiple platforms.
6. Mention the purpose of each of the following HTML tags.
<BR>, <LI>, <HR>, <TABLE>
Ans. <BR>  creates a line break, <LI>  Creates a list item in ordered or unordered list, <HR.
 creates a horizontal line. <table>  creates a table.
7. Which HTML tags are used for making a table and adding rows in a HTML document?
Ans. <table> tag is used to create a table whereas <tr> tag is used to create a row in a table.
8. How is <UL> tag different from <OL> tag of HTML?
Ans.
<UL> <OL>
Creates an unordered list Creates an ordered list
It is of three types: disc, circle, square It is of 5 types: A , a, i, I, 1
9. Write the name of HTML tag used to include numbered list in a HTML Web Page.
Ans. <OL> tag
10. Write HTML code for the following :
To provide hyperlink to a website "http://www.cbse.nic.in"
Ans. <a href=” http://www.cbse.nic.in"> CBSE </a>
11. After typing the HTML code using a ‘Text editor’ which software would you use to see how it
would look as a web page?
Ans. We will use the browser like mozilla firefox or google chrome or internet explorer to run
the webpage
12. Name any two attributes used in <img> tag of HTML.
Ans. height, width, src, border, align
13. Differentiate between the <BR> and <HR> tags of HTML with suitable example.
Ans.
<BR> <HR>
It creates a line break It creates a horizontal line
Example: Example:
This is a line1<br>This is line 2 This is a line <hr>
The above code will display The output will be:
This is line 1 This is line
This is line 2 -------------------------------------------
14. Which tags of HTML are used to
(i) Change the font in a page (ii) Add a row in a table ?
Ans. (i) <font> tag (ii) <tr> tag
15. Explain with the help of example(s) the difference between container and empty elements of
HTML.
Page 4 of 7
Ans.
Container elements Empty elements
Container elements are tags which have both Empty elements are tags which do not have a
opening and closing tag closing tag.
Example: <font>….</font> Example: <br>, <hr>
16. Name two tags that are present in every HTML code.
Ans. <html> and <body> tag are present in every HTML code.
17. What is wrong in the following HTML code ?
<UL TYPE = "a" START = 4>
Ans. <UL type=”a” start=”1”>
18. Write two features of XML.
Ans.
 XML is extensible. XML allows the user to create his own tags and document structure.
 XML can be used to store data. Applications can be written to store and retrieve
information.
19. Jennifer wants to write html code to create an ordered list starting with “c”. Help her in
writing the code.
Ans. <ol type=”a” start=”3”>
20. Which tag is used to display a horizontal rule on a web page ? <hr>
21. “With XML you invent your own tags.” Explain this statement with the help of example.
Ans. In XML we can create our own tags. Example:
<class>
<student>Siddharth</student>
<student>Sneh</student>
</class>
Here we have created two of our own tags <class> as root element and <student> as its sub tag.
22. Shambhavi has to design two web pages with following specifications:
i. One web page should have an unordered list.
ii. Another web page should have background “Yellow” in colour.
Suggest her suitable tag(s) and attribute(s) for the above specifications.
Ans. i. <ul> tag ii. <body bgcolor=”yellow”>
23. Albert works as a website developer in Global Website Designers company. Currently he has
created following tags in XML:
<STUDENT>...</STUDENT>
<Student>....</Student>
Are these tags part of HTML code or XML code? Are these same same or different?
Ans. These are XML tags. They are different tags.
24. Sandhya is creating a webpage. She is entering HTML code on her computer. In between,
she keeps pressing ‘Refresh’ / ‘Reload’ button on her browser. What is the purpose ?
Ans. The purpose of Refresh / Reload button is to load the updated page after making a
modification in the HTML code.
25. What does ‘XML’ stand for ?
Ans. XML stands for “Extensible Markup Language”
26. Realizing the importance of the Internet, Ms. Shikha a Mathematics teacher, has decided to use
Internet as a medium to teach her students Mathematics in an interesting way.
I. She wants to design a webpage as shown below to create a mathematics tutorial on the topic
“Shapes” using HTML.
She has written following HTML code for the same but she is not getting the desired output.
Page 5 of 7
Help her in identifying the error(s) and suggest the suitable corrections:
<html>
<head><title>Shapes</title></head>
<body>
<table>
<tr>
<table heading>Mathematics in a fun way</table heading>
</tr>
<tr>
<td>Shapes</td>
<td>Images</td>
</tr>
<tr>
<td>Circle</td>
<td><img source=“circle.jpg”></td>
</tr>
<tr>
<td>Square</td>
<td><img source=“square.jpg”></td>
</tr>
</table>
</body>
</html>
II. Help her in matching Column A with suitable statements of Column ‘B’
Ans. i)
<html>
<head><title>Shapes</title></head>
<body>
<table>
<tr>
<th colspan=”2”> Mathematics in a fun way</th>
</tr>
<tr>
<td>Shapes</td>
<td>Images</td>
</tr>
<tr>
<td>Circle</td>
<td><img src=“circle.jpg”></td>
</tr>
<tr>
<td>Square</td>
<td><img src=“square.jpg”></td>
</tr>
</table>
</body>
</html>
ii)
Column A Column B
XML Elements must have a closing tag.
Page 6 of 7
It is designed to store and transport data XML
Tags are not case sensitive HTML
HTML We use predefined tags to design webpages.
27. Given below is HTML code. Rewrite the correct code underlining all the corrections done.
<ol type = “A” start=“D”>
<li>Bake in oven for an hour
<li>Remove from oven
<li>Serve
Ans.
<ol type = “A” start=“4”>
<li>Bake in oven for an hour
<li>Remove from oven
<li>Serve
</ol>
28. Explain the meaning of the following statement with the help of example.
“Tags are not predefined in XML” Ans. Same as Ans 21
29. Given below is HTML code. Rewrite code after correcting errors. Underline each correction.
<html>
<title>HTML
</head>
<body>
</title>
<p>Learning HTML is fun
Ans.
<html>
<head><title>HTML</title></head>
<body>
<p>Learning HTML is fun
</body>
</html>
30. Ms. Sangeeta wants to add few descriptive lines in the HTML code which should not be
displayed on the webpage rather should remain inactive during execution. Suggest her the
solution along with example.
Ans. There are two ways to add comment in HTML.
1. using <comment> .. </comment> tag
2. using  tag
Page 7 of 7

HTML & XML: Basic Structure of HTML Page

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML & XML: Basic Structure of HTML Page

Încărcat de

Drepturi de autor:

Formate disponibile

HTML & XML

Basic structure of HTML Page:-

Tags with usage Attributes with usage

S-ar putea să vă placă și