Class 10th Computer Applications 2021-22 Chapter-03 Understanding HTML

Chapter 3 Understanding HTML

HTML (Hyper Text Mark-up Language):- IBM (International Business Machine) a company, sowed the seed of HTML in 1980. It was known as GML (General Markup Language). In 1986, this concept got standardized by ISO (International Standard Organization) named as SGML (Standard Generalized Mark-up Language).

HTML is a mark-up language developed by Tim Berners-Lee and his team in 1989 to design and create web pages. The latest version of HTML is HTML 5.1.

Characteristics of HTML

Easy to understand and modify.
Html is not case sensitive.
It has predefined tags.
Platform Independent

HTML Document Structure

HTML document has two sections: Head and Body

Head Section:- It contains the Title that identifies the first part of HTML document.

Body Section:- The body section is where we do most of the work.

HTML Tags:-

HTML is a tag based language that helps in creating web pages. Tag is an element,

which instruct the web browser, what to show? How to show? Each tag is enclosed in angle brackets < > . Every opening tag must have a closing tag.

 <Html>......</Html> Tag: - Everything is written within this tag.

 <Head>......</Head> Tag: - It contains the <Title> tag only.

 <Title>......</Title> Tag: - It contains the title of the document.

 <Body>.....</Body> Tag: - It contains the text that get displayed on the web page.

An Example:-

Open Notepad and type the following code-

<HTML>

<HEAD>

<TITLE> MY FIRST WEB PAGE</TITLE>

</HEAD>

<BODY>

WELCOME TO SJBSVM, MATHURA

</BODY>

</HTML>

Save the file sjbsvm.html and open file in web browser.

Types of HTML Tags:-

There are two types of HTML tags.

 Container Elements (Tag):- The tags that include both ON tag and OFF tags are called Container element. for e.g. <HTML>..........</Html>, <Body>......... </Body> etc.

 Empty Elements (Tag):- Empty elements only contain ON tags. They don't have OFF tags. for e.g. , <HR>, <IMG> etc.

Heading Tag:- It is used to define different heading levels in HTML. There are six heading levels, H1 to H6. <H1> tag has maximum size and <H6> tag has minimum size.

Example:-

<HTML>

<HEAD>

<TITLE> Heading Tag</TITLE>

</HEAD>

<BODY>

<H1> Computer</H1>

<H3> it is an electronic machine. </H3>

<H6>it can store large amount of data. </H6>

</BODY>

</HTML>

Paragraph:-

.... tag is used to write a paragraph on web page.

Attributes-

Align - used to align the paragraph. It contains "Left", "Right", "Center", "Justify" values.

Center Tag

This tag align your text to the center of the page.

<Center> Always remember:

GOD HELP THOSE WHO HELP THEMSELVES.

</center>

Bold Tag:-

..... tag makes the content Bold.

Italic Tag:- ....... makes the content Italic.

Underline Tag:- ....... Underlined the text.

Typewriter Tag:- <TT>......</TT> display the text in typewriter font.

Strikethrough Tag:- <Strike>.......</Strike> or <S>........</S> draw a line through the middle of the text.

Superscript Tag:- ...... displays the content in superscript format.

Subscript Tag: - ...... displays the content in subscript format.

Big Tag:- <Big>......</Big> makes the text larger than the surrounding text.

Small Tag:- ....... makes the text smaller in size than the surrounding text.

Example:-

<HTML>

<HEAD>

<TITLE>Chemical & Mathematical Formulae</TITLE>

</HEAD>

<BODY>

Mathematical Formula

(X+Y)2=X2+Y2+2XY

Chemical Formula

CO2

H2O

<BIG> Giving Love is the greatest pleasure of life. </BIG>

God wants to make your life easy.

<Strike>Prayer need not be long to be heard. </Strike>

</CENTER>

</BODY>

</HTML>

Font Tag: - ....... tag allows to set the size, style and color of the text.

Attributes:-

 Face - To change the name of the font. It may be "Arial", "Times New Roman", "Calibri" etc.

 Size - To change the size of the font. It may be a number between 1 and 7.

 Color - To change the color of the text. It may be any color.

BaseFont Tag: - This tag is used to set the size, face and color of the text on whole

document. Its attributes are similar to Tag.

We can change the size by adding or subtracting some value.

This will set font size 4+2=6

This will set font size 4-3=1

Example: -

<HTML>

<HEAD>

<TITLE> Basefont Example</TITLE>

</HEAD>

<BODY>

This Line has Font Size 4

Font Size for this line is 6

Font Size for this line is 1

</BODY>

</HTML>

PRE (Preformatted):- <PRE>........ </PRE> tag is used to type poem, tabular data and so on. It retains the spacing of text in browser as we set in notepad.

<PRE>

GOD HELP THOSE

WHO HELP THEM SELVES.

</PRE>

Comment Tag:- If you want to write notes for yourself in an HTML document, comment tag is used.

Syntax:-

< ! -- Learning HTML is a great fun -->

<COMMENT> Learning HTML is a great fun </COMMENT>

Attributes of Body Element

 Background: - To set an image in the background of a web page. It holds the image path.

 Bgcolor: - To change the background color of a web page. Its value is a color.

 Text: - To set the color of the text in a document. It may be any color.

 Top Margin: - To set the top margin of a web page. It contains a number in pixels.

 Left Margin: - To set the left margin of a web page. It also contains a number in

pixels.

 Bottom Margin, Right Margin can also be set.

 Link: - It defines the color of the unvisited link. The default color of this link is blue.

 Alink: - It changes the color of the active link. The default color of this link is red.

 Vlink: - It defines the color of the visited link. The default color of this link is purple.

Note :- Link, Alink, Vlink attributes will be discussed later in next chapter.

 Tag: - It is an empty tag, used to break a line.

Syntax: -

<HR> Tag:- It is also an empty tag. This tag draws a horizontal line across the page.

Attributes of <HR> Tag-

 Size - Specify the thickness of line.<HR Size=4>

 Width- Specify the length of the line. <HR Width=25%>

 Align- Specify the alignment of the line. Alignment can be left, right, center.

 Noshade- Show a solid line without shade.

 Color- To set the color of the line.

Character entities:-

Some characters are reserved in HTML. To display such characters we use character

entities.

 &LT <

 &GT >

 &AMP &

   Used to insert blank space.

Color Chart:- A browser doesn't understand all the colors with their names. so in

place of the color names their RGB (Red Green Blue) value is mentioned.

Color Name RGB Value Color Name RGB Value

White #FFFFFF Lime #00FF00

Silver #C0C0C0 Green #008000

Gray #808080 Aqua #00FFFF

Black #000000 Teal #008080

Red #FF0000 Blue #0000FF

Maroon #800000 Navy #000080

Yellow #FFFF00 Fuchsia #FF00FF

Olive #808000 Purple #800080

Class 10th Computer Applications 2021-22 Chapter-03 Understanding HTML

3 Comments

Contact Form