Computer
Introduction to HTML Application
Class 10
HTML
HTML (HyperText Markup Language), describe how a web page should be
displayed by a web browser. HTML is considered as a language for describing web
pages.
The HTML is a documentation language to mark content of web pages such as
heading, title, table, image etc.
A HTML is a kind of markup language. A markup language is a set of tags that
enables additional information(besides the content) on how to present the web
content. HTML files are text files that contain additional formatting markup
information in form of tag along with its content.
HTML is derived from of SGML
o S-Standardized
o G-General
o M-Markup
o L-Language
SGML was developed by the International Organization for Standards (ISO) in
1986.
HTML tag
Presented by Aditya Rajpurohit
• Several sets of angular brackets with words or letters within them. These brackets
and words inside them are known as tags.
• A tag is made up of letter, words and numbers enclosed between a left and right
angular bracket. i.e <>
HTML Element
• A combination of opening and closing tag along with some content between the
two tags forms an element.
An HTML element may be empty or can have attributes to specify the additional
formatting and publishing instructions
Structure of an HTML Document
Presented by Aditya Rajpurohit
Structure of an HTML Document
• HTML document is structured into two major parts.
1. Head Section (Head element)
It contains information about the page such as title and description of the
page.
All these information should be embedded within the <head> and </head>
[Link] <head> section there is <title> element that is written in head section
and that will be displayed in the title bar of browser.
2. Body Section (Body element)
The body element is embedded within the <body> and </body>
This is the content which can be seen or display within the browser
Both the sections are embedded within the <html> and </html> tags.
HTML Title
The title of a web page is specified by the TITLE element, which is placed in the head
section of the document.
Document should have only one title element.
Title should be simple text and cannot contain special commands such as hyperlinks.
The title appears as a label of the window displaying the text.
The title also holds a place in a browser’s history or bookmark list.
HTML Heading Style
HTML document generally beginning with heading.
Heading can be creating in total six inbuilt sizes names h1,h2,h3,h4, h5 and h6.
Most browsers display the contents of the <h1>,<h2> and <h3> elements larger than
the default size of text in the document.
The content of the <h4> element is similar to the default content size.
Paragraph tags (<p> and </p>)
The <p> tag structures the content into a paragraph.
Each paragraph of text should go in between an opening <p> and closing </p> tag.
When an HTML code is displayed into a browser, the text will automatically take up
the full width of the screen.
If you resize the browser window, the browser will trap the text onto new lines.
Such white space management allows developer of HTML code to indent the code
and add extra spaces to maintain readability of the code.
Presented by Aditya Rajpurohit
Line break (<br> or <br/>)
<br> tag is used for giving line break.
<br> element does not have an opening and closing tags. Such tag are known as
empty tags.
<br> is an abbreviated form of break.
The <br> just pushes the coming text into new line.
In case you need multiple lines, simply use multiple <br> tags.
<br> in paragraph forces compulsory break into the content and disturbs text
wrapping while presentation and resizing the browser window.
Text Formatting Tags
Elements Description
Bold (<b> and </b>) The content is displayed in bold.
Underline (<u> and </u>) The content is displayed in underline.
Italics (<i> and </i>) The content is displayed in Italic.
<sup> and </sup> The content is displayed in superscript.
<sub> and </sub> The content is displayed in subscript.
Attributes to the Tags
To specify more information along with tags, additional attribute accompany the
tags.
In other words, attributes tell more about the elements.
Attributes always appear on the opening tags of the elements that carry them.
An attribute is made up of two parts:
o The first part is a name
The name of an attribute indicates the property to be set
o the second part is a value.
The value is a value to be set to the property.
The values should be in double quotation marks.
Between the name and the value there should be an equal (=) sign
Example : <body bgcolor=“yellow”> Click here</a>
Presented by Aditya Rajpurohit
Align attribute
The align attribute indicates whether the heading appears to the left, center or right of the
page.
By default, the content is aligned to the left of the page.
It can take three values as follows:
– Left: The content is aligned to the left of the page.
– Right: The content is aligned to the right of the page.
– Center: The content is aligned to the center of the page.
There are some attributes which can appear along with every tag. Such attributes are called
universal attributes.
– Align is such universal attribute.
– <p align=“right”>Some content goes here</p>
– Being a universal attribute, the align attribute can also go with heading.
<h1 align=“center”>Some heading goes here</h1>
Current Version of HTML
• Latest version of the HTML is called HTML 5.0
Q1: What is HTML? or What is use of HTML ?
Ans: HTML stands for Hypertext Markup Language. HTML is used to create structure, layout
and Behavior of Web page. HTML is not a programming language, it is a markup language.
HTML is notcase sensitive language
Or
HTML is used to design any web page.
Q2: Write History of HTML.
Ans: 1980 GML (General Markup Language)
1986 SGML (Standard General Markup Language)
1995 HTML (Hypertext Markup language)
Version:
HTML (Version 1)
HTML (Version 2)
HTML (Version 3)
Presented by Aditya Rajpurohit
HTML (Version 4)
HTML (Version 5)
Q3: How can we work with HTML?
Ans: We need two basic tool to work with HTML:
HTML Editor : To write HTML codes
Browser: To view the
[Link] of HTML Editor:
1. WYSIWYG (What You See Is What You Get): - Example: Adobe Dreamweaver.
2. Text Editor: - Example: Notepad.
Q4: How to create HTML document?
Ans:
Step1: Open Notepad.
Step2: Write Basic Structure of HTML.
Step3: Save the document with .HTML extension. Example: [Link]
Q5: How to view or open the HTML document?
Ans: Just double click on your HTML document and it displays your document on your
computerscreen.
Q6: What is tag or Element?
Ans: Tags are the building blocks of a webpage. They contain elements which define how the
information on the webpage is formatted or displayed.
Syntax: <p> some text</p>
Types of Element or Tags:
There are two types of elements:
1. Container Tags:- The elements that include both ON tag and OFF tag are called container
[Link]: <b> This makes the text bold </b>
2. Empty Tags: Empty tag contain only ON
[Link]: <br>, <hr > and <img>
Presented by Aditya Rajpurohit
Q7: What is Attribute in HTML Tag?
Ans: An attribute is a property that provides additional information about an HTML tag.
Attributealways specified in ON tag.
Syntax: <tagname attrname=”Value”> text </tagname>
<body bgcolor=”red”> text </body>
Q8: Write basic structure of HTML document?
<HTML>
<head>
<title> This is my first web page </title>
<head>
<body>
<h1> Text </h1>
</body>
</html>
<html> tag:- It is used to identify that it is a standard HTML document.
<head> tag:- It provide information that is important about the web page.
<title> tag:- It contains the title of the document.
<body> tag:-It contains the content of your document which gets displayed on the web
pageof your browser.
Q9: Write some common HTML container tags or Element?
Ans:
1. Heading Tag <H1> to <H6>
It defines Heading levels and there are six heading levels:
<h1> Some text</h1>
<h2> Some text</h2>
<h3> Some text</h3>
<h4> Some text</h4>
<h5> Some text</h5>
<h6> Some text</h6>
2. <P> Tag:
Marks a block of text as a
[Link]: <p> Text </p>
Presented by Aditya Rajpurohit
3. <Center> Tag:
Align text to the center of the
[Link]: <center> text
</center>
Q 10: What is empty tag? Write about some common empty tag.
Ans:
These tags having only the OPEN tag and perform some specific functions on their own. Ex: <br>,
<hr>,<img>.
<br> tag: It stands for Breaking Rule. This tag is used to break a line and displays the proceeding
textin next line.
Ex: <BR>
<hr> tag: It stands for Horizontal rule. This tag is used to separate block of text by creating
Horizontalline.
Atrribute of <HR> tg:
Size: Specifies the thickness of line in terms of
[Link]: <hr size=20>
Width: Specifies the length of the
[Link]: <hr width=”75%”>
Align: Specifies alignment of the
[Link]: <hr align=”left”>
Noshade: Produce a 2D, unshaded, dark gray
[Link]: <hr Noshade>
Color: It is used to set color of the
[Link]: <hr color=”blue”>
Q10: What is Comment Tag?
Ans: Comment tag is useful for programmer as they can write notes for themselves explaining the
source code.
In HTML, comments are not displayed in the
[Link]: <!--some text-->
Q11: What are formatting tags?
Ans: Some formatting tags are:
<b> Tag: For bold text <b> text </b>
<i> tag: for italic text <i> text</i>
<u> tag: for underlined text <u> text </u> Presented by Aditya Rajpurohit
<sub> tag: Display the text or number in subscript
[Link]: H<sub>2</sub>O
Output: H2O
<sup> Tag: Display the text or Number in Superscript form.
Ex: X<sup>2</sup>+Y<sup>2</sup>Output:
X2+Y2
Q12: What is < font> tag?
Ans: The <font> tag help in displaying of the text in a presentable manner.
It has three Attributes:
1. Face: The face attribute is used to change the font type or name of font.
Ex: <font face=”Arial”> Text <font>
2. Size: This is used to change size of the font to be displayed.
Ex: <font size=”7”> Text <font>
3. Color: The color attribute changes the color of the text.
Ex: <font color=”red”> Text <font>
<Font> tag <Basefont> tag
Apply on only text enclosed between its Apply on full page at once
tags
Supported by all the Browser Not Supported by only all Browser
Container tag Empty tag
Q13: Write attribute of body tag.
Ans:
Background: This attribute is used to set background image of page by specifying the path.
Ex: <body background=”[Link]”>
Bgcolor: This attribute is used to change background color of the page.
Ex: <body bgcolor=”red”>
Text: This attribute is used to change the color of webpage.
Ex: <body text=”red”>
Link: This attribute is used to specify the color of the unvisited links in the web pages.
Ex: <body link=”red”>
Alink: This attribute specifies the color of active link in the webpage.
Ex: <body alink=”Red”>
Vlink: This attribute specifies the color of the link after it has visited.
Ex: <body vlink=”red”> Presented by Aditya Rajpurohit
Topmargin: This attribute is used to set top margin from the top side of a webpage.
Ex: <body topmargin=”20”>
Leftmargin: This attribute is used to set left margin from the left side of a webpage.
Ex: <body leftmargin=”20”>
Presented by Aditya Rajpurohit
Presented by Aditya Rajpurohit
